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

package/src/components/memberPopup/panels/ActivitiesSubscribePanel.tsx

@@ -0,0 +1,194 @@
+import { useCallback, useEffect, useState } from 'react'
+import { Button, Checkbox, Picture, Text } from '@anker-in/headless-ui'
+import { gaTrack, classNames as cn, useHeadlessContext } from '@anker-in/lib'
+import Cookies from 'js-cookie'
+import { parse } from 'query-string'
+import { emailValidate } from '../../credits/context/utils'
+import { useMemberPopupContext } from '../context/provider'
+import type { SubscribeModalCopy } from '../type'
+import { ROUNDED_BRANDS } from '../../../constants'
+
+type Props = {
+  copy: SubscribeModalCopy
+  email?: string
+}
+
+function 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'),
+    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,
+  }
+}
+
+async function getRecaptchaToken(sitekey: string): Promise<string> {
+  if (typeof window === 'undefined' || !window?.grecaptcha?.execute) return ''
+  if (!sitekey) return ''
+  try {
+    return await window.grecaptcha.execute(sitekey, { action: 'activity' })
+  } catch {
+    return ''
+  }
+}
+
+export default function ActivitiesSubscribeModal({ copy, email: initialEmail }: Props) {
+  const { alpcConfig, setIsSubscribeSuccess, pageHandle } = useMemberPopupContext()
+  const { locale } = alpcConfig
+  const { brand: headlessBrand, storeDomain, recaptchaSitekey } = useHeadlessContext()
+  const rounded = ROUNDED_BRANDS.includes(headlessBrand)
+  const [policy, setPolicy] = useState(false)
+  const [email, setEmail] = useState(initialEmail ?? '')
+  const [errorMessage, setErrorMessage] = useState('')
+  const [successMessage, setSuccessMessage] = useState('')
+  const [loading, setLoading] = useState(false)
+
+  useEffect(() => {
+    if (initialEmail) setEmail(initialEmail)
+  }, [initialEmail])
+
+  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 recaptchaToken = await getRecaptchaToken(recaptchaSitekey || '')
+    try {
+      const response = await fetch('/api/multipass/rainbowbridge/activities', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          'current-language': locale,
+          'X-Recaptcha-Token': recaptchaToken,
+        },
+        body: JSON.stringify({
+          email,
+          register_source,
+          shopify_domain: storeDomain,
+          single_brand_subscribe: copy.single_brand_subscribe ?? true,
+          genre: copy.genre ?? copy.dealsType ?? '',
+          sub_brand_type: copy.sub_brand_type ?? '',
+        }),
+      })
+      const result = await response.json()
+      if (!result?.data?.is_new_subscribe) {
+        setSuccessMessage(copy.subscribedLabel ?? "You've already subscribed!")
+      } else if (!result?.data?.errors) {
+        setSuccessMessage(copy.successTips ?? 'Subscribed successfully!')
+        setIsSubscribeSuccess(true)
+        gaTrack({
+          event: 'ga4Event',
+          event_name: 'subscribe',
+          event_parameters: {
+            page_group: copy.dealsType ?? copy.genre ?? '',
+            position: 'sticky',
+            info: 'Member Floating Window',
+          },
+        })
+      } else {
+        setErrorMessage(result?.data?.errors ?? 'Error occurred')
+      }
+    } catch {
+      setErrorMessage('Network error')
+    } finally {
+      setLoading(false)
+    }
+  }, [email, policy, locale, storeDomain, copy, setIsSubscribeSuccess])
+
+  return (
+    <div className="flex flex-col">
+      <Text className="text-[22px] font-bold leading-[1.2]" html={copy.title} />
+      {copy.desc && <Text className="text-[16px] mt-[16px] font-bold text-[#1E2024]" html={copy.desc} />}
+
+      <input
+        className={cn(
+          'h-[46px] w-full border mt-[8px] px-[14px] text-[16px] outline-none placeholder:text-[#999]',
+          rounded ? 'rounded-[4px]' : 'rounded-none'
+        )}
+        placeholder={copy.placeholder}
+        value={email}
+        onChange={e => {
+          setErrorMessage('')
+          setEmail(e.target.value.trim())
+        }}
+      />
+
+      <div className="flex w-full mt-[8px] items-start gap-[8px]">
+        <Checkbox checked={policy} onCheckedChange={() => setPolicy(v => !v)} className="border-[#1d1d1f] mt-[2px]" />
+        <label
+          className="text-left text-[14px] font-bold text-[#4A4C56] [&_a]:underline"
+          dangerouslySetInnerHTML={{ __html: copy.policy ?? '' }}
+        />
+      </div>
+
+      <button
+        className={cn(
+          'w-full cursor-pointer bg-[#080a0f] mt-[16px] py-[14px] text-[14px] font-[700] text-white disabled:opacity-60',
+          rounded ? 'rounded-[4px]' : 'rounded-none'
+        )}
+        disabled={loading}
+        onClick={handleSubmit}
+      >
+        {copy.buttonLabel ?? 'Subscribe'}
+      </button>
+
+      {errorMessage && (
+        <div className="text-left mt-[4px] text-[16px] font-semibold text-[#f84d4f]">
+          <Text html={errorMessage} />
+        </div>
+      )}
+      <div className="text-left mt-[4px] text-[16px] font-semibold text-[#52c41a]">
+        <Text html={successMessage} />
+      </div>
+
+      {copy.promo && (
+        <div className="flex mt-[32px] flex-col text-left">
+          <div className="flex flex-col">
+            {copy.promo?.title && <Text className="text-[18px] font-bold leading-[1.2]" html={copy.promo.title} />}
+            {copy.promo.description && (
+              <Text className="text-[14px] text-[#080A0F] mt-[8px] font-bold" html={copy.promo.description} />
+            )}
+            {copy.promo.learnMoreLabel && copy.promo.learnMoreUrl && (
+              <a
+                href={(() => {
+                  try {
+                    if (!pageHandle) return copy.promo!.learnMoreUrl!
+                    const url = new URL(copy.promo!.learnMoreUrl!, window.location.href)
+                    url.searchParams.set('ref', `${pageHandle}_subscribe`)
+                    return url.toString()
+                  } catch {
+                    return copy.promo!.learnMoreUrl!
+                  }
+                })()}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="flex mt-[8px] items-center gap-[4px] text-[14px] font-bold"
+              >
+                {copy.promo.learnMoreLabel}
+                <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+                  <path
+                    d="M5.52827 3.52876C5.78862 3.26841 6.21063 3.26841 6.47098 3.52876L10.471 7.52876C10.7313 7.78911 10.7313 8.21112 10.471 8.47147L6.47098 12.4715C6.21063 12.7318 5.78862 12.7318 5.52827 12.4715C5.26792 12.2111 5.26792 11.7891 5.52827 11.5288L9.05692 8.00011L5.52827 4.47147C5.26792 4.21112 5.26792 3.78911 5.52827 3.52876Z"
+                    fill="#080A0F"
+                  />
+                </svg>
+              </a>
+            )}
+          </div>
+          {copy.promo.image?.url && (
+            <Picture
+              source={copy.promo.image.url}
+              alt={copy.promo.image.alt ?? ''}
+              className={cn('h-[100px] mt-[8px] w-full object-cover', rounded ? 'rounded-[8px]' : 'rounded-none')}
+            />
+          )}
+        </div>
+      )}
+    </div>
+  )
+}

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

