feat: Adjust confirmation screen on free mints (#2122)

immutable · Aug 29, 2024 · f2cde24 · f2cde24
1 parent 661296b
commit f2cde24
Show file tree

Hide file tree

Showing 6 changed files with 70 additions and 51 deletions.
diff --git 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
@@ -13,7 +13,7 @@
         "body1": "資金をImmutable zkEVMにブリッジするには、<layerswapLink>Layerswap</layerswapLink>の使用をお勧めします。リファエルをオンにして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
@@ -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
@@ -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
@@ -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
@@ -16,6 +16,7 @@ import { useSaleContext } from '../context/SaleContextProvider';
 type SelectCoinDropdownProps = {
   balance: FundingBalance;
   conversions: Map<string, number>;
+  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,69 +56,78 @@ export function SelectCoinDropdown({
     '',
   );
 
+  const displayDropdown = !isFreeMint;
+
   return (
     <Stack
       sx={{
         w: '100%',
         bradtl: 'base.borderRadius.x6',
         bradtr: 'base.borderRadius.x6',
         px: 'base.spacing.x4',
+        pt: (displayDropdown ? '0' : 'base.spacing.x6'),
         pb: 'base.spacing.x6',
         bg: 'base.color.neutral.800',
         border: '0px solid transparent',
         borderTopWidth: 'base.border.size.100',
         borderTopColor: 'base.color.translucent.emphasis.400',
       }}
     >
-      <MenuItem size="medium">
-        <MenuItem.FramedImage
-          circularFrame
-          use={(
-            <TokenImage
-              environment={environment}
-              theme={theme}
-              name={token.name}
-              src={token.icon}
+      {displayDropdown && (
+        <MenuItem size="medium">
+          <MenuItem.FramedImage
+            circularFrame
+            use={(
+              <TokenImage
+                environment={environment}
+                theme={theme}
+                name={token.name}
+                src={token.icon}
+              />
+            )}
+          />
+          <MenuItem.Label>
+            {t(`views.ORDER_SUMMARY.orderReview.payWith.${balance.type}`, {
+              symbol: token.symbol,
+            })}
+          </MenuItem.Label>
+          <MenuItem.Caption>
+            {`${t('views.ORDER_SUMMARY.orderReview.balance', {
+              amount: prettyFormatNumber(
+                tokenValueFormat(userBalance.formattedBalance),
+              ),
+            })} ${
+              balanceFiatAmount
+                ? t('views.ORDER_SUMMARY.currency.fiat', {
+                  amount: prettyFormatNumber(
+                    tokenValueFormat(balanceFiatAmount),
+                  ),
+                })
+                : ''
+            }`}
+          </MenuItem.Caption>
+          {priceDisplay && (
+            <MenuItem.PriceDisplay
+              fiatAmount={
+                fiatAmount
+                  ? t('views.ORDER_SUMMARY.currency.fiat', { amount: fiatAmount })
+                  : undefined
+              }
+              price={tokenValueFormat(fundsRequired.formattedAmount)}
             />
           )}
-        />
-        <MenuItem.Label>
-          {t(`views.ORDER_SUMMARY.orderReview.payWith.${balance.type}`, {
-            symbol: token.symbol,
-          })}
-        </MenuItem.Label>
-        <MenuItem.Caption>
-          {`${t('views.ORDER_SUMMARY.orderReview.balance', {
-            amount: prettyFormatNumber(
-              tokenValueFormat(userBalance.formattedBalance),
-            ),
-          })} ${
-            balanceFiatAmount
-              ? t('views.ORDER_SUMMARY.currency.fiat', {
-                amount: prettyFormatNumber(
-                  tokenValueFormat(balanceFiatAmount),
-                ),
-              })
-              : ''
-          }`}
-        </MenuItem.Caption>
-        {priceDisplay && (
-          <MenuItem.PriceDisplay
-            fiatAmount={
-              fiatAmount
-                ? t('views.ORDER_SUMMARY.currency.fiat', { amount: fiatAmount })
-                : undefined
-            }
-            price={tokenValueFormat(fundsRequired.formattedAmount)}
-          />
-        )}
-        {canOpen && (
-          <MenuItem.StatefulButtCon icon="ChevronExpand" onClick={onClick} />
-        )}
-        {!canOpen && loading && <ShimmerCircle radius="base.icon.size.400" />}
-      </MenuItem>
+          {canOpen && (
+            <MenuItem.StatefulButtCon icon="ChevronExpand" onClick={onClick} />
+          )}
+          {!canOpen && loading && <ShimmerCircle radius="base.icon.size.400" />}
+        </MenuItem>
+      )}
       <Button size="large" onClick={() => onProceed(balance)}>
-        {t('views.ORDER_SUMMARY.orderReview.continue')}
+        {isFreeMint ? (
+          t('views.ORDER_SUMMARY.orderReview.continueFreeMint')
+        ) : (
+          t('views.ORDER_SUMMARY.orderReview.continue')
+        )}
       </Button>
     </Stack>
   );