@hanzo/commerce 7.3.2 → 7.3.4

package/components/cart/cart-panel/total-area.tsx

@@ -1,60 +1,60 @@
-'use client'
-import React, { Suspense } from 'react'
-import { observer } from 'mobx-react-lite'
-
-import { cn } from '@hanzo/ui/util'
-
-import { formatCurrencyValue } from '../../../util'
-import PromoCode from './promo-code'
-import { useCommerce } from '../../../service/context'
-
-const TotalArea: React.FC<{
-  showPromoCode?: boolean
-  showShipping?: boolean
-  clx?: string
-}> = observer(({
-  showPromoCode=false,
-  showShipping=false,
-  clx
-}) => {
-
-  const cmmc = useCommerce()
-
-  return (
-    <div className={clx}> 
-    {showPromoCode && (
-      <Suspense>
-        <PromoCode/>
-      </Suspense>
-    )}
-    {(showShipping || showPromoCode) && (
-      <div className={'flex flex-col gap-0.5 pb-1.5 text-sm ' + (!showPromoCode ? 'border-t pt-1.5' : '')} >
-        <p className='flex justify-between'>
-          <span className='text-muted-1'>Subtotal</span>
-          <span className='font-semibold'>{cmmc.cartTotal === 0 ? '0' : formatCurrencyValue(cmmc.cartTotal)}</span>
-        </p>
-        {cmmc.promoAppliedCartTotal !== cmmc.cartTotal && (
-          <p className='flex justify-between'>
-            <span className='text-muted-1'>Promo Discount</span>
-            <span className='font-semibold'>-{formatCurrencyValue(cmmc.cartTotal - cmmc.promoAppliedCartTotal)}</span>
-          </p>
-        )}
-        {showShipping && (
-          <p className='flex justify-between'>
-            <span className='text-muted-1'>Shipping</span>
-            <span className='font-semibold'>Free Global Shipping</span>
-          </p>
-        )}
-      </div>
-    )}
-      <p className={cn('border-t py-2 flex justify-between')}>
-        TOTAL
-        <span className='font-semibold'>
-          {formatCurrencyValue(showPromoCode ? cmmc.promoAppliedCartTotal : cmmc.cartTotal)}
-        </span>
-      </p>
-    </div>
-  )
-})
-
-export default TotalArea
+'use client'
+import React, { Suspense } from 'react'
+import { observer } from 'mobx-react-lite'
+
+import { cn } from '@hanzo/ui/util'
+
+import { formatCurrencyValue } from '../../../util'
+import PromoCode from './promo-code'
+import { useCommerce } from '../../../service/context'
+
+const TotalArea: React.FC<{
+  showPromoCode?: boolean
+  showShipping?: boolean
+  clx?: string
+}> = observer(({
+  showPromoCode=false,
+  showShipping=false,
+  clx
+}) => {
+
+  const cmmc = useCommerce()
+
+  return (
+    <div className={clx}> 
+    {showPromoCode && (
+      <Suspense>
+        <PromoCode/>
+      </Suspense>
+    )}
+    {(showShipping || showPromoCode) && (
+      <div className={'flex flex-col gap-0.5 pb-1.5 text-sm ' + (!showPromoCode ? 'border-t pt-1.5' : '')} >
+        <p className='flex justify-between'>
+          <span className='text-muted-1'>Subtotal</span>
+          <span className='font-semibold'>{cmmc.cartTotal === 0 ? '0' : formatCurrencyValue(cmmc.cartTotal)}</span>
+        </p>
+        {cmmc.promoAppliedCartTotal !== cmmc.cartTotal && (
+          <p className='flex justify-between'>
+            <span className='text-muted-1'>Promo Discount</span>
+            <span className='font-semibold'>-{formatCurrencyValue(cmmc.cartTotal - cmmc.promoAppliedCartTotal)}</span>
+          </p>
+        )}
+        {showShipping && (
+          <p className='flex justify-between'>
+            <span className='text-muted-1'>Shipping</span>
+            <span className='font-semibold'>Free Global Shipping</span>
+          </p>
+        )}
+      </div>
+    )}
+      <p className={cn('border-t py-2 flex justify-between')}>
+        TOTAL
+        <span className='font-semibold'>
+          {formatCurrencyValue(showPromoCode ? cmmc.promoAppliedCartTotal : cmmc.cartTotal)}
+        </span>
+      </p>
+    </div>
+  )
+})
+
+export default TotalArea

package/components/checkout/payment-step-form/card-icon-row.tsx

