@anker-in/campaign-ui 0.5.0-beta.2 → 0.5.0-beta.3

package/src/components/memberPopup/panels/ConsumeCredits/RedeemCouponModal.tsx

@@ -1,150 +0,0 @@
-import { useCallback, useEffect, useState } from 'react'
-import { Button, Text } from '@anker-in/headless-ui'
-import { classNames as cn } from '@anker-in/lib'
-import { CreditsModalContainer } from '../../../credits/modal/ModalContainer'
-import { AlpcErrorCode } from '../../../credits/context/const'
-import { useRedeemCoupon } from './hooks/useRedeemCoupon'
-import useCopy from '../../../credits/context/hooks/useCopy'
-import type { RedeemCouponModalCopy, AlpcConfig } from '../../type'
-
-type Props = {
-  isOpen: boolean
-  onClose: () => void
-  itemTitle: string
-  itemCredits: number
-  itemImage?: { url: string; alt?: string }
-  redeemId: number
-  userId?: string
-  copy: RedeemCouponModalCopy
-  pointUnit?: string
-  alpcConfig: AlpcConfig
-  onError?: (code: number) => void
-}
-
-export function RedeemCouponModal({
-  isOpen,
-  onClose,
-  itemTitle,
-  itemCredits,
-  itemImage,
-  redeemId,
-  userId,
-  copy,
-  pointUnit = 'pts',
-  alpcConfig,
-  onError,
-}: Props) {
-  const [couponCode, setCouponCode] = useState<string>()
-  const [errorInfo, setErrorInfo] = useState('')
-  const [disabled, setDisabled] = useState(false)
-  const { copy: copyText, copied } = useCopy()
-
-  const { isMutating: loading, trigger } = useRedeemCoupon(alpcConfig)
-
-  const handleConfirm = useCallback(async () => {
-    setErrorInfo('')
-    const { data } = await trigger({ user_id: userId, rule_id: redeemId })
-    if (!data) {
-      setErrorInfo(copy.commonError)
-      return
-    }
-    if (data.data?.success) {
-      setCouponCode(data.data.coupon_code)
-    } else {
-      let msg = copy.commonError
-      if (data.code === AlpcErrorCode.CodeLpcShopifyCouponRuleRedeemLimit) {
-        msg = copy.redeemLimitError
-        setDisabled(true)
-      } else if (data.code === AlpcErrorCode.CodeLpcRuleInventoryNotEnough) {
-        msg = copy.inventoryNotEnough
-        setDisabled(true)
-      } else if (data.code === AlpcErrorCode.CodeLpcNotEnoughCredits) {
-        msg = copy.creditsNotEnough
-        setDisabled(true)
-      } else if (data.code === AlpcErrorCode.CodeCrossSiteError) {
-        msg = copy.crossSiteError
-        setDisabled(true)
-      }
-      setErrorInfo(msg)
-      onError?.(data.code)
-    }
-  }, [trigger, userId, redeemId, copy, onError])
-
-  useEffect(() => {
-    if (!isOpen) {
-      setCouponCode(undefined)
-      setErrorInfo('')
-      setDisabled(false)
-    }
-  }, [isOpen])
-
-  return (
-    <CreditsModalContainer
-      isOpen={isOpen}
-      onClose={onClose}
-      className="w-[540px] md:h-auto"
-      scrollClassName="mb-[40px] px-0 min-l:px-0 md:mb-[24px]"
-      titleClassName="h-[56px] bg-[#f5f5f7]"
-    >
-      <div className="bg-[#f5f5f7] px-[48px] pb-[24px] md:px-[16px]">
-        {itemImage?.url && (
-          <div className="relative mx-auto h-[164px] w-[324px]">
-            <img src={itemImage.url} alt={itemImage.alt ?? ''} className="h-full w-full object-cover" />
-          </div>
-        )}
-        <p className={cn('mt-[30px] text-center text-[24px] font-bold md:mt-[18px] md:text-[20px]')}>
-          {itemCredits} {pointUnit}
-        </p>
-      </div>
-
-      <div className="bg-white px-[48px] pt-[24px] text-center md:px-[16px]">
-        {!couponCode ? (
-          <>
-            <Text className="block text-[24px] font-bold md:text-[20px]" html={copy.confirmTitle} />
-            <Button
-              loading={loading}
-              variant="primary"
-              size="lg"
-              className="mt-[16px] w-full"
-              onClick={handleConfirm}
-              disabled={disabled}
-            >
-              {copy.confirmButton}
-            </Button>
-          </>
-        ) : (
-          <>
-            <div className="flex items-center justify-center gap-[10px]">
-              <span className="text-[24px] font-bold">{couponCode}</span>
-              <button
-                className={cn('text-[16px] font-bold underline', copied && 'pointer-events-none')}
-                onClick={() => copyText(couponCode)}
-              >
-                {copied ? 'Copied' : 'Copy'}
-              </button>
-            </div>
-            <Text className="mb-[4px] mt-[16px] text-[24px] font-bold md:text-[20px]" html={copy.successTitle} />
-            <Text className="text-[16px] font-bold text-[#6d6d6f] md:text-[14px]" html={copy.successDesc} />
-            <Button
-              variant="primary"
-              size="lg"
-              className="mt-[16px] w-full"
-              onClick={() => {
-                if (copy.successButtonUrl) window.location.href = copy.successButtonUrl
-                onClose()
-              }}
-            >
-              {copy.successButton}
-            </Button>
-          </>
-        )}
-      </div>
-
-      {errorInfo && (
-        <div className="bg-white px-[48px] py-[12px] text-center md:px-[16px]">
-          <Text className="text-[14px] font-semibold text-[#ff0000]" html={errorInfo} />
-        </div>
-      )}
-    </CreditsModalContainer>
-  )
-}

