added state for orders priced at 0

packages/checkout/src/views/Checkout/PaymentMethodSelect/OrderSummary/index.tsx

@@ -8,6 +8,7 @@ import { useSelectPaymentModal } from '../../../../hooks/useSelectPaymentModal.j
 
 export const OrderSummary = () => {
   const { selectPaymentSettings } = useSelectPaymentModal()
+  const isFree = Number(selectPaymentSettings!.price) == 0
   const chain = selectPaymentSettings!.chain
   const network = findSupportedNetwork(chain)
   const chainId = network?.chainId || 137
@@ -62,6 +63,30 @@ export const OrderSummary = () => {
   const fiatExchangeRate = dataCoinPrices?.[0].price?.value || 0
   const priceFiat = (fiatExchangeRate * Number(formattedPrice)).toFixed(2)
 
+  const PriceSection = () => {
+    if (isFree) {
+      return (
+        <Text color="text50" variant="xsmall" fontWeight="normal">
+          Free
+        </Text>
+      )
+    }
+
+    return (
+      <>
+        <div className="flex flex-row gap-1 items-center">
+          <TokenImage src={dataCurrencyInfo?.logoURI} size="xs" />
+          <Text color="white" variant="xsmall" fontWeight="normal">
+            {`${displayPrice} ${dataCurrencyInfo?.symbol} on ${network?.title}`}
+          </Text>
+        </div>
+        <Text color="text50" variant="xsmall" fontWeight="normal">
+          {`$${priceFiat} USD`}
+        </Text>
+      </>
+    )
+  }
+
   return (
     <div className="flex flex-col gap-5">
       <div className="flex flex-row gap-1">
@@ -90,15 +115,7 @@ export const OrderSummary = () => {
                 <Text variant="xsmall" color="secondary" fontWeight="normal">
                   {dataCollectionInfo?.name || null}
                 </Text>
-                <div className="flex flex-row gap-1 items-center">
-                  <TokenImage src={dataCurrencyInfo?.logoURI} size="xs" />
-                  <Text color="white" variant="xsmall" fontWeight="normal">
-                    {`${displayPrice} ${dataCurrencyInfo?.symbol} on ${network?.title}`}
-                  </Text>
-                </div>
-                <Text color="text50" variant="xsmall" fontWeight="normal">
-                  {`$${priceFiat} USD`}
-                </Text>
+                <PriceSection />
               </div>
             </div>
           )

packages/checkout/src/views/Checkout/PaymentMethodSelect/PayWithCrypto/index.tsx

@@ -60,6 +60,8 @@ export const PayWithCryptoTab = ({ skipOnCloseCallback }: PayWithCryptoTabProps)
     slippageBps
   } = selectPaymentSettings
 
+  const isFree = Number(price) == 0
+
   const network = findSupportedNetwork(chain)
   const chainId = network?.chainId || 137
 
@@ -533,9 +535,19 @@ export const PayWithCryptoTab = ({ skipOnCloseCallback }: PayWithCryptoTabProps)
     )
   }
 