@@ -1,26 +1,26 @@
-import { LockKeyhole } from 'lucide-react'
-import Amex from './card-icons/amex'
-import Discover from './card-icons/discover'
-import Mastercard from './card-icons/mastercard'
-import Visa from './card-icons/visa'
-import DinersClub from './card-icons/diners-club'
-import Jcb from './card-icons/jcb'
-
-//       <span className='hidden sm:flex text-sm'>Secure payments with</span>
-
-const PaymentMethods: React.FC = () => {
-  return (
-    <div className='flex gap-1 items-center text-muted-1 pb-3'>
-      <LockKeyhole className='w-4 h-4'/>
-      <span className='hidden sm:flex text-sm'>Secure payments with</span>
-      <Amex className='w-9 h-5'/>
-      <Discover className='w-9 h-5'/>
-      <Mastercard className='w-9 h-5'/>
-      <Visa className='w-9 h-5'/>
-      <DinersClub className='w-9 h-5'/>
-      <Jcb className='w-9 h-5'/>
-    </div>
-  )
-}
-
-export default PaymentMethods
+import { LockKeyhole } from 'lucide-react'
+import Amex from './card-icons/amex'
+import Discover from './card-icons/discover'
+import Mastercard from './card-icons/mastercard'
+import Visa from './card-icons/visa'
+import DinersClub from './card-icons/diners-club'
+import Jcb from './card-icons/jcb'
+
+//       <span className='hidden sm:flex text-sm'>Secure payments with</span>
+
+const PaymentMethods: React.FC = () => {
+  return (
+    <div className='flex gap-1 items-center text-muted-1 pb-3'>
+      <LockKeyhole className='w-4 h-4'/>
+      <span className='hidden sm:flex text-sm'>Secure payments with</span>
+      <Amex className='w-9 h-5'/>
+      <Discover className='w-9 h-5'/>
+      <Mastercard className='w-9 h-5'/>
+      <Visa className='w-9 h-5'/>
+      <DinersClub className='w-9 h-5'/>
+      <Jcb className='w-9 h-5'/>
+    </div>
+  )
+}
+
+export default PaymentMethods

package/components/checkout/payment-step-form/card-icons/amex.tsx

@@ -1,32 +1,32 @@
-import React from 'react'
-import { type LucideProps } from 'lucide-react'
-
-const Amex: React.FC<LucideProps> = (props: LucideProps) => (
-	<svg
-    xmlns="http://www.w3.org/2000/svg"
-    role="img"
-    viewBox="0 0 38 24"
-    aria-labelledby="pi-american_express"
-    {...props}
-  >
-    <title id="pi-american_express">American Express</title>
-    <g fill="none">
-      <path
-        fill="#000"
-        d="M35,0 L3,0 C1.3,0 0,1.3 0,3 L0,21 C0,22.7 1.4,24 3,24 L35,24 C36.7,24 38,22.7 38,21 L38,3 C38,1.3 36.6,0 35,0 Z"
-        opacity=".07"
-      />
-      <path
-        fill="#006FCF"
-        d="M35,1 C36.1,1 37,1.9 37,3 L37,21 C37,22.1 36.1,23 35,23 L3,23 C1.9,23 1,22.1 1,21 L1,3 C1,1.9 1.9,1 3,1 L35,1"
-      />
-      <path
-        fill="#FFF"
-        d="M8.971,10.268 L9.745,12.144 L8.203,12.144 L8.971,10.268 Z M25.046,10.346 L22.069,10.346 L22.069,11.173 L24.998,11.173 L24.998,12.412 L22.075,12.412 L22.075,13.334 L25.052,13.334 L25.052,14.073 L27.129,11.828 L25.052,9.488 L25.046,10.346 L25.046,10.346 Z M10.983,8.006 L14.978,8.006 L15.865,9.941 L16.687,8 L27.057,8 L28.135,9.19 L29.25,8 L34.013,8 L30.494,11.852 L33.977,15.68 L29.143,15.68 L28.065,14.49 L26.94,15.68 L10.03,15.68 L9.536,14.49 L8.406,14.49 L7.911,15.68 L4,15.68 L7.286,8 L10.716,8 L10.983,8.006 Z M19.646,9.084 L17.407,9.084 L15.907,12.62 L14.282,9.084 L12.06,9.084 L12.06,13.894 L10,9.084 L8.007,9.084 L5.625,14.596 L7.18,14.596 L7.674,13.406 L10.27,13.406 L10.764,14.596 L13.484,14.596 L13.484,10.661 L15.235,14.602 L16.425,14.602 L18.165,10.673 L18.165,14.603 L19.623,14.603 L19.647,9.083 L19.646,9.084 Z M28.986,11.852 L31.517,9.084 L29.695,9.084 L28.094,10.81 L26.546,9.084 L20.652,9.084 L20.652,14.602 L26.462,14.602 L28.076,12.864 L29.624,14.602 L31.499,14.602 L28.987,11.852 L28.986,11.852 Z"
-      />
-    </g>
-  </svg>
-
-)
-
-export default Amex
+import React from 'react'
+import { type LucideProps } from 'lucide-react'
+
+const Amex: React.FC<LucideProps> = (props: LucideProps) => (
+	<svg
+    xmlns="http://www.w3.org/2000/svg"
+    role="img"
+    viewBox="0 0 38 24"
+    aria-labelledby="pi-american_express"
+    {...props}
+  >
+    <title id="pi-american_express">American Express</title>
+    <g fill="none">
+      <path
+        fill="#000"
+        d="M35,0 L3,0 C1.3,0 0,1.3 0,3 L0,21 C0,22.7 1.4,24 3,24 L35,24 C36.7,24 38,22.7 38,21 L38,3 C38,1.3 36.6,0 35,0 Z"
+        opacity=".07"
+      />
+      <path
+        fill="#006FCF"
+        d="M35,1 C36.1,1 37,1.9 37,3 L37,21 C37,22.1 36.1,23 35,23 L3,23 C1.9,23 1,22.1 1,21 L1,3 C1,1.9 1.9,1 3,1 L35,1"
+      />
+      <path
+        fill="#FFF"
+        d="M8.971,10.268 L9.745,12.144 L8.203,12.144 L8.971,10.268 Z M25.046,10.346 L22.069,10.346 L22.069,11.173 L24.998,11.173 L24.998,12.412 L22.075,12.412 L22.075,13.334 L25.052,13.334 L25.052,14.073 L27.129,11.828 L25.052,9.488 L25.046,10.346 L25.046,10.346 Z M10.983,8.006 L14.978,8.006 L15.865,9.941 L16.687,8 L27.057,8 L28.135,9.19 L29.25,8 L34.013,8 L30.494,11.852 L33.977,15.68 L29.143,15.68 L28.065,14.49 L26.94,15.68 L10.03,15.68 L9.536,14.49 L8.406,14.49 L7.911,15.68 L4,15.68 L7.286,8 L10.716,8 L10.983,8.006 Z M19.646,9.084 L17.407,9.084 L15.907,12.62 L14.282,9.084 L12.06,9.084 L12.06,13.894 L10,9.084 L8.007,9.084 L5.625,14.596 L7.18,14.596 L7.674,13.406 L10.27,13.406 L10.764,14.596 L13.484,14.596 L13.484,10.661 L15.235,14.602 L16.425,14.602 L18.165,10.673 L18.165,14.603 L19.623,14.603 L19.647,9.083 L19.646,9.084 Z M28.986,11.852 L31.517,9.084 L29.695,9.084 L28.094,10.81 L26.546,9.084 L20.652,9.084 L20.652,14.602 L26.462,14.602 L28.076,12.864 L29.624,14.602 L31.499,14.602 L28.987,11.852 L28.986,11.852 Z"
+      />
+    </g>
+  </svg>
+
+)
+
+export default Amex

