@hanzo/commerce 7.7.1 → 7.7.3

package/components/buy/multi-family/family-carousel/state.ts

@@ -1,87 +0,0 @@
-import type { Family, LineItem, ObsLineItemRef, Product } from '../../../../types'
-import { observable, action, computed, makeObservable } from 'mobx'
-
-class SlideState implements ObsLineItemRef {
-
-  _fam: Family
-  _item: Product
-  _syncSku: (sku: string) => void
-  _selected: boolean
-
-  constructor(fam: Family, initiallySelected: boolean, sync: (sku: string) => void) {
-    this._fam = fam
-    this._item = fam.products[0]
-    this._selected = initiallySelected
-    this._syncSku = sync
-
-    makeObservable(this, {
-      _item: observable,
-      item: computed,
-      selectSku: action
-    })
-  }
-
-  selectSku = (sku: string) => {
-    if (this._item.sku === sku) return;
-    const found = this._fam.products.find((i) => (i.sku === sku))
-    if (found) {
-      this._item = found
-      if (this._selected) {
-        this._syncSku(sku)
-      }
-    }
-    else {
-      throw new Error('SlideState.selectSku(): no item found!')
-    }
-  }
-
-  setSelected = (b: boolean) => {this._selected = b}
-
-  get id(): string {return (this._fam.id)}
-
-  get item(): LineItem | undefined {
-    return this._item as LineItem
-  }
-}
-
-class FamilyCarouselState {
-
-  _map = new Map<string, SlideState>()
-  _syncSku: (sku: string) => void
-
-  constructor(
-    fams: Family[], 
-//    initialFamilyId: string,
-    syncSkuToCurrentSlide: (sku: string) => void
-  ) {
-
-    fams.forEach((f, index) => {this._map.set(f.id, new SlideState(
-      f,
-      (index === 0),
-      syncSkuToCurrentSlide
-    ))})
-    this._syncSku = syncSkuToCurrentSlide
-  }
-
-  setCurrentFamily = (id: string) => {
-
-    this._map.forEach((s) => {
-      s.setSelected(s.id === id)
-    })
-
-    const slideState = this._map.get(id)
-    if (slideState) {
-      this._syncSku(slideState.item!.sku)
-    }
-    else {
-      throw new Error(`FamilyCarouselState.setCurrentFamily: no state object for id '${id}'!`)
-    }
-  }
-
-  getSlideState = (familyId: string): SlideState | undefined => (this._map.get(familyId))
-}
-
-export {
-  SlideState,
-  FamilyCarouselState
-} 

package/components/buy/multi-family/index.ts

@@ -1,2 +0,0 @@
-export { default as FamilyCarousel } from './family-carousel'
-export { default as AllVariantsCarousel } from './all-variants-carousel'

package/components/buy/single-family-selector.tsx

@@ -1,91 +0,0 @@
-import React from 'react'
-import { observer } from 'mobx-react-lite'
-
-import {
-  MediaStack,
-  Skeleton,
-  cn,
-} from '@hanzo/ui'
-import type { Dimensions } from '@hanzo/ui/types'
-
-import { useCommerce } from '../..'
-
-import type { ItemSelectorOptions, ItemSelectorProps, LineItem } from '../../types'
-import TitleAndByline from './title-and-byline'
-import { accessItemOptions } from '../../util'
-const DEF_MEDIA_CONSTRAINT = {w: 200, h: 200}
-
-const SingleFamilySelector: React.FC<{
-  items: LineItem[] // these may be sorted, so are we can't just use currentFamily.products
-  Selector: React.ComponentType<ItemSelectorProps>
-  selOptions: ItemSelectorOptions | undefined
-  scrollable?: boolean
-  showItemMedia?: boolean
-  mediaConstraint?: Dimensions
-  mobile?: boolean
-  clx?: string
-  titleAreaClx?: string
-}> = ({
-  items,
-  Selector,
-  selOptions,
-  scrollable=false,
-  showItemMedia=true,
-  mediaConstraint=DEF_MEDIA_CONSTRAINT,
-  mobile=false,
-  clx='',
-  titleAreaClx=''
-}) => {
-  
-  const cmmc = useCommerce()
-
-
-  const MyTitleAndByline: React.FC<{clx?: string}> = observer(({
-    clx=''
-  }) => {
-    const { familyTitle, showFamilyByline } = accessItemOptions(selOptions)
-    const title = (familyTitle === 'none' ? 
-      undefined 
-      : 
-      (familyTitle === 'long' ? 
-        cmmc.currentFamily?.title 
-        : 
-        (cmmc.currentFamily?.titleShort ?? cmmc.currentFamily?.title)
-      ) 
-    )
-    const byline = (familyTitle !== 'none') && showFamilyByline ? cmmc.currentFamily?.byline :  undefined
-    return ( <TitleAndByline clx={clx} title={title} byline={byline}/> )
-  })
-
-  const ItemMedia: React.FC = observer(() => (
-    cmmc.currentItem ? (
-      <MediaStack 
-        media={cmmc.currentItem!} 
-        constrainTo={mediaConstraint} 
-        className={'mb-2 ' + (scrollable ? 'shrink-0' : '')}
-      />
-    ) : (
-      <Skeleton className={'w-[200px] h-[200px] my-2 ' + (scrollable ? 'shrink-0' : '')}/>
-    )
-  ))
-
-  return (
-    <div className={cn(clx, 'flex flex-col items-center', (scrollable ? 'shrink' : ''))}>
-      <MyTitleAndByline clx={cn(titleAreaClx, (scrollable ? 'shrink-0' : ''))} />
-      {showItemMedia && (<ItemMedia />)}
-      {items && (
-        <Selector 
-          items={items}
-          selectedItemRef={cmmc}
-          selectSku={cmmc.setCurrentItem.bind(cmmc)}
-          scrollable={scrollable}
-          mobile={mobile}
-          options={selOptions}
-          clx={(scrollable ? 'shrink' : '')}
-        />  
-      )}
-    </div>
-  )
-}
-
-export default SingleFamilySelector

