@anker-in/campaign-ui 0.2.10-beta.8 → 0.2.11-beta.2

package/src/components/credits/modal/MyRewardsModal.tsx

@@ -9,6 +9,7 @@ import { CreditsModalContainer, type ModalContainerProps } from './modalContaine
 import Tip from './tip'
 import LoadingDots from './loadingDots'
 import useMyRewards from '../context/hooks/useMyRewards'
+import { useHeadlessContext, ROUNDED_BRANDS } from '@anker-in/lib'
 
 export interface MyRewardsMetafields {
   title: string
@@ -26,12 +27,15 @@ export interface MyRewardsMetafields {
   pendingTip: string
   processingTip: string
   ShippedTip: string
-  emptyListImageUrl: string
   emptyListLabel: string
   pointUnit: string
   code: string
   copied: string
   copy: string
+  emptyListImage: {
+    url: string
+    alt?: string
+  }
 }
 interface MyRewardsModalProps extends ModalContainerProps {
   data: MyRewardsMetafields
@@ -39,6 +43,8 @@ interface MyRewardsModalProps extends ModalContainerProps {
 
 function MyRewardsModal({ data, ...props }: MyRewardsModalProps) {
   const [activeTab, setActiveTab] = useState(AlpcConsumeType.Coupon)
+  const { brand } = useHeadlessContext()
+  const rounded = ROUNDED_BRANDS.includes(brand)
 
   const [couponPage, setCouponPage] = useState(1)
   const [productPage, setProductPage] = useState(1)
@@ -206,20 +212,22 @@ function MyRewardsModal({ data, ...props }: MyRewardsModalProps) {
     }, 2000)
   }, [])
 
+  const isLoading = activeTab === AlpcConsumeType.Coupon ? couponIsLoading : productIsLoading
+
   return (
     <CreditsModalContainer
       title={data.title}
       className={classNames('h-[800px] w-[640px]')}
       useAnimation
       animationClassName="md:translate-y-[100vh]"
-      scrollClassName="min-l:px-0 md:mb-0 md:px-0"
+      scrollClassName="md:mb-0"
       {...props}
       onScrollEnd={handleScrollEnd}
     >
-      <div className="px-[24px] md:px-[16px]">
+      <div className="">
         <Tabs
           align="left"
-          shape="rounded"
+          shape={rounded ? 'rounded' : 'square'}
           value={activeTab.toString()}
           onValueChange={value => {
             setActiveTab(Number(value))
@@ -235,73 +243,85 @@ function MyRewardsModal({ data, ...props }: MyRewardsModalProps) {
         </Tabs>
       </div>
 
-      <div className="mt-[24px] overflow-auto overscroll-contain px-[24px] md:px-[16px]">
-        {!list.length && !couponIsLoading && !productIsLoading && (
-          <div className="flex h-full flex-col items-center justify-center">
-            <Picture className="mb-[12px] w-[160px]" src={data?.emptyListImageUrl}></Picture>
-            <div className="text-[16px] font-semibold leading-[1.4]">{data?.emptyListLabel}</div>
-          </div>
-        )}
-        {couponIsLoading ||
-          (productIsLoading && (
-            <div className="flex h-full flex-col items-center justify-center">
-              <LoadingDots />
-            </div>
-          ))}
-        <div className="grid gap-[18px] md:gap-[12px]">
-          {list.map((item, index) => (
-            <div key={index} className="grid gap-[8px]">
-              {item?.orderNumber && (
-                <div className="text-[15px] font-semibold leading-[1.4] text-[#777]">
-                  {data.orderNumberLabel}: {item.orderNumber}
-                </div>
-              )}
-              <div className="flex items-center justify-between rounded-[8px] bg-[#f7f8f9] px-[16px] py-[20px]">
-                <div className="grid gap-[4px]">
-                  <div className="text-[16px] font-bold leading-[1.4]">{item.title}</div>
-                  <div className="text-[14px] font-semibold text-[#999]">
-                    {data.valueLabel}: {item.value} {data?.pointUnit}
-                  </div>
-                  <div className="text-[14px] font-semibold text-[#999]">
-                    {item?.couponCode ? `${data?.code || 'Code'}: ${item.couponCode} ` : ''}
-                    {item?.couponCode && (
-                      <span
-                        className="cursor-pointer text-[14px] font-semibold text-brand underline"
-                        onClick={() => {
-                          handleCopy(item.couponCode, index)
-                        }}
-                        role="button"
-                        tabIndex={0}
-                        onKeyDown={e => {
-                          if (e.key === 'Enter' || e.key === ' ') {
-                            e.preventDefault()
-                          }
-                        }}
-                      >
-                        {copied === index ? data?.copied || 'COPIED' : data?.copy || 'COPY'}
-                      </span>
-                    )}
-                  </div>
-                </div>
-                <div className="grid gap-[4px] text-right">
+      {isLoading && (
+        <div className="flex h-full flex-col items-center justify-center">
+          <LoadingDots />
+        </div>
+      )}
+
+      {!isLoading && (
+        <div className="mt-[24px] overflow-auto overscroll-contain">
+          {list.length > 0 ? (
+            <div className="grid gap-[18px] md:gap-[12px]">
+              {list.map((item, index) => (
+                <div key={index} className="grid gap-[8px]">
+                  {item?.orderNumber && (
+                    <div className="text-[15px] font-semibold leading-[1.4] text-[#777]">
+                      {data.orderNumberLabel}: {item.orderNumber}
+                    </div>
+                  )}
                   <div
                     className={classNames(
-                      'flex items-center justify-end text-[16px] font-bold leading-[1.4]',
-                      `text-[${ColorMap[item.type]}]`
+                      'flex items-center justify-between rounded-[8px] bg-[#f7f8f9] px-[16px] py-[20px]',
+                      !rounded && 'rounded-none'
                     )}
                   >
-                    <span>{TypeMap[item.type]}</span>
-                    {TipMap[item.type] && <Tip info={TipMap[item.type]} index={index} />}
-                  </div>
-                  <div className="text-[14px] font-semibold text-[#999]">
-                    {dayjs(item.date).format('YYYY-MM-DD HH:mm').toString()}
+                    <div className="grid gap-[4px]">
+                      <div className="text-[16px] font-bold leading-[1.4]">{item.title}</div>
+                      <div className="text-[14px] font-semibold text-[#999]">
+                        {data.valueLabel}: {item.value} {data?.pointUnit}
+                      </div>
+                      <div className="text-[14px] font-semibold text-[#999]">
+                        {item?.couponCode ? `${data?.code || 'Code'}: ${item.couponCode} ` : ''}
+                        {item?.couponCode && (
+                          <span
+                            className="cursor-pointer text-[14px] font-semibold text-brand underline"
+                            onClick={() => {
+                              handleCopy(item.couponCode, index)
+                            }}
+                            role="button"
+                            tabIndex={0}
+                            onKeyDown={e => {
+                              if (e.key === 'Enter' || e.key === ' ') {
+                                e.preventDefault()
+                              }
+                            }}
+                          >
+                            {copied === index ? data?.copied || 'COPIED' : data?.copy || 'COPY'}
+                          </span>
+                        )}
+                      </div>
+                    </div>
+                    <div className="grid gap-[4px] text-right">
+                      <div
+                        className={classNames(
+                          'flex items-center justify-end text-[16px] font-bold leading-[1.4]',
+                          `text-[${ColorMap[item.type]}]`
+                        )}
+                      >
+                        <span>{TypeMap[item.type]}</span>
+                        {TipMap[item.type] && <Tip info={TipMap[item.type]} index={index} />}
+                      </div>
+                      <div className="text-[14px] font-semibold text-[#999]">
+                        {dayjs(item.date).format('YYYY-MM-DD HH:mm').toString()}
+                      </div>
+                    </div>
                   </div>
                 </div>
-              </div>
+              ))}
+            </div>
+          ) : (
+            <div className="flex h-full flex-col items-center justify-center">
+              <Picture
+                className="mb-[12px] w-[160px]"
+                source={data?.emptyListImage?.url}
+                alt={data?.emptyListImage?.alt || 'empty list image'}
+              ></Picture>
+              <div className="text-[16px] font-semibold leading-[1.4]">{data?.emptyListLabel}</div>
             </div>
-          ))}
+          )}
         </div>
-      </div>
+      )}
     </CreditsModalContainer>
   )
 }

package/src/components/credits/modal/activitiesModal.tsx

@@ -4,7 +4,7 @@ import { CreditType, DTC_TASK_TYPE, TaskSubType, TaskType } from '../context/con
 import useActivities from '../context/hooks/useActivities'
 import type { Task } from '../context/response'
 import { CreditsModalContainer, type ModalContainerProps } from './modalContainer'
-import { cn } from '../../../helpers/utils'
+import { classNames as cn, useHeadlessContext, ROUNDED_BRANDS } from '@anker-in/lib'
 import { Tabs, TabsList, TabsTrigger } from '@anker-in/headless-ui'
 import LoadingDots from './loadingDots'
 import { Picture, Text } from '@anker-in/headless-ui'
@@ -30,7 +30,10 @@ export interface MyActivitiesMetafields {
   firstPurchaseTask: string
   uploadReceiptTask: string
   shoppingTask: string
-  emptyListImageUrl: string
+  emptyListImage: {
+    url: string
+    alt?: string
+  }
   emptyListLabel: string
 }
 
@@ -41,6 +44,8 @@ interface ActivitiesModalProps extends ModalContainerProps {
 function ActivitiesModal({ data, ...props }: ActivitiesModalProps) {
   const [page, setPage] = useState(1)
   const { taskIdToTypeMapping } = useCreditsContext()
+  const { brand } = useHeadlessContext()
+  const rounded = ROUNDED_BRANDS.includes(brand)
 
   const myActivitiesOptions = useMemo(() => {
     return {
@@ -168,19 +173,19 @@ function ActivitiesModal({ data, ...props }: ActivitiesModalProps) {
       className={cn('h-[800px] w-[640px]')}
       useAnimation
       animationClassName="md:translate-y-[100vh]"
-      scrollClassName="min-l:px-0 md:mb-0 md:px-0"
+      scrollClassName=""
       {...props}
       onScrollEnd={handleScrollEnd}
     >
-      <div className="w-full overflow-x-auto">
+      <div className="w-full sticky top-0 bg-white z-10 pb-[24px] overflow-x-auto">
         <Tabs
           align="left"
-          shape="rounded"
+          shape={rounded ? 'rounded' : 'square'}
           value={activeTab.toString()}
           onValueChange={value => {
             setActiveTab(Number(value))
           }}
-          className="px-[24px] md:px-[16px]"
+          className=""
         >
           <TabsList>
             {tabs.map(tab => (
@@ -192,55 +197,65 @@ function ActivitiesModal({ data, ...props }: ActivitiesModalProps) {
         </Tabs>
       </div>
 
-      <div className="mt-[24px] grid gap-[18px] overflow-auto overscroll-contain px-[24px] md:gap-[12px] md:px-[16px]">
+      <div className="grid gap-[18px] overflow-auto overscroll-contain md:gap-[12px]">
         {isLoading && (
           <div className="flex h-full flex-col items-center justify-center">
             <LoadingDots />
           </div>
         )}
-        {!list.length && !isLoading && (
-          <div className="flex h-full flex-col items-center justify-center">
-            <Picture className="mb-[16px] h-[120px] w-[160px]" src={data?.emptyListImageUrl}></Picture>
-            <div className="leading-1.4 text-[16px] font-semibold">{data?.emptyListLabel}</div>
-          </div>
-        )}
-        {list.map((item, index) => (
-          <div
-            key={index}
-            className="flex h-fit items-center justify-between rounded-[8px] bg-[#f2f0f1] px-[16px] py-[20px] text-[16px]"
-          >
-            <div className="grid gap-[6px]">
-              <div className="font-bold">{item.title}</div>
-              <div className="text-[14px] font-semibold text-[#999]">
-                {dayjs(item.date).format('YYYY-MM-DD HH:mm').toString()}
-              </div>
-              {!data.pendingTips && (
+
+        {!isLoading && (
+          <>
+            {list.length > 0 ? (
+              list.map((item, index) => (
                 <div
-                  className={`hidden text-[14px] font-semibold text-[#777] ${item.status === 2 && item.credit_type === 1 ? '!flex' : ''}`}
+                  key={index}
+                  className={cn(
+                    'flex h-fit items-center justify-between rounded-[8px] bg-[#f2f0f1] px-[16px] py-[20px] text-[16px]',
+                    !rounded && 'rounded-none'
+                  )}
                 >
-                  <Text html={data.pendingTips} />
-                  <span>{dayjs.unix(item.pending_time).add(1, 'day').format('YYYY-MM-DD')}</span>
-                  {data.pendingTips2 && <Text html={data.pendingTips2} />}
+                  <div className="grid gap-[6px]">
+                    <div className="font-bold">{item.title}</div>
+                    <div className="text-[14px] font-semibold text-[#999]">
+                      {dayjs(item.date).format('YYYY-MM-DD HH:mm').toString()}
+                    </div>
+                    {!data.pendingTips && (
+                      <div
+                        className={`hidden text-[14px] font-semibold text-[#777] ${item.status === 2 && item.credit_type === 1 ? '!flex' : ''}`}
+                      >
+                        <Text html={data.pendingTips} />
+                        <span>{dayjs.unix(item.pending_time).add(1, 'day').format('YYYY-MM-DD')}</span>
+                        {data.pendingTips2 && <Text html={data.pendingTips2} />}
+                      </div>
+                    )}
+                  </div>
+                  <div
+                    className={cn(
+                      'font-bold',
+                      item.value >= 0 || item.credit_type === CreditType.Expired ? 'text-[#52C41A]' : 'text-[#F84D4F]'
+                    )}
+                  >
+                    {item.value >= 0 && '+'}
+                    {item.value}
+                  </div>
                 </div>
-              )}
-            </div>
-            <div
-              className={cn(
-                'font-bold',
-                item.value >= 0 || item.credit_type === CreditType.Expired ? 'text-[#52C41A]' : 'text-[#F84D4F]'
-              )}
-            >
-              {item.value >= 0 && '+'}
-              {item.value}
-            </div>
-          </div>
-        ))}
+              ))
+            ) : (
+              <div className="flex h-full flex-col items-center justify-center">
+                <Picture
+                  className="mb-[16px] h-[120px] w-[160px]"
+                  source={data?.emptyListImage?.url}
+                  alt={data?.emptyListImage?.alt || 'empty list image'}
+                ></Picture>
+                <div className="leading-1.4 text-[16px] font-semibold">{data?.emptyListLabel}</div>
+              </div>
+            )}
+          </>
+        )}
       </div>
-      {!!list.length && (
-        <div className="mt-[12px] px-[24px] pb-[24px] text-[14px] font-semibold text-[#999] md:px-[16px]">
-          {data.tips}
-        </div>
-      )}
+      {/* 积分到账时间提醒 */}
+      {list.length > 0 && <div className="mt-[12px] pb-[24px] text-[14px] font-semibold text-[#999]">{data.tips}</div>}
     </CreditsModalContainer>
   )
 }

package/src/components/credits/modal/creditsUploadReceiptModal.tsx

@@ -2,6 +2,8 @@ import { Button, Heading, Text } from '@anker-in/headless-ui'
 import { useCallback, useState } from 'react'
 import { CreditsModalContainer } from './modalContainer'
 import { useUploadReceipt } from '../context/hooks/useUploadReceipt'
+import { useHeadlessContext, ROUNDED_BRANDS } from '@anker-in/lib'
+import classNames from 'classnames'
 
 export type ReceiptCopy = {
   title: string
@@ -43,6 +45,9 @@ export function CreditsUploadReceiptModal({
     isSuccess: false,
   })
 
+  const { brand } = useHeadlessContext()
+  const rounded = ROUNDED_BRANDS.includes(brand)
+
   const handleSubmit = useCallback(() => {
     trigger(
       { orderName },
@@ -106,7 +111,10 @@ export function CreditsUploadReceiptModal({
       </Text>
       <input
         placeholder={copy.placeholder}
-        className="mt-[24px] h-[50px] w-full rounded-[2px] border border-[#6D6D6F] pl-[14px] text-[16px] font-bold placeholder:text-[16px] placeholder:font-bold placeholder:text-[#6D6D6F] focus:outline-none focus:ring-0 md:rounded-[4px] md:placeholder:text-[14px]"
+        className={classNames(
+          'mt-[24px] h-[50px] w-full rounded-[2px] border border-[#6D6D6F] pl-[14px] text-[16px] font-bold placeholder:text-[16px] placeholder:font-bold placeholder:text-[#6D6D6F] focus:outline-none focus:ring-0 md:rounded-[4px] md:placeholder:text-[14px]',
+          !rounded && 'rounded-none'
+        )}
         value={orderName}
         onChange={e => setOrderName(e.target.value)}
       />

package/src/components/credits/modal/loadingDots.tsx

@@ -1,16 +1,18 @@
-import { cn } from '../../../helpers/utils'
+import classNames from 'classnames'
+import { FC } from 'react'
 
 interface LoadingProps {
   className?: string
 }
 
-function LoadingDots({ className }: LoadingProps) {
+const LoadingDots: FC<LoadingProps> = props => {
+  const { className } = props
   return (
-    <div className={cn(className)}>
-      <span className="dot" key={`dot_1`} />
-      <span className="dot" key={`dot_2`} />
-      <span className="dot" key={`dot_3`} />
-    </div>
+    <span className={classNames('inline-flex min-h-[19px] items-center text-center leading-7', className)}>
+      <span className="animate-blink mx-0.5 h-2 w-2 rounded-full bg-current" key={`dot_1`} />
+      <span className="animate-blink mx-0.5 h-2 w-2 rounded-full bg-current [animation-delay:0.2s]" key={`dot_2`} />
+      <span className="animate-blink mx-0.5 h-2 w-2 rounded-full bg-current [animation-delay:0.4s]" key={`dot_3`} />
+    </span>
   )
 }
 

package/src/components/credits/modal/modalContainer.tsx

@@ -1,4 +1,4 @@
-import { cn } from '../../../helpers/utils'
+import { classNames as cn, useHeadlessContext, ROUNDED_BRANDS } from '@anker-in/lib'
 import { useEffect, useState, type UIEvent } from 'react'
 import ReactModal from 'react-modal'
 
@@ -41,6 +41,9 @@ export const CreditsModalContainer = ({
     })
   }, [isOpen, useAnimation])
 
+  const { brand } = useHeadlessContext()
+  const rounded = ROUNDED_BRANDS.includes(brand)
+
   return (
     <ReactModal
       isOpen={isOpen ?? false}
@@ -50,6 +53,7 @@ export const CreditsModalContainer = ({
       )}
       className={cn(
         'min-md:max-h-[calc(100vh-96px)] relative flex min-h-[200px] flex-col overflow-hidden rounded-[16px] bg-white outline-none transition-all duration-300 md:h-[88.27vh] md:w-full md:rounded-b-none',
+        !rounded && 'rounded-none',
         animationShow ? '' : animationClassName,
         className
       )}

package/src/components/credits/modal/rulesModal.tsx

@@ -2,7 +2,7 @@ import { Text } from '@anker-in/headless-ui'
 import { useMemo } from 'react'
 
 import { CreditsModalContainer, type ModalContainerProps } from './modalContainer'
-import { cn } from '../../../helpers/utils'
+import { classNames as cn } from '@anker-in/lib'
 
 function RulesModal({
   rules,

package/src/components/credits/modal/subscribeModal.tsx

@@ -0,0 +1,201 @@
+import { useCallback, useEffect, useState } from 'react'
+import { useRouter } from 'next/router'
+import { Button, Checkbox, Picture, Text } from '@anker-in/headless-ui'
+import { classNames, fetcher, gaTrack, useHeadlessContext, ROUNDED_BRANDS } from '@anker-in/lib'
+import Cookies from 'js-cookie'
+import { parse } from 'query-string'
+import sha256 from 'crypto-js/sha256'
+import { useCreditsContext } from '../context/provider'
+import { emailValidate } from '../context/utils'
+import { CreditsModalContainer, type ModalContainerProps } from './modalContainer'
+
+export type CreditsSubscribeModalCopy = {
+  title: string
+  desc?: string
+  placeholder: string
+  policy?: string
+  successTips?: string
+  dealsType?: string
+}
+
+interface CreditsSubscribeModalProps extends ModalContainerProps {
+  copy: CreditsSubscribeModalCopy
+  onSuccess?: () => void
+}
+
+const getAdCookie = () => {
+  if (typeof window === 'undefined') {
+    return { register_source: '' }
+  }
+  const { search, href } = window.location || {}
+  const query = parse(search)
+
+  return {
+    fbuy_ref_code: Cookies.get('fbuy_ref_code'),
+    affiliate: Cookies.get('affiliate'),
+    ref: Cookies.get('ref_ads'),
+    inviter_code: query.ic || query.inviter_code || Cookies.get('inviter_code'),
+    register_source: query.redirect || Cookies.get('reg_source') || href,
+    deals_type: Cookies.get('deal'),
+    transfer_id: Cookies.get('transfer_id'),
+  }
+}
+
+export function CreditsSubscribeModal({ copy, onSuccess, ...props }: CreditsSubscribeModalProps) {
+  const { brand } = useHeadlessContext()
+  const rounded = ROUNDED_BRANDS.includes(brand)
+  const { locale } = useRouter()
+  const [policy, setPolicy] = useState(false)
+  const [email, setEmail] = useState('')
+  const [errorMessage, setErrorMessage] = useState('')
+  const [successMessage, setSuccessMessage] = useState('')
+  const [loading, setLoading] = useState(false)
+  const { profile } = useCreditsContext()
+
+  const handleEmailChange = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
+    setErrorMessage('')
+    setEmail(event.target?.value?.trim())
+  }, [])
+
+  const handleSubmit = useCallback(async () => {
+    setErrorMessage('')
+    if (!email) {
+      return setErrorMessage('Please fill in your email')
+    }
+
+    if (!emailValidate(email)) {
+      return setErrorMessage('Invalid email address')
+    }
+
+    if (!policy) {
+      return setErrorMessage('Please agree to the policy')
+    }
+
+    setLoading(true)
+    const { register_source } = getAdCookie()
+
+    const result = await fetcher({
+      locale,
+      action: 'subscribe',
+      url: '/api/multipass/subscribe/subscribe_emails',
+      method: 'POST',
+      body: {
+        email,
+        register_source,
+        brand,
+        deals_type: copy.dealsType || 'vip_subscribe',
+      },
+      headers: {},
+      type: '',
+    })
+    setLoading(false)
+
+    if (!result.errors) {
+      setSuccessMessage(copy.successTips || 'Subscribed successfully!')
+      if (onSuccess) {
+        onSuccess()
+      }
+      setTimeout(() => {
+        setSuccessMessage('')
+      }, 3000)
+      gaTrack({
+        subscribe_hashed_email: email ? sha256(email) : '',
+      })
+      gaTrack({
+        event: 'ga4Event',
+        event_name: 'subscribe',
+        event_parameters: {
+          page_group: copy.dealsType || 'vip_subscribe',
+          position: 'pop_up',
+        },
+      })
+      gaTrack({
+        event: 'uaEvent',
+        eventCategory: 'subscribe',
+        eventAction: copy.dealsType || 'vip_subscribe',
+        eventLabel: 'pop_up',
+        nonInteraction: false,
+      })
+    } else {
+      setErrorMessage(result.errors || result.statusText)
+    }
+  }, [email, policy, locale, brand, copy.dealsType, copy.successTips, onSuccess])
+
+  useEffect(() => {
+    if (profile && profile?.email) {
+      setEmail(profile?.email)
+    }
+  }, [profile])
+
+  return (
+    <CreditsModalContainer
+      className="w-[540px] md:h-auto"
+      scrollClassName="mb-[40px] min-l:px-[48px] md:mb-[24px]"
+      titleClassName="h-[56px]"
+      useAnimation
+      animationClassName="md:translate-y-[100vh]"
+      {...props}
+    >
+      <div className="flex flex-col gap-[16px] text-center min-l:px-[16px]">
+        <div>
+          <Text className={classNames('mb-[24px] text-[22px] font-bold')} html={copy.title}></Text>
+        </div>
+        {copy.desc && (
+          <Text
+            className="mb-[8px] text-left text-[16px] font-semibold leading-[1.4] text-[#1F2021]"
+            html={copy.desc}
+          ></Text>
+        )}
+        <div
+          className={classNames(
+            'relative flex h-[52px] w-full overflow-hidden rounded-[2px] md:grid md:h-auto md:grid-rows-1 md:gap-[16px]',
+            !rounded && 'rounded-none'
+          )}
+        >
+          <input
+            className={classNames(
+              'h-full flex-1 rounded-l-[2px] border-[1px] border-[#d8d8d8] px-[14px] py-[17px] text-[16px] font-semibold leading-[1] outline-none placeholder:text-[#999] md:h-[52px] md:rounded-[2px]',
+              !rounded && 'rounded-none'
+            )}
+            placeholder={copy.placeholder}
+            value={email}
+            onChange={handleEmailChange}
+          />
+          <Button
+            variant="primary"
+            onClick={handleSubmit}
+            loading={loading}
+            className={classNames(
+              'legacy-headless-ui-primary-button !h-full !min-w-0 !rounded-l-none !rounded-r-[2px] !px-[40px] !py-[13px]',
+              !rounded && 'rounded-none'
+            )}
+          >
+            <Picture
+              source="https://cdn.shopify.com/s/files/1/0512/8568/8505/files/icon_email.png?v=1697527383"
+              className="h-[24px] w-[24px]"
+              alt="email"
+            />
+          </Button>
+        </div>
+        <div className="flex w-full">
+          <Checkbox checked={policy} onCheckedChange={() => setPolicy(!policy)} required className="border-[#1d1d1f]" />
+          <label
+            className="text-left ml-2 text-[14px] font-semibold text-[#777] [&_a]:underline"
+            dangerouslySetInnerHTML={{
+              __html: copy?.policy || '',
+            }}
+          />
+        </div>
+        <div
+          className={classNames(
+            'w-full text-left text-[16px] font-semibold',
+            errorMessage && 'text-[#F84D4F]',
+            successMessage && 'text-[#52C41A]'
+          )}
+        >
+          <Text html={successMessage || errorMessage || ''} />
+        </div>
+      </div>
+    </CreditsModalContainer>
+  )
+}