@hanzo/commerce 7.7.0 → 7.7.2

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

@@ -1,226 +0,0 @@
-'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 '@hanzo/ui'
-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 />
-            </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

@@ -1,23 +0,0 @@
-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

@@ -1,171 +0,0 @@
-'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,
-  Form,
-  FormControl,
-  FormField,
-  FormItem,
-  FormMessage,
-} from '@hanzo/ui'
-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 as any),
-    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

@@ -1,11 +0,0 @@
-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

@@ -1,66 +0,0 @@
-import React from 'react'
-
-import {
-  Card,
-  CardContent,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-  MediaStack,
-  cn,
-} from '@hanzo/ui'
-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
-    itemScope
-    itemType='https://schema.org/Product'
-    className={cn('max-h-[360px] lg:min-w-[200px] max-w-[260px] overflow-hidden', className)}
-    // A div's whole attribute set, spread onto a cross-platform component that
-    // names a few of them differently. The element a Card renders IS a div, and
-    // it is the one these reach.
-    {...(props as object)}
-  >
-    {/* Standard schema.org Product microdata. Neutral and analytics-agnostic:
-        track.js `annotate`, GA4 Merchant, or any reader picks up the item with
-        zero per-app config. Machine values live in <meta> so the visible,
-        formatted UI is untouched. */}
-    <meta itemProp='name' content={item.title} />
-    <meta itemProp='sku' content={item.sku} />
-    <CardHeader className='w-full border-b p-6 min-h-[180px] max-h-[240px] relative'>
-      <MediaStack media={item} constrainTo={{w: 700, h:700}} className='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'
-          itemProp='offers'
-          itemScope
-          itemType='https://schema.org/Offer'
-        >
-          <meta itemProp='price' content={String(item.price)} />
-          <meta itemProp='priceCurrency' content='USD' />
-          {formatCurrencyValue(item.price)}
-        </p>
-      </CardTitle>
-    </CardContent>
-    <CardFooter className='p-4 flex flex-row justify-center'>
-      <AddToCartWidget item={item} />
-    </CardFooter>
-  </Card>
-)
-
-
-export default ProductCard