@anker-in/campaign-ui 0.2.0 → 0.2.2

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'
@@ -44,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 {
@@ -178,7 +180,7 @@ function ActivitiesModal({ data, ...props }: ActivitiesModalProps) {
       <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))
@@ -208,7 +210,10 @@ function ActivitiesModal({ data, ...props }: ActivitiesModalProps) {
               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]"
+                  className={cn(
+                    'flex h-fit items-center justify-between rounded-[8px] bg-[#f2f0f1] px-[16px] py-[20px] text-[16px]',
+                    !rounded && 'rounded-none'
+                  )}
                 >
                   <div className="grid gap-[6px]">
                     <div className="font-bold">{item.title}</div>

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/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>
+  )
+}

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

@@ -1,9 +1,13 @@
+import { useHeadlessContext, ROUNDED_BRANDS } from '@anker-in/lib'
 import classNames from 'classnames'
 import { useState } from 'react'
 
 function Tip({ info, index }: { info: string; index: number }) {
   const [show, setShow] = useState(false)
 
+  const { brand } = useHeadlessContext()
+  const rounded = ROUNDED_BRANDS.includes(brand)
+
   return (
     <div
       className="relative ml-[6px] cursor-pointer"
@@ -81,7 +85,12 @@ function Tip({ info, index }: { info: string; index: number }) {
                 }
           }
         ></i>
-        <p className="relative block rounded-[4px] bg-white px-[14px] py-[12px]">
+        <p
+          className={classNames(
+            'relative block rounded-[4px] bg-white px-[14px] py-[12px]',
+            !rounded && 'rounded-none'
+          )}
+        >
           <span className="block text-left text-[14px] font-semibold leading-[1.4] text-[#333]">{info}</span>
         </p>
       </div>

package/src/components/credits/type.ts

@@ -1,5 +1,7 @@
 import type { Product, ProductVariant } from '@anker-in/lib'
 import type { AlpcConsumeType, ConsumeType } from './context/const'
+import { MyActivitiesMetafields } from './modal/activitiesModal'
+import { MyRewardsMetafields } from './modal/MyRewardsModal'
 
 export interface Subscription {
   preference: {
@@ -49,12 +51,29 @@ export interface ShippingZone {
 }
 
 export type CreditsPageCommon = {
-  pointUnit: string
-  ruleLabel: string
-  soldOut: string
-  imageMapping: {
+  pointUnit?: string
+  infoIcon?: string
+  ruleLabel?: string
+  soldOut?: string
+  copied?: string
+  off?: string
+  copy?: string
+  giftCardLabel?: string
+  imageMapping?: {
     [key in ConsumeType]: {
       url: string
     }
   }
+  activitiesModal?: MyActivitiesMetafields
+  rewardsModal?: MyRewardsMetafields
+  insufficientCredits?: string
+  validatorInfo?: {
+    addressInfo: {
+      name: string
+      country: string
+      province: string
+      city: string
+      address: string
+    }
+  }
 }

package/src/components/index.ts

@@ -1,5 +1,3 @@
-// eslint-disable-next-line import/extensions
-
 export { default as Chat } from './chat/index'
 
 export {
@@ -12,3 +10,5 @@ export {
 } from './chat/utils'
 
 export * from './credits/index'
+
+export * from './registration/index'

package/src/components/registration/authCodeActivate/Message.tsx

@@ -0,0 +1,43 @@
+export const Message = ({ status, message }: { status: string; message: string }) => {
+  return (
+    status && (
+      <div className="absolute left-5 right-5 top-2 flex items-center gap-2 rounded-sm bg-white px-4 py-3 shadow-lg min-md:left-12 min-md:right-12">
+        <div className="flex-shrink-0">
+          {status === 'success' && (
+            <span className="inline-block h-5 w-5">
+              <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <g clipPath="url(#clip0_205_16388)">
+                  <circle cx="10" cy="10" r="10" fill="#1677FF" />
+                  <path d="M10 16L10 10" stroke="white" strokeWidth="2" strokeLinecap="round" />
+                  <circle cx="10" cy="6.5" r="1.5" transform="rotate(-180 10 6.5)" fill="white" />
+                </g>
+                <defs>
+                  <clipPath id="clip0_205_16388">
+                    <rect width="20" height="20" fill="white" />
+                  </clipPath>
+                </defs>
+              </svg>
+            </span>
+          )}
+          {status === 'error' && (
+            <span className="inline-block h-5 w-5">
+              <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <g clipPath="url(#clip0_205_16236)">
+                  <circle cx="10" cy="10" r="10" fill="#F84D4F" />
+                  <path d="M10 5L10 11" stroke="white" strokeWidth="2" strokeLinecap="round" />
+                  <circle cx="10" cy="14.5" r="1.5" fill="white" />
+                </g>
+                <defs>
+                  <clipPath id="clip0_205_16236">
+                    <rect width="20" height="20" fill="white" />
+                  </clipPath>
+                </defs>
+              </svg>
+            </span>
+          )}
+        </div>
+        <p className="text-sm font-semibold leading-[120%] text-[#333]">{message}</p>
+      </div>
+    )
+  )
+}