@libreapps/commerce 7.5.1

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

@@ -0,0 +1,227 @@
+'use client'
+
+import React, { useEffect, useState } from 'react'
+import { autorun } from 'mobx'
+import { observer } from 'mobx-react-lite'
+
+import { ethers } from 'ethers'
+
+import { 
+  Button, 
+  Input, 
+  Select, 
+  SelectContent, 
+  SelectGroup, 
+  SelectItem, 
+  SelectTrigger, 
+  SelectValue, 
+  toast 
+} from '@libreapps/ui/primitives'
+
+import Eth from '../crypto-icons/eth'
+import { useCommerce } from '../../../../service/context'
+import type { PaymentMethodComponentProps } from '../../../../types'
+import { sendFBEvent, sendGAEvent } from '../../../../util/analytics'
+
+import ContactForm from '../contact-form'
+
+declare global {
+  interface Window{
+    ethereum?: any
+  }
+}
+
+const PayWithCrypto: React.FC<PaymentMethodComponentProps> = observer(({
+  onDone,
+  transactionStatus,
+  setTransactionStatus,
+  storePaymentInfo,
+  contactForm
+}) => {
+  const cmmc = useCommerce()
+
+  const [loadingPrice, setLoadingPrice] = useState(false)
+  //const [selectedToken, setSelectedToken] = useState('eth')
+  const [amount, setAmount] = useState<number>()
+  const [provider, setProvider] = useState<ethers.BrowserProvider>()
+
+  //const selectedToken = 'eth'
+
+  useEffect(() => {
+    setTransactionStatus('unpaid')
+      // responding to changes in user.walletAddress
+    return autorun(() => {
+      const newProvider = new ethers.BrowserProvider(window.ethereum)
+      setProvider(newProvider)
+    })
+  }, [])
+
+  // Get latest USD -> ETH exchange rate
+  useEffect(() => {
+    const fetchPrice = () => {
+      setLoadingPrice(true)
+      fetch(process.env.NEXT_PUBLIC_ETH_EXCHANGE_RATE_API ?? '')
+        .then(res => res.json())
+        .then((exchangeRate) => {
+          const oneUsdInWei = (10**18) / exchangeRate.data.amount
+          const usdAmountInWei = oneUsdInWei * cmmc.promoAppliedCartTotal 
+          setAmount(usdAmountInWei)
+          setLoadingPrice(false)
+        })
+    }
+
+    // Call immediately on load
+    fetchPrice()
+
+    // Then set interval to call every 30 seconds
+    const interval = setInterval(fetchPrice, 30000)
+
+    return () => clearInterval(interval)
+  }, [cmmc.promoAppliedCartTotal])
+
+  const sendPayment = async (ether: number) => {
+    contactForm.handleSubmit(async () => {
+      // Check that we are on ethereum network
+      try {
+        await window.ethereum.request({
+          method: 'wallet_switchEthereumChain',
+          params: [{ chainId: "0x1"}],
+        })
+        const newProvider = new ethers.BrowserProvider(window.ethereum)
+        setProvider(newProvider)
+      } catch (err) {
+        toast('Please switch your wallet to the Ethereum network.')
+        return
+      }
+
+      try {
+        if (!provider) {
+          // :aa TODO string table
+          throw new Error('No crypto wallet found. Please install it.')
+        }
+    
+        await window.ethereum.send('eth_requestAccounts')
+
+        const signer = await provider.getSigner()
+        ethers.getAddress(process.env.NEXT_PUBLIC_ETH_PAYMENT_ADDRESS ?? '')
+        const price = ethers.parseEther(ether.toString())
+        const tx = await signer.sendTransaction({
+          to: process.env.NEXT_PUBLIC_ETH_PAYMENT_ADDRESS,
+          value: price
+        })
+        console.log({ ether, addr: process.env.NEXT_PUBLIC_ETH_PAYMENT_ADDRESS })
+        console.log('tx', tx)
+        setTransactionStatus('paid')
+        await storePaymentInfo({
+          ether,
+          transactionHash: tx.hash,
+          to: process.env.NEXT_PUBLIC_ETH_PAYMENT_ADDRESS,
+          paymentMethod: 'crypto'
+        })
+
+        provider.waitForTransaction(tx.hash)
+          .then(async (receipt) => {
+            console.log(receipt)
+            await storePaymentInfo({
+              ether,
+              addr: process.env.NEXT_PUBLIC_ETH_PAYMENT_ADDRESS,
+              receipt,
+              paymentMethod: 'crypto'
+            })
+            sendGAEvent('purchase', {
+              transaction_id: tx.hash,
+              value: price,
+              currency: 'ETH',
+              items: cmmc.cartItems.map((item) => ({
+                item_id: item.sku,
+                item_name: item.title,
+                item_category: item.familyId,
+                price: item.price,
+                quantity: item.quantity
+              })),
+            })
+            sendFBEvent('Purchase', {
+              content_ids: cmmc.cartItems.map((item) => item.sku),
+              contents: cmmc.cartItems.map(item => ({
+                id: item.sku,
+                quantity: item.quantity
+              })),
+              num_items: cmmc.cartItems.length,
+              value: price,
+              currency: 'ETH',
+            })
+            setTransactionStatus('confirmed')
+          })
+          .catch((error) => {
+            console.error(error)
+            setTransactionStatus('error')
+          })
+      } catch (err) {
+        console.log(err)
+        // :aa TODO string table
+        toast('Not enough funds in your wallet')
+      }
+    })()
+  }
+
+  const nextStep = async () => {
+    await storePaymentInfo({
+      paymentMethod: 'crypto'
+    })
+    onDone()
+  }
+
+  return (
+    <div className='flex flex-col gap-6 mt-6'>
+      <div className='flex flex-col w-full'>
+        <ContactForm form={contactForm}/>
+        <div className='flex gap-2 grid grid-cols-3'>
+          <Select onValueChange={(token) => {/*ONLY ETH  setSelectedToken(token) */}} defaultValue='eth'>
+            <SelectTrigger>
+              <SelectValue defaultValue='eth' />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectGroup>
+                <SelectItem value='eth'><div className='flex items-center gap-2'><Eth height={14}/>ETH</div></SelectItem>
+                {/* <SelectItem value='btc' ><div className='flex items-center gap-2'><Btc height={14}/>BTC</div></SelectItem>
+                <SelectItem value='usdt' ><div className='flex items-center gap-2'><Usdt height={14}/>USDT</div></SelectItem> */}
+              </SelectGroup>
+            </SelectContent>
+          </Select>
+          <div className='col-span-2'>
+            <Input
+              value={amount ? amount/(10**18) : amount}
+              contentEditable={false}
+            />
+            <div className='relative flex items-center gap-2 -top-[32px] justify-end px-2 py-1 rounded-lg bg-muted-4 w-fit text-xs float-right mr-3'>
+              <Eth height={10}/>
+              ETH
+            </div>
+          </div>
+        </div>
+        
+        {transactionStatus === 'error' ? (
+          <h4 className='text-destructive'>There was an error while confirming the transaction.</h4>
+        ) : transactionStatus === 'paid' ? (
+          <h4>Waiting for transaction to be confirmed on chain.</h4>
+        ) : transactionStatus === 'confirmed' ? (
+          <h4>Transaction confirmed!</h4>
+        ) : null}
+
+        {transactionStatus === 'unpaid' ? (
+          <Button
+            onClick={() => sendPayment(amount ? amount/(10**18) : 0)}
+            className='mx-auto w-full'
+            disabled={loadingPrice}
+          >
+            Pay
+          </Button>
+        ) : (
+          <Button onClick={nextStep} className='mx-auto w-full'>Continue</Button>
+        )}
+      </div>
+    </div>
+  )
+})
+
+export default PayWithCrypto

