Skip to content

Commit

Permalink
feat: [Sale Widget] Add config to hide disabled payment types (#1819)
Browse files Browse the repository at this point in the history
  • Loading branch information
jhesgodi authored May 22, 2024
1 parent 208c31b commit 5ac4a25
Show file tree
Hide file tree
Showing 6 changed files with 26 additions and 12 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -5,4 +5,5 @@ import { WidgetConfiguration } from './widget';
*/
export type SaleWidgetConfiguration = {
waitFulfillmentSettlements?: boolean;
hideExcludedPaymentTypes?: boolean;
} & WidgetConfiguration;
3 changes: 3 additions & 0 deletions packages/checkout/widgets-lib/src/widgets/sale/SaleWidget.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,7 @@ Omit<SaleWidgetParams, 'walletProviderName'>

type WidgetParams = RequiredWidgetParams &
OptionalWidgetParams & {
hideExcludedPaymentTypes: boolean;
waitFulfillmentSettlements: boolean;
};
export interface SaleWidgetProps extends WidgetParams {
Expand All @@ -61,6 +62,7 @@ export default function SaleWidget(props: SaleWidgetProps) {
collectionName,
excludePaymentTypes,
preferredCurrency,
hideExcludedPaymentTypes,
waitFulfillmentSettlements = true,
} = props;

Expand Down Expand Up @@ -128,6 +130,7 @@ export default function SaleWidget(props: SaleWidgetProps) {
excludePaymentTypes,
preferredCurrency,
waitFulfillmentSettlements,
hideExcludedPaymentTypes,
}}
>
<CryptoFiatProvider environment={config.environment}>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,7 @@ type SaleContextProps = {
excludePaymentTypes: SalePaymentTypes[];
preferredCurrency?: string;
waitFulfillmentSettlements: boolean;
hideExcludedPaymentTypes: boolean;
};

type SaleContextValues = SaleContextProps & {
Expand Down Expand Up @@ -119,6 +120,7 @@ const SaleContext = createContext<SaleContextValues>({
preferredCurrency: undefined,
selectedCurrency: undefined,
waitFulfillmentSettlements: true,
hideExcludedPaymentTypes: false,
});

SaleContext.displayName = 'SaleSaleContext';
Expand All @@ -144,6 +146,7 @@ export function SaleContextProvider(props: {
excludePaymentTypes,
preferredCurrency,
waitFulfillmentSettlements,
hideExcludedPaymentTypes,
},
} = props;

Expand Down Expand Up @@ -360,6 +363,7 @@ export function SaleContextProvider(props: {
excludePaymentTypes,
selectedCurrency,
waitFulfillmentSettlements,
hideExcludedPaymentTypes,
}),
[
config,
Expand Down Expand Up @@ -390,6 +394,7 @@ export function SaleContextProvider(props: {
excludePaymentTypes,
selectedCurrency,
waitFulfillmentSettlements,
hideExcludedPaymentTypes,
],
);

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -29,8 +29,9 @@ export function PaymentMethods() {
goToErrorView,
paymentMethod,
setPaymentMethod,
disabledPaymentTypes,
invalidParameters,
disabledPaymentTypes,
hideExcludedPaymentTypes,
} = useSaleContext();
const { sendPageView, sendCloseEvent, sendSelectedPaymentMethod } = useSaleEvent();

Expand Down Expand Up @@ -117,6 +118,7 @@ export function PaymentMethods() {
</Heading>
<Box sx={{ paddingX: 'base.spacing.x2' }}>
<PaymentOptions
hideDisabledOptions={hideExcludedPaymentTypes}
disabledOptions={disabledPaymentTypes}
onClick={handleOptionClick}
/>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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,
};
};

Expand Down Expand Up @@ -127,8 +129,8 @@ export function SaleUI() {
environmentId,
collectionName,
excludePaymentTypes,
multicurrency,
preferredCurrency,
hideExcludedPaymentTypes,
} = params;
const [passportConfig, setPassportConfig] = useState(
JSON.stringify(defaultPassportConfig, null, 2)
Expand All @@ -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
Expand Down

0 comments on commit 5ac4a25

Please sign in to comment.