package/components/checkout/payment-step-form/card-icons/diners-club.tsx

@@ -1,13 +1,13 @@
-import React from 'react'
-import { type LucideProps } from 'lucide-react'
-
-const DinersClub: React.FC<LucideProps> = (props: LucideProps) => (
-  <svg enableBackground="new 0 0 780 500" viewBox="0 0 780 500" xmlns="http://www.w3.org/2000/svg" {...props}>
-    <path d="m40 0h700c22.092 0 40 17.909 40 40v420c0 22.092-17.908 40-40 40h-700c-22.091 0-40-17.908-40-40v-420c0-22.091 17.909-40 40-40z" fill="#0079be"/>
-    <path d="m599.93 251.45c0-99.415-82.98-168.13-173.9-168.1h-78.242c-92.003-.033-167.73 68.705-167.73 168.1 0 90.93 75.727 165.64 167.73 165.2h78.242c90.914.436 173.9-74.294 173.9-165.2z" fill="#fff"/>
-    <path d="m348.28 97.43c-84.07.027-152.19 68.308-152.21 152.58.02 84.258 68.144 152.53 152.21 152.56 84.09-.027 152.23-68.303 152.24-152.56-.011-84.272-68.149-152.55-152.24-152.58z" fill="#0079be"/>
-    <path d="m252.07 249.6c.08-41.181 25.746-76.297 61.94-90.25v180.48c-36.194-13.948-61.861-49.045-61.94-90.23zm131 90.274v-180.53c36.207 13.92 61.914 49.057 61.979 90.257-.065 41.212-25.772 76.322-61.979 90.269z" fill="#fff"/>
-  </svg>
-)
-
-export default DinersClub
+import React from 'react'
+import { type LucideProps } from 'lucide-react'
+
+const DinersClub: React.FC<LucideProps> = (props: LucideProps) => (
+  <svg enableBackground="new 0 0 780 500" viewBox="0 0 780 500" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path d="m40 0h700c22.092 0 40 17.909 40 40v420c0 22.092-17.908 40-40 40h-700c-22.091 0-40-17.908-40-40v-420c0-22.091 17.909-40 40-40z" fill="#0079be"/>
+    <path d="m599.93 251.45c0-99.415-82.98-168.13-173.9-168.1h-78.242c-92.003-.033-167.73 68.705-167.73 168.1 0 90.93 75.727 165.64 167.73 165.2h78.242c90.914.436 173.9-74.294 173.9-165.2z" fill="#fff"/>
+    <path d="m348.28 97.43c-84.07.027-152.19 68.308-152.21 152.58.02 84.258 68.144 152.53 152.21 152.56 84.09-.027 152.23-68.303 152.24-152.56-.011-84.272-68.149-152.55-152.24-152.58z" fill="#0079be"/>
+    <path d="m252.07 249.6c.08-41.181 25.746-76.297 61.94-90.25v180.48c-36.194-13.948-61.861-49.045-61.94-90.23zm131 90.274v-180.53c36.207 13.92 61.914 49.057 61.979 90.257-.065 41.212-25.772 76.322-61.979 90.269z" fill="#fff"/>
+  </svg>
+)
+
+export default DinersClub

package/components/checkout/payment-step-form/card-icons/discover.tsx