package/components/checkout/payment-step-form/methods/index.ts

@@ -0,0 +1,23 @@
+import type { PaymentMethodDesc } from '../../../../types'
+
+import Card from './card'
+import Crypto from './crypto'
+import BankTransfer from './bank-transfer'
+
+export default [
+  {
+    value: 'card',
+    label: 'Card',
+    Comp: Card
+  },
+  {
+    value: 'crypto',
+    label: 'Wallet',
+    Comp: Crypto
+  },
+  {
+    value: 'bank',
+    label: 'Bank Wire',
+    Comp: BankTransfer
+  },
+] satisfies PaymentMethodDesc[]

package/components/checkout/shipping-step-form.tsx

@@ -0,0 +1,175 @@
+'use client'
+
+import * as z from 'zod'
+import { useForm } from 'react-hook-form'
+import { zodResolver } from '@hookform/resolvers/zod'
+
+import {
+  Input,
+  Button,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue
+} from '@libreapps/ui/primitives'
+
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormMessage,
+} from '@libreapps/ui/form'
+
+import { useCommerce } from '../../service/context'
+
+import countries from '../../util/countries'
+import { sendGAEvent } from '../../util/analytics'
+
+import type { CheckoutStepComponentProps } from '../../types'
+
+const shippingFormSchema = z.object({
+  addressLine1: z.string().min(2, 'Address must be at least 2 characters.'),
+  addressLine2: z.string().optional(),
+  zipCode: z.string().min(2, 'Zip code is invalid.'),
+  city: z.string().min(2, 'City is invalid.'),
+  state: z.string().optional(),
+  country: z.string().min(2, 'Country is invalid.'),
+})
+
+const ShippingStepForm: React.FC<CheckoutStepComponentProps> = ({
+  orderId,
+  onDone
+}) => { 
+  const cmmc = useCommerce()
+  
+  const shippingForm = useForm<z.infer<typeof shippingFormSchema>>({
+    resolver: zodResolver(shippingFormSchema),
+    defaultValues: {
+      addressLine1: '',
+      addressLine2: '',
+      zipCode: '',
+      city: '',
+      state: '',
+      country: '',
+    },
+  })
+
+  const onSubmit = async (values: z.infer<typeof shippingFormSchema>) => {
+    if (orderId) {
+      await cmmc.updateOrderShippingInfo(orderId, values)
+    }
+    sendGAEvent('add_shipping_info', {
+      items: cmmc.cartItems.map((item) => ({
+        item_id: item.sku,
+        item_name: item.title,
+        item_category: item.familyId,
+        price: item.price,
+        quantity: item.quantity
+      })),
+      num_items: cmmc.cartItems.length,
+      value: cmmc.cartTotal,
+      currency: 'USD',
+    })
+    onDone()
+  }
+
+  return (
+    <Form {...shippingForm}>
+      <form onSubmit={shippingForm.handleSubmit(onSubmit)} className='text-left'>
+        <div className='flex flex-col gap-4'>
+          <FormField
+            control={shippingForm.control}
+            name='addressLine1'
+            render={({ field }) => (
+              <FormItem className='space-y-1 w-full'>
+                <FormControl>
+                  <Input {...field} placeholder='Address line 1'/>
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          <FormField
+            control={shippingForm.control}
+            name='addressLine2'
+            render={({ field }) => (
+              <FormItem className='space-y-1 w-full'>
+                <FormControl>
+                  <Input {...field} placeholder='Address line 2 (optional)'/>
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          <div className='flex gap-4 items-end'>
+            <FormField
+              control={shippingForm.control}
+              name='zipCode'
+              render={({ field }) => (
+                <FormItem className='space-y-1 w-full'>
+                  <FormControl>
+                    <Input {...field} placeholder='Zip code'/>
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={shippingForm.control}
+              name='city'
+              render={({ field }) => (
+                <FormItem className='space-y-1 w-full'>
+                  <FormControl>
+                    <Input {...field} placeholder='City'/>
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+          </div>
+          <div className='flex gap-4 items-start'>
+            <FormField
+              control={shippingForm.control}
+              name='state'
+              render={({ field }) => (
+                <FormItem className='space-y-1 w-full'>
+                  <FormControl>
+                    <Input {...field} placeholder='State (optional)'/>
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={shippingForm.control}
+              name='country'
+              render={({ field }) => (
+                <FormItem className='space-y-1 w-full'>
+                  <Select onValueChange={field.onChange} defaultValue={field.value}>
+                    <FormControl>
+                      <SelectTrigger className='bg-level-1 border-muted-4'>
+                        <SelectValue placeholder='Country' />
+                      </SelectTrigger>
+                    </FormControl>
+                    <SelectContent>
+                      {countries.map((country) => (
+                        <SelectItem key={country.id} value={country.name}>
+                          {country.name}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </FormItem>
+              )}
+            />
+          </div>
+        </div>
+        <Button type='submit' className='mx-auto w-full mt-4'>Confirm order</Button>
+      </form>
+    </Form>
+  )
+}
+
+export default ShippingStepForm

package/components/index.ts

@@ -0,0 +1,11 @@
+export { default as AddToCartWidget } from './add-to-cart-widget'
+export { default as CarouselBuyCard } from './buy/carousel-buy-card'
+
+export { default as CartPanel } from './cart/cart-panel'
+
+export { default as Icons } from './Icons'
+export { default as PaymentStepForm } from './checkout/payment-step-form'
+export { default as ProductCard } from './item/product-card'
+export { default as ShippingStepForm } from './checkout/shipping-step-form'
+
+export * from './item-selector'

package/components/item/product-card.tsx

@@ -0,0 +1,48 @@
+import React from 'react'
+
+import { 
+  Card,
+  CardContent,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+  MediaStack
+} from '@libreapps/ui/primitives'
+
+import { cn } from '@libreapps/ui/util'
+
+import { formatCurrencyValue } from '../../util'
+import type { LineItem } from '../../types'
+
+import AddToCartWidget from '../add-to-cart-widget'
+
+interface ProductCardProps extends React.HTMLAttributes<HTMLDivElement> {
+  item: LineItem
+}
+
+const ProductCard: React.FC<ProductCardProps> = ({
+  item,
+  className,
+  ...props
+}) => (
+  <Card
+    className={cn('max-h-[360px] lg:min-w-[200px] max-w-[260px] overflow-hidden', className)}
+    {...props}
+  >
+    <CardHeader className='w-full border-b p-6 min-h-[180px] max-h-[240px] relative'>
+      <MediaStack media={item} constrainTo={{w: 700, h:700}} clx='p-6' />
+    </CardHeader>
+    <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'>{formatCurrencyValue(item.price)}</p>
+      </CardTitle>
+    </CardContent>
+    <CardFooter className='p-4 flex flex-row justify-center'>
+      <AddToCartWidget item={item} />
+    </CardFooter>
+  </Card>
+)
+
+
+export default ProductCard

package/components/item-selector/button.tsx

@@ -0,0 +1,188 @@
+'use client'
+import React from 'react'
+import { observer } from 'mobx-react-lite'
+
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group"
+
+import { 
+  Image, 
+  Label, 
+  RadioGroup, 
+  ScrollArea 
+} from '@libreapps/ui/primitives'
+import { cn } from '@libreapps/ui/util'
+import type { Dimensions } from '@libreapps/ui/types'
+
+import type { ItemSelectorProps, LineItem } from '../../types'
+import { accessItemOptions, formatCurrencyValue } from '../../util'
+
+import QuantityIndicator from './quantity-indicator'
+
+const DEFAULT_CONSTRAINT = {h: 36, w: 72} // // Apple suggest 42px for clickability
+
+const ImageRadioGroupItem = React.forwardRef<
+  React.ElementRef<typeof RadioGroupPrimitive.Item>,
+  Omit<React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>, 'value' | 'id'> & {
+    item: LineItem,
+    constrainTo: Dimensions  
+  }
+>(({ 
+  item,
+  constrainTo,
+  className, 
+  ...props 
+}, ref) => {
+
+  const img = item.optionImg ? item.optionImg : item.img
+
+  return (
+    <RadioGroupPrimitive.Item
+      ref={ref}
+      data-vaul-no-drag 
+      className={cn(
+        'ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+        'focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+        className,
+        'overflow-hidden',
+        img?.rounded ? `rounded-${img.rounded}` : 'rounded-sm'
+      )}
+      {...props}
+      id={item.sku}
+      value={item.sku}
+    >
+      {img ? (
+        <Image def={img} constrainTo={constrainTo} preload className=''/>
+      ) : ( // placeholder so things align
+        <div style={{height: constrainTo.h, width: constrainTo.w}}/>
+      )}
+    </RadioGroupPrimitive.Item>
+  )
+})
+ImageRadioGroupItem.displayName = 'ImageRadioGroupItem'
+
+const ButtonItemSelector: React.FC<ItemSelectorProps> = observer(({
+  items,
+  selectedItemRef: itemRef,
+  selectSku,
+  clx='',
+  itemClx='',
+  soleItemClx='',
+  scrollable=false,
+  mobile=false,
+  options={}
+}) => {
+
+  const {
+    showPrice, 
+    showQuantity,
+    showFamilyInOption,
+    buttonType,
+    horizButtons,
+    showButtonIfOnlyOne
+  } = accessItemOptions(options)
+
+  const showImage = buttonType !== 'text'
+  const showText = buttonType !== 'image' 
+  const showBoth = buttonType === 'image-and-text' 
+
+  const labelAndPrice = (item : LineItem) => (
+    (showFamilyInOption ? (item.familyTitle + ', ' + item.optionLabel) : item.optionLabel) + 
+    (showPrice ? ((showFamilyInOption ? ': ' : ', ') + formatCurrencyValue(item.price)) : '')
+  )
+
+  const Item: React.FC<{ 
+    item: LineItem
+    selected: boolean
+  }> = observer(({
+    item,
+    selected
+  }) => {
+    
+    const textClx = (selected) ? 'text-accent' : 'text-muted'
+    const cursorClx = (selected) ? 'hover:cursor-default' : 'hover:cursor-pointer' 
+    const justifyClx = (showBoth) ?  '' : 'justify-center'
+      // If no image, the Label must fill the entire button since it has to be
+      // clickable all the way to the border
+    const paddingClx = (showImage) ? (scrollable ? 'px-4 py-2' : 'px-2 py-2' ) : '' 
+    let bgClx = '' 
+    let borderClx = ''
+    if (scrollable) {
+      borderClx += (selected) ? 'border-foreground border ' : 'border-b border-muted-2 '
+    }
+    else if (!showImage) {
+      borderClx += 'border rounded-lg ' 
+      borderClx += (selected) ? 'border-foreground ' : 'border-muted-2 ' 
+      bgClx += 'hover:bg-level-2' 
+    }
+
+    const outerClx = ['h-10 flex items-center', justifyClx, paddingClx, bgClx, borderClx]
+
+    return (
+      <div className={cn(...outerClx, itemClx )}  data-vaul-no-drag >
+        <ImageRadioGroupItem 
+          item={item} 
+          constrainTo={DEFAULT_CONSTRAINT} 
+          className={cn(
+            cursorClx,
+            (scrollable ?  '' : 'border-transparent border-2 data-[state=checked]:border-foreground'),
+            showBoth ? 'mr-2' : (showImage ? '' : 'hidden') 
+          )}
+        />
+        <Label htmlFor={item.sku} className={cn(
+          showQuantity ? 'flex items-center' : 'block',
+          textClx, 
+          cursorClx,
+          (showImage ? '' : 'self-stretch w-full flex items-center justify-center px-3 py-2'),
+          (showText ? '' : 'hidden') 
+        )}>
+          <div className={showQuantity ? 'grow' : ''}>{labelAndPrice(item)}</div>
+          {showQuantity && (
+            <QuantityIndicator 
+              item={item} 
+              clx='grow-0 shrink-0 h-[20px] ml-2' 
+              iconClx={selected ? 'fill-foreground' : 'fill-muted'}
+              digitClx='font-semibold text-primary-fg leading-none font-sans text-xxs' 
+            />
+          )}
+        </Label>
+      </div>
+    )
+  })
+ 
+  return showButtonIfOnlyOne || items.length > 1 ? (
+    <RadioGroup
+      className={cn( 
+        (scrollable ? 'shrink min-h-0 gap-0' : (mobile ? 'gap-3' : 'gap-1')), 
+        (horizButtons ? `grid grid-cols-${items.length} gap-1` : 'flex flex-col'),
+        (mobile && showText) ? 'min-w-pr-50' : '',
+        clx,
+      )}
+      onValueChange={selectSku}
+      value={itemRef.item ? itemRef.item.sku : ''}
+      data-vaul-no-drag 
+    >
+    {scrollable ? (
+      <ScrollArea className='mt-2 w-full h-full py-0 border border-muted-2' data-vaul-no-drag>
+      {items.map((item) => (
+        <Item item={item} selected={itemRef.item?.sku === item.sku} key={item.sku}/>
+      ))}
+      </ScrollArea>
+    ) : (<>
+      {items.map((item) => (
+        <Item item={item} selected={itemRef.item?.sku === item.sku} key={item.sku}/>
+      ))}
+    </>)}
+    </RadioGroup>
+  ) : (
+    <div className={cn(showQuantity ? 'flex items-center' : 'block', soleItemClx )}>
+      <div className={showQuantity ? 'grow' : ''}>
+        {labelAndPrice(items[0])}
+      </div>
+        {showQuantity && (
+          <QuantityIndicator item={items[0]} clx='grow-0 shrink-0 font-semibold text-sm leading-none px-2' />
+        )}
+    </div>
+  )
+})
+
+export default ButtonItemSelector