@anker-in/campaign-ui 0.1.9 → 0.2.10-beta.1

package/src/components/credits/context/utils.ts

@@ -0,0 +1,149 @@
+import Cookies from 'js-cookie'
+import { PRICE_SYMBOL } from './const'
+
+export function getAlpcPath(locale = '') {
+  let isEU = false
+  const alpcEUCookie = Cookies.get('alpcEU')
+  if (alpcEUCookie === undefined || alpcEUCookie === '') {
+    if (['de', 'eu-de', 'eu', 'eu-en', 'uk', 'fr', 'fra'].includes(locale)) {
+      isEU = true
+    }
+  } else {
+    let alpcEU = Number(alpcEUCookie)
+    if (alpcEU) {
+      isEU = true
+    }
+  }
+
+  if (isEU) {
+    return '/api/multipass/alpc-eu'
+  }
+
+  return '/api/multipass/alpc'
+}
+
+export function numberFormat(num: number = 0) {
+  if (typeof Intl === 'undefined') {
+    return num
+  }
+
+  return new Intl.NumberFormat().format(num)
+}
+
+export const emailValidate = (email: any) => {
+  return /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(
+    email
+  )
+}
+
+export const languageTerritory = (locale: string) =>
+  // https://unicode-org.github.io/cldr-staging/charts/37/supplemental/language_territory_information.html
+  ({
+    us: 'en-us',
+    uk: 'en-gb',
+    ca: 'en-ca',
+    au: 'en-au',
+    nz: 'en-nz',
+    eu: 'en-eu',
+    pl: 'pl-pl',
+    fr: 'fr-fr',
+    de: 'de-de',
+    vn: 'vi-vn',
+    sg: 'en-sg',
+    'ae-en': 'en-ae',
+    plus: 'en-us',
+    cl: 'es-cl',
+    es: 'es-es',
+    // Nordic countries
+    se: 'en-se',
+    dk: 'en-dk',
+    is: 'en-is',
+    no: 'en-no',
+    fi: 'en-fi',
+  })[locale] || ''
+
+export function formatPrice({
+  amount,
+  currencyCode,
+  locale,
+  maximumFractionDigits,
+  minimumFractionDigits,
+  removeTrailingZeros = false,
+}: {
+  amount: number
+  currencyCode: string
+  locale: string
+  maximumFractionDigits?: number
+  minimumFractionDigits?: number
+  removeTrailingZeros?: boolean
+}) {
+  const formatCurrency = new Intl.NumberFormat(languageTerritory(locale) || locale, {
+    style: 'currency',
+    currency: currencyCode || 'USD',
+    minimumFractionDigits: maximumFractionDigits === 0 ? 0 : minimumFractionDigits,
+    maximumFractionDigits,
+  })
+
+  let formattedValue = formatCurrency.format(amount)
+
+  if (['eu-de', 'eu-en', 'de', 'eu'].includes(locale)) {
+    formattedValue = formattedValue?.toString()?.replace(/[\s]/g, '')
+  }
+
+  if (removeTrailingZeros) {
+    // Adjust the regex to match comma as decimal separator
+    formattedValue = formattedValue
+      .replace(/(\.\d*?[1-9])0+\b/, '$1')
+      .replace(/\.0+\b/, '')
+      .replace(/(\,\d*?[1-9])0+\b/, '$1')
+      .replace(/\,0+\b/, '')
+  }
+
+  return formattedValue
+}
+
+export function formatVariantPrice({
+  amount,
+  baseAmount,
+  currencyCode,
+  locale,
+  maximumFractionDigits,
+  minimumFractionDigits,
+  removeTrailingZeros,
+}: {
+  baseAmount: number
+  amount: number
+  currencyCode: string
+  locale: string
+  maximumFractionDigits?: number
+  minimumFractionDigits?: number
+  removeTrailingZeros?: boolean
+}) {
+  if (typeof Intl === 'undefined') {
+    return {
+      price: `${PRICE_SYMBOL[locale as keyof typeof PRICE_SYMBOL]}${amount}`,
+      basePrice: `${PRICE_SYMBOL[locale as keyof typeof PRICE_SYMBOL]}${baseAmount}`,
+      discount: `${PRICE_SYMBOL[locale as keyof typeof PRICE_SYMBOL]}${baseAmount - amount || 0}`,
+    }
+  }
+
+  const hasDiscount = baseAmount > amount
+  const formatDiscount = new Intl.NumberFormat(languageTerritory(locale), {
+    style: 'percent',
+  })
+  const discount = hasDiscount ? formatDiscount.format((baseAmount - amount) / baseAmount) : null
+
+  const price = formatPrice({ amount, currencyCode, locale, removeTrailingZeros })
+  const basePrice = hasDiscount
+    ? formatPrice({
+        amount: baseAmount,
+        currencyCode,
+        locale,
+        maximumFractionDigits,
+        minimumFractionDigits,
+        removeTrailingZeros,
+      })
+    : undefined
+
+  return { price, basePrice, discount }
+}