@@ -1,41 +1,34 @@
 import { useCallback, useEffect, useState } from 'react'
 import { Text, Button } from '@anker-in/headless-ui'
-import { useHeadlessContext, classNames as cn } from '@anker-in/lib'
+import { gaTrack, 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 type { ConsumeCreditsopy, AlpcConfig } from '../../type'
 import { ROUNDED_BRANDS } from '../../../../constants'
 
-type Props = {
-  onClose: () => void
+type RedeemCouponItem = {
   itemTitle: string
   itemCredits: number
   itemImage?: { url: string; alt?: string }
   itemValue?: string
-  itemOff?: string
+  itemRules?: string[]
   redeemId: number
   userId?: string
-  copy: RedeemCouponModalCopy
-  pointUnit?: string
   alpcConfig: AlpcConfig
+}
+
+type Props = {
+  onClose: () => void
+  item: RedeemCouponItem
+  copy: ConsumeCreditsopy
   onError?: (code: number) => void
 }
 
-export default function RedeemCouponPanel({
-  onClose,
-  itemTitle,
-  itemCredits,
-  itemImage,
-  itemValue,
-  itemOff,
-  redeemId,
-  userId,
-  copy,
-  pointUnit = 'pts',
-  alpcConfig,
-  onError,
-}: Props) {
+export default function RedeemCouponPanel({ onClose, item, copy, onError }: Props) {
+  const { itemTitle, itemCredits, itemImage, itemValue, itemRules, redeemId, userId, alpcConfig } = item
+  const { redeemModal, creditUnit } = copy
+  const pointUnit = creditUnit ?? 'pts'
   const [couponCode, setCouponCode] = useState<string>()
   const [errorInfo, setErrorInfo] = useState('')
   const [disabled, setDisabled] = useState(false)
@@ -49,30 +42,39 @@ export default function RedeemCouponPanel({
     setErrorInfo('')
     const { data } = await trigger({ user_id: userId, rule_id: redeemId })
     if (!data) {
-      setErrorInfo(copy.commonError)
+      setErrorInfo(redeemModal.commonError)
       return
     }
     if (data.data?.success) {
       setCouponCode(data.data.coupon_code)
+      gaTrack({
+        event: 'ga4Event',
+        event_name: 'lp_button',
+        event_parameters: {
+          position: 'consume_credits',
+          button_name: 'redeem_coupon_success',
+          info: 'Member Floating Window',
+        },
+      })
     } else {
-      let msg = copy.commonError
+      let msg = redeemModal.commonError
       if (data.code === AlpcErrorCode.CodeLpcShopifyCouponRuleRedeemLimit) {
-        msg = copy.redeemLimitError
+        msg = redeemModal.redeemLimitError
         setDisabled(true)
       } else if (data.code === AlpcErrorCode.CodeLpcRuleInventoryNotEnough) {
-        msg = copy.inventoryNotEnough
+        msg = redeemModal.inventoryNotEnough
         setDisabled(true)
       } else if (data.code === AlpcErrorCode.CodeLpcNotEnoughCredits) {
-        msg = copy.creditsNotEnough
+        msg = redeemModal.creditsNotEnough
         setDisabled(true)
       } else if (data.code === AlpcErrorCode.CodeCrossSiteError) {
-        msg = copy.crossSiteError
+        msg = redeemModal.crossSiteError
         setDisabled(true)
       }
       setErrorInfo(msg)
       onError?.(data.code)
     }
-  }, [trigger, userId, redeemId, copy, onError])
+  }, [trigger, userId, redeemId, redeemModal, onError])
 
   useEffect(() => {
     setCouponCode(undefined)
@@ -80,38 +82,45 @@ export default function RedeemCouponPanel({
     setDisabled(false)
   }, [redeemId])
 
+  const rulesSection = itemRules && itemRules.length > 0 && (
+    <div className="w-full text-[16px] font-bold leading-[1.4] text-[#6D6D6F] md:mt-[12px] md:text-[14px]">
+      <ul className="ml-4 grid grid-flow-row gap-[4px]">
+        {itemRules?.map((text, index) => (
+          <li className="list-disc" key={index}>
+            <Text html={text} className="font-bold" />
+          </li>
+        ))}
+      </ul>
+    </div>
+  )
+
   return (
-    <div className="flex flex-col gap-[16px]">
+    <div className="flex flex-col">
       {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 className="relative w-full px-[24px]">
+          <div className={cn('relative mx-auto overflow-hidden', rounded ? 'rounded-[8px]' : 'rounded-none')}>
+            <img src={itemImage.url} alt={itemImage.alt ?? ''} className="mx-auto h-[140px] w-full object-cover" />
+            {itemValue && (
+              <div className="absolute bottom-[20px] left-[20px] text-[32px] font-[800] leading-none text-white">
+                {itemValue}
+                {redeemModal.off ? ` ${redeemModal.off}` : ''}
+              </div>
+            )}
+          </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>
+      {!couponCode && (
+        <div className="flex flex-col gap-[16px] px-[24px] py-[20px]">
+          <p className="text-center text-[24px] font-[700] text-[#1d1d1f]">
+            {itemCredits} {pointUnit}
+          </p>
+          {rulesSection}
         </div>
-      ) : (
-        <div className="flex flex-col gap-[12px] text-center">
+      )}
+
+      {couponCode && (
+        <div className="flex mt-[16px] flex-col gap-[8px] text-center">
           <div className="flex items-center justify-center gap-[10px]">
             <span className="text-[24px] font-[700]">{couponCode}</span>
             <button
@@ -122,21 +131,45 @@ export default function RedeemCouponPanel({
               {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} />
+          <Text className="text-[20px] font-[700]" html={redeemModal.successTitle} />
+          <Text className="text-[14px] font-[700] text-[#6d6d6f]" html={redeemModal.successDesc} />
           <Button
-            className={cn('w-full py-[12px] text-[14px] font-[700] text-white bg-[#080a0f]', rounded ? 'rounded-[4px]' : 'rounded-none')}
+            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
+              if (redeemModal.successButtonUrl) window.location.href = redeemModal.successButtonUrl
               onClose()
             }}
           >
-            {copy.successButton}
+            {redeemModal.successButton}
           </Button>
         </div>
       )}
 
-      {errorInfo && <Text className="text-center text-[14px] font-[700] text-[#ff0000]" html={errorInfo} />}
+      {!couponCode && (
+        <div className="sticky bottom-0 bg-white border-t border-[#e5e5e5] pt-[10px]">
+          <div className="flex flex-col gap-[8px] text-center">
+            <Text className="block text-[16px] font-[700] leading-[1.3]" html={redeemModal.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}
+            >
+              {redeemModal.confirmButton}
+            </Button>
+          </div>
+
+          {errorInfo && (
+            <Text className="mt-[8px] text-center text-[14px] font-[700] text-[#ff0000]" html={errorInfo} />
+          )}
+        </div>
+      )}
     </div>
   )
 }