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

package/package.json

@@ -1,19 +1,19 @@
 {
   "name": "@anker-in/campaign-ui",
-  "version": "0.2.10-beta.2",
-  "type": "commonjs",
-  "main": "./dist/cjs/index.js",
-  "types": "./dist/cjs/index.d.ts",
-  "module": "./dist/esm/index.js",
+  "version": "0.2.10-beta.21",
+  "description": "Campaign UI components and utilities for Anker projects",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
   "exports": {
     ".": {
-      "require": {
-        "types": "./dist/cjs/index.d.ts",
-        "default": "./dist/cjs/index.js"
-      },
       "import": {
-        "types": "./dist/esm/index.d.ts",
-        "default": "./dist/esm/index.js"
+        "types": "./dist/index.d.mts",
+        "default": "./dist/index.mjs"
+      },
+      "require": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
       }
     },
     "./tailwind.config": "./tailwind.config.ts",
@@ -21,7 +21,6 @@
     "./chat.css": "./src/styles/chat.css",
     "./*": "./*"
   },
-  "description": "",
   "files": [
     "src/**",
     "dist/**",
@@ -47,16 +46,23 @@
     "@testing-library/react": "^14.3.1",
     "@types/jest": "^29.5.12",
     "@types/node": "^20",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
     "babel-jest": "^29.7.0",
-    "esbuild": "^0.20.2",
-    "esbuild-style-plugin": "^1.6.3",
     "eslint-plugin-react-hooks": "^4.6.2",
     "eslint-plugin-require-extensions": "^0.1.3",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "postcss-cli": "^11.0.0",
     "react-test-renderer": "^18.3.1",
-    "stylelint": "^16.6.0"
+    "stylelint": "^16.6.0",
+    "tsup": "^8.4.0",
+    "typescript": "^5.0.0"
+  },
+  "peerDependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "@anker-in/lib": "0.0.0-beta.1"
   },
   "dependencies": {
     "@copilotkit/react-core": "1.1.2",
@@ -79,29 +85,26 @@
     "monaco-editor": "^0.52.0",
     "postcss": "^8.4.38",
     "react-codepen-embed": "^1.1.0",
+    "swiper": "^11.1.3",
     "tailwind-merge": "^2.3.0",
     "tailwindcss": "^3.4.3",
-    "@anker-in/headless-ui": "1.0.19"
+    "@anker-in/headless-ui": "1.0.19",
+    "@anker-in/lib": "0.0.0-beta.1"
   },
-  "peerDependencies": {
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
   },
+  "exclude": [
+    "dist/**/*"
+  ],
   "scripts": {
-    "dev": "pnpm run dev:css & pnpm run dev:js:esm & pnpm run dev:js:cjs & pnpm run dev:js:esm:types & pnpm run dev:js:cjs:types",
-    "dev:js:cjs": "node esbuild-cjs.mjs watch=true",
-    "dev:js:cjs:types": "tsc --watch --incremental --outdir dist/cjs",
-    "dev:js:esm": "node esbuild-esm.mjs watch=true",
-    "dev:js:esm:types": "tsc --watch --incremental --outdir dist/esm",
+    "dev": "pnpm run dev:css & tsup --watch",
     "dev:css": "postcss src/styles/global.css -o style.css --watch",
-    "build": "pnpm run build:css & pnpm run build:js:esm & pnpm run build:js:cjs & pnpm run build:js:esm:types & pnpm run build:js:cjs:types",
-    "build:js:cjs": "node esbuild-cjs.mjs",
-    "build:js:cjs:types": "tsc --outdir dist/cjs",
-    "build:js:esm": "node esbuild-esm.mjs",
-    "build:js:esm:types": "tsc --outdir dist/esm",
-    "build:css": "postcss src/styles/chat.css -o style.css",
+    "build": "tsup",
     "lint": "eslint \"src/**/*.ts*\"",
     "test": "echo run @anker-in/campaign-ui tests",
+    "type-check": "tsc --noEmit",
     "clean": "rm -rf .turbo node_modules dist style.css"
   }
 }

