@anker-in/campaign-ui 0.4.5-beta.3 → 0.4.5-beta.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/components/credits/creditsRedeemList/AddressForm/index.js +1 -1
- package/dist/cjs/components/credits/creditsRedeemList/AddressForm/index.js.map +2 -2
- package/dist/esm/components/credits/creditsRedeemList/AddressForm/index.js +1 -1
- package/dist/esm/components/credits/creditsRedeemList/AddressForm/index.js.map +2 -2
- package/package.json +1 -1
- package/src/components/credits/creditsRedeemList/AddressForm/index.tsx +4 -6
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var K=Object.create;var y=Object.defineProperty;var z=Object.getOwnPropertyDescriptor;var L=Object.getOwnPropertyNames;var M=Object.getPrototypeOf,O=Object.prototype.hasOwnProperty;var G=(r,s)=>{for(var d in s)y(r,d,{get:s[d],enumerable:!0})},F=(r,s,d,m)=>{if(s&&typeof s=="object"||typeof s=="function")for(let c of L(s))!O.call(r,c)&&c!==d&&y(r,c,{get:()=>s[c],enumerable:!(m=z(s,c))||m.enumerable});return r};var H=(r,s,d)=>(d=r!=null?K(M(r)):{},F(s||!r||!r.__esModule?y(d,"default",{value:r,enumerable:!0}):d,r)),T=r=>F(y({},"__esModule",{value:!0}),r);var Y={};G(Y,{AddressForm:()=>V});module.exports=T(Y);var n=require("react/jsx-runtime"),C=H(require("classnames")),l=require("react"),_=require("./CountrySelect"),S=require("./FormItem"),w=require("./Input"),I=require("./StateSelect"),D=require("../../context/const"),q=require("../../context/provider"),P=require("@anker-in/lib"),R=require("../../../../constants");const V=({countries:r,countriesLoading:s,form:d,validate:m,errors:c,onChange:p})=>{const{profile:b,customer:t}=(0,q.useCreditsContext)(),{locale:v,brand:U}=(0,P.useHeadlessContext)(),B=R.ROUNDED_BRANDS.includes(U),[e,f]=(0,l.useState)(),A=(0,l.useMemo)(()=>r.find(u=>u.code===e?.country)?.provinces||[],[e,r]),h=(0,l.useMemo)(()=>d?.flat().find(u=>u.type==="state")?.key,[d]),k=(0,l.useCallback)(()=>{if(t?.defaultAddress)return{name:(t?.defaultAddress.firstName||"")+" "+(t?.defaultAddress.lastName||""),first_name:t?.defaultAddress.firstName,last_name:t?.defaultAddress.lastName,address1:t?.defaultAddress.address1,address2:t?.defaultAddress.address2,city:t?.defaultAddress.city,phone:t?.defaultAddress.phone,country:t?.defaultAddress.countryCodeV2,province:t?.defaultAddress.province,province_code:t?.defaultAddress.provinceCode,email:t?.email||b?.email,zip:t?.defaultAddress.zip};{let a=D.ALPC_COUNTRY_MAP.get(v)||v;return a==="UK"&&(a="GB"),a==="EU"&&(a="NL"),{email:b?.email,country:a}}},[t,b?.email,v]);return(0,l.useEffect)(()=>{
|
|
1
|
+
"use strict";var K=Object.create;var y=Object.defineProperty;var z=Object.getOwnPropertyDescriptor;var L=Object.getOwnPropertyNames;var M=Object.getPrototypeOf,O=Object.prototype.hasOwnProperty;var G=(r,s)=>{for(var d in s)y(r,d,{get:s[d],enumerable:!0})},F=(r,s,d,m)=>{if(s&&typeof s=="object"||typeof s=="function")for(let c of L(s))!O.call(r,c)&&c!==d&&y(r,c,{get:()=>s[c],enumerable:!(m=z(s,c))||m.enumerable});return r};var H=(r,s,d)=>(d=r!=null?K(M(r)):{},F(s||!r||!r.__esModule?y(d,"default",{value:r,enumerable:!0}):d,r)),T=r=>F(y({},"__esModule",{value:!0}),r);var Y={};G(Y,{AddressForm:()=>V});module.exports=T(Y);var n=require("react/jsx-runtime"),C=H(require("classnames")),l=require("react"),_=require("./CountrySelect"),S=require("./FormItem"),w=require("./Input"),I=require("./StateSelect"),D=require("../../context/const"),q=require("../../context/provider"),P=require("@anker-in/lib"),R=require("../../../../constants");const V=({countries:r,countriesLoading:s,form:d,validate:m,errors:c,onChange:p})=>{const{profile:b,customer:t}=(0,q.useCreditsContext)(),{locale:v,brand:U}=(0,P.useHeadlessContext)(),B=R.ROUNDED_BRANDS.includes(U),[e,f]=(0,l.useState)(),A=(0,l.useMemo)(()=>r.find(u=>u.code===e?.country)?.provinces||[],[e,r]),h=(0,l.useMemo)(()=>d?.flat().find(u=>u.type==="state")?.key,[d]),k=(0,l.useCallback)(()=>{if(t?.defaultAddress)return{name:(t?.defaultAddress.firstName||"")+" "+(t?.defaultAddress.lastName||""),first_name:t?.defaultAddress.firstName,last_name:t?.defaultAddress.lastName,address1:t?.defaultAddress.address1,address2:t?.defaultAddress.address2,city:t?.defaultAddress.city,phone:t?.defaultAddress.phone,country:t?.defaultAddress.countryCodeV2,province:t?.defaultAddress.province,province_code:t?.defaultAddress.provinceCode,email:t?.email||b?.email,zip:t?.defaultAddress.zip};{let a=D.ALPC_COUNTRY_MAP.get(v)||v;return a==="UK"&&(a="GB"),a==="EU"&&(a="NL"),{email:b?.email,country:a}}},[t,b?.email,v]);return(0,l.useEffect)(()=>{const a=k();f(a),p(a)},[k]),e?(0,n.jsx)("div",{className:"grid gap-[20px]",children:d&&d.map((a,u)=>(0,n.jsx)("div",{className:"item-center -mx-[6px] flex",children:a.map((o,E)=>{const N=c.find(i=>i.key===o.key)?.message,x=(0,C.default)("h-full w-full appearance-none rounded-[2px] border bg-white px-[14px] py-[17px] leading-[1] outline-none placeholder:text-[#999] autofill:shadow-white focus:border-brand disabled:pointer-events-none disabled:text-[#999] disabled:bg-[#F7F8F9] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none",N?"!border-[#F84D4F]":"border-[#d8d8d8]",!B&&"rounded-none");return o.type==="state"&&!A.length?null:(0,n.jsx)("div",{className:(0,C.default)("mx-[6px] flex-1"),children:(0,n.jsxs)(S.FormItem,{error:N,required:o.required,label:o.label,children:[o.type==="country"&&(0,n.jsx)(_.CountrySelect,{className:x,countries:r,loading:s,value:e.country,onChange:i=>{e.country!==i&&(e.province="",e.province_code=""),e.country=i,f({...e}),p(e)}}),o.type==="state"&&(0,n.jsx)(I.StateSelect,{className:x,states:A,stateCode:e.province_code,stateName:e.province,onChange:(i,g)=>{e.province_code=i,e.province=g,f({...e}),p(e)}}),o.type!=="state"&&o.type!=="country"&&(0,n.jsx)(w.Input,{placeholder:o.label,className:x,error:N,value:e[o.key],required:o.required,disabled:o.type==="email",onChange:i=>{const g=i.target.value;e[o.key]=g,f({...e}),p(e)},onBlur:()=>{m({ignoreKeys:A.length&&h?[h]:[]})}})]})},E)})},u))}):null};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../src/components/credits/creditsRedeemList/AddressForm/index.tsx"],
|
|
4
|
-
"sourcesContent": ["import classNames from 'classnames'\nimport { useCallback, useEffect, useMemo, useState } from 'react'\n\nimport { CountrySelect } from './CountrySelect'\nimport { FormItem } from './FormItem'\nimport { Input } from './Input'\nimport { StateSelect } from './StateSelect'\nimport { ALPC_COUNTRY_MAP } from '../../context/const'\nimport { useCreditsContext } from '../../context/provider'\nimport { useHeadlessContext } from '@anker-in/lib'\nimport { AddressFormProps } from './type'\nimport { ROUNDED_BRANDS } from '../../../../constants'\n\nexport const AddressForm = ({ countries, countriesLoading, form, validate, errors, onChange }: AddressFormProps) => {\n const { profile, customer } = useCreditsContext()\n const { locale, brand } = useHeadlessContext()\n const rounded = ROUNDED_BRANDS.includes(brand)\n const [address, setAddress] = useState<Record<string, any>>()\n\n const states = useMemo(() => {\n const currentCountry = countries.find(item => item.code === address?.country)\n\n return currentCountry?.provinces || []\n }, [address, countries])\n\n const stateInputKey = useMemo(() => {\n const stateInput = form?.flat().find(item => item.type === 'state')\n return stateInput?.key\n }, [form])\n\n const getDefaultAddress = useCallback(() => {\n if (customer?.defaultAddress) {\n return {\n name: (customer?.defaultAddress.firstName || '') + ' ' + (customer?.defaultAddress.lastName || ''),\n first_name: customer?.defaultAddress.firstName,\n last_name: customer?.defaultAddress.lastName,\n address1: customer?.defaultAddress.address1,\n address2: customer?.defaultAddress.address2,\n city: customer?.defaultAddress.city,\n phone: customer?.defaultAddress.phone,\n country: customer?.defaultAddress.countryCodeV2,\n province: customer?.defaultAddress.province,\n province_code: customer?.defaultAddress.provinceCode,\n email: customer?.email || profile?.email,\n zip: customer?.defaultAddress.zip,\n }\n } else {\n let defaultCountry = ALPC_COUNTRY_MAP.get(locale) || locale\n if (defaultCountry === 'UK') {\n defaultCountry = 'GB'\n }\n if (defaultCountry === 'EU') {\n defaultCountry = 'NL'\n }\n return {\n email: profile?.email,\n country: defaultCountry,\n }\n }\n }, [customer, profile?.email, locale])\n\n useEffect(() => {\n
|
|
5
|
-
"mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,iBAAAE,IAAA,eAAAC,EAAAH,
|
|
4
|
+
"sourcesContent": ["import classNames from 'classnames'\nimport { useCallback, useEffect, useMemo, useState } from 'react'\n\nimport { CountrySelect } from './CountrySelect'\nimport { FormItem } from './FormItem'\nimport { Input } from './Input'\nimport { StateSelect } from './StateSelect'\nimport { ALPC_COUNTRY_MAP } from '../../context/const'\nimport { useCreditsContext } from '../../context/provider'\nimport { useHeadlessContext } from '@anker-in/lib'\nimport { AddressFormProps } from './type'\nimport { ROUNDED_BRANDS } from '../../../../constants'\n\nexport const AddressForm = ({ countries, countriesLoading, form, validate, errors, onChange }: AddressFormProps) => {\n const { profile, customer } = useCreditsContext()\n const { locale, brand } = useHeadlessContext()\n const rounded = ROUNDED_BRANDS.includes(brand)\n const [address, setAddress] = useState<Record<string, any>>()\n\n const states = useMemo(() => {\n const currentCountry = countries.find(item => item.code === address?.country)\n\n return currentCountry?.provinces || []\n }, [address, countries])\n\n const stateInputKey = useMemo(() => {\n const stateInput = form?.flat().find(item => item.type === 'state')\n return stateInput?.key\n }, [form])\n\n const getDefaultAddress = useCallback(() => {\n if (customer?.defaultAddress) {\n return {\n name: (customer?.defaultAddress.firstName || '') + ' ' + (customer?.defaultAddress.lastName || ''),\n first_name: customer?.defaultAddress.firstName,\n last_name: customer?.defaultAddress.lastName,\n address1: customer?.defaultAddress.address1,\n address2: customer?.defaultAddress.address2,\n city: customer?.defaultAddress.city,\n phone: customer?.defaultAddress.phone,\n country: customer?.defaultAddress.countryCodeV2,\n province: customer?.defaultAddress.province,\n province_code: customer?.defaultAddress.provinceCode,\n email: customer?.email || profile?.email,\n zip: customer?.defaultAddress.zip,\n }\n } else {\n let defaultCountry = ALPC_COUNTRY_MAP.get(locale) || locale\n if (defaultCountry === 'UK') {\n defaultCountry = 'GB'\n }\n if (defaultCountry === 'EU') {\n defaultCountry = 'NL'\n }\n return {\n email: profile?.email,\n country: defaultCountry,\n }\n }\n }, [customer, profile?.email, locale])\n\n useEffect(() => {\n const defaultAddress = getDefaultAddress()\n setAddress(defaultAddress)\n onChange(defaultAddress)\n }, [getDefaultAddress])\n\n if (!address) {\n return null\n }\n\n return (\n <div className=\"grid gap-[20px]\">\n {form &&\n form.map((row, rowIndex: number) => (\n <div key={rowIndex} className=\"item-center -mx-[6px] flex\">\n {row.map((input, inputIndex: number) => {\n const error = errors.find(item => item.key === input.key)?.message\n const inputClassName = classNames(\n 'h-full w-full appearance-none rounded-[2px] border bg-white px-[14px] py-[17px] leading-[1] outline-none placeholder:text-[#999] autofill:shadow-white focus:border-brand disabled:pointer-events-none disabled:text-[#999] disabled:bg-[#F7F8F9] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none',\n error ? '!border-[#F84D4F]' : 'border-[#d8d8d8]',\n !rounded && 'rounded-none'\n )\n\n if (input.type === 'state') {\n if (!states.length) {\n return null\n }\n }\n\n return (\n <div key={inputIndex} className={classNames('mx-[6px] flex-1')}>\n <FormItem error={error} required={input.required} label={input.label}>\n {input.type === 'country' && (\n <CountrySelect\n className={inputClassName}\n countries={countries}\n loading={countriesLoading}\n value={address.country}\n onChange={selectedCountryCode => {\n if (address.country !== selectedCountryCode) {\n address.province = ''\n address.province_code = ''\n }\n address.country = selectedCountryCode\n setAddress({ ...address })\n onChange(address)\n }}\n ></CountrySelect>\n )}\n {input.type === 'state' && (\n <StateSelect\n className={inputClassName}\n states={states}\n stateCode={address.province_code}\n stateName={address.province}\n onChange={(provinceCode, provinceName) => {\n address.province_code = provinceCode\n address.province = provinceName\n setAddress({ ...address })\n onChange(address)\n }}\n ></StateSelect>\n )}\n\n {input.type !== 'state' && input.type !== 'country' && (\n <Input\n placeholder={input.label}\n className={inputClassName}\n error={error}\n value={address[input.key]}\n required={input.required}\n disabled={input.type === 'email'}\n onChange={event => {\n const value = event.target.value\n address[input.key] = value\n setAddress({ ...address })\n onChange(address)\n }}\n onBlur={() => {\n validate({\n ignoreKeys: states.length && stateInputKey ? [stateInputKey] : [],\n })\n }}\n />\n )}\n </FormItem>\n </div>\n )\n })}\n </div>\n ))}\n </div>\n )\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["AddressForm_exports", "__export", "AddressForm", "__toCommonJS", "import_jsx_runtime", "import_classnames", "import_react", "import_CountrySelect", "import_FormItem", "import_Input", "import_StateSelect", "import_const", "import_provider", "import_lib", "import_constants", "countries", "countriesLoading", "form", "validate", "errors", "onChange", "profile", "customer", "locale", "brand", "rounded", "address", "setAddress", "states", "item", "stateInputKey", "getDefaultAddress", "defaultCountry", "defaultAddress", "row", "rowIndex", "input", "inputIndex", "error", "inputClassName", "classNames", "selectedCountryCode", "provinceCode", "provinceName", "event", "value"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsx as o,jsxs as z}from"react/jsx-runtime";import N from"classnames";import{useCallback as S,useEffect as w,useMemo as x,useState as I}from"react";import{CountrySelect as D}from"./CountrySelect";import{FormItem as q}from"./FormItem";import{Input as P}from"./Input";import{StateSelect as R}from"./StateSelect";import{ALPC_COUNTRY_MAP as U}from"../../context/const";import{useCreditsContext as B}from"../../context/provider";import{useHeadlessContext as E}from"@anker-in/lib";import{ROUNDED_BRANDS as K}from"../../../../constants";const Z=({countries:c,countriesLoading:g,form:n,validate:C,errors:h,onChange:l})=>{const{profile:u,customer:r}=B(),{locale:m,brand:k}=E(),F=K.includes(k),[e,i]=I(),p=x(()=>c.find(a=>a.code===e?.country)?.provinces||[],[e,c]),v=x(()=>n?.flat().find(a=>a.type==="state")?.key,[n]),A=S(()=>{if(r?.defaultAddress)return{name:(r?.defaultAddress.firstName||"")+" "+(r?.defaultAddress.lastName||""),first_name:r?.defaultAddress.firstName,last_name:r?.defaultAddress.lastName,address1:r?.defaultAddress.address1,address2:r?.defaultAddress.address2,city:r?.defaultAddress.city,phone:r?.defaultAddress.phone,country:r?.defaultAddress.countryCodeV2,province:r?.defaultAddress.province,province_code:r?.defaultAddress.provinceCode,email:r?.email||u?.email,zip:r?.defaultAddress.zip};{let s=U.get(m)||m;return s==="UK"&&(s="GB"),s==="EU"&&(s="NL"),{email:u?.email,country:s}}},[r,u?.email,m]);return w(()=>{
|
|
1
|
+
import{jsx as o,jsxs as z}from"react/jsx-runtime";import N from"classnames";import{useCallback as S,useEffect as w,useMemo as x,useState as I}from"react";import{CountrySelect as D}from"./CountrySelect";import{FormItem as q}from"./FormItem";import{Input as P}from"./Input";import{StateSelect as R}from"./StateSelect";import{ALPC_COUNTRY_MAP as U}from"../../context/const";import{useCreditsContext as B}from"../../context/provider";import{useHeadlessContext as E}from"@anker-in/lib";import{ROUNDED_BRANDS as K}from"../../../../constants";const Z=({countries:c,countriesLoading:g,form:n,validate:C,errors:h,onChange:l})=>{const{profile:u,customer:r}=B(),{locale:m,brand:k}=E(),F=K.includes(k),[e,i]=I(),p=x(()=>c.find(a=>a.code===e?.country)?.provinces||[],[e,c]),v=x(()=>n?.flat().find(a=>a.type==="state")?.key,[n]),A=S(()=>{if(r?.defaultAddress)return{name:(r?.defaultAddress.firstName||"")+" "+(r?.defaultAddress.lastName||""),first_name:r?.defaultAddress.firstName,last_name:r?.defaultAddress.lastName,address1:r?.defaultAddress.address1,address2:r?.defaultAddress.address2,city:r?.defaultAddress.city,phone:r?.defaultAddress.phone,country:r?.defaultAddress.countryCodeV2,province:r?.defaultAddress.province,province_code:r?.defaultAddress.provinceCode,email:r?.email||u?.email,zip:r?.defaultAddress.zip};{let s=U.get(m)||m;return s==="UK"&&(s="GB"),s==="EU"&&(s="NL"),{email:u?.email,country:s}}},[r,u?.email,m]);return w(()=>{const s=A();i(s),l(s)},[A]),e?o("div",{className:"grid gap-[20px]",children:n&&n.map((s,a)=>o("div",{className:"item-center -mx-[6px] flex",children:s.map((t,_)=>{const f=h.find(d=>d.key===t.key)?.message,y=N("h-full w-full appearance-none rounded-[2px] border bg-white px-[14px] py-[17px] leading-[1] outline-none placeholder:text-[#999] autofill:shadow-white focus:border-brand disabled:pointer-events-none disabled:text-[#999] disabled:bg-[#F7F8F9] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none",f?"!border-[#F84D4F]":"border-[#d8d8d8]",!F&&"rounded-none");return t.type==="state"&&!p.length?null:o("div",{className:N("mx-[6px] flex-1"),children:z(q,{error:f,required:t.required,label:t.label,children:[t.type==="country"&&o(D,{className:y,countries:c,loading:g,value:e.country,onChange:d=>{e.country!==d&&(e.province="",e.province_code=""),e.country=d,i({...e}),l(e)}}),t.type==="state"&&o(R,{className:y,states:p,stateCode:e.province_code,stateName:e.province,onChange:(d,b)=>{e.province_code=d,e.province=b,i({...e}),l(e)}}),t.type!=="state"&&t.type!=="country"&&o(P,{placeholder:t.label,className:y,error:f,value:e[t.key],required:t.required,disabled:t.type==="email",onChange:d=>{const b=d.target.value;e[t.key]=b,i({...e}),l(e)},onBlur:()=>{C({ignoreKeys:p.length&&v?[v]:[]})}})]})},_)})},a))}):null};export{Z as AddressForm};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../src/components/credits/creditsRedeemList/AddressForm/index.tsx"],
|
|
4
|
-
"sourcesContent": ["import classNames from 'classnames'\nimport { useCallback, useEffect, useMemo, useState } from 'react'\n\nimport { CountrySelect } from './CountrySelect'\nimport { FormItem } from './FormItem'\nimport { Input } from './Input'\nimport { StateSelect } from './StateSelect'\nimport { ALPC_COUNTRY_MAP } from '../../context/const'\nimport { useCreditsContext } from '../../context/provider'\nimport { useHeadlessContext } from '@anker-in/lib'\nimport { AddressFormProps } from './type'\nimport { ROUNDED_BRANDS } from '../../../../constants'\n\nexport const AddressForm = ({ countries, countriesLoading, form, validate, errors, onChange }: AddressFormProps) => {\n const { profile, customer } = useCreditsContext()\n const { locale, brand } = useHeadlessContext()\n const rounded = ROUNDED_BRANDS.includes(brand)\n const [address, setAddress] = useState<Record<string, any>>()\n\n const states = useMemo(() => {\n const currentCountry = countries.find(item => item.code === address?.country)\n\n return currentCountry?.provinces || []\n }, [address, countries])\n\n const stateInputKey = useMemo(() => {\n const stateInput = form?.flat().find(item => item.type === 'state')\n return stateInput?.key\n }, [form])\n\n const getDefaultAddress = useCallback(() => {\n if (customer?.defaultAddress) {\n return {\n name: (customer?.defaultAddress.firstName || '') + ' ' + (customer?.defaultAddress.lastName || ''),\n first_name: customer?.defaultAddress.firstName,\n last_name: customer?.defaultAddress.lastName,\n address1: customer?.defaultAddress.address1,\n address2: customer?.defaultAddress.address2,\n city: customer?.defaultAddress.city,\n phone: customer?.defaultAddress.phone,\n country: customer?.defaultAddress.countryCodeV2,\n province: customer?.defaultAddress.province,\n province_code: customer?.defaultAddress.provinceCode,\n email: customer?.email || profile?.email,\n zip: customer?.defaultAddress.zip,\n }\n } else {\n let defaultCountry = ALPC_COUNTRY_MAP.get(locale) || locale\n if (defaultCountry === 'UK') {\n defaultCountry = 'GB'\n }\n if (defaultCountry === 'EU') {\n defaultCountry = 'NL'\n }\n return {\n email: profile?.email,\n country: defaultCountry,\n }\n }\n }, [customer, profile?.email, locale])\n\n useEffect(() => {\n
|
|
5
|
-
"mappings": "
|
|
4
|
+
"sourcesContent": ["import classNames from 'classnames'\nimport { useCallback, useEffect, useMemo, useState } from 'react'\n\nimport { CountrySelect } from './CountrySelect'\nimport { FormItem } from './FormItem'\nimport { Input } from './Input'\nimport { StateSelect } from './StateSelect'\nimport { ALPC_COUNTRY_MAP } from '../../context/const'\nimport { useCreditsContext } from '../../context/provider'\nimport { useHeadlessContext } from '@anker-in/lib'\nimport { AddressFormProps } from './type'\nimport { ROUNDED_BRANDS } from '../../../../constants'\n\nexport const AddressForm = ({ countries, countriesLoading, form, validate, errors, onChange }: AddressFormProps) => {\n const { profile, customer } = useCreditsContext()\n const { locale, brand } = useHeadlessContext()\n const rounded = ROUNDED_BRANDS.includes(brand)\n const [address, setAddress] = useState<Record<string, any>>()\n\n const states = useMemo(() => {\n const currentCountry = countries.find(item => item.code === address?.country)\n\n return currentCountry?.provinces || []\n }, [address, countries])\n\n const stateInputKey = useMemo(() => {\n const stateInput = form?.flat().find(item => item.type === 'state')\n return stateInput?.key\n }, [form])\n\n const getDefaultAddress = useCallback(() => {\n if (customer?.defaultAddress) {\n return {\n name: (customer?.defaultAddress.firstName || '') + ' ' + (customer?.defaultAddress.lastName || ''),\n first_name: customer?.defaultAddress.firstName,\n last_name: customer?.defaultAddress.lastName,\n address1: customer?.defaultAddress.address1,\n address2: customer?.defaultAddress.address2,\n city: customer?.defaultAddress.city,\n phone: customer?.defaultAddress.phone,\n country: customer?.defaultAddress.countryCodeV2,\n province: customer?.defaultAddress.province,\n province_code: customer?.defaultAddress.provinceCode,\n email: customer?.email || profile?.email,\n zip: customer?.defaultAddress.zip,\n }\n } else {\n let defaultCountry = ALPC_COUNTRY_MAP.get(locale) || locale\n if (defaultCountry === 'UK') {\n defaultCountry = 'GB'\n }\n if (defaultCountry === 'EU') {\n defaultCountry = 'NL'\n }\n return {\n email: profile?.email,\n country: defaultCountry,\n }\n }\n }, [customer, profile?.email, locale])\n\n useEffect(() => {\n const defaultAddress = getDefaultAddress()\n setAddress(defaultAddress)\n onChange(defaultAddress)\n }, [getDefaultAddress])\n\n if (!address) {\n return null\n }\n\n return (\n <div className=\"grid gap-[20px]\">\n {form &&\n form.map((row, rowIndex: number) => (\n <div key={rowIndex} className=\"item-center -mx-[6px] flex\">\n {row.map((input, inputIndex: number) => {\n const error = errors.find(item => item.key === input.key)?.message\n const inputClassName = classNames(\n 'h-full w-full appearance-none rounded-[2px] border bg-white px-[14px] py-[17px] leading-[1] outline-none placeholder:text-[#999] autofill:shadow-white focus:border-brand disabled:pointer-events-none disabled:text-[#999] disabled:bg-[#F7F8F9] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none',\n error ? '!border-[#F84D4F]' : 'border-[#d8d8d8]',\n !rounded && 'rounded-none'\n )\n\n if (input.type === 'state') {\n if (!states.length) {\n return null\n }\n }\n\n return (\n <div key={inputIndex} className={classNames('mx-[6px] flex-1')}>\n <FormItem error={error} required={input.required} label={input.label}>\n {input.type === 'country' && (\n <CountrySelect\n className={inputClassName}\n countries={countries}\n loading={countriesLoading}\n value={address.country}\n onChange={selectedCountryCode => {\n if (address.country !== selectedCountryCode) {\n address.province = ''\n address.province_code = ''\n }\n address.country = selectedCountryCode\n setAddress({ ...address })\n onChange(address)\n }}\n ></CountrySelect>\n )}\n {input.type === 'state' && (\n <StateSelect\n className={inputClassName}\n states={states}\n stateCode={address.province_code}\n stateName={address.province}\n onChange={(provinceCode, provinceName) => {\n address.province_code = provinceCode\n address.province = provinceName\n setAddress({ ...address })\n onChange(address)\n }}\n ></StateSelect>\n )}\n\n {input.type !== 'state' && input.type !== 'country' && (\n <Input\n placeholder={input.label}\n className={inputClassName}\n error={error}\n value={address[input.key]}\n required={input.required}\n disabled={input.type === 'email'}\n onChange={event => {\n const value = event.target.value\n address[input.key] = value\n setAddress({ ...address })\n onChange(address)\n }}\n onBlur={() => {\n validate({\n ignoreKeys: states.length && stateInputKey ? [stateInputKey] : [],\n })\n }}\n />\n )}\n </FormItem>\n </div>\n )\n })}\n </div>\n ))}\n </div>\n )\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["jsx", "jsxs", "classNames", "useCallback", "useEffect", "useMemo", "useState", "CountrySelect", "FormItem", "Input", "StateSelect", "ALPC_COUNTRY_MAP", "useCreditsContext", "useHeadlessContext", "ROUNDED_BRANDS", "AddressForm", "countries", "countriesLoading", "form", "validate", "errors", "onChange", "profile", "customer", "locale", "brand", "rounded", "address", "setAddress", "states", "item", "stateInputKey", "getDefaultAddress", "defaultCountry", "defaultAddress", "row", "rowIndex", "input", "inputIndex", "error", "inputClassName", "selectedCountryCode", "provinceCode", "provinceName", "event", "value"]
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -60,12 +60,10 @@ export const AddressForm = ({ countries, countriesLoading, form, validate, error
|
|
|
60
60
|
}, [customer, profile?.email, locale])
|
|
61
61
|
|
|
62
62
|
useEffect(() => {
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
}
|
|
68
|
-
}, [customer, getDefaultAddress])
|
|
63
|
+
const defaultAddress = getDefaultAddress()
|
|
64
|
+
setAddress(defaultAddress)
|
|
65
|
+
onChange(defaultAddress)
|
|
66
|
+
}, [getDefaultAddress])
|
|
69
67
|
|
|
70
68
|
if (!address) {
|
|
71
69
|
return null
|