package/src/components/memberPopup/panels/ConsumeCredits/RedeemCouponPanel.tsx

@@ -1,142 +0,0 @@
-import { useCallback, useEffect, useState } from 'react'
-import { Text, Button } from '@anker-in/headless-ui'
-import { useHeadlessContext, classNames as cn } from '@anker-in/lib'
-import { AlpcErrorCode } from '../../../credits/context/const'
-import { useRedeemCoupon } from './hooks/useRedeemCoupon'
-import useCopy from '../../../credits/context/hooks/useCopy'
-import type { RedeemCouponModalCopy, AlpcConfig } from '../../type'
-import { ROUNDED_BRANDS } from '../../../../constants'
-
-type Props = {
-  onClose: () => void
-  itemTitle: string
-  itemCredits: number
-  itemImage?: { url: string; alt?: string }
-  itemValue?: string
-  itemOff?: string
-  redeemId: number
-  userId?: string
-  copy: RedeemCouponModalCopy
-  pointUnit?: string
-  alpcConfig: AlpcConfig
-  onError?: (code: number) => void
-}
-
-export default function RedeemCouponPanel({
-  onClose,
-  itemTitle,
-  itemCredits,
-  itemImage,
-  itemValue,
-  itemOff,
-  redeemId,
-  userId,
-  copy,
-  pointUnit = 'pts',
-  alpcConfig,
-  onError,
-}: Props) {
-  const [couponCode, setCouponCode] = useState<string>()
-  const [errorInfo, setErrorInfo] = useState('')
-  const [disabled, setDisabled] = useState(false)
-  const { copy: copyText, copied } = useCopy()
-  const { brand } = useHeadlessContext()
-  const rounded = ROUNDED_BRANDS.includes(brand)
-
-  const { isMutating: loading, trigger } = useRedeemCoupon(alpcConfig)
-
-  const handleConfirm = useCallback(async () => {
-    setErrorInfo('')
-    const { data } = await trigger({ user_id: userId, rule_id: redeemId })
-    if (!data) {
-      setErrorInfo(copy.commonError)
-      return
-    }
-    if (data.data?.success) {
-      setCouponCode(data.data.coupon_code)
-    } else {
-      let msg = copy.commonError
-      if (data.code === AlpcErrorCode.CodeLpcShopifyCouponRuleRedeemLimit) {
-        msg = copy.redeemLimitError
-        setDisabled(true)
-      } else if (data.code === AlpcErrorCode.CodeLpcRuleInventoryNotEnough) {
-        msg = copy.inventoryNotEnough
-        setDisabled(true)
-      } else if (data.code === AlpcErrorCode.CodeLpcNotEnoughCredits) {
-        msg = copy.creditsNotEnough
-        setDisabled(true)
-      } else if (data.code === AlpcErrorCode.CodeCrossSiteError) {
-        msg = copy.crossSiteError
-        setDisabled(true)
-      }
-      setErrorInfo(msg)
-      onError?.(data.code)
-    }
-  }, [trigger, userId, redeemId, copy, onError])
-
-  useEffect(() => {
-    setCouponCode(undefined)
-    setErrorInfo('')
-    setDisabled(false)
-  }, [redeemId])
-
-  return (
-    <div className="flex flex-col gap-[16px]">
-      {itemImage?.url && (
-        <div className={cn('relative overflow-hidden w-fit mx-auto', rounded ? 'rounded-[8px]' : 'rounded-none')}>
-          <img src={itemImage.url} alt={itemImage.alt ?? ''} className="mx-auto h-[140px] object-contain" />
-          {itemValue && (
-            <div className="absolute bottom-[20px] left-[20px] text-[32px] font-[800] leading-none text-white">
-              {itemValue}
-              {itemOff ? ` ${itemOff}` : ''}
-            </div>
-          )}
-        </div>
-      )}
-
-      <p className="text-center text-[24px] font-[700] text-[#1d1d1f]">
-        {itemCredits} {pointUnit}
-      </p>
-
-      {!couponCode ? (
-        <div className="flex flex-col gap-[12px] text-center">
-          <Text className="block text-[20px] font-[700]" html={copy.confirmTitle} />
-          <Button
-            className={cn('w-full py-[12px] text-[14px] font-[700] text-white disabled:opacity-60 bg-[#080a0f]', rounded ? 'rounded-[4px]' : 'rounded-none')}
-            disabled={disabled}
-            loading={loading}
-            onClick={handleConfirm}
-          >
-            {copy.confirmButton}
-          </Button>
-        </div>
-      ) : (
-        <div className="flex flex-col gap-[12px] text-center">
-          <div className="flex items-center justify-center gap-[10px]">
-            <span className="text-[24px] font-[700]">{couponCode}</span>
-            <button
-              className="cursor-pointer text-[14px] font-[700] underline disabled:pointer-events-none"
-              disabled={copied}
-              onClick={() => copyText(couponCode)}
-            >
-              {copied ? 'Copied' : 'Copy'}
-            </button>
-          </div>
-          <Text className="text-[20px] font-[700]" html={copy.successTitle} />
-          <Text className="text-[14px] font-[700] text-[#6d6d6f]" html={copy.successDesc} />
-          <Button
-            className={cn('w-full py-[12px] text-[14px] font-[700] text-white bg-[#080a0f]', rounded ? 'rounded-[4px]' : 'rounded-none')}
-            onClick={() => {
-              if (copy.successButtonUrl) window.location.href = copy.successButtonUrl
-              onClose()
-            }}
-          >
-            {copy.successButton}
-          </Button>
-        </div>
-      )}
-
-      {errorInfo && <Text className="text-center text-[14px] font-[700] text-[#ff0000]" html={errorInfo} />}
-    </div>
-  )
-}

