From 2ff1ac5e5ab5d26b9edb5c4da142119298078eff Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Lu=C3=A3=20de=20Souza?= Date: Tue, 21 May 2024 10:32:47 +1000 Subject: [PATCH] feat:[CM-661][Sale Widget] Introduce a base currency override param to Primary Sales (#1800) --- .../sdk/src/widgets/definitions/parameters/sale.ts | 2 ++ .../checkout/widgets-lib/src/widgets/sale/SaleWidget.tsx | 3 +++ .../widgets-lib/src/widgets/sale/SaleWidgetRoot.tsx | 1 + .../src/widgets/sale/context/SaleContextProvider.tsx | 4 ++++ .../widgets-lib/src/widgets/sale/hooks/useQuoteOrder.ts | 9 ++++++++- .../widgets-sample-app/src/components/ui/sale/sale.tsx | 7 ++++++- 6 files changed, 24 insertions(+), 2 deletions(-) diff --git a/packages/checkout/sdk/src/widgets/definitions/parameters/sale.ts b/packages/checkout/sdk/src/widgets/definitions/parameters/sale.ts index 9140bcaf89..d90e504cdb 100644 --- a/packages/checkout/sdk/src/widgets/definitions/parameters/sale.ts +++ b/packages/checkout/sdk/src/widgets/definitions/parameters/sale.ts @@ -24,6 +24,8 @@ export type SaleWidgetParams = { language?: WidgetLanguage; /** The disabled payment types */ excludePaymentTypes?: SalePaymentTypes[]; + /** Preferred currency, replacing the backend's base currency */ + preferredCurrency?: string; }; /** diff --git a/packages/checkout/widgets-lib/src/widgets/sale/SaleWidget.tsx b/packages/checkout/widgets-lib/src/widgets/sale/SaleWidget.tsx index 4f462051b4..7d6980ae93 100644 --- a/packages/checkout/widgets-lib/src/widgets/sale/SaleWidget.tsx +++ b/packages/checkout/widgets-lib/src/widgets/sale/SaleWidget.tsx @@ -60,8 +60,10 @@ export default function SaleWidget(props: SaleWidgetProps) { environmentId, collectionName, excludePaymentTypes, + preferredCurrency, waitFulfillmentSettlements = true, } = props; + const { connectLoaderState } = useContext(ConnectLoaderContext); const { checkout, provider } = connectLoaderState; const chainId = useRef(); @@ -124,6 +126,7 @@ export default function SaleWidget(props: SaleWidgetProps) { passport: checkout?.passport, collectionName, excludePaymentTypes, + preferredCurrency, waitFulfillmentSettlements, }} > diff --git a/packages/checkout/widgets-lib/src/widgets/sale/SaleWidgetRoot.tsx b/packages/checkout/widgets-lib/src/widgets/sale/SaleWidgetRoot.tsx index c8745f0487..ad73841675 100644 --- a/packages/checkout/widgets-lib/src/widgets/sale/SaleWidgetRoot.tsx +++ b/packages/checkout/widgets-lib/src/widgets/sale/SaleWidgetRoot.tsx @@ -128,6 +128,7 @@ export class Sale extends Base { environmentId={this.parameters.environmentId!} collectionName={this.parameters.collectionName!} excludePaymentTypes={this.parameters.excludePaymentTypes!} + preferredCurrency={this.parameters.preferredCurrency!} language="en" waitFulfillmentSettlements={this.properties?.config?.waitFulfillmentSettlements ?? true} /> 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 9377fd82dc..9186b696d4 100644 --- a/packages/checkout/widgets-lib/src/widgets/sale/context/SaleContextProvider.tsx +++ b/packages/checkout/widgets-lib/src/widgets/sale/context/SaleContextProvider.tsx @@ -44,6 +44,7 @@ type SaleContextProps = { checkout: ConnectLoaderState['checkout']; passport?: Passport; excludePaymentTypes: SalePaymentTypes[]; + preferredCurrency?: string; waitFulfillmentSettlements: boolean; }; @@ -115,6 +116,7 @@ const SaleContext = createContext({ orderQuote: defaultOrderQuote, signTokenIds: [], excludePaymentTypes: [], + preferredCurrency: undefined, selectedCurrency: undefined, waitFulfillmentSettlements: true, }); @@ -140,6 +142,7 @@ export function SaleContextProvider(props: { passport, collectionName, excludePaymentTypes, + preferredCurrency, waitFulfillmentSettlements, }, } = props; @@ -182,6 +185,7 @@ export function SaleContextProvider(props: { provider, environmentId, environment: config.environment, + preferredCurrency, }); const fromTokenAddress = selectedCurrency?.address || ''; diff --git a/packages/checkout/widgets-lib/src/widgets/sale/hooks/useQuoteOrder.ts b/packages/checkout/widgets-lib/src/widgets/sale/hooks/useQuoteOrder.ts index efec8a7eea..de07c6fa38 100644 --- a/packages/checkout/widgets-lib/src/widgets/sale/hooks/useQuoteOrder.ts +++ b/packages/checkout/widgets-lib/src/widgets/sale/hooks/useQuoteOrder.ts @@ -12,6 +12,7 @@ type UseQuoteOrderParams = { environmentId: string; environment: Environment; provider: Web3Provider | undefined; + preferredCurrency?: string; }; export const defaultOrderQuote: OrderQuote = { @@ -33,6 +34,7 @@ export const useQuoteOrder = ({ environment, environmentId, provider, + preferredCurrency, }: UseQuoteOrderParams) => { const [selectedCurrency, setSelectedCurrency] = useState< OrderQuoteCurrency | undefined @@ -108,7 +110,12 @@ export const useQuoteOrder = ({ // Set default currency if (orderQuote.currencies.length === 0) return; - const defaultSelectedCurrency = orderQuote.currencies.find((c) => c.base) + const baseCurrencyOverride = preferredCurrency + ? orderQuote.currencies.find((c) => c.name === preferredCurrency) + : undefined; + + const defaultSelectedCurrency = baseCurrencyOverride + || orderQuote.currencies.find((c) => c.base) || orderQuote.currencies?.[0]; setSelectedCurrency(defaultSelectedCurrency); 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 2bf065b7a2..7b6684ca18 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 @@ -80,12 +80,15 @@ const useParams = () => { const multicurrency = urlParams.get("multicurrency") === "true"; + const preferredCurrency = urlParams.get("preferredCurrency") as string ?? undefined; + return { login, environmentId, collectionName, excludePaymentTypes, multicurrency, + preferredCurrency, }; }; @@ -125,6 +128,7 @@ export function SaleUI() { collectionName, excludePaymentTypes, multicurrency, + preferredCurrency, } = params; const [passportConfig, setPassportConfig] = useState( JSON.stringify(defaultPassportConfig, null, 2) @@ -177,11 +181,11 @@ export function SaleUI() { // mount sale widget and subscribe to close event useEffect(() => { saleWidget.mount("sale", { - environmentId, collectionName, items: defaultItems, excludePaymentTypes, + preferredCurrency, }); saleWidget.addListener(SaleEventType.CLOSE_WIDGET, () => { saleWidget.unmount(); @@ -283,6 +287,7 @@ export function SaleUI() { collectionName, items: defaultItems, excludePaymentTypes, + preferredCurrency, }) } >