feat: [Sale Widget] Add config to hide disabled payment types (#1819)

immutable · May 22, 2024 · 5ac4a25 · 5ac4a25
1 parent 208c31b
commit 5ac4a25
Show file tree

Hide file tree

Showing 6 changed files with 26 additions and 12 deletions.
diff --git 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
@@ -46,6 +46,7 @@ Omit<SaleWidgetParams, 'walletProviderName'>
 
 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,
         }}
       >
         <CryptoFiatProvider environment={config.environment}>

diff --git 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<WidgetType.SALE> {
               >
                 <SaleWidget
                   config={config}
+                  language="en"
                   items={this.parameters.items!}
                   environmentId={this.parameters.environmentId!}
                   collectionName={this.parameters.collectionName!}
                   excludePaymentTypes={this.parameters.excludePaymentTypes!}
                   preferredCurrency={this.parameters.preferredCurrency!}
-                  language="en"
+                  hideExcludedPaymentTypes={this.properties?.config?.hideExcludedPaymentTypes ?? false}
                   waitFulfillmentSettlements={this.properties?.config?.waitFulfillmentSettlements ?? true}
                 />
               </Suspense>

diff --git 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<SaleContextValues>({
   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
@@ -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() {
         </Heading>
         <Box sx={{ paddingX: 'base.spacing.x2' }}>
           <PaymentOptions
+            hideDisabledOptions={hideExcludedPaymentTypes}
             disabledOptions={disabledPaymentTypes}
             onClick={handleOptionClick}
           />

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
@@ -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