-  return (
-    <div className="flex flex-col justify-center items-center h-full w-full gap-3">
-      <div className="flex flex-row justify-between items-center w-full">
+  const PriceSection = () => {
+    if (isFree) {
+      return (
+        <div className="flex flex-col mt-2 mb-1 w-full">
+          <Text color="text100" variant="small" fontWeight="bold">
+            This item is free, click Confirm to mint to your wallet
+          </Text>
+        </div>
+      )
+    }
+
+    return (
+      <div className="flex flex-row justify-between items-center w-full gap-2">
         <div className="flex flex-col gap-0">
           <Text
             variant="xsmall"
@@ -566,6 +578,12 @@ export const PayWithCryptoTab = ({ skipOnCloseCallback }: PayWithCryptoTabProps)
           <TokenSelector />
         </div>
       </div>
+    )
+  }
+
+  return (
+    <div className="flex flex-col gap-4">
+      <PriceSection />
 
       <div className="flex flex-col justify-start items-center w-full gap-1">
         {isError && (
@@ -578,7 +596,7 @@ export const PayWithCryptoTab = ({ skipOnCloseCallback }: PayWithCryptoTabProps)
 
         <Button
           disabled={isPurchasing}
-          label="Confirm payment"
+          label={isFree ? 'Confirm' : 'Confirm payment'}
           className="w-full"
           shape="square"
           variant="primary"

packages/checkout/src/views/Checkout/PaymentMethodSelect/index.tsx

@@ -31,9 +31,11 @@ export const PaymentSelectionContent = () => {
   const { selectPaymentSettings = {} as SelectPaymentSettings } = useSelectPaymentModal()
 
   const isFirstRender = useRef<boolean>(true)
-  const { collectibles, creditCardProviders = [], onClose = () => {} } = selectPaymentSettings
+  const { collectibles, creditCardProviders = [], onClose = () => {}, price } = selectPaymentSettings
   const { skipOnCloseCallback } = useSkipOnCloseCallback(onClose)
 
+  const isFree = Number(price) == 0
+
   const validCreditCardProviders = creditCardProviders.filter(provider => {
     if (provider === 'transak') {
       return !!selectPaymentSettings?.transakConfig
@@ -50,7 +52,7 @@ export const PaymentSelectionContent = () => {
 
   const isTokenIdUnknown = collectibles.some(collectible => !collectible.tokenId)
 
-  const showCreditCardPayment = validCreditCardProviders.length > 0 && !isTokenIdUnknown
+  const showCreditCardPayment = validCreditCardProviders.length > 0 && !isTokenIdUnknown && !isFree
 
   const tabs: { label: string; value: Tab }[] = [
     { label: 'Crypto', value: 'crypto' as Tab },

packages/connect/src/styles.ts

@@ -349,6 +349,9 @@ export const styles = String.raw`
   .mb-2 {
     margin-bottom: calc(var(--spacing) * 2);
   }
+  .mb-3 {
+    margin-bottom: calc(var(--spacing) * 3);
+  }
   .mb-4 {
     margin-bottom: calc(var(--spacing) * 4);
   }
@@ -391,6 +394,9 @@ export const styles = String.raw`
   .inline-flex {
     display: inline-flex;
   }
+  .table {
+    display: table;
+  }
   .aspect-square {
     aspect-ratio: 1 / 1;
   }
@@ -499,6 +505,9 @@ export const styles = String.raw`
   .min-h-full {
     min-height: 100%;
   }
+  .w-1 {
+    width: calc(var(--spacing) * 1);
+  }
   .w-1\/2 {
     width: calc(1/2 * 100%);
   }
@@ -607,15 +616,28 @@ export const styles = String.raw`
   .min-w-full {
     min-width: 100%;
   }
+  .flex-shrink {
+    flex-shrink: 1;
+  }
   .shrink-0 {
     flex-shrink: 0;
   }
+  .flex-grow {
+    flex-grow: 1;
+  }
   .grow {
     flex-grow: 1;
   }
+  .border-collapse {
+    border-collapse: collapse;
+  }
   .origin-top {
     transform-origin: top;
   }
+  .-translate-x-1 {
+    --tw-translate-x: calc(var(--spacing) * -1);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
   .-translate-x-1\/2 {
     --tw-translate-x: calc(calc(1/2 * 100%) * -1);
     translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -624,6 +646,10 @@ export const styles = String.raw`
     --tw-translate-x: calc(var(--spacing) * 0);
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
+  .-translate-y-1 {
+    --tw-translate-y: calc(var(--spacing) * -1);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
   .-translate-y-1\/2 {
     --tw-translate-y: calc(calc(1/2 * 100%) * -1);
     translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -1003,6 +1029,9 @@ export const styles = String.raw`
   .pt-0 {
     padding-top: calc(var(--spacing) * 0);
   }
+  .pt-1 {
+    padding-top: calc(var(--spacing) * 1);
+  }
   .pt-1\.5 {
     padding-top: calc(var(--spacing) * 1.5);
   }
@@ -1299,6 +1328,9 @@ export const styles = String.raw`
   .ring-border-normal {
     --tw-ring-color: var(--seq-color-border-normal);
   }
+  .ring-white {
+    --tw-ring-color: var(--color-white);
+  }
   .ring-white\/10 {
     --tw-ring-color: color-mix(in srgb, #fff 10%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -1337,6 +1369,10 @@ export const styles = String.raw`
     -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
     backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
   }
+  .backdrop-filter {
+    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
+    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
+  }
   .transition {
     transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));