@hanzo/commerce 5.0.0 → 5.1.0

package/components/buy-item/select-category-and-item-widget.tsx

@@ -7,12 +7,12 @@ import { cn } from '@hanzo/ui/util'
 
 import type { FacetValueDesc, FacetsValue, LineItem } from '../../types'
 import { useCommerce } from '../../service/context'
-import { formatPrice } from '../../util'
+import { formatCurrencyValue } from '../../util'
 
 import FacetTogglesWidget from '../facet-values-widget'
 
 const formatItem = (item: LineItem, withQuantity: boolean = false): string => (
-  `${item.titleAsOption}, ${formatPrice(item.price)}${(withQuantity && item.quantity > 0) ? `  (${item.quantity})` : ''}`
+  `${item.titleAsOption}, ${formatCurrencyValue(item.price)}${(withQuantity && item.quantity > 0) ? `  (${item.quantity})` : ''}`
 )
 
 const SelectCategoryAndItemWidget: React.FC<{

package/components/buy-item/select-category-item-card.tsx

@@ -10,7 +10,7 @@ import type { ItemSelector, LineItem } from '../../types'
 import AddToCartWidget from '../add-to-cart-widget'
 import CategoryItemRadioSelector from '../category-item-radio-selector'
 import CategoryItemScrollSelector from '../category-item-scroll-selector'
-import { formatPrice } from '../../util'
+import { formatCurrencyValue } from '../../util'
 
 const SelectCategoryItemCard: React.FC<React.HTMLAttributes<HTMLDivElement> & ItemSelector & {
   isLoading?: boolean
@@ -40,7 +40,7 @@ const SelectCategoryItemCard: React.FC<React.HTMLAttributes<HTMLDivElement> & It
       const item = category.products[0] as LineItem
       return (
         <div className={cn('flex flex-col justify-center items-center ' + (mobilePicker ? 'h-[180px] ' : 'h-auto min-h-24'), className)}>
-          <p className='text-lg text-center font-semibold'>{item.titleAsOption + ', ' + formatPrice(item.price)}</p>
+          <p className='text-lg text-center font-semibold'>{item.titleAsOption + ', ' + formatCurrencyValue(item.price)}</p>
         </div>
       )
     }

package/components/cart-accordian.tsx

@@ -11,7 +11,7 @@ import {
   AccordionTrigger,
 } from '@hanzo/ui/primitives'
 
-import { formatPrice, useCommerce } from '..'
+import { formatCurrencyValue, useCommerce } from '..'
 
 import CartPanel from './cart-panel'
 
@@ -35,7 +35,7 @@ const CartAccordian: React.FC<{
             </h5>
           </div>
           <div className='flex gap-1 items-center'>
-            <h5 className='text-sm sm:text-xl grow truncate'>{formatPrice(cmmc.cartTotal)}</h5>
+            <h5 className='text-sm sm:text-xl grow truncate'>{formatCurrencyValue(cmmc.promoAppliedCartTotal)}</h5>
             <ChevronRight className="h-5 w-5 -mr-2 shrink-0 transition-transform duration-200 group-data-[state=open]:rotate-90" />
           </div>
         </AccordionTrigger>
@@ -46,6 +46,8 @@ const CartAccordian: React.FC<{
             scrollHeightClx='h-[350px]'
             itemClx='mt-2'
             totalClx='sticky px-1 pr-2 border-t -bottom-[1px] bg-background'
+            showShipping
+            showPromoCode
           />
         </AccordionContent>
       </AccordionItem>

package/components/cart-panel/cart-line-item.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React from 'react'
 import Image from 'next/image'
 import { observer } from 'mobx-react-lite'
@@ -5,8 +7,9 @@ import { observer } from 'mobx-react-lite'
 import { cn } from '@hanzo/ui/util'
 
 import type { LineItem } from '../../types'
-import { formatPrice } from '../../util'
+import { formatCurrencyValue } from '../../util'
 import AddToCartWidget from '../add-to-cart-widget'
+import { useCommerce } from '../..'
 
 const DEF_IMG_SIZE=40
 
@@ -22,30 +25,39 @@ const CartLineItem: React.FC<{
   item: LineItem
   className?: string
   imgSizePx?: number
-}> = observer(({ 
+  showPromoCode?: boolean
+}> = observer(({
   item,
   className='',
-  imgSizePx=DEF_IMG_SIZE 
-}) => (
-  <div className={cn('flex flex-col justify-start items-start text-sm font-sans', className)}>
-    <div className='flex flex-row justify-between items-center gap-2'>
-    {!!item.img ? (
-      <Image src={item.img} alt={item.title + ' image'} height={imgSizePx} width={imgSizePx} className=''/>
-    ) : ( // placeholder so things align
-      <div style={{height: imgSizePx, width: imgSizePx}}/ >
-    )}
-      <div className='grow leading-tight'>{renderTitle(item.title)}</div>
-    </div>
-    <div className='flex flex-row items-center justify-between w-full'>
-      <div className='flex flex-row items-center'>
-        <AddToCartWidget className='' item={item} size='xs' buttonClx='h-8 md:h-6' ghost/>
-        {item.quantity > 1 && (<span className='pl-2.5'>{'@' + formatPrice(item.price)}</span>)}
+  imgSizePx=DEF_IMG_SIZE,
+  showPromoCode
+}) => {
+
+  const cmmc = useCommerce()
+  const promoPrice = showPromoCode ? cmmc.itemPromoPrice(item) : undefined
+  
+  return (
+    <div className={cn('flex flex-col justify-start items-start text-sm font-sans', className)}>
+      <div className='flex flex-row justify-between items-center gap-2'>
+      {!!item.img ? (
+        <Image src={item.img} alt={item.title + ' image'} height={imgSizePx} width={imgSizePx} className=''/>
+      ) : ( // placeholder so things align
+        <div style={{height: imgSizePx, width: imgSizePx}}/>
+      )}
+        <div className='grow leading-tight'>{renderTitle(item.title)}</div>
       </div>
-      <div className='flex flex-row items-center justify-end'>
-        {formatPrice(item.price * item.quantity)}
+      <div className='flex flex-row items-center justify-between w-full'>
+        <div className='flex flex-row items-center'>
+          <AddToCartWidget className='' item={item} size='xs' buttonClx='h-8 md:h-6' ghost/>
+          {item.quantity > 1 && (<span className='pl-2.5'>{'@' + formatCurrencyValue(item.price)}</span>)}
+        </div>
+        <div className='flex flex-row gap-1 items-center justify-end'>
+          <span className={promoPrice ? 'line-through	text-muted-2' : ''}>{formatCurrencyValue(item.price * item.quantity)}</span>
+          {promoPrice && <span>{formatCurrencyValue(promoPrice * item.quantity)}</span>}
+        </div>
       </div>
     </div>
-  </div>
-))
+  )
+})
 
 export default CartLineItem

package/components/cart-panel/index.tsx

@@ -6,10 +6,11 @@ import { Button, ScrollArea } from '@hanzo/ui/primitives'
 import { cn } from '@hanzo/ui/util'
 
 import { useCommerce } from '../../service/context'
-import { formatPrice } from '../../util'
+import { formatCurrencyValue } from '../../util'
 import { sendFBEvent, sendGAEvent } from '../../util/analytics'
 
 import CartLineItem from './cart-line-item'
+import PromoCode from './promo-code'
 
 const CartPanel: React.FC<PropsWithChildren & {
     /** fix size and scroll after 'scrollAfter items in teh cart. */
@@ -22,6 +23,8 @@ const CartPanel: React.FC<PropsWithChildren & {
   noItemsClx?: string
   totalClx?: string
   buttonClx?: string
+  showPromoCode?: boolean
+  showShipping?: boolean
     /** if not provided, 'checkout' button will be rendered */
   handleCheckout?: () => void
 }> = observer(({
@@ -36,6 +39,8 @@ const CartPanel: React.FC<PropsWithChildren & {
   noItemsClx='',
   totalClx='',
   buttonClx='',
+  showPromoCode=false,
+  showShipping=false,
   handleCheckout,
 }) => {
 
@@ -69,19 +74,46 @@ const CartPanel: React.FC<PropsWithChildren & {
     handleCheckout && handleCheckout()
   }
 
-  const Main: React.FC = () => (<>
+  const Main: React.FC = observer(() => (<>
     {cmmc.cartEmpty ? (
       <p className={cn('text-center mt-4', noItemsClx)}>No items in cart</p>
     ) : (<>
     {cmmc.cartItems.map((item) => (
-      <CartLineItem imgSizePx={imgSizePx} item={item} key={`mobile-${item.sku}`} className={cn('mb-2', itemClx)}/>
+      <CartLineItem
+        key={`mobile-${item.sku}`}
+        imgSizePx={imgSizePx}
+        item={item}
+        className={cn('mb-2', itemClx)}
+        showPromoCode={showPromoCode}
+      />
     ))}
     </>)}
-    <p className={cn('mt-6 text-right border-t pt-1', totalClx)}>
-      <span>TOTAL:&nbsp;</span>
-      <span className='font-semibold'>{cmmc.cartTotal === 0 ? '0' : formatPrice(cmmc.cartTotal)}</span>
+    {showPromoCode && <PromoCode/>}
+    {(showShipping || showPromoCode) && (
+      <div className='flex flex-col gap-1 py-2 border-t'>
+        <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', totalClx)}>
+      TOTAL
+      <span className='font-semibold'>{formatCurrencyValue(showPromoCode ? cmmc.promoAppliedCartTotal : cmmc.cartTotal)}</span>
     </p>
-  </>)
+  </>))
 
   const scrolling = (): boolean => (cmmc.cartItems.length > scrollAfter)
 

package/components/cart-panel/promo-code.tsx

@@ -0,0 +1,98 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { useSearchParams } from 'next/navigation'
+import { useForm } from 'react-hook-form'
+import * as z from 'zod'
+import { zodResolver } from '@hookform/resolvers/zod'
+import { Check } from 'lucide-react'
+import { observer } from 'mobx-react-lite'
+
+import { Button, Form, FormControl, FormField, FormItem, Input } from '@hanzo/ui/primitives'
+
+import { useCommerce } from '../..'
+import type { Promo } from '../../types'
+import getPromoFromApi from '../../util/promo-codes'
+
+const formSchema = z.object({
+  code: z.string().min(1, 'Invalid code'),
+})
+
+const PromoCode = observer(() => {
+  const cmmc = useCommerce()
+  const searchParams = useSearchParams()
+
+  const [codeAccepted, setCodeAccepted] = useState<boolean>(false)
+
+  useEffect(() => {
+    const code = searchParams.get('code')
+    if (code) {
+      getPromoFromApi(code).then((promo?: Promo) => {
+        if (promo) {
+          form.setValue('code', code)
+          setCodeAccepted(true)
+          cmmc.setAppliedPromo(promo)
+        }
+      })
+    }
+  }, [searchParams])
+
+  useEffect(() => {
+    if (cmmc.appliedPromo) {
+      form.setValue('code', cmmc.appliedPromo.code)
+      setCodeAccepted(true)
+    }
+  }, [cmmc.appliedPromo])
+
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      code: '',
+    },
+  })
+
+  const applyPromoCode = async (values: z.infer<typeof formSchema>) => {
+    const { code } = values
+    const promo = await getPromoFromApi(code)
+    if (!promo) {
+      form.setError('code', { message: 'Invalid code' })
+      return
+    }
+    setCodeAccepted(true)
+    cmmc.setAppliedPromo(promo)
+  }
+
+  const removePromoCode = () => {
+    cmmc.setAppliedPromo(null)
+    setCodeAccepted(false)
+  }
+
+  return (
+    <div className='flex flex-col gap-2 border-t py-2'>
+      <Form {...form}>
+        <form onSubmit={form.handleSubmit(applyPromoCode)}>
+          <div className='flex gap-2 items-center'>
+            <FormField
+              control={form.control}
+              name='code'
+              render={({ field }) => (
+                <FormItem className='w-full'>
+                  <FormControl>
+                    <Input {...field} placeholder='Discount or invite code' onInput={removePromoCode}/>
+                  </FormControl>
+                </FormItem>
+              )}
+            />
+            {codeAccepted ? (
+              <Check/>
+            ) : (
+              <Button variant='outline' className='!w-fit !min-w-0 font-inter'>Apply</Button>
+            )}
+          </div>
+        </form>
+      </Form>
+    </div>
+  )
+})
+
+export default PromoCode

package/components/category-item-radio-selector.tsx

@@ -4,7 +4,7 @@ import { observer } from 'mobx-react-lite'
 
 import { Label, RadioGroup, RadioGroupItem } from '@hanzo/ui/primitives'
 import type { ItemSelector, LineItem, Product } from '../types'
-import { formatPrice } from '../util'
+import { formatCurrencyValue } from '../util'
 import { cn } from '@hanzo/ui/util'
 
 const CategoryItemRadioSelector: React.FC<ItemSelector & {
@@ -29,7 +29,7 @@ const CategoryItemRadioSelector: React.FC<ItemSelector & {
   }) => (
     <div className={cn(className, itemClx)}>
       <RadioGroupItem value={item.sku} id={item.sku} />
-      <Label htmlFor={item.sku}>{item.titleAsOption + (showPrice ? (', ' + formatPrice(item.price)) : '')}</Label>
+      <Label htmlFor={item.sku}>{item.titleAsOption + (showPrice ? (', ' + formatCurrencyValue(item.price)) : '')}</Label>
     </div>
   )
 

package/components/category-item-scroll-selector.tsx

@@ -6,7 +6,7 @@ import { cn } from '@hanzo/ui/util'
 import { ScrollArea } from '@hanzo/ui/primitives'
 
 import type { ItemSelector } from '../types'
-import { formatPrice } from '../util'
+import { formatCurrencyValue } from '../util'
 
 
 const CategoryItemScrollSelector: React.FC<ItemSelector & {
@@ -29,7 +29,7 @@ const CategoryItemScrollSelector: React.FC<ItemSelector & {
             (iRef.item?.sku === prod.sku) ? 'font-semibold text-accent' : 'text-muted', 
             itemClx
           )}>
-            {prod.titleAsOption + ', ' + formatPrice(prod.price)}
+            {prod.titleAsOption + ', ' + formatCurrencyValue(prod.price)}
           </div>
         </div>
       ))}

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

@@ -10,8 +10,9 @@ import Jcb from './card-icons/jcb'
 
 const PaymentMethods: React.FC = () => {
   return (
-    <div className='flex gap-1 items-center text-muted-1'>
+    <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'/>

package/components/payment-step-form/index.tsx

@@ -60,7 +60,7 @@ const PaymentStepForm: React.FC<CheckoutStepComponentProps> = observer(({
           price: item.price,
           quantity: item.quantity
         })),
-        value: cmmc.cartTotal,
+        value: cmmc.promoAppliedCartTotal,
         currency: 'USD',
         payment_type: paymentInfo.paymentMethod ?? ''
       })
@@ -69,7 +69,7 @@ const PaymentStepForm: React.FC<CheckoutStepComponentProps> = observer(({
           id: item.sku,
           quantity: item.quantity
         })),
-        value: cmmc.cartTotal,
+        value: cmmc.promoAppliedCartTotal,
         currency: 'USD'
       })
       await cmmc.updateOrderPaymentInfo(id, paymentInfo)

