Skip to content

Commit

Permalink
chore: [IOAPPX-240] Replace legacy FooterWithButtons in the `ShareD…
Browse files Browse the repository at this point in the history
…ataScreen` (#5471)

## Short description
This PR replaces the legacy `FooterWithButtons` in the _Share data_
screen

## List of changes proposed in this pull request
- Replace the legacy `FooterWithButtons` with the new one

### Preview
| Before | After |
|--------|--------|
| ![Simulator Screenshot - iPhone 14 Pro - 2024-01-31 at 15 14
57](https://github.com/pagopa/io-app/assets/1255491/61990b06-ef00-4d40-bb69-6ad037e6d042)
| ![Simulator Screenshot - iPhone 14 Pro - 2024-01-31 at 15 12
28](https://github.com/pagopa/io-app/assets/1255491/9781cfcd-6edf-4f8c-9770-505741e7aa34)
|

## How to test
Go to the **Profile** → **Privacy & Policy** → **Share your data**
  • Loading branch information
dmnplb authored Jan 31, 2024
1 parent 8c13379 commit 6aef833
Showing 1 changed file with 40 additions and 30 deletions.
70 changes: 40 additions & 30 deletions ts/screens/profile/ShareDataScreen.tsx
Original file line number Diff line number Diff line change
@@ -1,21 +1,20 @@
import {
BlockButtonProps,
FooterWithButtons
} from "@pagopa/io-app-design-system";
import * as React from "react";
import { SafeAreaView, View } from "react-native";
import { connect } from "react-redux";
import { Dispatch } from "redux";
import {
cancelButtonProps,
confirmButtonProps
} from "../../components/buttons/ButtonConfigurations";
import { IOToast } from "../../components/Toast";
import { IOStyles } from "../../components/core/variables/IOStyles";
import FooterWithButtons from "../../components/ui/FooterWithButtons";
import { RNavScreenWithLargeHeader } from "../../components/ui/RNavScreenWithLargeHeader";
import I18n from "../../i18n";
import { setMixpanelEnabled } from "../../store/actions/mixpanel";
import { isMixpanelEnabled } from "../../store/reducers/persistedPreferences";
import { GlobalState } from "../../store/reducers/types";
import { getFlowType } from "../../utils/analytics";
import { useOnFirstRender } from "../../utils/hooks/useOnFirstRender";
import { showToast } from "../../utils/showToast";
import { trackMixpanelScreen } from "./analytics";
import {
trackMixpanelDeclined,
Expand All @@ -33,9 +32,8 @@ const ShareDataScreen = (props: Props): React.ReactElement => {
trackMixpanelDeclined(flow);
trackMixpanelSetEnabled(false, flow);
props.setMixpanelEnabled(false);
showToast(
I18n.t("profile.main.privacy.shareData.screen.confirmToast"),
"success"
IOToast.success(
I18n.t("profile.main.privacy.shareData.screen.confirmToast")
);
});
const isMixpanelEnabled = props.isMixpanelEnabled ?? true;
Expand All @@ -44,34 +42,46 @@ const ShareDataScreen = (props: Props): React.ReactElement => {
trackMixpanelScreen(getFlowType(false, false));
});

const buttonProps = isMixpanelEnabled
? cancelButtonProps(
present,
I18n.t("profile.main.privacy.shareData.screen.cta.dontShareData")
)
: confirmButtonProps(
() => {
trackMixpanelSetEnabled(true, getFlowType(false, false));
props.setMixpanelEnabled(true);
showToast(
I18n.t("profile.main.privacy.shareData.screen.confirmToast"),
"success"
);
},
I18n.t("profile.main.privacy.shareData.screen.cta.shareData"),
undefined,
"share-data-confirm-button"
);
const buttonProps: BlockButtonProps = isMixpanelEnabled
? {
type: "Outline",
buttonProps: {
color: "primary",
accessibilityLabel: I18n.t(
"profile.main.privacy.shareData.screen.cta.dontShareData"
),
onPress: present,
label: I18n.t(
"profile.main.privacy.shareData.screen.cta.dontShareData"
)
}
}
: {
type: "Solid",
buttonProps: {
color: "primary",
accessibilityLabel: I18n.t(
"profile.main.privacy.shareData.screen.cta.dontShareData"
),
onPress: () => {
trackMixpanelSetEnabled(true, getFlowType(false, false));
props.setMixpanelEnabled(true);
IOToast.success(
I18n.t("profile.main.privacy.shareData.screen.confirmToast")
);
},
label: I18n.t("profile.main.privacy.shareData.screen.cta.shareData"),
testID: "share-data-confirm-button"
}
};

return (
<RNavScreenWithLargeHeader
title={I18n.t("profile.main.privacy.shareData.screen.title")}
titleTestID={"share-data-component-title"}
description={I18n.t("profile.main.privacy.shareData.screen.description")}
fixedBottomSlot={
<SafeAreaView>
<FooterWithButtons type={"SingleButton"} leftButton={buttonProps} />
</SafeAreaView>
<FooterWithButtons type="SingleButton" primary={buttonProps} />
}
>
<SafeAreaView style={IOStyles.flex}>
Expand Down

0 comments on commit 6aef833

Please sign in to comment.