@@ -1,25 +1,25 @@
-import React from 'react'
-import { type LucideProps } from 'lucide-react'
-
-const Discover: React.FC<LucideProps> = (props: LucideProps) => (
-	<svg
-    xmlns="http://www.w3.org/2000/svg"
-    role="img"
-    viewBox="0 0 38 24"
-    aria-labelledby="pi-discover"
-    {...props}
-  >
-    <title id="pi-discover">Discover</title>
-    <path
-      d="M35 0H3C1.3 0 0 1.3 0 3v18c0 1.7 1.4 3 3 3h32c1.7 0 3-1.3 3-3V3c0-1.7-1.4-3-3-3z"
-      fill="#000"
-      opacity=".07"
-    />
-    <path d="M35 1c1.1 0 2 .9 2 2v18c0 1.1-.9 2-2 2H3c-1.1 0-2-.9-2-2V3c0-1.1.9-2 2-2h32" fill="#FFF" />
-    <path d="M37 16.95V21c0 1.1-.9 2-2 2H23.228c7.896-1.815 12.043-4.601 13.772-6.05z" fill="#EDA024" />
-    <path fill="#494949" d="M9 11h20v2H9z" />
-    <path d="M22 12c0 1.7-1.3 3-3 3s-3-1.4-3-3 1.4-3 3-3c1.7 0 3 1.3 3 3z" fill="#EDA024" />
-  </svg>
-)
-
-export default Discover
+import React from 'react'
+import { type LucideProps } from 'lucide-react'
+
+const Discover: React.FC<LucideProps> = (props: LucideProps) => (
+	<svg
+    xmlns="http://www.w3.org/2000/svg"
+    role="img"
+    viewBox="0 0 38 24"
+    aria-labelledby="pi-discover"
+    {...props}
+  >
+    <title id="pi-discover">Discover</title>
+    <path
+      d="M35 0H3C1.3 0 0 1.3 0 3v18c0 1.7 1.4 3 3 3h32c1.7 0 3-1.3 3-3V3c0-1.7-1.4-3-3-3z"
+      fill="#000"
+      opacity=".07"
+    />
+    <path d="M35 1c1.1 0 2 .9 2 2v18c0 1.1-.9 2-2 2H3c-1.1 0-2-.9-2-2V3c0-1.1.9-2 2-2h32" fill="#FFF" />
+    <path d="M37 16.95V21c0 1.1-.9 2-2 2H23.228c7.896-1.815 12.043-4.601 13.772-6.05z" fill="#EDA024" />
+    <path fill="#494949" d="M9 11h20v2H9z" />
+    <path d="M22 12c0 1.7-1.3 3-3 3s-3-1.4-3-3 1.4-3 3-3c1.7 0 3 1.3 3 3z" fill="#EDA024" />
+  </svg>
+)
+
+export default Discover

package/components/checkout/payment-step-form/card-icons/jcb.tsx