package/src/components/memberPopup/panels/ConsumeCredits/hooks/useRedeemAndBuy.ts

@@ -1,33 +0,0 @@
-import { useBuyNow } from '@anker-in/lib'
-import { useRedeemCoupon } from './useRedeemCoupon'
-import type { AlpcConfig } from '../../../type'
-import type { ProductVariant } from '@anker-in/lib'
-
-type RedeemAndBuyArg = {
-  productVariant: ProductVariant
-  quantity?: number
-  redeemId: number
-  userId?: string
-}
-
-export function useRedeemAndBuy(config: AlpcConfig) {
-  const { trigger: redeemTrigger } = useRedeemCoupon(config)
-  const { trigger: buyNow } = useBuyNow({}, { throwOnError: true })
-
-  const trigger = async (arg: RedeemAndBuyArg) => {
-    const { data } = await redeemTrigger({
-      user_id: arg.userId,
-      rule_id: arg.redeemId,
-    })
-    if (data?.data?.coupon_code) {
-      await buyNow({
-        discountCodes: [data.data.coupon_code],
-        lineItems: [{ variant: arg.productVariant, quantity: arg.quantity ?? 1 }],
-      })
-    } else {
-      throw new Error(data?.msg ?? 'Redeem failed')
-    }
-  }
-
-  return { trigger }
-}

package/src/components/memberPopup/panels/ConsumeCredits/hooks/useRedeemCoupon.ts

