@anker-in/campaign-ui 0.5.0-beta.9 → 0.5.0

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

@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useState } from 'react'
 import { Button, Checkbox, Picture, Text } from '@anker-in/headless-ui'
-import { classNames as cn, useHeadlessContext } from '@anker-in/lib'
+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'
@@ -9,11 +9,8 @@ import type { SubscribeModalCopy } from '../type'
 import { ROUNDED_BRANDS } from '../../../constants'
 
 type Props = {
-  onSuccess?: () => void
   copy: SubscribeModalCopy
   email?: string
-  hideForm: boolean
-  onHideForm: () => void
 }
 
 function getAdCookie() {
@@ -38,18 +35,12 @@ async function getRecaptchaToken(sitekey: string): Promise<string> {
   }
 }
 
-export default function ActivitiesSubscribeModal({
-  onSuccess,
-  copy,
-  email: initialEmail,
-  hideForm,
-  onHideForm,
-}: Props) {
-  const { alpcConfig } = useMemberPopupContext()
+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 [policy, setPolicy] = useState(copy.policyDefaultChecked ?? false)
   const [email, setEmail] = useState(initialEmail ?? '')
   const [errorMessage, setErrorMessage] = useState('')
   const [successMessage, setSuccessMessage] = useState('')
@@ -86,89 +77,91 @@ export default function ActivitiesSubscribeModal({
         }),
       })
       const result = await response.json()
-      if (!result.errors) {
+      if (!result?.data?.is_new_subscribe) {
+        setSuccessMessage(copy.subscribedLabel ?? "You've already subscribed!")
+      } else if (!result?.data?.errors) {
         setSuccessMessage(copy.successTips ?? 'Subscribed successfully!')
-        onSuccess?.()
-        setTimeout(() => {
-          onHideForm()
-          setSuccessMessage('')
-        }, 3000)
+        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.errors ?? 'Error occurred')
+        setErrorMessage(result?.data?.errors ?? 'Error occurred')
       }
     } catch {
       setErrorMessage('Network error')
     } finally {
       setLoading(false)
     }
-  }, [email, policy, locale, storeDomain, copy, onSuccess, onHideForm])
+  }, [email, policy, locale, storeDomain, copy, setIsSubscribeSuccess])
 
   return (
-    <div className="flex flex-col gap-[16px] text-center">
-      {!hideForm && (
-        <>
-          <Text className="text-[22px] font-bold" html={copy.title} />
-          {copy.desc && <Text className="text-left text-[16px] font-semibold text-[#1f2021]" html={copy.desc} />}
+    <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 px-[14px] text-[16px] outline-none placeholder:text-[#999]',
-              errorMessage ? 'border-[#f84d4f]' : 'border-[#d8d8d8]',
-              rounded ? 'rounded-[4px]' : 'rounded-none'
-            )}
-            placeholder={copy.placeholder}
-            value={email}
-            onChange={e => {
-              setErrorMessage('')
-              setEmail(e.target.value.trim())
-            }}
-          />
+      <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 items-start gap-[8px]">
-            <Checkbox checked={policy} onCheckedChange={() => setPolicy(v => !v)} className="border-[#1d1d1f]" />
-            <label
-              className="text-left text-[14px] font-semibold text-[#777] [&_a]:underline"
-              dangerouslySetInnerHTML={{ __html: copy.policy ?? '' }}
-            />
-          </div>
+      <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] py-[14px] text-[14px] font-[700] text-white disabled:opacity-60',
-              rounded ? 'rounded-[4px]' : 'rounded-none'
-            )}
-            disabled={loading}
-            onClick={handleSubmit}
-          >
-            {copy.buttonLabel ?? 'Subscribe'}
-          </button>
+      <Button className="w-full mt-[16px]" size="base" loading={loading} onClick={handleSubmit}>
+        {copy.buttonLabel ?? 'Subscribe'}
+      </Button>
 
-          {errorMessage && (
-            <div className="text-left text-[16px] font-semibold text-[#f84d4f]">
-              <Text html={errorMessage} />
-            </div>
-          )}
-          <div className="text-left text-[16px] font-semibold text-[#52c41a]">
-            <Text html={successMessage} />
-          </div>
-        </>
+      {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 flex-col text-left">
-          <div className="flex flex-col gap-[8px]">
-            {copy.promo?.title && (
-              <h3 className="text-[20px] font-[700] leading-[1.2] text-[#080a0f]">{copy.promo?.title}</h3>
-            )}
+        <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 && (
-              <p className="text-[14px] leading-[1.5] text-[#1e2024]">{copy.promo.description}</p>
+              <Text className="text-[14px] text-[#080A0F] mt-[8px] font-bold" html={copy.promo.description} />
             )}
             {copy.promo.learnMoreLabel && copy.promo.learnMoreUrl && (
               <a
-                href={copy.promo.learnMoreUrl}
+                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 items-center gap-[4px] text-[14px] font-[700] text-[#080a0f] underline"
+                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">

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

@@ -1,43 +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,
-  itemRules,
-  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)
@@ -51,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)
@@ -103,7 +103,7 @@ export default function RedeemCouponPanel({
             {itemValue && (
               <div className="absolute bottom-[20px] left-[20px] text-[32px] font-[800] leading-none text-white">
                 {itemValue}
-                {itemOff ? ` ${itemOff}` : ''}
+                {redeemModal.off ? ` ${redeemModal.off}` : ''}
               </div>
             )}
           </div>
@@ -128,22 +128,13 @@ export default function RedeemCouponPanel({
               disabled={copied}
               onClick={() => copyText(couponCode)}
             >
-              {copied ? 'Copied' : 'Copy'}
+              {copied ? (redeemModal.copiedLabel ?? 'Copied') : (redeemModal.copyLabel ?? '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}
+          <Text className="text-[20px] font-[700]" html={redeemModal.successTitle} />
+          <Text className="text-[14px] font-[700] text-[#6d6d6f]" html={redeemModal.successDesc} />
+          <Button as="a" href={redeemModal.successButtonUrl} className="w-full">
+            {redeemModal.successButton}
           </Button>
         </div>
       )}
@@ -151,17 +142,9 @@ export default function RedeemCouponPanel({
       {!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={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}
+            <Text className="block text-[16px] font-[700] leading-[1.3]" html={redeemModal.confirmTitle} />
+            <Button className="w-full" disabled={disabled} loading={loading} onClick={handleConfirm}>
+              {redeemModal.confirmButton}
             </Button>
           </div>