package/src/components/credits/creditsBanner/index.tsx

@@ -0,0 +1,105 @@
+import { Button, Container, Heading, Picture, Text } from '@anker-in/headless-ui'
+import classNames from 'classnames'
+import { useCreditsContext } from '../context/provider'
+
+type Img = {
+  url: string
+  alt: string
+}
+type BannerProps = {
+  copy: {
+    pcImg: Img
+    laptopImg: Img
+    mobileImg: Img
+    joinNow: string
+    loginIn: string
+    login: {
+      title: string
+      description: string
+    }
+    unLogin: {
+      title: string
+      description: string
+    }
+  }
+}
+
+export function CreditsBanner({ copy }: BannerProps) {
+  const { profile, openSignInPopup, openSignUpPopup } = useCreditsContext()
+  const isLogin = profile ? Object.keys(profile).length !== 0 : false
+
+  const displayName = profile?.first_name
+    ? profile?.first_name + ' ' + profile?.last_name
+    : profile?.email?.split('@')[0]
+
+  const handleButtonClick = (buttonType: 'primary' | 'secondary') => {
+    buttonType === 'primary' ? openSignUpPopup() : openSignInPopup()
+  }
+
+  return (
+    <>
+      <div className=" relative w-full">
+        <Picture
+          className="aspect-h-[804] aspect-w-[1920] md:aspect-h-[660] md:aspect-w-[390] md-l:aspect-h-[660] md-l:aspect-w-[768]"
+          source={`${copy.pcImg?.url}, ${copy.laptopImg?.url} 1024, ${copy.mobileImg?.url} 768`}
+          alt={copy.pcImg?.alt}
+          loading="eager"
+        ></Picture>
+        {isLogin && (
+          <div
+            className="absolute inset-0 "
+            style={{
+              background: 'linear-gradient(180deg, rgba(245, 245, 247, 0) 70.31%, #F5F5F7 100%)',
+            }}
+          ></div>
+        )}
+
+        <Container className="l:h-auto !absolute inset-0 mx-auto grid h-full" asChild>
+          <div className="grid grid-cols-12">
+            <div className="l:col-span-12 l:justify-start l:pt-[64px] col-span-5 flex h-full flex-col justify-center text-[#1F2021]">
+              <Heading
+                as="h1"
+                size="5"
+                html={isLogin ? copy.login.title?.replace('$name', displayName || '') : copy.unLogin.title}
+              ></Heading>
+
+              <Text
+                size="3"
+                className="l:mt-[4px] l-xxl:text-[14px] mt-[16px]"
+                html={isLogin ? copy.login.description : copy.unLogin.description}
+              ></Text>
+
+              {!isLogin && (
+                <div
+                  className={classNames(
+                    'mt-[32px] grid w-fit grid-flow-col gap-[12px] l:mt-[24px]',
+                    isLogin && 'hidden'
+                  )}
+                >
+                  <Button
+                    variant="secondary"
+                    size="lg"
+                    onClick={() => {
+                      handleButtonClick('primary')
+                    }}
+                  >
+                    {copy.joinNow}
+                  </Button>
+                  <Button
+                    variant="primary"
+                    size="lg"
+                    onClick={() => {
+                      handleButtonClick('secondary')
+                    }}
+                  >
+                    {copy.loginIn}
+                  </Button>
+                </div>
+              )}
+            </div>
+          </div>
+        </Container>
+      </div>
+    </>
+  )
+}

package/src/components/credits/creditsBenefits/benefitItem.tsx