@@ -1,38 +0,0 @@
-import useSWRMutation from 'swr/mutation'
-import { getAlpcPath } from '../../../../credits/context/utils'
-import { ALPC_COUNTRY_MAP } from '../../../../credits/context/const'
-import type { AlpcConfig } from '../../../type'
-
-type RedeemCouponResponse = {
-  data: {
-    data: { success: boolean; coupon_code: string }
-    msg: string
-    code: number
-  }
-}
-
-type RedeemCouponParams = {
-  user_id?: string
-  rule_id: number
-}
-
-export function useRedeemCoupon(config: AlpcConfig) {
-  const { brand, locale, appName, apiBaseUrl } = config
-
-  return useSWRMutation<RedeemCouponResponse, Error, string, RedeemCouponParams>(
-    `/v1/credit/redeem/coupon`,
-    async (url: string, { arg }) => {
-      const response = await fetch(getAlpcPath(locale, apiBaseUrl) + url, {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json', 'current-language': locale },
-        body: JSON.stringify({
-          brand,
-          country: ALPC_COUNTRY_MAP.get(locale) || locale,
-          app_name: appName,
-          ...arg,
-        }),
-      })
-      return response.json()
-    }
-  )
-}

package/src/components/memberPopup/panels/ConsumeCredits/hooks/useRedeemableList.ts

@@ -1,55 +0,0 @@
-import { useCallback, useEffect, useState } from 'react'
-import useSWRMutation from 'swr/mutation'
-import { getAlpcPath, languageTerritory } from '../../../../credits/context/utils'
-import { ALPC_COUNTRY_MAP, AlpcConsumeType } from '../../../../credits/context/const'
-import type { ConsumeCreditRuleResponse } from '../../../../credits/context/response'
-import type { AlpcConfig } from '../../../type'
-
-export function useRedeemableList(config: AlpcConfig) {
-  const { brand, locale, appName, apiBaseUrl } = config
-
-  let resolvedLocale = locale
-  if (locale === 'pl') resolvedLocale = 'eu'
-
-  const [redeemableList, setRedeemableList] = useState<ConsumeCreditRuleResponse[]>([])
-
-  const { isMutating: listLoading, trigger } = useSWRMutation(
-    `/v1/credit/consume_credit_rules`,
-    async (url: string, { arg }: { arg: Record<string, any> }) => {
-      const response = await fetch(getAlpcPath(resolvedLocale, apiBaseUrl) + url, {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json', 'current-language': resolvedLocale },
-        body: JSON.stringify(arg),
-      })
-      return response.json()
-    }
-  )
-
-  const getRedeemableList = useCallback(
-    (consumeType?: AlpcConsumeType) => {
-      trigger(
-        {
-          brand,
-          page: 1,
-          page_size: 999,
-          country: (ALPC_COUNTRY_MAP.get(resolvedLocale) || resolvedLocale)?.toUpperCase(),
-          app_name: appName,
-          ...(consumeType !== undefined && { consume_type: consumeType }),
-        },
-        {
-          onSuccess({ data }) {
-            setRedeemableList(data?.data?.consume_credit_rules ?? [])
-          },
-        }
-      )
-    },
-    [brand, resolvedLocale, appName, trigger]
-  )
-
-  useEffect(() => {
-    if (!brand) return
-    getRedeemableList()
-  }, [brand, getRedeemableList])
-
-  return { redeemableList, listLoading, getRedeemableList }
-}

package/src/components/memberPopup/panels/ConsumeCredits/index.tsx

