From 5ac4a25abdae84587e65d4f2b686d7ca62aa4254 Mon Sep 17 00:00:00 2001 From: Jhonatan Gonzalez Date: Wed, 22 May 2024 13:46:25 +1000 Subject: [PATCH] feat: [Sale Widget] Add config to hide disabled payment types (#1819) --- .../definitions/configurations/sale.ts | 1 + .../src/widgets/sale/SaleWidget.tsx | 3 +++ .../src/widgets/sale/SaleWidgetRoot.tsx | 3 ++- .../sale/context/SaleContextProvider.tsx | 5 +++++ .../src/widgets/sale/views/PaymentMethods.tsx | 4 +++- .../src/components/ui/sale/sale.tsx | 22 ++++++++++--------- 6 files changed, 26 insertions(+), 12 deletions(-) diff --git a/packages/checkout/sdk/src/widgets/definitions/configurations/sale.ts b/packages/checkout/sdk/src/widgets/definitions/configurations/sale.ts index 08e3f0063a..2b98d37823 100644 --- a/packages/checkout/sdk/src/widgets/definitions/configurations/sale.ts +++ b/packages/checkout/sdk/src/widgets/definitions/configurations/sale.ts @@ -5,4 +5,5 @@ import { WidgetConfiguration } from './widget'; */ export type SaleWidgetConfiguration = { waitFulfillmentSettlements?: boolean; + hideExcludedPaymentTypes?: boolean; } & WidgetConfiguration; diff --git a/packages/checkout/widgets-lib/src/widgets/sale/SaleWidget.tsx b/packages/checkout/widgets-lib/src/widgets/sale/SaleWidget.tsx index 7d6980ae93..bd70b5ffd3 100644 --- a/packages/checkout/widgets-lib/src/widgets/sale/SaleWidget.tsx +++ b/packages/checkout/widgets-lib/src/widgets/sale/SaleWidget.tsx @@ -46,6 +46,7 @@ Omit type WidgetParams = RequiredWidgetParams & OptionalWidgetParams & { + hideExcludedPaymentTypes: boolean; waitFulfillmentSettlements: boolean; }; export interface SaleWidgetProps extends WidgetParams { @@ -61,6 +62,7 @@ export default function SaleWidget(props: SaleWidgetProps) { collectionName, excludePaymentTypes, preferredCurrency, + hideExcludedPaymentTypes, waitFulfillmentSettlements = true, } = props; @@ -128,6 +130,7 @@ export default function SaleWidget(props: SaleWidgetProps) { excludePaymentTypes, preferredCurrency, waitFulfillmentSettlements, + hideExcludedPaymentTypes, }} > diff --git a/packages/checkout/widgets-lib/src/widgets/sale/SaleWidgetRoot.tsx b/packages/checkout/widgets-lib/src/widgets/sale/SaleWidgetRoot.tsx index ad73841675..39edcedfd4 100644 --- a/packages/checkout/widgets-lib/src/widgets/sale/SaleWidgetRoot.tsx +++ b/packages/checkout/widgets-lib/src/widgets/sale/SaleWidgetRoot.tsx @@ -124,12 +124,13 @@ export class Sale extends Base { > diff --git a/packages/checkout/widgets-lib/src/widgets/sale/context/SaleContextProvider.tsx b/packages/checkout/widgets-lib/src/widgets/sale/context/SaleContextProvider.tsx index 9186b696d4..b6c648ba8d 100644 --- a/packages/checkout/widgets-lib/src/widgets/sale/context/SaleContextProvider.tsx +++ b/packages/checkout/widgets-lib/src/widgets/sale/context/SaleContextProvider.tsx @@ -46,6 +46,7 @@ type SaleContextProps = { excludePaymentTypes: SalePaymentTypes[]; preferredCurrency?: string; waitFulfillmentSettlements: boolean; + hideExcludedPaymentTypes: boolean; }; type SaleContextValues = SaleContextProps & { @@ -119,6 +120,7 @@ const SaleContext = createContext({ preferredCurrency: undefined, selectedCurrency: undefined, waitFulfillmentSettlements: true, + hideExcludedPaymentTypes: false, }); SaleContext.displayName = 'SaleSaleContext'; @@ -144,6 +146,7 @@ export function SaleContextProvider(props: { excludePaymentTypes, preferredCurrency, waitFulfillmentSettlements, + hideExcludedPaymentTypes, }, } = props; @@ -360,6 +363,7 @@ export function SaleContextProvider(props: { excludePaymentTypes, selectedCurrency, waitFulfillmentSettlements, + hideExcludedPaymentTypes, }), [ config, @@ -390,6 +394,7 @@ export function SaleContextProvider(props: { excludePaymentTypes, selectedCurrency, waitFulfillmentSettlements, + hideExcludedPaymentTypes, ], ); diff --git a/packages/checkout/widgets-lib/src/widgets/sale/views/PaymentMethods.tsx b/packages/checkout/widgets-lib/src/widgets/sale/views/PaymentMethods.tsx index 59504408e5..0f177956d2 100644 --- a/packages/checkout/widgets-lib/src/widgets/sale/views/PaymentMethods.tsx +++ b/packages/checkout/widgets-lib/src/widgets/sale/views/PaymentMethods.tsx @@ -29,8 +29,9 @@ export function PaymentMethods() { goToErrorView, paymentMethod, setPaymentMethod, - disabledPaymentTypes, invalidParameters, + disabledPaymentTypes, + hideExcludedPaymentTypes, } = useSaleContext(); const { sendPageView, sendCloseEvent, sendSelectedPaymentMethod } = useSaleEvent(); @@ -117,6 +118,7 @@ export function PaymentMethods() { diff --git a/packages/checkout/widgets-sample-app/src/components/ui/sale/sale.tsx b/packages/checkout/widgets-sample-app/src/components/ui/sale/sale.tsx index 7b6684ca18..64eceba7c9 100644 --- a/packages/checkout/widgets-sample-app/src/components/ui/sale/sale.tsx +++ b/packages/checkout/widgets-sample-app/src/components/ui/sale/sale.tsx @@ -78,17 +78,19 @@ const useParams = () => { .get("excludePaymentTypes") ?.split(",") as SalePaymentTypes[]; - const multicurrency = urlParams.get("multicurrency") === "true"; - - const preferredCurrency = urlParams.get("preferredCurrency") as string ?? undefined; + const preferredCurrency = + (urlParams.get("preferredCurrency") as string) ?? undefined; + const hideExcludedPaymentTypes = Boolean( + urlParams.get("hideExcludedPaymentTypes") + ); return { login, environmentId, collectionName, excludePaymentTypes, - multicurrency, preferredCurrency, + hideExcludedPaymentTypes, }; }; @@ -127,8 +129,8 @@ export function SaleUI() { environmentId, collectionName, excludePaymentTypes, - multicurrency, preferredCurrency, + hideExcludedPaymentTypes, } = params; const [passportConfig, setPassportConfig] = useState( JSON.stringify(defaultPassportConfig, null, 2) @@ -154,28 +156,28 @@ export function SaleUI() { const saleWidget = useMemo( () => factory.create(WidgetType.SALE, { - config: { theme: WidgetTheme.DARK }, + config: { theme: WidgetTheme.DARK, hideExcludedPaymentTypes }, }), - [factory, environmentId, collectionName, defaultItems] + [factory, environmentId, collectionName, defaultItems] ); const bridgeWidget = useMemo( () => factory.create(WidgetType.BRIDGE, { config: { theme: WidgetTheme.DARK }, }), - [factory, environmentId, collectionName, defaultItems] + [factory, environmentId, collectionName, defaultItems] ); const swapWidget = useMemo( () => factory.create(WidgetType.SWAP, { config: { theme: WidgetTheme.DARK } }), - [factory, environmentId, collectionName, defaultItems] + [factory, environmentId, collectionName, defaultItems] ); const onrampWidget = useMemo( () => factory.create(WidgetType.ONRAMP, { config: { theme: WidgetTheme.DARK }, }), - [factory, environmentId, collectionName, defaultItems] + [factory, environmentId, collectionName, defaultItems] ); // mount sale widget and subscribe to close event