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

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

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

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

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

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

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

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