@@ -1,220 +0,0 @@
-import { useMemo, useState } from 'react'
-import { Picture, Button } from '@anker-in/headless-ui'
-import { classNames as cn, useProductsByHandles, useHeadlessContext } from '@anker-in/lib'
-import { useMemberPopupContext } from '../../context/provider'
-import { useViewStack } from '../../context/viewStack'
-import { useRedeemableList } from './hooks/useRedeemableList'
-import { useRedeemAndBuy } from './hooks/useRedeemAndBuy'
-import {
-  ConsumeCreditsItemType,
-  MemberPopupPanelType,
-  type ConsumeCreditsopy,
-  type ConsumeCreditsItem,
-} from '../../type'
-import { numberFormat } from '../../../credits/context/utils'
-import type { ConsumeCreditRuleResponse } from '../../../credits/context/response'
-import { ROUNDED_BRANDS } from '../../../../constants'
-
-type EnrichedItem = ConsumeCreditsItem & {
-  alpcData: ConsumeCreditRuleResponse
-  insufficient: boolean
-  soldOut: boolean
-  product?: any
-  variant?: any
-}
-
-type Props = {
-  copy: ConsumeCreditsopy
-  onClose: () => void
-}
-
-function ConsumeCredits({ copy, onClose }: Props) {
-  const { profile, creditInfo, openSignUpPopup, alpcConfig } = useMemberPopupContext()
-  const { pushView } = useViewStack()
-  const { brand } = useHeadlessContext()
-  const rounded = ROUNDED_BRANDS.includes(brand)
-
-  const [redeemAndBuyError, setRedeemAndBuyError] = useState('')
-  const [loadingId, setLoadingId] = useState<string | number | null>(null)
-
-  const isLogin = !!profile
-  const { redeemableList, listLoading } = useRedeemableList(alpcConfig)
-  const { trigger: redeemAndBuy } = useRedeemAndBuy(alpcConfig)
-
-  const handles = copy.list.map(item => item.product?.handle).filter(Boolean) as string[]
-  const { data: products } = useProductsByHandles({ handles })
-
-  const list = useMemo(() => {
-    return copy.list
-      .map(item => {
-        const alpcData = redeemableList.find(r => String(r.id) === String(item.redeemId))
-        if (!alpcData) return null
-
-        const availableCredit = Number(creditInfo?.available_credit ?? 0)
-        const insufficient = isLogin && !!profile?.activated && alpcData.consume_credits > availableCredit
-        const soldOut = alpcData.is_limited && (!alpcData.remaining_inventory || alpcData.remaining_inventory <= 0)
-
-        let product
-        let variant
-        if (item.type === ConsumeCreditsItemType.RedeemAndBuy && item.product) {
-          product = products?.find((p: any) => p.handle === item.product!.handle)
-          variant = product?.variants?.find((v: any) => v.sku === item.product!.sku) ?? product?.variants?.[0]
-          if (!product || !variant) return null
-        }
-
-        return { ...item, alpcData, insufficient, soldOut, product, variant }
-      })
-      .filter(Boolean) as EnrichedItem[]
-  }, [copy.list, redeemableList, creditInfo, profile, isLogin, products])
-
-  function getButtonLabel(item: (typeof list)[number]) {
-    if (!isLogin) return copy.unlockRewards
-    if (item.soldOut) return copy.soldOut
-    return copy.btnRedeem
-  }
-
-  function isDisabled(item: (typeof list)[number]) {
-    return item.soldOut || item.insufficient
-  }
-
-  async function handleRedeem(item: (typeof list)[number]) {
-    if (!isLogin) {
-      openSignUpPopup()
-      return
-    }
-    if (item.type === ConsumeCreditsItemType.Coupon) {
-      pushView({
-        type: MemberPopupPanelType.RedeemCoupon,
-        props: {
-          itemTitle: item.title,
-          itemCredits: item.alpcData.consume_credits,
-          itemImage: copy.imageMapping?.[item.type]
-            ? { url: copy.imageMapping[item.type]!.url, alt: item.image?.alt }
-            : item.image,
-          itemValue: item.value,
-          itemOff: copy.off,
-          redeemId: Number(item.redeemId),
-          userId: profile?.user_id,
-          alpcConfig,
-        },
-      })
-    } else {
-      setRedeemAndBuyError('')
-      setLoadingId(item.redeemId)
-      try {
-        await redeemAndBuy({
-          productVariant: item.variant,
-          redeemId: Number(item.redeemId),
-          userId: profile?.user_id,
-        })
-      } catch (e: any) {
-        setRedeemAndBuyError(e?.message ?? copy.redeemModal.commonError)
-      } finally {
-        setLoadingId(null)
-      }
-    }
-  }
-
-  return (
-    <>
-      <div className="flex flex-1 flex-col gap-[12px]">
-        <div className="flex flex-col gap-[8px]">
-          {copy.title && <h2 className="text-[24px] font-[700] leading-[1.2] text-[#080a0f]">{copy.title}</h2>}
-          {copy.subtitle && <p className="text-[16px] font-[700] leading-snug text-[#4a4c56]">{copy.subtitle}</p>}
-        </div>
-
-        {copy.insufficientCredits && creditInfo && (
-          <div className="text-[14px] font-[700] text-[#1d1d1f]">
-            {copy.insufficientCredits}: {numberFormat(creditInfo.available_credit)} {copy.pointUnit}
-          </div>
-        )}
-        {redeemAndBuyError && <div className="text-[14px] font-[700] text-[#f84d4f]">{redeemAndBuyError}</div>}
-
-        {listLoading ? (
-          <div className="flex flex-1 items-center justify-center py-[32px]">
-            <div className="size-[32px] animate-spin rounded-full border-[3px] border-[#080a0f] border-t-transparent" />
-          </div>
-        ) : (
-          <div className="flex flex-col">
-          {list.map((item, idx) => (
-            <div key={idx} className="relative py-[16px]">
-              {idx > 0 && <div className="absolute inset-x-0 top-0 h-px bg-[#dadce0]" />}
-              <div className="flex items-center gap-[12px]">
-                {(() => {
-                  const isRedeemAndBuy = item.type === ConsumeCreditsItemType.RedeemAndBuy
-                  const mappedImgUrl = copy.imageMapping?.[item.type]?.url
-                  const imgUrl = isRedeemAndBuy
-                    ? (item.variant?.image?.url ?? item.product?.images?.[0]?.url ?? item.image?.url)
-                    : (mappedImgUrl ?? item.image?.url)
-                  const imgAlt = isRedeemAndBuy
-                    ? (item.variant?.image?.altText ?? item.product?.images?.[0]?.alt ?? item.image?.alt ?? '')
-                    : (item.image?.alt ?? '')
-                  if (!imgUrl) return null
-                  return (
-                    <div className={cn('relative size-[64px] shrink-0 overflow-hidden', rounded ? 'rounded-[4px]' : 'rounded-none')}>
-                      <Picture
-                        source={imgUrl}
-                        alt={imgAlt}
-                        className="flex size-full items-center justify-center"
-                        imgClassName={isRedeemAndBuy ? 'object-cover' : 'h-full w-auto object-contain'}
-                      />
-                      {!isRedeemAndBuy && item.value && (
-                        <div className="absolute bottom-[20px] left-[4px] text-[14px] font-[800] leading-none text-white">
-                          {item.value} {copy.off}
-                        </div>
-                      )}
-                    </div>
-                  )
-                })()}
-                <div className="min-w-0 flex-1">
-                  <div className="text-[16px] font-[700] text-[#1e2024] line-clamp-2">
-                    {item.type === ConsumeCreditsItemType.RedeemAndBuy && item.product?.title
-                      ? item.product.title
-                      : item.title}
-                  </div>
-                  <div className="mt-[4px] text-[14px] text-[#666]">
-                    {item.type === ConsumeCreditsItemType.RedeemAndBuy && item.price != null
-                      ? `${numberFormat(item.alpcData.consume_credits)} ${copy.pointUnit ?? ''} + $${Number(item.price).toFixed(2)}`
-                      : `${numberFormat(item.alpcData.consume_credits)} ${copy.pointUnit ?? ''}`}
-                  </div>
-                </div>
-                <div className="relative group">
-                  <Button
-                    className={cn('bg-[#080a0f] px-[20px] pb-[10px] pt-[11px] text-[14px] font-[700] leading-[1.2] text-white', rounded ? 'rounded-[4px]' : 'rounded-none')}
-                    disabled={isDisabled(item)}
-                    loading={loadingId === item.redeemId}
-                    onClick={() => handleRedeem(item)}
-                  >
-                    {getButtonLabel(item)}
-                  </Button>
-                  {item.insufficient && (
-                    <div className="pointer-events-none absolute left-[48px] top-full mt-[10px] hidden -translate-x-1/2 group-hover:block">
-                      <div className="relative bg-[#6D6D6F] p-[16px] text-[14px] font-[700] text-white shadow md:px-[10px] md:py-[8px]">
-                        <p className="text-pretty tracking-[-0.02em] text-[14px]">{copy.insufficientCredits}</p>
-                        <div className="absolute -top-[8px] left-[48px] size-[16px] origin-top-left rotate-45 rounded-[2px] bg-[#6D6D6F]" />
-                      </div>
-                    </div>
-                  )}
-                </div>
-              </div>
-            </div>
-          ))}
-        </div>
-        )}
-
-        {copy.creditsPage?.url && (
-          <a
-            href={copy.creditsPage.url}
-            target="_blank"
-            rel="noopener noreferrer"
-            className="mt-auto self-start text-[14px] font-[700] text-[#080a0f] underline"
-          >
-            {copy.creditsPage.label ?? 'Go to Credits Page'}
-          </a>
-        )}
-      </div>
-    </>
-  )
-}
-
-export default ConsumeCredits