@@ -1,26 +1,26 @@
-import React from 'react'
-import { type LucideProps } from 'lucide-react'
-
-const Jcb: React.FC<LucideProps> = (props: LucideProps) => (
-  <svg viewBox="0 0 750 471" xmlns="http://www.w3.org/2000/svg" {...props}>
-    <linearGradient id="a" x1=".031608%" x2="99.974315%" y1="49.999857%" y2="49.999857%">
-      <stop offset="0" stopColor="#007b40"/>
-      <stop offset="1" stopColor="#55b330"/>
-    </linearGradient>
-    <linearGradient id="b" x1=".471693%" x2="99.986009%" y1="49.999826%" y2="49.999826%">
-      <stop offset="0" stopColor="#1d2970"/><stop offset="1" stopColor="#006dba"/>
-    </linearGradient>
-    <linearGradient id="c" x1=".113881%" x2="99.986%" y1="50.000896%" y2="50.000896%">
-      <stop offset="0" stopColor="#6e2b2f"/><stop offset="1" stopColor="#e30138"/>
-    </linearGradient>
-    <g fill="none">
-      <rect fill="#0e4c96" height="471" rx="40" width="750"/>
-      <path d="m617.243183 346.766281c0 41.614606-33.728291 75.359693-75.359693 75.359693h-409.126667v-297.881058c0-41.6262334 33.733028-75.3704593 75.36486-75.3704593l409.1215-.0004307-.000431 297.892255z" fill="#fff"/>
-      <path d="m483.858874 242.044797c11.683825.253488 23.437314-.515991 35.07713.400086 11.78724 2.200795 14.627911 20.042991 4.156336 25.887628-7.141594 3.849604-15.632844 1.432185-23.379012 2.113697h-15.854454zm41.832952-32.14431c2.596665 9.164192-6.237923 17.391631-15.065909 16.130079h-26.767043c.184884-8.642125-.367529-18.021593.272179-26.208903 10.723889.301723 21.548523-.615814 32.209341.48019 4.581405 1.149705 8.413541 4.915859 9.351432 9.598634zm64.428586-135.9032616c.49746 17.5012286.071059 35.9264246.213178 53.7829666-.034453 72.596166.072352 145.193982-.054694 217.789111-.468476 27.207289-24.582372 50.844375-51.600147 51.387391-27.045829.111757-54.094452.015934-81.141353.047803v-109.751206c29.469604-.153488 58.958644.307709 88.416125-.231697 13.667199-.858825 28.632506-9.875899 29.269759-24.91422 1.610381-15.101891-12.631152-25.550189-26.152184-27.20169-5.198323-.135142-5.043964-1.514838 0-2.116712 12.891974-2.786489 23.019579-16.133185 19.22569-29.498743-3.236266-14.057855-18.772947-19.498809-31.69642-19.472461-26.351818-.179156-52.709067-.025409-79.06297-.076658.171189-20.488702-.35448-41.000457.285314-61.473746 2.087651-26.7159874 26.805893-48.7478321 53.447049-48.269708 26.283407-.0002868 52.567978.0005741 78.850653-.0004306z" fill="url(#a)"/>
-      <path d="m159.740429 125.040498c.67326-27.1638388 24.88819-50.6114681 51.874368-51.0079582 26.944696-.0825712 53.891407-.0116279 80.836874-.0353144-.074031 90.8852626.148234 181.7764466-.11137 272.6579966-1.038003 26.83358-24.989753 49.833439-51.678945 50.30707-26.996341.098665-53.995081.013782-80.992344.042205v-113.453622c26.222611 6.194616 53.722126 8.831643 80.473394 4.721367 15.992103-2.574874 33.487529-10.424216 38.901855-27.014675 3.985861-14.1913 1.741462-29.125965 2.333766-43.691102v-33.824924h-46.296781c-.20814 22.370604.426012 44.780906-.3351 67.125566-1.248296 13.734107-14.845999 22.459889-27.799718 21.994694-16.066681.168734-47.898878-11.640005-47.898878-11.640005-.080058-41.916996.466764-94.407411.692879-136.181298z" fill="url(#b)"/>
-      <path d="m309.719995 197.390136c-2.434207.517244-.490854-8.300677-1.113697-11.646172.165935-21.150327-.346253-42.323013.28342-63.458137 2.082823-26.8287443 26.991544-48.9157165 53.73903-48.288171h78.765812c-.073902 90.88469.147933 181.775284-.111154 272.656278-1.038994 26.834093-24.992062 49.833168-51.681319 50.308358-26.997482.099699-53.99738.014212-80.995789.042636v-124.297304c18.440112 15.128222 43.49944 17.484624 66.471655 17.52586 17.317057-.006029 34.533908-2.675619 51.35019-6.67055v-22.772637c-18.953485 9.446312-41.233335 15.445518-62.243398 10.017669-14.655694-3.650599-25.293855-17.811283-25.056232-32.935762-1.698503-15.72852 7.524118-32.335319 22.981724-37.011349 19.190686-6.00831 40.10755-1.412401 58.096107 6.39794 3.854182 2.018155 7.764316 4.521547 6.221799-1.920751v-17.899686c-30.084562-7.157407-62.101499-9.791953-92.328705-2.004739-8.748245 2.468155-17.271248 6.211028-24.379443 11.956517z" fill="url(#c)"/>
-    </g>
-  </svg>
-)
-
-export default Jcb
+import React from 'react'
+import { type LucideProps } from 'lucide-react'
+
+const Jcb: React.FC<LucideProps> = (props: LucideProps) => (
+  <svg viewBox="0 0 750 471" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <linearGradient id="a" x1=".031608%" x2="99.974315%" y1="49.999857%" y2="49.999857%">
+      <stop offset="0" stopColor="#007b40"/>
+      <stop offset="1" stopColor="#55b330"/>
+    </linearGradient>
+    <linearGradient id="b" x1=".471693%" x2="99.986009%" y1="49.999826%" y2="49.999826%">
+      <stop offset="0" stopColor="#1d2970"/><stop offset="1" stopColor="#006dba"/>
+    </linearGradient>
+    <linearGradient id="c" x1=".113881%" x2="99.986%" y1="50.000896%" y2="50.000896%">
+      <stop offset="0" stopColor="#6e2b2f"/><stop offset="1" stopColor="#e30138"/>
+    </linearGradient>
+    <g fill="none">
+      <rect fill="#0e4c96" height="471" rx="40" width="750"/>
+      <path d="m617.243183 346.766281c0 41.614606-33.728291 75.359693-75.359693 75.359693h-409.126667v-297.881058c0-41.6262334 33.733028-75.3704593 75.36486-75.3704593l409.1215-.0004307-.000431 297.892255z" fill="#fff"/>
+      <path d="m483.858874 242.044797c11.683825.253488 23.437314-.515991 35.07713.400086 11.78724 2.200795 14.627911 20.042991 4.156336 25.887628-7.141594 3.849604-15.632844 1.432185-23.379012 2.113697h-15.854454zm41.832952-32.14431c2.596665 9.164192-6.237923 17.391631-15.065909 16.130079h-26.767043c.184884-8.642125-.367529-18.021593.272179-26.208903 10.723889.301723 21.548523-.615814 32.209341.48019 4.581405 1.149705 8.413541 4.915859 9.351432 9.598634zm64.428586-135.9032616c.49746 17.5012286.071059 35.9264246.213178 53.7829666-.034453 72.596166.072352 145.193982-.054694 217.789111-.468476 27.207289-24.582372 50.844375-51.600147 51.387391-27.045829.111757-54.094452.015934-81.141353.047803v-109.751206c29.469604-.153488 58.958644.307709 88.416125-.231697 13.667199-.858825 28.632506-9.875899 29.269759-24.91422 1.610381-15.101891-12.631152-25.550189-26.152184-27.20169-5.198323-.135142-5.043964-1.514838 0-2.116712 12.891974-2.786489 23.019579-16.133185 19.22569-29.498743-3.236266-14.057855-18.772947-19.498809-31.69642-19.472461-26.351818-.179156-52.709067-.025409-79.06297-.076658.171189-20.488702-.35448-41.000457.285314-61.473746 2.087651-26.7159874 26.805893-48.7478321 53.447049-48.269708 26.283407-.0002868 52.567978.0005741 78.850653-.0004306z" fill="url(#a)"/>
+      <path d="m159.740429 125.040498c.67326-27.1638388 24.88819-50.6114681 51.874368-51.0079582 26.944696-.0825712 53.891407-.0116279 80.836874-.0353144-.074031 90.8852626.148234 181.7764466-.11137 272.6579966-1.038003 26.83358-24.989753 49.833439-51.678945 50.30707-26.996341.098665-53.995081.013782-80.992344.042205v-113.453622c26.222611 6.194616 53.722126 8.831643 80.473394 4.721367 15.992103-2.574874 33.487529-10.424216 38.901855-27.014675 3.985861-14.1913 1.741462-29.125965 2.333766-43.691102v-33.824924h-46.296781c-.20814 22.370604.426012 44.780906-.3351 67.125566-1.248296 13.734107-14.845999 22.459889-27.799718 21.994694-16.066681.168734-47.898878-11.640005-47.898878-11.640005-.080058-41.916996.466764-94.407411.692879-136.181298z" fill="url(#b)"/>
+      <path d="m309.719995 197.390136c-2.434207.517244-.490854-8.300677-1.113697-11.646172.165935-21.150327-.346253-42.323013.28342-63.458137 2.082823-26.8287443 26.991544-48.9157165 53.73903-48.288171h78.765812c-.073902 90.88469.147933 181.775284-.111154 272.656278-1.038994 26.834093-24.992062 49.833168-51.681319 50.308358-26.997482.099699-53.99738.014212-80.995789.042636v-124.297304c18.440112 15.128222 43.49944 17.484624 66.471655 17.52586 17.317057-.006029 34.533908-2.675619 51.35019-6.67055v-22.772637c-18.953485 9.446312-41.233335 15.445518-62.243398 10.017669-14.655694-3.650599-25.293855-17.811283-25.056232-32.935762-1.698503-15.72852 7.524118-32.335319 22.981724-37.011349 19.190686-6.00831 40.10755-1.412401 58.096107 6.39794 3.854182 2.018155 7.764316 4.521547 6.221799-1.920751v-17.899686c-30.084562-7.157407-62.101499-9.791953-92.328705-2.004739-8.748245 2.468155-17.271248 6.211028-24.379443 11.956517z" fill="url(#c)"/>
+    </g>
+  </svg>
+)
+
+export default Jcb

