From 82cd719bf8be9b3245d8168c09ac65d229842e0d Mon Sep 17 00:00:00 2001 From: Matteo Boschi Date: Wed, 11 Nov 2020 17:29:50 +0100 Subject: [PATCH 1/4] Update ts/features/bonus/bonusVacanze/components/buttons/ButtonConfigurations.ts --- .../bonusVacanze/components/buttons/ButtonConfigurations.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ts/features/bonus/bonusVacanze/components/buttons/ButtonConfigurations.ts b/ts/features/bonus/bonusVacanze/components/buttons/ButtonConfigurations.ts index 03b6be89cd6..ff0a4d706a2 100644 --- a/ts/features/bonus/bonusVacanze/components/buttons/ButtonConfigurations.ts +++ b/ts/features/bonus/bonusVacanze/components/buttons/ButtonConfigurations.ts @@ -38,7 +38,7 @@ export const errorButtonProps = ( title?: string ): BlockButtonProps => ({ alert: true, - title: title ? title : I18n.t("global.buttons.confirm"), + title: title ?? I18n.t("global.buttons.confirm"), onPress }); From cb914fdedc92277807db29a199ad3ccad527b02e Mon Sep 17 00:00:00 2001 From: Matteo Boschi Date: Wed, 11 Nov 2020 17:29:59 +0100 Subject: [PATCH 2/4] Update ts/features/bonus/bpd/screens/details/BpdDetailsScreen.tsx --- ts/features/bonus/bpd/screens/details/BpdDetailsScreen.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/ts/features/bonus/bpd/screens/details/BpdDetailsScreen.tsx b/ts/features/bonus/bpd/screens/details/BpdDetailsScreen.tsx index 73a8dd8b794..85ff0c40ba4 100644 --- a/ts/features/bonus/bpd/screens/details/BpdDetailsScreen.tsx +++ b/ts/features/bonus/bpd/screens/details/BpdDetailsScreen.tsx @@ -59,7 +59,6 @@ const BpdDetailsScreen: React.FunctionComponent = props => { isLoading={loading} loadingCaption={I18n.t("bonus.bpd.unsubscribe.loading")} loadingOpacity={0.95} - onCancel={undefined} > Date: Wed, 11 Nov 2020 17:30:06 +0100 Subject: [PATCH 3/4] Update ts/features/bonus/bpd/store/reducers/details/activation/index.ts --- .../bonus/bpd/store/reducers/details/activation/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ts/features/bonus/bpd/store/reducers/details/activation/index.ts b/ts/features/bonus/bpd/store/reducers/details/activation/index.ts index 020d3c2054e..3c1b8f7f39d 100644 --- a/ts/features/bonus/bpd/store/reducers/details/activation/index.ts +++ b/ts/features/bonus/bpd/store/reducers/details/activation/index.ts @@ -57,7 +57,7 @@ const enabledReducer = ( }; /** - * Keep the stat of "unsubscribe" from bpd outcome + * Keep the state of "unsubscribe" from bpd outcome * @param state * @param action */ From a051b099166c4f65890f23187158404d491a4484 Mon Sep 17 00:00:00 2001 From: fabriziofff Date: Wed, 11 Nov 2020 17:35:21 +0100 Subject: [PATCH 4/4] feat(Bonus Pagamenti Digitali): [#175266668] Unsubscribe from bpd (#2355) * [#175269179] draft essential details * [#175269179] bpd transaction warning * [#175269179] cancellation badge * [#175269179] fix typescript * [#175269179] fix locales * [#175266668] cancel subscription screen * [#175266668] fix ts * [#175266668] handle unsubscription success / failure * [#175266668] clean & comments * [#175266668] change button style as design * Update ts/features/bonus/bpd/components/transactionItem/BpdTransactionItem.tsx Co-authored-by: Matteo Boschi * Update ts/features/bonus/bpd/screens/details/transaction/detail/BpdTransactionDetailComponent.tsx Co-authored-by: Matteo Boschi * Update ts/features/bonus/bpd/screens/details/transaction/detail/BpdTransactionDetailComponent.tsx Co-authored-by: Matteo Boschi * [#175269179] refactoring * Update ts/features/bonus/bonusVacanze/components/buttons/ButtonConfigurations.ts * Update ts/features/bonus/bpd/screens/details/BpdDetailsScreen.tsx * Update ts/features/bonus/bpd/store/reducers/details/activation/index.ts Co-authored-by: Matteo Boschi --- locales/en/index.yml | 10 ++- locales/it/index.yml | 10 ++- .../bottomSheet/BottomSheetContent.tsx | 6 +- ts/components/core/typography/H3.tsx | 2 +- ts/components/core/typography/Label.tsx | 5 +- .../buttons/ButtonConfigurations.ts | 14 ++++ .../bpd/screens/details/BpdDetailsScreen.tsx | 72 +++++++++++++------ .../details/components/UnsubscribeToBpd.tsx | 45 ------------ .../unsubscribe/UnsubscribeComponent.tsx | 46 ++++++++++++ .../unsubscribe/UnsubscribeToBpd.tsx | 67 +++++++++++++++++ .../details/periods/BpdActivePeriod.tsx | 2 +- .../details/periods/BpdInactivePeriod.tsx | 2 +- .../bonus/bpd/store/actions/onboarding.ts | 10 ++- .../reducers/details/activation/index.ts | 38 +++++++++- ts/utils/bottomSheet.ts | 25 +++++++ 15 files changed, 279 insertions(+), 75 deletions(-) delete mode 100644 ts/features/bonus/bpd/screens/details/components/UnsubscribeToBpd.tsx create mode 100644 ts/features/bonus/bpd/screens/details/components/unsubscribe/UnsubscribeComponent.tsx create mode 100644 ts/features/bonus/bpd/screens/details/components/unsubscribe/UnsubscribeToBpd.tsx diff --git a/locales/en/index.yml b/locales/en/index.yml index 86b3f75163f..9c7ff30181e 100644 --- a/locales/en/index.yml +++ b/locales/en/index.yml @@ -1606,7 +1606,15 @@ bonus: bpd: title: Cashback Digital Payments name: Cashback - unsubscribe: "Disable cashback" + unsubscribe: + cta: "Disable cashback" + title: "Cashback deactivation" + body1: "Are you sure you want to cancel your digital payments cashback subscription?" + body2: "If you confirm you will no longer be able to collect transactions or compete for the Super Cashback, and **you will not be able to collect a refund**, if you have been acknowledged. The deactivation of Digital Payments Cashback will have an effect **also in the other channels** that you used to activate it (eg Home Banking, app, etc ..) \ nIf you reactivate the cashback later **you will restart from zero transactions**." + confirmCta: "Cancel subscription" + loading: "We are canceling your subscription" + success: "Your cashback membership has been canceled" + failure: "We were unable to unsubscribe, please try again" earned: Earned Cashback onboarding: loadingActivationStatus: diff --git a/locales/it/index.yml b/locales/it/index.yml index 3942e9ea789..7e8b12e0de2 100644 --- a/locales/it/index.yml +++ b/locales/it/index.yml @@ -1639,7 +1639,15 @@ bonus: title: Cashback Pagamenti Digitali name: Cashback earned: Cashback accumulato - unsubscribe: "Cancella la tua iscrizione al cashback" + unsubscribe: + cta: "Cancella la tua iscrizione al cashback" + title: "Disattivazione cashback" + body1: "Sei sicuro di voler cancellare la tua iscrizione al cashback pagamenti digitali?" + body2: "Se confermi non potrai più raccogliere le transazioni nè concorrere per il Super Cashback, e **non potrai riscuotere un rimborso**, nel caso ti fosse stato riconsociuto. La disattivazione del Cashback Pagamenti Digitali avrà effetto **anche negli altri canali** che hai usato per attivarlo (es esempio Home Banking, app, etc..)\nSe riattivi il cashback in una secondo momento **ripartirai da zero transazioni.**" + confirmCta: "Cancella iscrizione" + loading: "Stiamo cancellando la tua iscrizione" + success: "La tua iscrizione al cashback è stata cancellata" + failure: "Non siamo riusciti a cancellare la tua iscrizione, riprova per favore" onboarding: loadingActivationStatus: title: Verifico lo stato di attivazione diff --git a/ts/components/bottomSheet/BottomSheetContent.tsx b/ts/components/bottomSheet/BottomSheetContent.tsx index 987635b8d41..43de9996acb 100644 --- a/ts/components/bottomSheet/BottomSheetContent.tsx +++ b/ts/components/bottomSheet/BottomSheetContent.tsx @@ -6,17 +6,21 @@ import { IOStyles } from "../core/variables/IOStyles"; type Props = { children: React.ReactNode; + footer?: React.ReactNode; }; /** * Build the base content of a BottomSheet including a SafeArea, content padding and a ScrollView + * TODO: rework to avoid to specify footer when builded */ export const BottomSheetContent: React.FunctionComponent = ({ - children + children, + footer }: Props) => ( {children} + {footer} ); diff --git a/ts/components/core/typography/H3.tsx b/ts/components/core/typography/H3.tsx index 1dd8f59bcdf..5eb209b9158 100644 --- a/ts/components/core/typography/H3.tsx +++ b/ts/components/core/typography/H3.tsx @@ -7,7 +7,7 @@ import { typographyFactory } from "./Factory"; // these colors are allowed only when the weight is SemiBold type AllowedSemiBoldColors = Extract< IOColorType, - "bluegreyDark" | "bluegreyLight" | "white" + "bluegreyDark" | "bluegreyLight" | "white" | "red" >; // when the weight is bold, only the white color is allowed diff --git a/ts/components/core/typography/Label.tsx b/ts/components/core/typography/Label.tsx index d0b48d34bbd..0fd3e9b64ec 100644 --- a/ts/components/core/typography/Label.tsx +++ b/ts/components/core/typography/Label.tsx @@ -4,7 +4,10 @@ import { IOColorType } from "../variables/IOColors"; import { ExternalTypographyProps, TypographyProps } from "./common"; import { typographyFactory } from "./Factory"; -type AllowedColors = Extract; +type AllowedColors = Extract< + IOColorType, + "blue" | "bluegrey" | "white" | "red" +>; type AllowedWeight = Extract; type OwnProps = ExternalTypographyProps< TypographyProps diff --git a/ts/features/bonus/bonusVacanze/components/buttons/ButtonConfigurations.ts b/ts/features/bonus/bonusVacanze/components/buttons/ButtonConfigurations.ts index 1cc6ad44063..ff0a4d706a2 100644 --- a/ts/features/bonus/bonusVacanze/components/buttons/ButtonConfigurations.ts +++ b/ts/features/bonus/bonusVacanze/components/buttons/ButtonConfigurations.ts @@ -28,6 +28,20 @@ export const confirmButtonProps = ( onPress }); +/** + * Style for error props + * @param onPress + * @param title + */ +export const errorButtonProps = ( + onPress: () => void, + title?: string +): BlockButtonProps => ({ + alert: true, + title: title ?? I18n.t("global.buttons.confirm"), + onPress +}); + /** * A common configuration for all the buttons that represent a confirm/active action (disabled) * @param onPress diff --git a/ts/features/bonus/bpd/screens/details/BpdDetailsScreen.tsx b/ts/features/bonus/bpd/screens/details/BpdDetailsScreen.tsx index 6129ccf56a2..85ff0c40ba4 100644 --- a/ts/features/bonus/bpd/screens/details/BpdDetailsScreen.tsx +++ b/ts/features/bonus/bpd/screens/details/BpdDetailsScreen.tsx @@ -1,11 +1,18 @@ +import { useEffect } from "react"; import * as React from "react"; import { StyleSheet, View } from "react-native"; +import { NavigationActions } from "react-navigation"; import { connect } from "react-redux"; import { Dispatch } from "redux"; +import LoadingSpinnerOverlay from "../../../../../components/LoadingSpinnerOverlay"; import DarkLayout from "../../../../../components/screens/DarkLayout"; import I18n from "../../../../../i18n"; import { GlobalState } from "../../../../../store/reducers/types"; +import { showToast } from "../../../../../utils/showToast"; +import { isError, isLoading, isReady } from "../../model/RemoteValue"; import { bpdDetailsLoadAll } from "../../store/actions/details"; +import { bpdUnsubscribeCompleted } from "../../store/actions/onboarding"; +import { bpdUnsubscriptionSelector } from "../../store/reducers/details/activation"; import BpdPeriodSelector from "./BpdPeriodSelector"; import BpdPeriodDetail from "./periods/BpdPeriodDetail"; import GoToTransactions from "./transaction/GoToTransactions"; @@ -35,29 +42,54 @@ const styles = StyleSheet.create({ * The screen that allows the user to see all the details related to the bpd. * @constructor */ -const BpdDetailsScreen: React.FunctionComponent = () => ( - } - gradientHeader={true} - hideHeader={true} - footerContent={} - > - - - - - - -); +const BpdDetailsScreen: React.FunctionComponent = props => { + const loading = isLoading(props.unsubscription); + + useEffect(() => { + if (isError(props.unsubscription)) { + showToast(I18n.t("bonus.bpd.unsubscribe.failure"), "danger"); + } else if (isReady(props.unsubscription)) { + showToast(I18n.t("bonus.bpd.unsubscribe.success"), "success"); + props.completeUnsubscription(); + } + }, [props.unsubscription]); + + return ( + + } + gradientHeader={true} + hideHeader={true} + footerContent={} + > + + + + + + + + ); +}; const mapDispatchToProps = (dispatch: Dispatch) => ({ - load: () => dispatch(bpdDetailsLoadAll()) + load: () => dispatch(bpdDetailsLoadAll()), + completeUnsubscription: () => { + dispatch(bpdUnsubscribeCompleted()); + dispatch(NavigationActions.back()); + } }); -const mapStateToProps = (_: GlobalState) => ({}); +const mapStateToProps = (state: GlobalState) => ({ + unsubscription: bpdUnsubscriptionSelector(state) +}); export default connect(mapStateToProps, mapDispatchToProps)(BpdDetailsScreen); diff --git a/ts/features/bonus/bpd/screens/details/components/UnsubscribeToBpd.tsx b/ts/features/bonus/bpd/screens/details/components/UnsubscribeToBpd.tsx deleted file mode 100644 index e245b117a28..00000000000 --- a/ts/features/bonus/bpd/screens/details/components/UnsubscribeToBpd.tsx +++ /dev/null @@ -1,45 +0,0 @@ -import * as React from "react"; -import { StyleSheet } from "react-native"; -import { NavigationActions } from "react-navigation"; -import { connect } from "react-redux"; -import { Dispatch } from "redux"; -import ButtonDefaultOpacity from "../../../../../../components/ButtonDefaultOpacity"; -import { Label } from "../../../../../../components/core/typography/Label"; -import { GlobalState } from "../../../../../../store/reducers/types"; -import { bpdDeleteUserFromProgram } from "../../../store/actions/onboarding"; -import I18n from "../../../../../../i18n"; - -type Props = ReturnType & - ReturnType; - -const styles = StyleSheet.create({ - button: { - width: "100%" - } -}); - -/** - * Allow the user to unsubscribe from bpd - * TODO: ask confirmation to the user with bottomsheet, handle loading cancel, navigate to wallet with success - * @constructor - */ -const UnsubscribeToBpd: React.FunctionComponent = props => ( - - - -); - -const mapDispatchToProps = (dispatch: Dispatch) => ({ - cancelBpd: () => { - dispatch(bpdDeleteUserFromProgram.request()); - dispatch(NavigationActions.back()); - } -}); - -const mapStateToProps = (_: GlobalState) => ({}); - -export default connect(mapStateToProps, mapDispatchToProps)(UnsubscribeToBpd); diff --git a/ts/features/bonus/bpd/screens/details/components/unsubscribe/UnsubscribeComponent.tsx b/ts/features/bonus/bpd/screens/details/components/unsubscribe/UnsubscribeComponent.tsx new file mode 100644 index 00000000000..66887f27d83 --- /dev/null +++ b/ts/features/bonus/bpd/screens/details/components/unsubscribe/UnsubscribeComponent.tsx @@ -0,0 +1,46 @@ +import { View } from "native-base"; +import * as React from "react"; +import { BottomSheetContent } from "../../../../../../../components/bottomSheet/BottomSheetContent"; +import { H3 } from "../../../../../../../components/core/typography/H3"; +import { IOColors } from "../../../../../../../components/core/variables/IOColors"; +import FooterWithButtons from "../../../../../../../components/ui/FooterWithButtons"; +import IconFont from "../../../../../../../components/ui/IconFont"; +import Markdown from "../../../../../../../components/ui/Markdown"; +import I18n from "../../../../../../../i18n"; +import { + cancelButtonProps, + errorButtonProps +} from "../../../../../bonusVacanze/components/buttons/ButtonConfigurations"; + +type Props = { onCancel: () => void; onConfirm: () => void }; + +const iconSize = 64; + +/** + * Informs the user about the consequences of the cashback unsubscription + * @param props + * @constructor + */ +export const UnsubscribeComponent: React.FunctionComponent = props => ( + + } + > + + + + +

{I18n.t("bonus.bpd.unsubscribe.body1")}

+ + {I18n.t("bonus.bpd.unsubscribe.body2")} + + +); diff --git a/ts/features/bonus/bpd/screens/details/components/unsubscribe/UnsubscribeToBpd.tsx b/ts/features/bonus/bpd/screens/details/components/unsubscribe/UnsubscribeToBpd.tsx new file mode 100644 index 00000000000..37e61e096be --- /dev/null +++ b/ts/features/bonus/bpd/screens/details/components/unsubscribe/UnsubscribeToBpd.tsx @@ -0,0 +1,67 @@ +import { useBottomSheetModal } from "@gorhom/bottom-sheet"; +import * as React from "react"; +import { StyleSheet } from "react-native"; +import { connect } from "react-redux"; +import { Dispatch } from "redux"; +import ButtonDefaultOpacity from "../../../../../../../components/ButtonDefaultOpacity"; +import { Label } from "../../../../../../../components/core/typography/Label"; +import { IOColors } from "../../../../../../../components/core/variables/IOColors"; +import I18n from "../../../../../../../i18n"; +import { GlobalState } from "../../../../../../../store/reducers/types"; +import { bottomSheetRawConfig } from "../../../../../../../utils/bottomSheet"; +import { bpdDeleteUserFromProgram } from "../../../../store/actions/onboarding"; +import { UnsubscribeComponent } from "./UnsubscribeComponent"; + +type Props = ReturnType & + ReturnType; + +const styles = StyleSheet.create({ + button: { + width: "100%", + borderColor: IOColors.red, + borderWidth: 1, + backgroundColor: IOColors.white + } +}); + +/** + * Allow the user to unsubscribe from bpd + * @constructor + */ +const UnsubscribeToBpd: React.FunctionComponent = props => { + const { present, dismiss } = useBottomSheetModal(); + + const openModalBox = () => { + const bottomSheetProps = bottomSheetRawConfig( + { + dismiss(); + props.cancelBpd(); + }} + />, + I18n.t("bonus.bpd.unsubscribe.title"), + 582, + dismiss + ); + present(bottomSheetProps.content, { + ...bottomSheetProps.config + }); + }; + + return ( + + + + ); +}; + +const mapDispatchToProps = (dispatch: Dispatch) => ({ + cancelBpd: () => { + dispatch(bpdDeleteUserFromProgram.request()); + } +}); + +const mapStateToProps = (_: GlobalState) => ({}); + +export default connect(mapStateToProps, mapDispatchToProps)(UnsubscribeToBpd); diff --git a/ts/features/bonus/bpd/screens/details/periods/BpdActivePeriod.tsx b/ts/features/bonus/bpd/screens/details/periods/BpdActivePeriod.tsx index 319ef1e1746..3c2fb04d9de 100644 --- a/ts/features/bonus/bpd/screens/details/periods/BpdActivePeriod.tsx +++ b/ts/features/bonus/bpd/screens/details/periods/BpdActivePeriod.tsx @@ -6,7 +6,7 @@ import { IOStyles } from "../../../../../../components/core/variables/IOStyles"; import { GlobalState } from "../../../../../../store/reducers/types"; import IbanInformationComponent from "../components/iban/IbanInformationComponent"; import BpdSummaryComponent from "../components/summary/BpdSummaryComponent"; -import UnsubscribeToBpd from "../components/UnsubscribeToBpd"; +import UnsubscribeToBpd from "../components/unsubscribe/UnsubscribeToBpd"; import WalletPaymentMethodBpdList from "../components/WalletPaymentMethodBpdList"; export type Props = ReturnType & diff --git a/ts/features/bonus/bpd/screens/details/periods/BpdInactivePeriod.tsx b/ts/features/bonus/bpd/screens/details/periods/BpdInactivePeriod.tsx index 2adcb92a0df..51f544c169b 100644 --- a/ts/features/bonus/bpd/screens/details/periods/BpdInactivePeriod.tsx +++ b/ts/features/bonus/bpd/screens/details/periods/BpdInactivePeriod.tsx @@ -6,7 +6,7 @@ import { IOStyles } from "../../../../../../components/core/variables/IOStyles"; import { GlobalState } from "../../../../../../store/reducers/types"; import IbanInformationComponent from "../components/iban/IbanInformationComponent"; import BpdSummaryComponent from "../components/summary/BpdSummaryComponent"; -import UnsubscribeToBpd from "../components/UnsubscribeToBpd"; +import UnsubscribeToBpd from "../components/unsubscribe/UnsubscribeToBpd"; import WalletPaymentMethodBpdList from "../components/WalletPaymentMethodBpdList"; export type Props = ReturnType & diff --git a/ts/features/bonus/bpd/store/actions/onboarding.ts b/ts/features/bonus/bpd/store/actions/onboarding.ts index 7034ffcadc6..ce601f80ad2 100644 --- a/ts/features/bonus/bpd/store/actions/onboarding.ts +++ b/ts/features/bonus/bpd/store/actions/onboarding.ts @@ -24,6 +24,13 @@ export const bpdDeleteUserFromProgram = createAsyncAction( "BPD_DELETE_FAILURE" )(); +/** + * The user starts the unsubscribe workflow + */ +export const bpdUnsubscribeCompleted = createStandardAction( + "BPD_UNSUBSCRIBE_COMPLETED" +)(); + /** * Start the onboarding workflow */ @@ -66,4 +73,5 @@ export type BpdOnboardingActions = | ActionType | ActionType | ActionType - | ActionType; + | ActionType + | ActionType; diff --git a/ts/features/bonus/bpd/store/reducers/details/activation/index.ts b/ts/features/bonus/bpd/store/reducers/details/activation/index.ts index ff62e5e6755..3c1b8f7f39d 100644 --- a/ts/features/bonus/bpd/store/reducers/details/activation/index.ts +++ b/ts/features/bonus/bpd/store/reducers/details/activation/index.ts @@ -13,7 +13,8 @@ import { import { bpdLoadActivationStatus } from "../../../actions/details"; import { bpdDeleteUserFromProgram, - bpdEnrollUserToProgram + bpdEnrollUserToProgram, + bpdUnsubscribeCompleted } from "../../../actions/onboarding"; import paymentInstrumentReducer, { PayoffInstrumentType @@ -22,6 +23,7 @@ import paymentInstrumentReducer, { export type BpdActivation = { enabled: RemoteValue; payoffInstr: PayoffInstrumentType; + unsubscription: RemoteValue; }; /** @@ -54,9 +56,33 @@ const enabledReducer = ( return state; }; +/** + * Keep the state of "unsubscribe" from bpd outcome + * @param state + * @param action + */ +const unsubscriptionReducer = ( + state: RemoteValue = remoteUndefined, + action: Action +): RemoteValue => { + switch (action.type) { + case getType(bpdDeleteUserFromProgram.request): + return remoteLoading; + case getType(bpdDeleteUserFromProgram.success): + return remoteReady(true); + case getType(bpdDeleteUserFromProgram.failure): + return remoteError(action.payload); + // reset the state when return to wallet + case getType(bpdUnsubscribeCompleted): + return remoteUndefined; + } + return state; +}; + const bpdActivationReducer = combineReducers({ enabled: enabledReducer, - payoffInstr: paymentInstrumentReducer + payoffInstr: paymentInstrumentReducer, + unsubscription: unsubscriptionReducer }); /** @@ -83,4 +109,12 @@ export const bpdIbanSelector = createSelector< iban => iban ); +/** + * Return the unsubscription state, memoized + */ +export const bpdUnsubscriptionSelector = createSelector( + [(state: GlobalState) => state.bonus.bpd.details.activation.unsubscription], + unsubscription => unsubscription +); + export default bpdActivationReducer; diff --git a/ts/utils/bottomSheet.ts b/ts/utils/bottomSheet.ts index b813e0bc995..dffacf7f88e 100644 --- a/ts/utils/bottomSheet.ts +++ b/ts/utils/bottomSheet.ts @@ -18,6 +18,7 @@ export type BottomSheetProps = { * @param title * @param snapPoint * @param onClose + * @param footer TODO: temp param */ export const bottomSheetContent = async ( content: React.ReactNode, @@ -45,3 +46,27 @@ export const bottomSheetContent = async ( } }; }; + +/** + * Direct use of the bottomsheet in order to use a footer + * @param content + * @param title + * @param snapPoint + * @param onClose + */ +export const bottomSheetRawConfig = ( + content: React.ReactNode, + title: string, + snapPoint: number, + onClose: () => void +): BottomSheetProps => ({ + content, + config: { + snapPoints: [snapPoint], + allowTouchThroughOverlay: false, + dismissOnOverlayPress: true, + dismissOnScrollDown: true, + overlayComponent: () => BlurredBackgroundComponent(onClose), + handleComponent: () => BottomSheetHeader({ title, onClose }) + } +});