@@ -0,0 +1,73 @@
+import { Heading, Picture, Text } from '@anker-in/headless-ui'
+import { cn } from '../../../helpers/utils'
+import IconInfo from './iconInfo'
+
+export interface BenefitItemCopy {
+  icon: {
+    alt: string
+    url: string
+  }
+  text: string
+  note?: string
+  tag?: string
+}
+const BenefitItem = ({
+  item,
+  handleClick,
+  isNoteActive,
+  index,
+}: {
+  item: BenefitItemCopy
+  handleClick: ({ item, index }: { item: BenefitItemCopy; index: number }) => void
+  isNoteActive: boolean
+  index: number
+}) => {
+  return (
+    <div
+      className="relative h-full rounded-[16px] border border-white px-[24px] pb-[26px] pt-[24px] md:min-h-[180px] md:p-[16px]"
+      style={{
+        background: 'linear-gradient(119.61deg, #FAFAFA 38.58%, #FFFFFF 63.73%, #F9FCFF 89.37%)',
+      }}
+    >
+      <div className="flex flex-col">
+        <Picture
+          className="mb-[16px] size-[31px] md:absolute md:bottom-[16px] md:right-[16px] md:mb-0"
+          alt={item.icon?.alt}
+          source={item.icon?.url}
+        />
+        <div className="flex items-center">
+          <Heading html={item.text} size="2" className="break-all" />
+          {item.note && (
+            <div
+              role="button"
+              tabIndex={0}
+              onKeyDown={e => {
+                if (e.key === 'Enter' || e.key === ' ') {
+                  e.preventDefault()
+                }
+              }}
+              className="relative mb-1 ml-[4px]"
+              onClick={() => handleClick({ item, index })}
+            >
+              <IconInfo />
+              <div
+                className={cn(
+                  'absolute -bottom-[12px] left-[32px] z-10 w-[356px] -translate-x-full translate-y-full md:w-[276px]',
+                  isNoteActive ? 'block' : 'hidden'
+                )}
+              >
+                <div className="relative rounded-[10px] bg-[#6D6D6F] p-[16px] text-[14px] font-medium text-white shadow">
+                  <Text as="p" size="2" html={item.note} className="desktop:text-[18px]" />
+                  <div className="absolute -top-[10px] right-[9px] mb-2 size-[16px] origin-top-left rotate-45 transform rounded-[2px] bg-[#6D6D6F]" />
+                </div>
+              </div>
+            </div>
+          )}
+        </div>
+        {item.tag && <Text as="div" html={item.tag} className="mt-[2px] text-[16px] font-bold text-[#6D6D6F]" />}
+      </div>
+    </div>
+  )
+}
+
+export default BenefitItem

package/src/components/credits/creditsBenefits/iconInfo.tsx

@@ -0,0 +1,23 @@
+export const IconInfo = () => {
+  return (
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      className='size-[18px] cursor-pointer [&_svg]:size-full'
+      width='18'
+      height='18'
+      viewBox='0 0 18 18'
+      fill='none'
+    >
+      <path
+        d='M9 1.125C11.1744 1.125 13.1441 2.00737 14.5684 3.43164C15.9926 4.85593 16.875 6.8256 16.875 9C16.875 11.1744 15.9926 13.1441 14.5684 14.5684C13.1441 15.9926 11.1744 16.875 9 16.875C6.8256 16.875 4.85593 15.9926 3.43164 14.5684C2.00737 13.1441 1.125 11.1744 1.125 9C1.125 6.8256 2.00738 4.85593 3.43164 3.43164C4.85593 2.00738 6.8256 1.125 9 1.125ZM9 2.625C7.23941 2.625 5.64668 3.33772 4.49219 4.49219C3.33772 5.64668 2.625 7.23941 2.625 9C2.625 10.7606 3.33772 12.3533 4.49219 13.5078C5.64668 14.6623 7.23941 15.375 9 15.375C10.7606 15.375 12.3533 14.6623 13.5078 13.5078C14.6623 12.3533 15.375 10.7606 15.375 9C15.375 7.23941 14.6623 5.64668 13.5078 4.49219C12.3533 3.33772 10.7606 2.625 9 2.625Z'
+        fill='#6D6D6F'
+      />
+      <path
+        d='M9 11.583C9.51777 11.583 9.9375 12.0027 9.9375 12.5205V12.5596C9.93718 13.0771 9.51757 13.4971 9 13.4971C8.48243 13.4971 8.06282 13.0771 8.0625 12.5596V12.5205C8.0625 12.0027 8.48223 11.583 9 11.583ZM8.99902 4.5C9.51671 4.49959 9.93696 4.91886 9.9375 5.43652L9.94043 9.37109C9.94084 9.88884 9.52165 10.3091 9.00391 10.3096C8.48616 10.31 8.06587 9.89079 8.06543 9.37305L8.0625 5.43848C8.06209 4.92079 8.48136 4.50054 8.99902 4.5Z'
+        fill='#6D6D6F'
+      />
+    </svg>
+  )
+}
+
+export default IconInfo