package/components/payment-step-form/methods/bank-transfer.tsx

@@ -3,14 +3,7 @@
 import React from 'react'
 import { Copy } from 'lucide-react'
 
-import { 
-  Button, 
-  Tabs, 
-  TabsContent, 
-  TabsList, 
-  TabsTrigger, 
-  toast 
-} from '@hanzo/ui/primitives'
+import { Button, toast } from '@hanzo/ui/primitives'
 
 import type { PaymentMethodComponentProps } from '../../../types'
 
@@ -57,51 +50,27 @@ const PayWithBankTransfer: React.FC<PaymentMethodComponentProps> = ({
     })()
   }
 
-  const groupClx = 'border-2 bg-background border-level-2 md:bg-level-1 md:border-level-3 p-0 h-auto overflow-hidden rounded-md'
-  const tabClx = 'text-muted data-[state=active]:text-accent data-[state=active]:bg-level-2 md:data-[state=active]:bg-level-3'
-
   return (
     <div className='flex flex-col gap-2 mt-6'>
       <ContactForm form={contactForm}/>
-      <Tabs defaultValue="usd" className='w-full mx-auto max-w-[50rem]'>
-        <TabsList className={"grid w-full grid-cols-2 max-w-[15rem] mx-auto " + groupClx}>
-          <TabsTrigger className={tabClx} value="usd">USD</TabsTrigger>
-          <TabsTrigger className={tabClx} value="eur">EUR/GBP</TabsTrigger>
-        </TabsList>
-        <TabsContent value="usd">
-          <div className='flex flex-col gap-4 w-full'>
-            <InfoField
-              label='Beneficiary Bank'
-              value={<div>Bank of America<br/>NA 222 Broadway<br/>New York, New York. 10038</div>}
-              copyValue='Bank of America, NA 222 Broadway, New York, New York. 10038'
-            />
-            <InfoField
-              label='Beneficiary'
-              value={<div>Hanzo, Inc<br/>4811 Mastin Street<br/>Merriam, KS 66203</div>}
-              copyValue='Hanzo, Inc, 4811 Mastin Street, Merriam, KS 66203'
-            />
-            <InfoField label='Routing Number - ACH' value='113000023 / 111000025' copyValue='113000023 / 111000025'/>
-            <InfoField label='Routing Number - Wire' value='026009593' copyValue='026009593'/>
-            <InfoField label='Routing Number - SWIFT' value='BOFAUS3N' copyValue='BOFAUS3N'/>
-            <InfoField label='Reference' value='Lux' copyValue='Lux'/>
-          </div>
-        </TabsContent>
-        <TabsContent value="eur">
-          <div className='flex flex-col gap-4 w-full'>
-            <InfoField
-              label='Beneficiary Bank'
-              value={<div>Clear Junction Limited<br/>4th floor<br/>Imperial House</div>}
-              copyValue='Clear Junction Limited, 4th floor, Imperial House'
-            />
-            <InfoField label='Account Number (GBP)' value='33781813' copyValue='33781813'/>
-            <InfoField label='Account Name' value='AiDLT Global Ltd.' copyValue='AiDLT Global Ltd.'/>
-            <InfoField label='SWIFT/BIC' value='CLJUGB21' copyValue='CLJUGB21'/>
-            <InfoField label='Sort Code (GBP)' value='041307' copyValue='041307'/>
-            <InfoField label='IBAN' value='GB75 CLJU 0413 0733 78181 3' copyValue='GB75 CLJU 0413 0733 78181 3'/>
-            <InfoField label='Reference' value='Lux' copyValue='Lux'/>
-          </div>
-        </TabsContent>
-      </Tabs>
+      <div className='w-full mx-auto max-w-[50rem]'>
+        <div className='flex flex-col gap-4 w-full'>
+          <InfoField
+            label='Beneficiary Bank'
+            value={<div>Bank of America<br/>NA 222 Broadway<br/>New York, New York. 10038</div>}
+            copyValue='Bank of America, NA 222 Broadway, New York, New York. 10038'
+          />
+          <InfoField
+            label='Beneficiary'
+            value={<div>Hanzo, Inc<br/>4811 Mastin Street<br/>Merriam, KS 66203</div>}
+            copyValue='Hanzo, Inc, 4811 Mastin Street, Merriam, KS 66203'
+          />
+          <InfoField label='Routing Number - ACH' value='113000023 / 111000025' copyValue='113000023 / 111000025'/>
+          <InfoField label='Routing Number - Wire' value='026009593' copyValue='026009593'/>
+          <InfoField label='Routing Number - SWIFT' value='BOFAUS3N' copyValue='BOFAUS3N'/>
+          <InfoField label='Reference' value='Lux' copyValue='Lux'/>
+        </div>
+      </div>
       <Button onClick={payByBankTransfer} className='mx-auto w-full mt-4'>Continue</Button>
     </div>
   )