package/components/checkout/payment-step-form/card-icons/mastercard.tsx

@@ -1,27 +1,27 @@
-import React from 'react'
-import { type LucideProps } from 'lucide-react'
-
-const Mastercard: React.FC<LucideProps> = (props: LucideProps) => (
-	<svg
-    viewBox="0 0 38 24"
-    xmlns="http://www.w3.org/2000/svg"
-    role="img"
-    aria-labelledby="pi-master"
-    {...props}
-  >
-    <title id="pi-master">Mastercard</title>
-    <path
-      opacity=".07"
-      d="M35 0H3C1.3 0 0 1.3 0 3v18c0 1.7 1.4 3 3 3h32c1.7 0 3-1.3 3-3V3c0-1.7-1.4-3-3-3z"
-    />
-    <path fill="#fff" d="M35 1c1.1 0 2 .9 2 2v18c0 1.1-.9 2-2 2H3c-1.1 0-2-.9-2-2V3c0-1.1.9-2 2-2h32" />
-    <circle fill="#EB001B" cx="15" cy="12" r="7" />
-    <circle fill="#F79E1B" cx="23" cy="12" r="7" />
-    <path
-      fill="#FF5F00"
-      d="M22 12c0-2.4-1.2-4.5-3-5.7-1.8 1.3-3 3.4-3 5.7s1.2 4.5 3 5.7c1.8-1.2 3-3.3 3-5.7z"
-    />
-  </svg>
-)
-
-export default Mastercard
+import React from 'react'
+import { type LucideProps } from 'lucide-react'
+
+const Mastercard: React.FC<LucideProps> = (props: LucideProps) => (
+	<svg
+    viewBox="0 0 38 24"
+    xmlns="http://www.w3.org/2000/svg"
+    role="img"
+    aria-labelledby="pi-master"
+    {...props}
+  >
+    <title id="pi-master">Mastercard</title>
+    <path
+      opacity=".07"
+      d="M35 0H3C1.3 0 0 1.3 0 3v18c0 1.7 1.4 3 3 3h32c1.7 0 3-1.3 3-3V3c0-1.7-1.4-3-3-3z"
+    />
+    <path fill="#fff" d="M35 1c1.1 0 2 .9 2 2v18c0 1.1-.9 2-2 2H3c-1.1 0-2-.9-2-2V3c0-1.1.9-2 2-2h32" />
+    <circle fill="#EB001B" cx="15" cy="12" r="7" />
+    <circle fill="#F79E1B" cx="23" cy="12" r="7" />
+    <path
+      fill="#FF5F00"
+      d="M22 12c0-2.4-1.2-4.5-3-5.7-1.8 1.3-3 3.4-3 5.7s1.2 4.5 3 5.7c1.8-1.2 3-3.3 3-5.7z"
+    />
+  </svg>
+)
+
+export default Mastercard

