From f2cde24660aa31c6af8734fab8a97e7e5bb45dae Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Lu=C3=A3=20de=20Souza?= Date: Fri, 30 Aug 2024 09:36:44 +1000 Subject: [PATCH] feat: Adjust confirmation screen on free mints (#2122) --- .../checkout/widgets-lib/src/locales/en.json | 3 +- .../checkout/widgets-lib/src/locales/ja.json | 5 +- .../checkout/widgets-lib/src/locales/ko.json | 3 +- .../checkout/widgets-lib/src/locales/zh.json | 3 +- .../widgets/sale/components/OrderReview.tsx | 4 + .../sale/components/SelectCoinDropdown.tsx | 103 ++++++++++-------- 6 files changed, 70 insertions(+), 51 deletions(-) diff --git a/packages/checkout/widgets-lib/src/locales/en.json b/packages/checkout/widgets-lib/src/locales/en.json index e2030d4a80..87e700e50e 100644 --- a/packages/checkout/widgets-lib/src/locales/en.json +++ b/packages/checkout/widgets-lib/src/locales/en.json @@ -307,8 +307,9 @@ "fee": "Swap fee ~ {{symbol}} {{amount}}" }, "orderReview": { - "heading": "Payment summary", + "heading": "Order summary", "continue": "Proceed", + "continueFreeMint": "Proceed for free", "payWith": { "SWAP": "Swap & Pay with {{symbol}}", "SUFFICIENT": "Pay with {{symbol}}" diff --git a/packages/checkout/widgets-lib/src/locales/ja.json b/packages/checkout/widgets-lib/src/locales/ja.json index e7574189c2..b16a54b271 100644 --- a/packages/checkout/widgets-lib/src/locales/ja.json +++ b/packages/checkout/widgets-lib/src/locales/ja.json @@ -13,7 +13,7 @@ "body1": "資金をImmutable zkEVMにブリッジするには、Layerswapの使用をお勧めします。リファエルをオンにしてIMXを受け取ります。", "body2": "または、ガス無料のImmutable Passportで簡単に支払いとプレイができます。", "buttonText": "それでも進む" - } + } }, "CONNECT_SUCCESS": { "status": "接続が安全です", @@ -313,8 +313,9 @@ "fee": "交換手数料 ~ {{symbol}} {{amount}}" }, "orderReview": { - "heading": "支払いの概要", + "heading": "注文の概要", "continue": "続行", + "continueFreeMint": "無料で続行", "payWith": { "SWAP": "{{symbol}}でスワップ＆支払い", "SUFFICIENT": "{{symbol}}で支払う" diff --git a/packages/checkout/widgets-lib/src/locales/ko.json b/packages/checkout/widgets-lib/src/locales/ko.json index 2ca5791da0..37fdc3b5f5 100644 --- a/packages/checkout/widgets-lib/src/locales/ko.json +++ b/packages/checkout/widgets-lib/src/locales/ko.json @@ -306,8 +306,9 @@ "fee": "교환 수수료 ~ {{symbol}} {{amount}}" }, "orderReview": { - "heading": "결제 요약", + "heading": "주문 요약", "continue": "계속", + "continueFreeMint": "무료로 진행하세요", "payWith": { "SWAP": "{{symbol}}로 스왑 및 결제하기", "SUFFICIENT": "{{symbol}}로 결제" diff --git a/packages/checkout/widgets-lib/src/locales/zh.json b/packages/checkout/widgets-lib/src/locales/zh.json index abcd339ac0..3f067d6e72 100644 --- a/packages/checkout/widgets-lib/src/locales/zh.json +++ b/packages/checkout/widgets-lib/src/locales/zh.json @@ -306,8 +306,9 @@ "fee": "交换费用 ~ {{symbol}} {{amount}}" }, "orderReview": { - "heading": "付款摘要", + "heading": "订单摘要", "continue": "继续", + "continueFreeMint": "免费继续", "payWith": { "SWAP": "使用{{symbol}}进行交换和支付", "SUFFICIENT": "使用{{symbol}}支付" diff --git a/packages/checkout/widgets-lib/src/widgets/sale/components/OrderReview.tsx b/packages/checkout/widgets-lib/src/widgets/sale/components/OrderReview.tsx index e7132d45fb..d49b7cf92a 100644 --- a/packages/checkout/widgets-lib/src/widgets/sale/components/OrderReview.tsx +++ b/packages/checkout/widgets-lib/src/widgets/sale/components/OrderReview.tsx @@ -61,6 +61,7 @@ export function OrderReview({ items, orderQuote, disabledPaymentTypes, + selectedCurrency, config: { theme, environment }, } = useSaleContext(); const { sendSelectedPaymentToken, sendViewFeesEvent, sendPageView } = useSaleEvent(); @@ -74,6 +75,8 @@ export function OrderReview({ formattedFees: [], }); + const isFreeMint = selectedCurrency?.name ? orderQuote.totalAmount[selectedCurrency.name].amount === 0 : false; + const openDrawer = () => { setShowCoinsDrawer(true); }; @@ -237,6 +240,7 @@ export function OrderReview({ onProceed={onProceedToBuy} balance={fundingBalance} conversions={conversions} + isFreeMint={isFreeMint} canOpen={fundingBalances.length > 1} loading={loadingBalances} priceDisplay={items.length > 1} diff --git a/packages/checkout/widgets-lib/src/widgets/sale/components/SelectCoinDropdown.tsx b/packages/checkout/widgets-lib/src/widgets/sale/components/SelectCoinDropdown.tsx index 5fbf31df8a..b7bec46639 100644 --- a/packages/checkout/widgets-lib/src/widgets/sale/components/SelectCoinDropdown.tsx +++ b/packages/checkout/widgets-lib/src/widgets/sale/components/SelectCoinDropdown.tsx @@ -16,6 +16,7 @@ import { useSaleContext } from '../context/SaleContextProvider'; type SelectCoinDropdownProps = { balance: FundingBalance; conversions: Map; + isFreeMint: boolean; canOpen: boolean; onClick: () => void; onProceed: (balance: FundingBalance) => void; @@ -26,6 +27,7 @@ type SelectCoinDropdownProps = { export function SelectCoinDropdown({ balance, conversions, + isFreeMint, canOpen, onClick, onProceed, @@ -54,6 +56,8 @@ export function SelectCoinDropdown({ '', ); + const displayDropdown = !isFreeMint; + return ( - - + + )} + /> + + {t(`views.ORDER_SUMMARY.orderReview.payWith.${balance.type}`, { + symbol: token.symbol, + })} + + + {`${t('views.ORDER_SUMMARY.orderReview.balance', { + amount: prettyFormatNumber( + tokenValueFormat(userBalance.formattedBalance), + ), + })} ${ + balanceFiatAmount + ? t('views.ORDER_SUMMARY.currency.fiat', { + amount: prettyFormatNumber( + tokenValueFormat(balanceFiatAmount), + ), + }) + : '' + }`} + + {priceDisplay && ( + )} - /> - - {t(`views.ORDER_SUMMARY.orderReview.payWith.${balance.type}`, { - symbol: token.symbol, - })} - - - {`${t('views.ORDER_SUMMARY.orderReview.balance', { - amount: prettyFormatNumber( - tokenValueFormat(userBalance.formattedBalance), - ), - })} ${ - balanceFiatAmount - ? t('views.ORDER_SUMMARY.currency.fiat', { - amount: prettyFormatNumber( - tokenValueFormat(balanceFiatAmount), - ), - }) - : '' - }`} - - {priceDisplay && ( - - )} - {canOpen && ( - - )} - {!canOpen && loading && } - + {canOpen && ( + + )} + {!canOpen && loading && } + + )} );