package/components/payment-step-form/methods/card.tsx

@@ -1,11 +1,11 @@
 'use client'
-import React from 'react'
+import React, { useEffect, useState } from 'react'
 
-import type { UseFormReturn } from 'react-hook-form'
 // @ts-ignore
 import { ApplePay, GooglePay, CreditCard, PaymentForm } from 'react-square-web-payments-sdk'
 
 import { ChevronRight } from 'lucide-react'
+import { observer } from 'mobx-react-lite'
 
 import {
   Accordion,
@@ -14,6 +14,7 @@ import {
   AccordionTrigger,
   ApplyTypography, 
   Button, 
+  Skeleton, 
   buttonVariants
 } from '@hanzo/ui/primitives'
 
@@ -27,7 +28,7 @@ import { sendFBEvent, sendGAEvent } from '../../../util/analytics'
 import ContactInfo from '../contact-form'
 import PaymentMethods from '../card-icon-row'
 
-const PayWithCard: React.FC<PaymentMethodComponentProps> = ({
+const PayWithCard: React.FC<PaymentMethodComponentProps> = observer(({
   onDone,
   transactionStatus,
   setTransactionStatus,
@@ -42,9 +43,8 @@ const PayWithCard: React.FC<PaymentMethodComponentProps> = ({
   ) => {
     contactForm.handleSubmit(async () => {
       setTransactionStatus('paid')
-      const res = await processSquareCardPayment(token.token, cmmc.cartTotal, verifiedBuyer.token)
+      const res = await processSquareCardPayment(token.token, cmmc.promoAppliedCartTotal, verifiedBuyer.token)
       if (res) {
-        console.log(token)
         await storePaymentInfo({paymentMethod: token.details.method ?? null, processed: res})
         setTransactionStatus('confirmed')
         sendGAEvent('purchase', {
@@ -66,7 +66,7 @@ const PayWithCard: React.FC<PaymentMethodComponentProps> = ({
             quantity: item.quantity
           })),
           num_items: cmmc.cartItems.length,
-          value: cmmc.cartTotal,
+          value: cmmc.promoAppliedCartTotal,
           currency: 'USD',
         })
       } else {
@@ -78,7 +78,7 @@ const PayWithCard: React.FC<PaymentMethodComponentProps> = ({
   const createVerificationDetails = () => {
     const {name, email} = contactForm.getValues()
     return {
-      amount: cmmc.cartTotal.toFixed(2),
+      amount: cmmc.promoAppliedCartTotal.toFixed(2),
       billingContact: {
         givenName: name,
         email,
@@ -88,7 +88,7 @@ const PayWithCard: React.FC<PaymentMethodComponentProps> = ({
     }
   }
 
-  const createPaymentRequest= () => ({
+  const createPaymentRequest = () => ({
     countryCode: "US",
     currencyCode: "USD",
     lineItems: cmmc.cartItems.map(item => ({
@@ -99,11 +99,31 @@ const PayWithCard: React.FC<PaymentMethodComponentProps> = ({
     requestBillingContact: false,
     requestShippingContact: false,
     total: {
-      amount: cmmc.cartTotal.toFixed(2),
+      amount: cmmc.promoAppliedCartTotal.toFixed(2),
       label: "Total",
     },
   })
 
+  /**
+   * Reload payment form after checkout value changes (promo code applied, etc.)
+   * Reloading is required so that Apple Pay and Google Pay buttons are updated for new cart total.
+   */
+  const [loadingPaymentForm, setLoadingPaymentForm] = useState<boolean>(false)
+  useEffect(() => {
+    setLoadingPaymentForm(true)
+    const timeout = setTimeout(() => setLoadingPaymentForm(false), 1000)
+    return () => clearTimeout(timeout)
+  }, [cmmc.promoAppliedCartTotal])
+
+  if (loadingPaymentForm) {
+    return (
+      <div className='flex flex-col gap-2'>
+        <Skeleton className='w-full h-10' />
+        <Skeleton className='w-full h-10' />
+      </div>
+    )
+  }
+
   return (
     <PaymentForm
       /**
@@ -143,92 +163,75 @@ const PayWithCard: React.FC<PaymentMethodComponentProps> = ({
             <Button onClick={onDone}>Continue</Button>
           </div>
         ) : (
-          <>
+          <div className='flex flex-col gap-1'>
             <GooglePay/>
             <ApplePay/>
             
-            <div className='flex gap-2 whitespace-nowrap items-center my-0.5 sm:my-1 text-xs text-muted'>
+            <div className='flex gap-2 whitespace-nowrap items-center my-1 sm:my-3 text-xs text-muted'>
               <hr className='grow border'/><div className='shrink-0 mx-1'>or</div><hr className='grow border'/>
             </div>
 
-            <Accordion type="single" collapsible className={''}>
-              <AccordionItem value="cart" className='w-full border-b-0 data-[state=open]:border data-[state=open]:px-3 rounded '>
-                <AccordionTrigger className={cn(
-                  buttonVariants({variant: 'outline', size: 'lg'}),
-                  '!no-underline group flex justify-between ',
-                  'bg-transparent hover:bg-transparent border-muted-2 hover:border-muted-2',
-                  'data-[state=open]:border-none data-[state=open]:py-0 px-4 data-[state=open]:px-1'
+            <PaymentMethods />
+
+            <ContactInfo form={contactForm}/>
+            {/* Imitates hanzo/ui Button and Input styles, I was unable to render the
+              hanzo/ui button outright and keeping the submit form functionality*/}
+            <CreditCard
+              style={{
+                '.input-container': {
+                  borderColor: '#404040',
+                  borderRadius: '6px',
+                },
+                '.input-container.is-focus': {
+                  borderColor: '#ffffff',
+                },
+                '.input-container.is-error': {
+                  borderColor: '#ff1600',
+                },
+                '.message-text': {
+                  color: '#999999',
+                },
+                '.message-icon': {
+                  color: '#999999',
+                },
+                '.message-text.is-error': {
+                  color: '#ff1600',
+                },
+                '.message-icon.is-error': {
+                  color: '#ff1600',
+                },
+                input: {
+                  backgroundColor: 'transparent',
+                  color: '#FFFFFF',
+                  fontSize: '15px',
+                  fontFamily: 'helvetica neue, sans-serif',
+                },
+                'input::placeholder': {
+                  color: '#999999',
+                },
+                'input.is-error': {
+                  color: '#ff1600',
+                },
+              }}
+              render={(Button: any) => (
+                <Button className={cn(
+                  'items-center justify-center font-medium transition-colors focus-visible:outline-none focus-visible:ring-2',
+                  'focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background',
+                  '!bg-primary !text-primary-fg hover:!bg-primary-hover font-nav whitespace-nowrap not-typography h-10 py-2 px-4',
+                  '!text-sm rounded-md lg:min-w-[220px] sm:min-w-[220px] flex'
                 )}>
-                  <div className='font-sans text-base mr-2 text-muted'>CC</div>
-                  <PaymentMethods />
-                  <div>
-                    <ChevronRight className="h-5 w-5 -mr-2 text-muted shrink-0 transition-transform duration-200 group-data-[state=open]:rotate-90 hidden group-data-[state=open]:block" />
-                  </div>
-                </AccordionTrigger>
-                <AccordionContent className='data-[state=open]:mb-4 data-[state=open]:mt-1'>
-                  <ContactInfo form={contactForm}/>
-                  {/* Imitates hanzo/ui Button and Input styles, I was unable to render the
-                    hanzo/ui button outright and keeping the submit form functionality*/}
-                  <CreditCard
-                    style={{
-                      '.input-container': {
-                        borderColor: '#404040',
-                        borderRadius: '6px',
-                      },
-                      '.input-container.is-focus': {
-                        borderColor: '#ffffff',
-                      },
-                      '.input-container.is-error': {
-                        borderColor: '#ff1600',
-                      },
-                      '.message-text': {
-                        color: '#999999',
-                      },
-                      '.message-icon': {
-                        color: '#999999',
-                      },
-                      '.message-text.is-error': {
-                        color: '#ff1600',
-                      },
-                      '.message-icon.is-error': {
-                        color: '#ff1600',
-                      },
-                      input: {
-                        backgroundColor: 'transparent',
-                        color: '#FFFFFF',
-                        fontSize: '15px',
-                        fontFamily: 'helvetica neue, sans-serif',
-                      },
-                      'input::placeholder': {
-                        color: '#999999',
-                      },
-                      'input.is-error': {
-                        color: '#ff1600',
-                      },
-                    }}
-                    render={(Button: any) => (
-                      <Button className={cn(
-                        'items-center justify-center font-medium transition-colors focus-visible:outline-none focus-visible:ring-2',
-                        'focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background',
-                        '!bg-primary !text-primary-fg hover:!bg-primary-hover font-nav whitespace-nowrap not-typography h-10 py-2 px-4',
-                        '!text-sm rounded-md lg:min-w-[220px] sm:min-w-[220px] flex'
-                      )}>
-                        Pay
-                      </Button>
-                    )}
-                  />
-                  {transactionStatus === 'error' && (
-                    <p className='mx-auto text-destructive'>There was an error processing your payment.</p>
-                  )}
-                </AccordionContent>
-              </AccordionItem>
-            </Accordion>
-
-          </>
+                  Pay
+                </Button>
+              )}
+            />
+            {transactionStatus === 'error' && (
+              <p className='mx-auto text-destructive'>There was an error processing your payment.</p>
+            )}
+          </div>
         )}
       </ApplyTypography>
     </PaymentForm>
   )
-}
+})
 
 export default PayWithCard

package/components/payment-step-form/methods/crypto.tsx

@@ -64,7 +64,7 @@ const PayWithCrypto: React.FC<PaymentMethodComponentProps> = observer(({
         .then(res => res.json())
         .then((exchangeRate) => {
           const oneUsdInWei = (10**18) / exchangeRate.data.amount
-          const usdAmountInWei = oneUsdInWei * cmmc.cartTotal 
+          const usdAmountInWei = oneUsdInWei * cmmc.promoAppliedCartTotal 
           setAmount(usdAmountInWei)
           setLoadingPrice(false)
         })
@@ -77,7 +77,7 @@ const PayWithCrypto: React.FC<PaymentMethodComponentProps> = observer(({
     const interval = setInterval(fetchPrice, 30000)
 
     return () => clearInterval(interval)
-  }, [cmmc.cartTotal])
+  }, [cmmc.promoAppliedCartTotal])
 
   const sendPayment = async (ether: number) => {
     contactForm.handleSubmit(async () => {

package/components/product-card.tsx

@@ -13,7 +13,7 @@ import {
 import type { ImageDef } from '@hanzo/ui/types'
 import { cn } from '@hanzo/ui/util'
 
-import { formatPrice } from '../util'
+import { formatCurrencyValue } from '../util'
 import type { LineItem } from '../types'
 import { Icons } from './Icons'
 
@@ -66,7 +66,7 @@ const ProductCard: React.FC<ProductCardProps> = ({
       <CardContent className='grid gap-2.5 p-4'>
         <CardTitle className='text-sm sm:text-base flex flex-col justify-start items-center line-clap-3'>
           {item.title.split(', ').map((e, i) => (<p key={i}>{e}</p>))}
-          <p className='mt-1 font-semibold'>{formatPrice(item.price)}</p>
+          <p className='mt-1 font-semibold'>{formatCurrencyValue(item.price)}</p>
         </CardTitle>
       </CardContent>
       <CardFooter className='p-4 flex flex-row justify-center'>

package/components/select-category-item-panel.tsx

@@ -7,7 +7,7 @@ import { cn } from '@hanzo/ui/util'
 import { Skeleton } from '@hanzo/ui/primitives'
 
 import type { ItemSelector } from '../types'
-import { formatPrice } from '../util'
+import { formatCurrencyValue } from '../util'
 import { Icons } from './Icons'
 
 import AddToCartWidget from './add-to-cart-widget'
@@ -132,7 +132,7 @@ const SelectCategoryItemPanel: React.FC<
         </h3>
         {selectedItemRef.item?.sku ? (
           <h6 className='text-center font-semibold'>
-            {(soleOption ? '' : (selectedItemRef.item.titleAsOption + ': ')) + formatPrice(selectedItemRef.item.price)}
+            {(soleOption ? '' : (selectedItemRef.item.titleAsOption + ': ')) + formatCurrencyValue(selectedItemRef.item.price)}
           </h6>
         ) : ''}
       </div>

package/index.ts

@@ -1,4 +1,4 @@
 export * from './service/context'
 export * from './components'
 export type { StandaloneServiceOptions as ServiceOptions } from './service/impls/standalone/standalone-service'
-export { useSyncSkuParamWithCurrentItem, getFacetValuesMutator, formatPrice } from './util'
+export { useSyncSkuParamWithCurrentItem, getFacetValuesMutator, formatCurrencyValue } from './util'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hanzo/commerce",
-  "version": "5.0.0",
+  "version": "5.1.0",
   "description": "Library with shopping cart components.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",

package/service/context.tsx

@@ -29,6 +29,7 @@ const CommerceServiceProvider: React.FC<PropsWithChildren & {
   options
 }) => {
 
+    // TODO: Inject Promo fixture here
   const serviceRef = useRef<CommerceService>(getServiceSingleton(productsByCategory, rootFacet, options))
   return (
     <CommerceServiceContext.Provider value={serviceRef.current}>

package/service/impls/standalone/standalone-service.ts

@@ -14,7 +14,8 @@ import type {
   Category, 
   LineItem,
   FacetsValue, 
-  FacetValueDesc
+  FacetValueDesc,
+  Promo
 } from '../../../types'
 
 import {
@@ -43,6 +44,7 @@ class StandaloneService
   private _categoryMap = new Map<string, Category>()
   private _rootFacet: FacetValueDesc 
   private _selectedFacets: FacetsValue = {}
+  private _promo: Promo | null = null
 
   private _options : StandaloneServiceOptions
   private _currentItem: ActualLineItem | undefined = undefined
@@ -73,23 +75,28 @@ class StandaloneService
     makeObservable<
       StandaloneService, 
         '_selectedFacets' | 
-        '_currentItem' 
+        '_currentItem' |
+        '_promo'
     >(this, {
       _selectedFacets :  observable.deep,
       _currentItem: observable,
+      _promo: observable,
     })
 
     makeObservable(this, {
       cartItems: computed,
       cartQuantity: computed,
-      cartTotal: computed, 
+      cartTotal: computed,
+      promoAppliedCartTotal: computed,
       cartEmpty: computed,
       specifiedItems: computed,
       specifiedCategories: computed, 
       setCurrentItem: action,
       currentItem: computed,
       item: computed,
-      facetsValue: computed
+      facetsValue: computed,
+      appliedPromo: computed,
+      setAppliedPromo: action,
       /* NOT setFacets. It implements it's action mechanism */
     })
   }
@@ -181,6 +188,43 @@ class StandaloneService
     )
   }
 
+  _promoValue_unsafe(value: number): number {
+    if (this._promo!.type === 'percent') {
+      return value * (1 - this._promo!.value / 100)
+    }
+    return value - this._promo!.value
+  }
+
+  get promoAppliedCartTotal(): number {   
+    if (!this._promo) {
+      return this.cartTotal
+    }
+
+    if (!this._promo.skus) {
+      return this._promoValue_unsafe(this.cartTotal)
+    }
+
+    let total = this.cartItems.reduce(
+      (total, item) => {
+        const itemPrice = this._promo!.skus!.includes(item.sku) ? 
+          this._promoValue_unsafe(item.price)
+          :
+          item.price
+        return total + itemPrice * item.quantity
+      }, 
+      0
+    )
+      
+    return total
+  }
+
+  itemPromoPrice(item: LineItem): number | undefined {
+    if (this._promo && (!this._promo.skus || this._promo.skus.includes(item.sku) )) {
+      return this._promoValue_unsafe(item.price)
+    }
+    return undefined 
+  }
+
   get cartQuantity(): number {
     return this.cartItems.reduce(
       (total, item) => (total + item.quantity), 
@@ -188,6 +232,14 @@ class StandaloneService
     )
   }
 
+  get appliedPromo(): Promo | null {
+    return this._promo
+  }
+
+  setAppliedPromo(promo: Promo | null): void {
+    this._promo = promo
+  }
+
   setCurrentItem(skuToFind: string | undefined): boolean {
 
     if (skuToFind === undefined || skuToFind.length === 0) {

package/types/checkout.ts

@@ -37,12 +37,11 @@ interface PaymentMethodDesc {
   Comp: ComponentType<PaymentMethodComponentProps>
 }
 
-
 export {
   type TransactionStatus,
   type CheckoutStepComponentProps,
   type CheckoutStep,
   type PaymentMethodComponentProps,
   type PaymentMethodDesc,
-  type ContactFormType
+  type ContactFormType,
 }

package/types/commerce-service.ts

@@ -1,6 +1,7 @@
 import type { LineItem, ObsLineItemRef } from './line-item'
 import type { FacetValueDesc, FacetsValue } from './facet'
 import type Category from './category'
+import type Promo from './promo'
 
 interface CommerceService extends ObsLineItemRef {
 
@@ -8,10 +9,17 @@ interface CommerceService extends ObsLineItemRef {
   get cartItems(): LineItem[]
     /** Total of all quantities of all items in cart */
   get cartQuantity(): number
-    /** Total of all prices * quantities of items in cart */
+    /** Total of all prices x quantities of items in cart */
   get cartTotal(): number
 
+  get promoAppliedCartTotal(): number
+
   get cartEmpty(): boolean
+
+  get appliedPromo(): Promo | null
+  setAppliedPromo(promo: Promo | null): void
+    /** returns the price with promo applied, of undefined if no promo or promo does not apply */
+  itemPromoPrice(item: LineItem): number | undefined
    
   getCartCategorySubtotal(categoryId: string): number
 

package/types/index.ts

@@ -3,6 +3,7 @@ export type { default as Category } from './category'
 export type { default as CommerceService } from './commerce-service'
 export type { default as ItemSelector } from './item-selector'
 export type { default as Product } from './product'
+export type { default as Promo } from './promo'
 
 export * from './checkout'
 export * from './line-item'

package/types/promo.ts

@@ -0,0 +1,10 @@
+interface Promo {
+  type: 'percent' | 'amount'
+  code: string
+  value: number,
+  skus?: string[]
+}
+
+export {
+  type Promo as default
+}

package/util/index.ts

@@ -1,4 +1,4 @@
-import type { StringMutator, CommerceService } from '../types'
+import type { StringMutator, CommerceService, Promo } from '../types'
 
 export function toTitleCase(str: string) {
   return str.replace(
@@ -20,7 +20,7 @@ export function unslugify(str: string) {
 }
 
 
-export function formatPrice(price: number): string {
+export function formatCurrencyValue(price: number): string {
   const str = price.toLocaleString('en-US', {
     style: 'currency',
     currency: 'USD',
@@ -28,6 +28,7 @@ export function formatPrice(price: number): string {
   return (str.endsWith('.00')) ? str.replace('.00', '') : str 
 }
 
+
 export const getFacetValuesMutator = (level: number, cmmc: CommerceService): StringMutator => {
 
   const setLevel = (value: string, level: number ): void  => {

package/util/promo-codes.ts

@@ -0,0 +1,46 @@
+'use server'
+
+import type { Promo } from '../types'
+
+const PROMO_CODES: Promo[] = [
+  {
+    type: 'percent',
+    code: 'ANGEL',
+    value: 20
+  },
+  {
+    type: 'percent',
+    code: 'NASSER',
+    value: 20
+  },
+  {
+    type: 'percent',
+    code: 'DARA',
+    value: 20
+  },
+  {
+    type: 'percent',
+    code: 'ROSEY',
+    value: 20
+  },
+  {
+    type: 'percent',
+    code: 'IYKYK',
+    value: 20
+  },
+  {
+    type: 'percent',
+    code: 'GENESIS',
+    value: 99,
+    skus: ['LXM-PS-PS']
+  }
+]
+
+// TODO: implement a real API call
+const getPromoFromApi = async (code: string) => {
+  return PROMO_CODES.find(promo => promo.code === code)
+}
+
+export {
+  getPromoFromApi as default
+}