package/components/checkout/payment-step-form/card-icons/visa.tsx

@@ -1,25 +1,25 @@
-import React from 'react'
-import { type LucideProps } from 'lucide-react'
-
-const Visa: React.FC<LucideProps> = (props: LucideProps) => (
-	<svg
-    viewBox="0 0 38 24"
-    xmlns="http://www.w3.org/2000/svg"
-    role="img"
-    aria-labelledby="pi-visa"
-    {...props}
-  >
-    <title id="pi-visa">Visa</title>
-    <path
-      opacity=".07"
-      d="M35 0H3C1.3 0 0 1.3 0 3v18c0 1.7 1.4 3 3 3h32c1.7 0 3-1.3 3-3V3c0-1.7-1.4-3-3-3z"
-    />
-    <path fill="#fff" d="M35 1c1.1 0 2 .9 2 2v18c0 1.1-.9 2-2 2H3c-1.1 0-2-.9-2-2V3c0-1.1.9-2 2-2h32" />
-    <path
-      d="M28.3 10.1H28c-.4 1-.7 1.5-1 3h1.9c-.3-1.5-.3-2.2-.6-3zm2.9 5.9h-1.7c-.1 0-.1 0-.2-.1l-.2-.9-.1-.2h-2.4c-.1 0-.2 0-.2.2l-.3.9c0 .1-.1.1-.1.1h-2.1l.2-.5L27 8.7c0-.5.3-.7.8-.7h1.5c.1 0 .2 0 .2.2l1.4 6.5c.1.4.2.7.2 1.1.1.1.1.1.1.2zm-13.4-.3l.4-1.8c.1 0 .2.1.2.1.7.3 1.4.5 2.1.4.2 0 .5-.1.7-.2.5-.2.5-.7.1-1.1-.2-.2-.5-.3-.8-.5-.4-.2-.8-.4-1.1-.7-1.2-1-.8-2.4-.1-3.1.6-.4.9-.8 1.7-.8 1.2 0 2.5 0 3.1.2h.1c-.1.6-.2 1.1-.4 1.7-.5-.2-1-.4-1.5-.4-.3 0-.6 0-.9.1-.2 0-.3.1-.4.2-.2.2-.2.5 0 .7l.5.4c.4.2.8.4 1.1.6.5.3 1 .8 1.1 1.4.2.9-.1 1.7-.9 2.3-.5.4-.7.6-1.4.6-1.4 0-2.5.1-3.4-.2-.1.2-.1.2-.2.1zm-3.5.3c.1-.7.1-.7.2-1 .5-2.2 1-4.5 1.4-6.7.1-.2.1-.3.3-.3H18c-.2 1.2-.4 2.1-.7 3.2-.3 1.5-.6 3-1 4.5 0 .2-.1.2-.3.2M5 8.2c0-.1.2-.2.3-.2h3.4c.5 0 .9.3 1 .8l.9 4.4c0 .1 0 .1.1.2 0-.1.1-.1.1-.1l2.1-5.1c-.1-.1 0-.2.1-.2h2.1c0 .1 0 .1-.1.2l-3.1 7.3c-.1.2-.1.3-.2.4-.1.1-.3 0-.5 0H9.7c-.1 0-.2 0-.2-.2L7.9 9.5c-.2-.2-.5-.5-.9-.6-.6-.3-1.7-.5-1.9-.5L5 8.2z"
-      fill="#142688"
-    />
-  </svg>
-)
-
-export default Visa
+import React from 'react'
+import { type LucideProps } from 'lucide-react'
+
+const Visa: React.FC<LucideProps> = (props: LucideProps) => (
+	<svg
+    viewBox="0 0 38 24"
+    xmlns="http://www.w3.org/2000/svg"
+    role="img"
+    aria-labelledby="pi-visa"
+    {...props}
+  >
+    <title id="pi-visa">Visa</title>
+    <path
+      opacity=".07"
+      d="M35 0H3C1.3 0 0 1.3 0 3v18c0 1.7 1.4 3 3 3h32c1.7 0 3-1.3 3-3V3c0-1.7-1.4-3-3-3z"
+    />
+    <path fill="#fff" d="M35 1c1.1 0 2 .9 2 2v18c0 1.1-.9 2-2 2H3c-1.1 0-2-.9-2-2V3c0-1.1.9-2 2-2h32" />
+    <path
+      d="M28.3 10.1H28c-.4 1-.7 1.5-1 3h1.9c-.3-1.5-.3-2.2-.6-3zm2.9 5.9h-1.7c-.1 0-.1 0-.2-.1l-.2-.9-.1-.2h-2.4c-.1 0-.2 0-.2.2l-.3.9c0 .1-.1.1-.1.1h-2.1l.2-.5L27 8.7c0-.5.3-.7.8-.7h1.5c.1 0 .2 0 .2.2l1.4 6.5c.1.4.2.7.2 1.1.1.1.1.1.1.2zm-13.4-.3l.4-1.8c.1 0 .2.1.2.1.7.3 1.4.5 2.1.4.2 0 .5-.1.7-.2.5-.2.5-.7.1-1.1-.2-.2-.5-.3-.8-.5-.4-.2-.8-.4-1.1-.7-1.2-1-.8-2.4-.1-3.1.6-.4.9-.8 1.7-.8 1.2 0 2.5 0 3.1.2h.1c-.1.6-.2 1.1-.4 1.7-.5-.2-1-.4-1.5-.4-.3 0-.6 0-.9.1-.2 0-.3.1-.4.2-.2.2-.2.5 0 .7l.5.4c.4.2.8.4 1.1.6.5.3 1 .8 1.1 1.4.2.9-.1 1.7-.9 2.3-.5.4-.7.6-1.4.6-1.4 0-2.5.1-3.4-.2-.1.2-.1.2-.2.1zm-3.5.3c.1-.7.1-.7.2-1 .5-2.2 1-4.5 1.4-6.7.1-.2.1-.3.3-.3H18c-.2 1.2-.4 2.1-.7 3.2-.3 1.5-.6 3-1 4.5 0 .2-.1.2-.3.2M5 8.2c0-.1.2-.2.3-.2h3.4c.5 0 .9.3 1 .8l.9 4.4c0 .1 0 .1.1.2 0-.1.1-.1.1-.1l2.1-5.1c-.1-.1 0-.2.1-.2h2.1c0 .1 0 .1-.1.2l-3.1 7.3c-.1.2-.1.3-.2.4-.1.1-.3 0-.5 0H9.7c-.1 0-.2 0-.2-.2L7.9 9.5c-.2-.2-.5-.5-.9-.6-.6-.3-1.7-.5-1.9-.5L5 8.2z"
+      fill="#142688"
+    />
+  </svg>
+)
+
+export default Visa

