@libreapps/commerce 7.5.1

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

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

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

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

@@ -0,0 +1,90 @@
+import React from 'react'
+import { observer } from 'mobx-react-lite'
+
+import { MediaStack, Skeleton } from '@libreapps/ui/primitives'
+import type { Dimensions } from '@libreapps/ui/types'
+
+import { useCommerce } from '../..'
+
+import type { ItemSelectorOptions, ItemSelectorProps, LineItem } from '../../types'
+import TitleAndByline from './title-and-byline'
+import { accessItemOptions } from '../../util'
+import { cn } from '@libreapps/ui/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} 
+        clx={'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

@@ -0,0 +1,25 @@
+import React from 'react'
+
+import { ApplyTypography } from '@libreapps/ui/primitives'
+import { cn } from '@libreapps/ui/util'
+
+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

@@ -0,0 +1,76 @@
+'use client'
+
+import React from 'react'
+import { observer } from 'mobx-react-lite'
+
+import { cn } from '@libreapps/ui/util'
+import { Image } from '@libreapps/ui/primitives'
+
+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 ? (
+          <Image def={item.img} 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

@@ -0,0 +1,154 @@
+'use client'
+import React, { useLayoutEffect, type PropsWithChildren } from 'react'
+import { reaction } from 'mobx'
+import { observer } from 'mobx-react-lite'
+
+import { Button, ScrollArea } from '@libreapps/ui/primitives'
+import { cn } from '@libreapps/ui/util'
+
+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' 
+          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

@@ -0,0 +1,109 @@
+'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 
+} from '@libreapps/ui/primitives'
+
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+} from '@libreapps/ui/form'
+
+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),
+    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

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

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

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

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

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

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

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