package/src/components/credits/context/hooks/useActivities.ts

@@ -3,11 +3,11 @@ import { useCallback, useEffect, useState } from 'react'
 import { useAlpcMutation } from './useAlpcFetch'
 import type { CreditLogResponse } from '../response'
 import { useCreditsContext } from '../provider'
-import { useShopifyContext } from '@shopify/context/ShopifyProvider'
+import { useHeadlessContext } from '@anker-in/lib'
 
 function useActivities({ page, pageSize, options = {} }: { page: number; pageSize: number; options?: any }) {
   const { profile, isLoadingProfile } = useCreditsContext()
-  const { brand } = useShopifyContext()
+  const { brand } = useHeadlessContext()
   const [activities, setActivities] = useState<CreditLogResponse[]>([])
   const [total, setTotal] = useState(0)
 

package/src/components/credits/context/hooks/useAddressValidate.ts

@@ -1,6 +1,6 @@
-import { useRouter } from 'next/router'
 import { useCallback, useMemo, useState } from 'react'
 import { emailValidate } from '../utils'
+import { useHeadlessContext } from '@anker-in/lib'
 
 type ValidatorCallback = (value: string, params?: Record<string, any>) => boolean
 
@@ -106,7 +106,7 @@ export const useAddressValidate = ({
     email: string
   }
 }) => {
-  const { locale } = useRouter()
+  const { locale } = useHeadlessContext()
   const [errors, setErrors] = useState<{ key: string; message: string }[]>([])
 
   const addressRules: Rule[] = useMemo(() => {

package/src/components/credits/context/hooks/useAlpcFetch.ts

@@ -1,7 +1,7 @@
 import Cookies from 'js-cookie'
-import { useRouter } from 'next/router'
 import { useCallback, useRef, useState } from 'react'
 import useSWR, { type SWRConfiguration } from 'swr'
+import { useHeadlessContext } from '@anker-in/lib'
 
 import { getAlpcPath } from '../utils'
 import { useCreditsContext } from '../provider'
@@ -77,7 +77,7 @@ const fetcher = (options: FetcherOptions) => {
   })
 }
 
-const reAuth = async (locale: string, retry: boolean) => {
+const reAuth = async (locale: string, retry: boolean, brand: string) => {
   let reloginResponse = await fetch(`${getAlpcPath(locale)}/cloud/login`, {
     method: 'POST',
   })
@@ -91,12 +91,12 @@ const reAuth = async (locale: string, retry: boolean) => {
       if (Number(alpcEUCookie) === 1) {
         Cookies.set('alpcEU', '0', {
           expires: 30,
-          domain: '.soundcore.com',
+          domain: `.${brand}.com`,
         })
       } else {
         Cookies.set('alpcEU', '1', {
           expires: 30,
-          domain: '.soundcore.com',
+          domain: `.${brand}.com`,
         })
       }
 
@@ -196,7 +196,7 @@ export const useAlpcFetch = <TData>(
 
   const { enable, ...otherSwrOptions } = swrOptions || {}
 
-  const { locale = '' } = useRouter()
+  const { locale = '', brand } = useHeadlessContext()
 
   const { queryKey = [], body: fetchBody = {}, headers, ...fetchOptions } = options
   const fetchEnable = enable ?? true
@@ -224,7 +224,7 @@ export const useAlpcFetch = <TData>(
               ...fetchOptions,
             },
             onReAuth: async () => {
-              const result = await reAuth(locale, retry)
+              const result = await reAuth(locale, retry, brand)
 
               if (result) {
                 setRetry(true)
@@ -251,7 +251,7 @@ export const useAlpcMutation = <TData, TBody>(options: MutationOptions, mutation
   const [retry, setRetry] = useState(false)
   const { removeProfile } = useCreditsContext()
 
-  const { locale = '' } = useRouter()
+  const { locale = '', brand } = useHeadlessContext()
 
   const { url, initData, headers, ...fetchOptions } = options
 
@@ -274,7 +274,7 @@ export const useAlpcMutation = <TData, TBody>(options: MutationOptions, mutation
           }),
         },
         onReAuth: async () => {
-          const result = await reAuth(locale, retry)
+          const result = await reAuth(locale, retry, brand)
 
           if (result) {
             setRetry(true)

package/src/components/credits/context/hooks/useCountries.ts

@@ -1,10 +1,10 @@
-import { useRouter } from 'next/router'
 import { useEffect, useState } from 'react'
 
+import { useHeadlessContext } from '@anker-in/lib'
 import { type ShippingCountry, type ShippingZone } from '../../type'
 
 function useCountries({ shopifyStoreDomain }: { shopifyStoreDomain: string }) {
-  const { locale = '' } = useRouter()
+  const { locale = '' } = useHeadlessContext()
 
   const [isLoading, setLoading] = useState(false)
   const [countries, setCountries] = useState<ShippingCountry[]>([])

package/src/components/credits/context/hooks/useMyRewards.ts

@@ -4,7 +4,7 @@ import { ALPC_COUNTRY_MAP, AlpcConsumeType } from '../const'
 import { useAlpcMutation } from './useAlpcFetch'
 import type { RedeemLogResponse } from '../response'
 import { useCreditsContext } from '../provider'
-import { useShopifyContext } from '@shopify/context/ShopifyProvider'
+import { useHeadlessContext } from '@anker-in/lib'
 
 function useMyRewards({
   page,
@@ -16,7 +16,7 @@ function useMyRewards({
   consumeType?: AlpcConsumeType
 }) {
   const { isLoadingProfile, profile } = useCreditsContext()
-  const { brand, locale, appName } = useShopifyContext()
+  const { brand, locale, appName } = useHeadlessContext()
   const isLogin = !!profile
 
   const [myRewards, setMyRewards] = useState<RedeemLogResponse[]>([])

package/src/components/credits/context/hooks/useRedeemAndBuy.ts

@@ -1,14 +1,24 @@
-import useSWRMutation from 'swr/mutation'
+import useSWRMutation, { SWRMutationConfiguration } from 'swr/mutation'
 import { useRedeemCoupon } from './useRedeemCoupon'
-import { useCreateCartMutation } from '@shopify/hooks/useCreateCart'
-import type { ProductVariant } from '@shopify/types/product'
+import type { ProductVariant } from '@anker-in/lib'
 import { useCreditsContext } from '../provider'
+import { useBuyNow } from '@anker-in/lib'
 
-export const useRedeemAndBuy = () => {
+export const useRedeemAndBuy = (
+  _: any,
+  swrOptions?: SWRMutationConfiguration<undefined, Error, string, any> & {
+    throwOnError?: boolean
+  }
+) => {
   const { trigger } = useRedeemCoupon()
   const { profile } = useCreditsContext()
 
-  const { trigger: buyNow } = useCreateCartMutation()
+  const { trigger: buyNow } = useBuyNow(
+    {},
+    {
+      throwOnError: true,
+    }
+  )
 
   return useSWRMutation(
     'redeemAndBuy',
@@ -29,32 +39,19 @@ export const useRedeemAndBuy = () => {
         rule_id: arg.redeemId,
       })
       if (res && res?.data?.coupon_code) {
-        const cart = await buyNow({
+        buyNow({
           discountCodes: [res.data.coupon_code],
-          lines: [
+          lineItems: [
             {
-              merchandiseId: String(arg.productVariant.id),
+              variant: arg.productVariant,
               quantity: arg.quantity || 1,
             },
           ],
         })
-        if (cart?.url) {
-          return {
-            success: true,
-            url: cart.url,
-          }
-        } else {
-          return {
-            success: false,
-            error: 'Create cart failed',
-          }
-        }
       } else {
-        return {
-          success: false,
-          error: 'Redeem failed',
-        }
+        throw new Error('Redeem failed')
       }
-    }
+    },
+    swrOptions
   )
 }

package/src/components/credits/context/hooks/useRedeemCoupon.ts

@@ -1,6 +1,6 @@
 import { ALPC_COUNTRY_MAP } from '../const'
 import { useAlpcMutation, type UseMutationConfig } from './useAlpcFetch'
-import { useShopifyContext } from '@shopify/context/ShopifyProvider'
+import { useHeadlessContext } from '@anker-in/lib'
 
 type RedeemCouponResponse = {
   code: number
@@ -11,7 +11,7 @@ type RedeemCouponResponse = {
 }
 
 export const useRedeemCoupon = (mutationOptions: UseMutationConfig<RedeemCouponResponse> = {}) => {
-  const { locale, appName, brand } = useShopifyContext()
+  const { locale, appName, brand } = useHeadlessContext()
 
   return useAlpcMutation<
     RedeemCouponResponse,

package/src/components/credits/context/hooks/useRedeemProduct.ts

@@ -1,6 +1,6 @@
 import { ALPC_COUNTRY_MAP } from '../const'
 import { useAlpcMutation, type UseMutationConfig } from './useAlpcFetch'
-import { useShopifyContext } from '@shopify/context/ShopifyProvider'
+import { useHeadlessContext } from '@anker-in/lib'
 
 type RedeemProductResponse = {
   code: number
@@ -10,7 +10,7 @@ type RedeemProductResponse = {
 }
 
 export const useRedeemProduct = (mutationOptions: UseMutationConfig<RedeemProductResponse> = {}) => {
-  const { storeDomain, locale, appName, brand } = useShopifyContext()
+  const { storeDomain, locale, appName, brand } = useHeadlessContext()
 
   return useAlpcMutation<
     RedeemProductResponse,

package/src/components/credits/context/hooks/useRedeemableList.ts

@@ -4,12 +4,12 @@ import { useAlpcMutation } from './useAlpcFetch'
 import { ALPC_COUNTRY_MAP } from '../const'
 import { useCreditsContext } from '../provider'
 import type { ConsumeCreditRuleResponse } from '../response'
-import { useShopifyContext } from '@shopify/context/ShopifyProvider'
+import { useHeadlessContext } from '@anker-in/lib'
 
 function useRedeemableList() {
   let locale = '' as string
   const { profile, isLoadingProfile } = useCreditsContext()
-  const { locale: contextLocale, brand } = useShopifyContext()
+  const { locale: contextLocale, brand } = useHeadlessContext()
 
   if (contextLocale === 'pl') {
     locale = 'eu'

package/src/components/credits/context/hooks/useSendEmailValidation.ts

@@ -1,11 +1,11 @@
 import fetcher from '../../../../helpers/fetcher'
 import useSWRMutation from 'swr/mutation'
 import { useCreditsContext } from '../provider'
-import { useShopifyContext } from '@shopify/context/ShopifyProvider'
+import { useHeadlessContext } from '@anker-in/lib'
 
 export function useSendEmailValidation() {
   const { profile } = useCreditsContext()
-  const { appName, locale } = useShopifyContext()
+  const { appName, locale } = useHeadlessContext()
 
   return useSWRMutation('send-email-validation', () =>
     fetcher({

package/src/components/credits/context/hooks/useSubscribed.ts

@@ -4,11 +4,11 @@ import { TaskSubType } from '../const'
 import useActivities from './useActivities'
 import useSubscriptions from './useSubscriptions'
 import { useCreditsContext } from '../provider'
-import { useShopifyContext } from '@shopify/context/ShopifyProvider'
+import { useHeadlessContext } from '@anker-in/lib'
 
 export const useSubscribed = () => {
   const { profile } = useCreditsContext()
-  const { brand } = useShopifyContext()
+  const { brand } = useHeadlessContext()
 
   const activitiesOptions = useMemo(() => ({ page: 1, pageSize: 50 }), [])
 

package/src/components/credits/context/hooks/useSubscriptions.ts

@@ -1,12 +1,12 @@
-import { useRouter } from 'next/router'
 import { useCallback, useEffect, useRef, useState } from 'react'
 import type { Subscription } from '../../type'
 import fetcher from '../../../../helpers/fetcher'
+import { useHeadlessContext } from '@anker-in/lib'
 
 function useSubscriptions(email?: string) {
   const loading = useRef(false)
   const [subscriptionData, setSubscriptionData] = useState<Subscription>()
-  const { locale } = useRouter()
+  const { locale } = useHeadlessContext()
 
   const fetchSubscription = useCallback(async () => {
     if (!email) {

package/src/components/credits/creditsBanner/index.tsx

@@ -56,7 +56,7 @@ export function CreditsBanner({ copy }: BannerProps) {
 
         <Container className="l:h-auto !absolute inset-0 mx-auto grid h-full" asChild>
           <div className="grid grid-cols-12">
-            <div className="l:col-span-12 l:justify-start l:pt-[64px] col-span-5 flex h-full flex-col justify-center text-[#1F2021]">
+            <div className="l:col-span-12 l:justify-start l:truncate l:pt-[64px] col-span-5 flex h-full flex-col justify-center text-[#1F2021]">
               <Heading
                 as="h1"
                 size="5"

package/src/components/credits/creditsBenefits/benefitItem.tsx

@@ -24,7 +24,7 @@ const BenefitItem = ({
 }) => {
   return (
     <div
-      className="relative h-full rounded-[16px] border border-white px-[24px] pb-[26px] pt-[24px] md:min-h-[180px] md:p-[16px]"
+      className="relative flex-1 flex flex-col rounded-[16px] border border-white px-[24px] pb-[26px] pt-[24px] md:min-h-[180px] md:p-[16px]"
       style={{
         background: 'linear-gradient(119.61deg, #FAFAFA 38.58%, #FFFFFF 63.73%, #F9FCFF 89.37%)',
       }}

package/src/components/credits/creditsBenefits/index.tsx

@@ -3,14 +3,13 @@ import 'swiper/css/grid'
 import 'swiper/css/pagination'
 
 import { Container, Heading } from '@anker-in/headless-ui'
-import { useRouter } from 'next/router'
 import { useState } from 'react'
 import { Grid, Pagination } from 'swiper/modules'
 import { Swiper, SwiperSlide } from 'swiper/react'
 
 import BenefitItem, { type BenefitItemCopy } from './benefitItem'
 import { useCreditsContext } from '../context/provider'
-import { gaTrack, getGtmGroup } from '../../../helpers/track'
+import { gaTrack } from '../../../helpers/track'
 import { cn } from '../../../helpers/utils'
 
 interface CreditsBenefitsProps {
@@ -22,8 +21,7 @@ interface CreditsBenefitsProps {
 
 export const CreditsBenefits = ({ copy }: CreditsBenefitsProps) => {
   const [activeNoteIndex, setActiveNoteIndex] = useState<number | null>(null)
-  const { profile } = useCreditsContext()
-  const router = useRouter()
+  const { profile, gtm } = useCreditsContext()
 
   const handleClick = ({ item, index }: { item: BenefitItemCopy; index: number }) => {
     gaTrack({
@@ -31,7 +29,7 @@ export const CreditsBenefits = ({ copy }: CreditsBenefitsProps) => {
       event_name: 'lp_button',
       member_active_status: profile?.activated ? 'active' : 'not active',
       event_parameters: {
-        page_group: getGtmGroup(router),
+        page_group: gtm.pageGroup,
         position: copy.title,
         button_name: item.text,
         info: '',
@@ -50,7 +48,7 @@ export const CreditsBenefits = ({ copy }: CreditsBenefitsProps) => {
   return (
     <Container id="benefits" className="!z-[30] bg-[#F5F5F7]">
       <Heading as="h2" size="4" html={copy?.title} />
-      <div className="mt-[24px] grid grid-cols-2 gap-[16px] l:hidden min-md:grid-cols-3 min-xl:grid-cols-4">
+      <div className="mt-[24px] grid grid-cols-4 xl:grid-cols-3 gap-[16px] l:hidden items-stretch">
         {copy.benefits.map((item, index) => (
           <BenefitItem
             key={index}
@@ -76,7 +74,7 @@ export const CreditsBenefits = ({ copy }: CreditsBenefitsProps) => {
               slidesPerGroup: 3,
             },
           }}
-          wrapperClass="items-stretch"
+          wrapperClass="!items-stretch"
           modules={[Grid, Pagination]}
           pagination={{
             clickable: true,
@@ -88,7 +86,7 @@ export const CreditsBenefits = ({ copy }: CreditsBenefitsProps) => {
           }}
         >
           {copy.benefits.map((item, index) => (
-            <SwiperSlide key={index} className={cn('!h-auto', activeNoteIndex === index && '!z-[100]')}>
+            <SwiperSlide key={index} className={cn('!h-auto !flex', activeNoteIndex === index && '!z-[100]')}>
               <BenefitItem
                 item={item}
                 handleClick={handleClick}

package/src/components/credits/creditsCash/RedeemableItem.tsx

@@ -33,7 +33,12 @@ function RedeemableItem({
     openSignUpPopup,
     gtm: { pageGroup },
   } = useCreditsContext()
-  const { trigger, isMutating } = useRedeemAndBuy()
+  const { trigger, isMutating } = useRedeemAndBuy(
+    {},
+    {
+      onError: () => console.log('error'),
+    }
+  )
 
   const isLogin = useMemo(() => {
     return !!profile
@@ -69,28 +74,18 @@ function RedeemableItem({
   ])
 
   const handleRedeem = () => {
+    const buyNow = () =>
+      trigger({
+        productVariant: itemData?.productVariant,
+        redeemId: itemData?.config?.redeemId,
+      })
     if (!isLogin) {
       openSignUpPopup()
     } else if (!profile?.activated && !(authCodeActivate.isSendingActivateEmail || authCodeActivate.isSuccess)) {
       authCodeActivate.openAuthCodePopup()
-      authCodeActivate.setOnSuccess(async () => {
-        const { success, url, error } = await trigger({
-          productVariant: itemData?.productVariant,
-          redeemId: itemData?.config?.redeemId,
-        })
-        if (success) {
-          window.open(url, '_blank')
-        } else {
-          console.error(error)
-        }
-      })
+      authCodeActivate.setOnSuccess(buyNow)
     } else {
-      try {
-        trigger({
-          productVariant: itemData?.productVariant,
-          redeemId: itemData?.config?.redeemId,
-        })
-      } catch (error) {}
+      buyNow()
       gaTrack({
         event: 'ga4Event',
         event_name: 'lp_button',

package/src/components/credits/creditsCash/index.tsx

@@ -5,9 +5,9 @@ import RedeemableItem from './RedeemableItem'
 import useRedeemableList from '../context/hooks/useRedeemableList'
 import { cn } from '../../../helpers'
 import RulesModal from '../modal/rulesModal'
-import { useProductsByHandles } from '@shopify/hooks/useProductsByHandles'
+import { useProductsByHandles } from '@anker-in/lib'
 import { CreditsCashCopy, RedeemItem } from './type'
-import { Product } from '@shopify/types'
+import { Product } from '@anker-in/lib'
 
 export const CreditsCash = ({
   copy,

package/src/components/credits/creditsCash/type.ts

@@ -1,4 +1,4 @@
-import { ProductVariant, Product } from '@shopify/types'
+import { ProductVariant, Product } from '@anker-in/lib'
 import { AlpcConsumeType } from '../context/const'
 
 type RedeemableItemConfig = {

package/src/components/credits/creditsInfoCard/index.tsx

@@ -7,6 +7,7 @@ import { numberFormat } from '../context/utils'
 import ActivitiesModal from '../modal/activitiesModal'
 import MyRewardsModal, { type MyRewardsMetafields } from '../modal/MyRewardsModal'
 import { type MyActivitiesMetafields } from '../modal/activitiesModal'
+import { gaNormalClick } from '../../../helpers/track'
 
 type ButtonConfig = {
   text: string
@@ -30,7 +31,7 @@ export function CreditsInfoCard({ data }: InfoCardProps) {
   const [hover, setHover] = useState<boolean>(false)
 
   const handleButtonClick = useCallback((buttonConfig: ButtonConfig) => {
-    // gaNormalClick({ position: 'info_card', label: buttonConfig.text })
+    gaNormalClick({ position: 'info_card', label: buttonConfig.text })
 
     if (buttonConfig.type) {
       switch (buttonConfig.type) {
@@ -51,7 +52,7 @@ export function CreditsInfoCard({ data }: InfoCardProps) {
       <div
         className={cn(
           'mx-auto flex justify-between items-center rounded-[12px] border border-white px-[24px] py-[40px]',
-          'l:flex-col',
+          'l:flex-col l:items-start',
           'min-l:px-[48px]',
           'min-xl:px-[100px]'
         )}
@@ -63,7 +64,7 @@ export function CreditsInfoCard({ data }: InfoCardProps) {
       >
         <div
           className={cn(
-            'grid grid-cols-2 gap-[24px] font-bold md:grid-cols-1 md:flex-col md:gap-[16px] min-md:items-center'
+            'grid grid-cols-2 gap-[24px] font-bold l:w-full md:grid-cols-1 md:flex-col md:gap-[16px] min-md:items-center'
           )}
         >
           <div className="mr-[80px] md:mr-[0] md:flex-1 md-xl:mr-[64px]">

package/src/components/credits/creditsRedeemList/AddressForm/index.tsx

@@ -7,12 +7,12 @@ import { Input } from './Input'
 import { StateSelect } from './StateSelect'
 import { ALPC_COUNTRY_MAP } from '../../context/const'
 import { useCreditsContext } from '../../context/provider'
-import { useShopifyContext } from '@shopify/context/ShopifyProvider'
+import { useHeadlessContext } from '@anker-in/lib'
 import { AddressFormProps } from './type'
 
 export const AddressForm = ({ countries, countriesLoading, form, validate, errors, onChange }: AddressFormProps) => {
   const { profile, customer } = useCreditsContext()
-  const { locale } = useShopifyContext()
+  const { locale } = useHeadlessContext()
 
   const [address, setAddress] = useState<Record<string, any>>()
 

package/src/components/credits/creditsRedeemList/RedeemCouponModal.tsx

@@ -9,7 +9,7 @@ import { AlpcErrorCode } from '../context/const'
 import { CreditsModalContainer } from '../modal/modalContainer'
 import { numberFormat } from '../context/utils'
 import type { RedeemableItem as RedeemableItemType } from '../type'
-import { useShopifyContext } from '@shopify/context/ShopifyProvider'
+import { useHeadlessContext } from '@anker-in/lib'
 import { CreditsRedeemListCopy } from './type'
 
 function RedeemCouponModal({
@@ -22,7 +22,7 @@ function RedeemCouponModal({
   copy: CreditsRedeemListCopy
   onError: (code: number) => void
 }) {
-  const { locale } = useShopifyContext()
+  const { locale } = useHeadlessContext()
   const [couponCode, setCouponCode] = useState<string>()
   const [errorInfo, setErrorInfo] = useState<string>()
 

package/src/components/credits/creditsRedeemList/RedeemProductModal/Address.tsx

@@ -1,7 +1,7 @@
 import { Button, Text } from '@anker-in/headless-ui'
 import classNames from 'classnames'
 import { AddressForm } from '../AddressForm'
-import { useShopifyContext } from '@shopify/context/ShopifyProvider'
+import { useHeadlessContext } from '@anker-in/lib'
 import type { RedeemableItem as RedeemableItemType } from '../../type'
 import { CreditsRedeemListCopy } from '../type'
 import { ProductInfo } from './ProductInfo'
@@ -34,7 +34,7 @@ export const Address = ({
   handlePayment,
   item,
 }: AddressProps) => {
-  const { storeDomain } = useShopifyContext()
+  const { storeDomain } = useHeadlessContext()
   const { countries = [], isLoading: countriesLoading } = useCountries({ shopifyStoreDomain: storeDomain })
 
   return (