package/components/checkout/payment-step-form/cc-button.tsx

@@ -1,17 +1,17 @@
-import { Button } from '@hanzo/ui/primitives'
-
-import PaymentMethods from './card-icon-row'
-import type { PropsWithChildren } from 'react'
-
-const CCButton: React.FC<PropsWithChildren> = ({
-  children
-}) => (
-  <Button variant='outline' size='lg' className='flex items-center' >
-    <div className='font-sans text-base mr-2 text-muted'>CC</div>
-    <PaymentMethods />
-    {children}
-  </Button>
-)
-
-
-export default CCButton
+import { Button } from '@hanzo/ui/primitives'
+
+import PaymentMethods from './card-icon-row'
+import type { PropsWithChildren } from 'react'
+
+const CCButton: React.FC<PropsWithChildren> = ({
+  children
+}) => (
+  <Button variant='outline' size='lg' className='flex items-center' >
+    <div className='font-sans text-base mr-2 text-muted'>CC</div>
+    <PaymentMethods />
+    {children}
+  </Button>
+)
+
+
+export default CCButton

package/components/checkout/payment-step-form/contact-form.tsx

@@ -1,49 +1,49 @@
-import {
-  Form,
-  FormControl,
-  FormField,
-  FormItem,
-  FormMessage,
-  Input
-} from '@hanzo/ui/primitives'
-
-import type { ContactFormType } from '../../../types'
- 
-const ContactForm: React.FC<{
-  form: ContactFormType,
-}> = ({
-  form,
-}) => (
-  <Form {...form}>
-    <form className='text-left'>
-      <div className='flex flex-col gap-1 sm:gap-2'>
-        <FormField
-          control={form.control}
-          name='name'
-          render={({ field }) => (
-            <FormItem className='w-full'>
-              <FormControl>
-                <Input {...field} placeholder='Full name'/>
-              </FormControl>
-              <FormMessage className='py-0 space-y-0 !m-0'/>
-            </FormItem>
-          )}
-        />
-        <FormField
-          control={form.control}
-          name='email'
-          render={({ field }) => (
-            <FormItem className='w-full'>
-              <FormControl>
-                <Input {...field} placeholder='Email'/>
-              </FormControl>
-              <FormMessage className='py-0 space-y-0 !m-0'/>
-            </FormItem>
-          )}
-        />
-      </div>
-    </form>
-  </Form>
-)
-
-export default ContactForm
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormMessage,
+  Input
+} from '@hanzo/ui/primitives'
+
+import type { ContactFormType } from '../../../types'
+ 
+const ContactForm: React.FC<{
+  form: ContactFormType,
+}> = ({
+  form,
+}) => (
+  <Form {...form}>
+    <form className='text-left'>
+      <div className='flex flex-col gap-1 sm:gap-2'>
+        <FormField
+          control={form.control}
+          name='name'
+          render={({ field }) => (
+            <FormItem className='w-full'>
+              <FormControl>
+                <Input {...field} placeholder='Full name'/>
+              </FormControl>
+              <FormMessage className='py-0 space-y-0 !m-0'/>
+            </FormItem>
+          )}
+        />
+        <FormField
+          control={form.control}
+          name='email'
+          render={({ field }) => (
+            <FormItem className='w-full'>
+              <FormControl>
+                <Input {...field} placeholder='Email'/>
+              </FormControl>
+              <FormMessage className='py-0 space-y-0 !m-0'/>
+            </FormItem>
+          )}
+        />
+      </div>
+    </form>
+  </Form>
+)
+
+export default ContactForm