package/components/buy/title-and-byline.tsx

@@ -1,26 +0,0 @@
-import React from 'react'
-
-import {
-  ApplyTypography,
-  cn,
-} from '@hanzo/ui'
-const TitleAndByline: React.FC<{
-  title: string | undefined
-  byline?: string | undefined
-  clx?: string
-  bylineClx?: string
-}> = ({
-  title,
-  byline,
-  clx='',
-  bylineClx=''
-}) => ( (title || byline) ? (
-    <ApplyTypography className={cn('flex flex-col items-center !gap-0 [&>*]:!m-0 ', clx)} >
-      <h4>{title}</h4>
-      {byline && (<h6 className={bylineClx}>{byline}</h6>)}
-    </ApplyTypography>
-  ) : (null)
-)
-
-export default TitleAndByline
-

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

@@ -1,77 +0,0 @@
-'use client'
-
-import React from 'react'
-import { observer } from 'mobx-react-lite'
-
-import {
-  cn,
-  MediaStack,
-} from '@hanzo/ui'
-import type { LineItem } from '../../../types'
-import { formatCurrencyValue } from '../../../util'
-import AddToCartWidget from '../../add-to-cart-widget'
-import { useCommerce } from '../../../service/context'
-
-const DEF_IMG_SIZE=40
-
-const renderTitle = (t: string): React.ReactNode => {
-  const toks = t.split(', ')
-  if (toks.length === 2) {
-    return <><p>{toks[0]},</p><p className=''>{toks[1]}</p></>
-  }
-  return <p>{t}</p>
-}
-
-const CartLineItem: React.FC<{
-  item: LineItem
-  className?: string
-  imgSizePx?: number
-  showPromoCode?: boolean
-  itemClicked?: (item: LineItem) => void
-  selected?: boolean
-}> = observer(({
-  item,
-  className='',
-  imgSizePx=DEF_IMG_SIZE,
-  showPromoCode=false,
-  itemClicked,
-  selected=false
-}) => {
-
-  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',
-        'border border-background rounded-sm p-1', 
-        selected ? 'border-foreground' : '',
-        (itemClicked && !selected ? 'cursor-pointer hover:!border-muted-4' : 'cursor-default '), 
-        className
-      )}
-      onClick={() => {itemClicked && itemClicked(item)}}
-    >
-      <div className='flex flex-row justify-between items-center gap-1' >
-        {item.img ? (
-          <MediaStack media={item} constrainTo={{w: imgSizePx, h: imgSizePx}} />
-        ) : ( // placeholder so things align
-          <div style={{height: imgSizePx, width: imgSizePx}} className='bg-level-3'/>
-        )}
-        <div className='grow leading-tight ml-1'>{renderTitle(item.title)}</div>
-      </div>
-      <div className='flex flex-row items-center justify-between w-full'>
-        <div className='flex flex-row items-center'>
-          <AddToCartWidget variant='minimal' item={item} />
-          {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>
-  )
-})
-
-export default CartLineItem

package/components/cart/cart-panel/index.tsx