package/src/components/credits/creditsBenefits/index.tsx

@@ -0,0 +1,119 @@
+import 'swiper/css'
+import 'swiper/css/grid'
+import 'swiper/css/pagination'
+
+import { Container, Heading } from '@anker-in/headless-ui'
+import { useRouter } from 'next/router'
+import { useState } from 'react'
+import { Grid, Pagination } from 'swiper/modules'
+import { Swiper, SwiperSlide } from 'swiper/react'
+
+import BenefitItem, { type BenefitItemCopy } from './benefitItem'
+import { useCreditsContext } from '../context/provider'
+import { gaTrack, getGtmGroup } from '../../../helpers/track'
+import { cn } from '../../../helpers/utils'
+
+interface CreditsBenefitsProps {
+  copy: {
+    title: string
+    benefits: BenefitItemCopy[]
+  }
+}
+
+export const CreditsBenefits = ({ copy }: CreditsBenefitsProps) => {
+  const [activeNoteIndex, setActiveNoteIndex] = useState<number | null>(null)
+  const { profile } = useCreditsContext()
+  const router = useRouter()
+
+  const handleClick = ({ item, index }: { item: BenefitItemCopy; index: number }) => {
+    gaTrack({
+      event: 'ga4Event',
+      event_name: 'lp_button',
+      member_active_status: profile?.activated ? 'active' : 'not active',
+      event_parameters: {
+        page_group: getGtmGroup(router),
+        position: copy.title,
+        button_name: item.text,
+        info: '',
+      },
+    })
+    if (activeNoteIndex === index) {
+      setActiveNoteIndex(null)
+    } else {
+      setActiveNoteIndex(index)
+      setTimeout(() => {
+        setActiveNoteIndex(null)
+      }, 5000)
+    }
+  }
+
+  return (
+    <Container id="benefits" className="!z-[30] bg-[#F5F5F7]">
+      <Heading as="h2" size="4" html={copy?.title} />
+      <div className="mt-[24px] grid grid-cols-2 gap-[16px] l:hidden min-md:grid-cols-3 min-xl:grid-cols-4">
+        {copy.benefits.map((item, index) => (
+          <BenefitItem
+            key={index}
+            item={item}
+            handleClick={handleClick}
+            isNoteActive={activeNoteIndex === index}
+            index={index}
+          />
+        ))}
+      </div>
+      <div className="mt-[24px] hidden l:block">
+        <Swiper
+          spaceBetween={16}
+          slidesPerView={2}
+          slidesPerGroup={2}
+          grid={{
+            rows: 2,
+            fill: 'row',
+          }}
+          breakpoints={{
+            768: {
+              slidesPerView: 3,
+              slidesPerGroup: 3,
+            },
+          }}
+          wrapperClass="items-stretch"
+          modules={[Grid, Pagination]}
+          pagination={{
+            clickable: true,
+            el: '#benefits-pagination',
+            renderBullet(index, className) {
+              return `<div class='${className}  !flex justify-center size-[8px] rounded-full bg-[#D9D9D9] cursor-pointer items-center'>
+              </div>`
+            },
+          }}
+        >
+          {copy.benefits.map((item, index) => (
+            <SwiperSlide key={index} className={cn('!h-auto', activeNoteIndex === index && '!z-[100]')}>
+              <BenefitItem
+                item={item}
+                handleClick={handleClick}
+                isNoteActive={activeNoteIndex === index}
+                index={index}
+              />
+            </SwiperSlide>
+          ))}
+        </Swiper>
+        <div
+          id="benefits-pagination"
+          className="mx-auto mt-[12px] grid !w-fit grid-flow-col [&_.swiper-pagination-bullet-active>div]:!bg-[#151515] 
+          [&_.swiper-pagination-bullet]:cursor-pointer [&_.swiper-pagination-bullet]:rounded-full"
+        ></div>
+      </div>
+
+      {activeNoteIndex && (
+        <div
+          role="button"
+          tabIndex={0}
+          className="fixed inset-0 z-10"
+          onClick={() => setActiveNoteIndex(null)}
+          onKeyDown={e => e.key === 'Escape' && setActiveNoteIndex(null)}
+        />
+      )}
+    </Container>
+  )
+}