@@ -1,157 +0,0 @@
-'use client'
-import React, { useLayoutEffect, type PropsWithChildren } from 'react'
-import { reaction } from 'mobx'
-import { observer } from 'mobx-react-lite'
-
-import {
-  Button,
-  ScrollArea,
-  cn,
-  sx,
-} from '@hanzo/ui'
-import type { LineItem } from '../../../types'
-import { useCommerce } from '../../../service/context'
-import { sendFBEvent, sendGAEvent } from '../../../util/analytics'
-
-import CartLineItem from './cart-line-item'
-import TotalArea from './total-area'
-
-const CartPanel: React.FC<PropsWithChildren & {
-    /** fix size and scroll after 'scrollAfter items in teh cart. */
-  scrollAfter?: number
-  scrollHeightClx?: string
-  imgSizePx?: number
-  className?: string
-  itemClx?: string
-  listClx?: string
-  noItemsClx?: string
-  totalClx?: string
-  buttonClx?: string
-  showPromoCode?: boolean
-  showShipping?: boolean
-  selectItems?: boolean
-    /** if not provided, 'checkout' button will be rendered */
-  handleCheckout?: () => void
-}> = observer(({
-    /** If provided, 'children' is rendered above the items. eg, a heading. */
-  children,
-  scrollAfter=5,
-  scrollHeightClx='h-[70vh]',
-  imgSizePx=40,
-  className='',
-  itemClx='',
-  listClx='',
-  noItemsClx='',
-  totalClx='',
-  buttonClx='',
-  showPromoCode=false,
-  showShipping=false,
-  selectItems=false,
-  handleCheckout,
-}) => {
-
-  const cmmc = useCommerce()
-
-  useLayoutEffect(() => {
-    if (!cmmc) {
-      return
-    }
-    if (!cmmc.cartEmpty && !cmmc.currentItem) {
-      cmmc.setCurrentItem(cmmc.cartItems[0].sku)  
-    }
-      // return mobx disposer
-    return reaction(() => (
-      cmmc.cartItems.length  
-    ), 
-    (itemCount) => {
-      if (itemCount > 0) {
-        cmmc.setCurrentItem(cmmc.cartItems[0].sku)  
-      }
-    })
-  }, [])
-  
-  if (!cmmc) {
-    return <div />
-  }
-
-  const _handleCheckout = () => {
-    sendGAEvent('begin_checkout', {
-      currency: 'USD',
-      value: cmmc.cartTotal,
-      items: cmmc.cartItems.map((item) => ({
-        item_id: item.sku,
-        item_name: item.title,
-        item_category: item.familyId,
-        price: item.price,
-        quantity: item.quantity
-      })),
-    })
-    sendFBEvent('InitiateCheckout', {
-      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: cmmc.cartTotal,
-      currency: 'USD',
-    })
-    handleCheckout && handleCheckout()
-  }
-
-  const itemClicked = (item: LineItem) => { 
-    cmmc.setCurrentItem(item.sku) 
-  }
-
-  const MainStuff: React.FC = observer(() => (<>
-    {cmmc.cartEmpty ? (
-      <p className={cn('text-center my-3', noItemsClx)}>No items</p>
-    ) : (<>
-    {cmmc.cartItems.map((item) => (
-      <CartLineItem
-        key={`mobile-${item.sku}`}
-        imgSizePx={imgSizePx}
-        item={item}
-        className={cn('mb-2', itemClx)}
-        showPromoCode={showPromoCode}
-        itemClicked={selectItems ? itemClicked : undefined}
-        selected={selectItems ? cmmc.currentItem?.sku === item.sku : false}
-      />
-    ))}
-    </>)}
-    <TotalArea clx={totalClx} showPromoCode={showPromoCode} showShipping={showShipping}/>
-  </>))
-
-  const scrolling = (cmmc.cartItems.length > scrollAfter)
-
-  return (
-    <div className={cn(
-      'border p-4 rounded-lg flex flex-col', 
-      className, 
-      scrolling ? scrollHeightClx : 'h-auto'
-    )}>
-      {children}
-      {scrolling ? (
-        <ScrollArea className={cn('mt-2 w-full shrink py-0', listClx)}>
-          <MainStuff />
-        </ScrollArea>
-      ) : (
-        <div className={cn('mt-2 w-full', listClx)}>
-          <MainStuff />
-        </div>
-      )}
-      {handleCheckout && !cmmc.cartEmpty && (
-        <Button 
-          onClick={_handleCheckout} 
-          variant='primary' 
-          {...sx('rounded-lg')}
-          className={cn('mt-12 mx-auto w-full sm:max-w-[220px]', buttonClx)} 
-        >
-          Checkout
-        </Button>
-      )}
-    </div>
-  )
-})
-
-export default CartPanel

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

@@ -1,105 +0,0 @@
-'use client'
-
-import { useEffect, useState } from 'react'
-import { useSearchParams } from 'next/navigation'
-import { observer } from 'mobx-react-lite'
-
-import { useForm } from 'react-hook-form'
-import * as z from 'zod'
-import { zodResolver } from '@hookform/resolvers/zod'
-import { Check } from 'lucide-react'
-
-import {
-  Button,
-  Input,
-  Form,
-  FormControl,
-  FormField,
-  FormItem,
-} from '@hanzo/ui'
-import { useCommerce } from '../../../service/context'
-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 as any),
-    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-1'>
-      <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} className='h-9' placeholder='Discount or invite code' onInput={removePromoCode}/>
-                  </FormControl>
-                </FormItem>
-              )}
-            />
-            {codeAccepted ? (
-              <Check/>
-            ) : (
-              <Button variant='outline' className='!w-fit !min-w-0 font-inter text-muted text-sm'>Apply</Button>
-            )}
-          </div>
-        </form>
-      </Form>
-    </div>
-  )
-})
-
-export default PromoCode

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

@@ -1,61 +0,0 @@
-'use client'
-import React, { Suspense } from 'react'
-import { observer } from 'mobx-react-lite'
-
-import {
-  cn,
-} from '@hanzo/ui'
-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 +0,0 @@
-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 +0,0 @@
-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 +0,0 @@
-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