package/src/components/credits/creditsCash/RedeemableItem.tsx

@@ -0,0 +1,216 @@
+import { Button, Text, Picture } from '@anker-in/headless-ui'
+import { useMemo } from 'react'
+import { cn } from '../../../helpers'
+
+import { CreditsCashCopy, RedeemItem } from './type'
+import { useCreditsContext } from '../context/provider'
+import { useRedeemAndBuy } from '../context/hooks/useRedeemAndBuy'
+import { numberFormat } from '../context/utils'
+import { gaTrack } from '../../../helpers/track'
+
+function RedeemableItem({
+  copy,
+  itemData,
+  setRules,
+  className,
+  authCodeActivate,
+}: {
+  copy: CreditsCashCopy
+  itemData: RedeemItem
+  className?: string
+  setRules: (rules: string[]) => void
+  currencyCode: string
+  authCodeActivate: {
+    openAuthCodePopup: Function
+    isSuccess: boolean
+    setOnSuccess: (arg: Function) => void
+    isSendingActivateEmail: boolean
+  }
+}) {
+  const {
+    creditInfo,
+    profile,
+    openSignUpPopup,
+    gtm: { pageGroup },
+  } = useCreditsContext()
+  const { trigger, isMutating } = useRedeemAndBuy()
+
+  const isLogin = useMemo(() => {
+    return !!profile
+  }, [profile?.activated])
+
+  const inSufficientCredit = useMemo(() => {
+    return (
+      isLogin && profile?.activated && itemData.alpcData?.consumeCredits > Number(creditInfo?.available_credit || 0)
+    )
+  }, [isLogin, profile?.activated, itemData.alpcData?.consumeCredits, creditInfo?.available_credit])
+
+  const isDisabled = useMemo(() => {
+    // 兑换限制
+    if (itemData.alpcData?.remainingInventory <= 0 && itemData.alpcData?.isLimited) {
+      return true
+    }
+
+    // 商品库存限制
+    if (!itemData.productVariant?.availableForSale) {
+      return true
+    }
+
+    // 积分不足
+    if (inSufficientCredit) {
+      return true
+    }
+    return false
+  }, [
+    itemData.alpcData?.remainingInventory,
+    itemData.alpcData?.isLimited,
+    itemData.productVariant?.availableForSale,
+    inSufficientCredit,
+  ])
+
+  const handleRedeem = () => {
+    if (!isLogin) {
+      openSignUpPopup()
+    } else if (!profile?.activated && !(authCodeActivate.isSendingActivateEmail || authCodeActivate.isSuccess)) {
+      authCodeActivate.openAuthCodePopup()
+      authCodeActivate.setOnSuccess(async () => {
+        const { success, url, error } = await trigger({
+          productVariant: itemData?.productVariant,
+          redeemId: itemData?.config?.redeemId,
+        })
+        if (success) {
+          window.open(url, '_blank')
+        } else {
+          console.error(error)
+        }
+      })
+    } else {
+      try {
+        trigger({
+          productVariant: itemData?.productVariant,
+          redeemId: itemData?.config?.redeemId,
+        })
+      } catch (error) {}
+      gaTrack({
+        event: 'ga4Event',
+        event_name: 'lp_button',
+        member_active_status: profile?.activated ? 'active' : 'not active',
+        event_parameters: {
+          page_group: pageGroup,
+          position: copy.title,
+          button_name: redeemButtonText,
+          info: itemData?.alpcData?.id?.toString(),
+        },
+      })
+    }
+  }
+
+  const redeemButtonText = useMemo(() => {
+    // 缺货文案
+    if (!itemData.productVariant?.availableForSale) {
+      return copy?.soldOut || 'Sold Out'
+    } else if (!isLogin) {
+      return copy.unlockRewards
+    } else {
+      return copy.btnRedeem
+    }
+  }, [isLogin, itemData.productVariant?.availableForSale, copy.btnRedeem, copy.unlockRewards, copy?.soldOut])
+
+  return (
+    <div
+      className={cn(
+        'flex flex-col items-center rounded-[16px] bg-[#EAEAEC] p-[24px] md:rounded-[12px] md:px-[8px] xl:py-[16px] md-xl:px-[16px]',
+        className
+      )}
+    >
+      <div className={cn('relative mx-auto h-[224px] w-fit l:h-[120px] l-xxl:h-[138px]')}>
+        <Picture
+          className="mx-auto h-full w-auto"
+          imgClassName="h-full object-contain"
+          source={
+            itemData?.config?.image?.url ||
+            itemData?.productVariant?.metafields?.global?.transparentImg ||
+            itemData?.productVariant?.image?.url
+          }
+        ></Picture>
+      </div>
+      <div className={cn('mt-[22px] w-full l:mt-[8px]')}>
+        <Text
+          html={itemData?.product?.title}
+          title={itemData.config?.title || itemData.alpcData?.title || itemData.product?.title}
+          size={2}
+          className="line-clamp-2 h-[58px] text-[24px] leading-[1.2] l:line-clamp-3 l:h-[56px] l:text-[16px] l-xxl:h-[48px] l-xxl:text-[20px]"
+        />
+        {itemData?.config?.rules?.split('<br>')?.length > 0 && (
+          <button
+            type="button"
+            onClick={() => {
+              setRules(itemData?.config?.rules?.split('<br>'))
+              gaTrack({
+                event: 'ga4Event',
+                event_name: 'lp_button',
+                member_active_status: profile?.activated ? 'active' : 'not active',
+                event_parameters: {
+                  page_group: pageGroup,
+                  position: copy.title,
+                  button_name: copy?.ruleLabel,
+                  info: itemData?.alpcData?.id?.toString(),
+                },
+              })
+            }}
+            className="mt-[8px] text-[16px] font-bold underline xxl:text-[14px]"
+            tabIndex={0}
+            onKeyDown={e => {
+              if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault()
+              }
+            }}
+          >
+            {copy?.ruleLabel}
+          </button>
+        )}
+        <div className="mt-[24px] flex items-center l:mt-[12px] laptop:text-[16px] lg-desktop:text-[18px]">
+          <Picture
+            className="size-[20px]"
+            source="https://cdn.shopify.com/s/files/1/0511/6346/3874/files/icon_hire_purchase.png?v=1757496783"
+          />
+          <Text
+            html={`${numberFormat(itemData?.alpcData?.consumeCredits)} + ${itemData?.config?.price}`}
+            size={2}
+            as="p"
+            className="ml-[4px] text-[28px] font-bold leading-[1.2] md:text-[18px] l-xxl:text-[24px] md-l:text-[20px] "
+          />
+        </div>
+
+        <div className="group relative w-full">
+          <Button
+            disabled={isDisabled}
+            variant="primary"
+            size="lg"
+            className="mt-[8px] md:px-[10px] l:w-full"
+            loading={isMutating}
+            onClick={() => {
+              handleRedeem()
+            }}
+            title={inSufficientCredit ? 'Insufficient credit' : redeemButtonText}
+          >
+            {redeemButtonText}
+          </Button>
+          <div
+            className={cn(
+              'absolute -bottom-[20px] left-0 z-10 w-[300px] translate-y-full opacity-0 transition-opacity group-hover:opacity-100 md:-bottom-[14px] md:w-[160px]',
+              inSufficientCredit ? 'block' : 'hidden'
+            )}
+          >
+            <div className="relative rounded-[10px] bg-[#6D6D6F] p-[16px] text-[14px] font-medium text-white shadow md:px-[10px] md:py-[8px]">
+              <Text as="p" size="2" html={copy?.insufficientCredits} className="text-[14px]" />
+              <div className="absolute -top-[10px] left-[48px] mb-2 size-[16px] origin-top-left rotate-45 transform rounded-[2px] bg-[#6D6D6F]" />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default RedeemableItem