@commercelayer/react-components 4.7.8 → 4.7.9-beta.1
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/lib/cjs/components/addresses/AddressCountrySelector.d.ts +5 -0
- package/lib/cjs/components/addresses/AddressCountrySelector.js +1 -1
- package/lib/cjs/components/addresses/AddressStateSelector.d.ts +7 -0
- package/lib/cjs/components/addresses/AddressStateSelector.js +1 -1
- package/lib/cjs/components/customers/CustomerAddressForm.d.ts +5 -0
- package/lib/cjs/components/customers/CustomerAddressForm.js +1 -1
- package/lib/cjs/components/payment_source/ExternalPayment.js +1 -1
- package/lib/cjs/utils/countryStateCity.d.ts +798 -5
- package/lib/cjs/utils/countryStateCity.js +1 -1
- package/lib/esm/components/addresses/AddressCountrySelector.d.ts +5 -0
- package/lib/esm/components/addresses/AddressCountrySelector.js +1 -1
- package/lib/esm/components/addresses/AddressStateSelector.d.ts +7 -0
- package/lib/esm/components/addresses/AddressStateSelector.js +1 -1
- package/lib/esm/components/customers/CustomerAddressForm.d.ts +5 -0
- package/lib/esm/components/customers/CustomerAddressForm.js +1 -1
- package/lib/esm/components/payment_source/ExternalPayment.js +1 -1
- package/lib/esm/utils/countryStateCity.d.ts +798 -5
- package/lib/esm/utils/countryStateCity.js +1 -1
- package/package.json +1 -3
- package/lib/cjs/utils/isEmptyStates.d.ts +0 -1
- package/lib/cjs/utils/isEmptyStates.js +0 -2
- package/lib/esm/utils/isEmptyStates.d.ts +0 -1
- package/lib/esm/utils/isEmptyStates.js +0 -2
|
@@ -1,10 +1,15 @@
|
|
|
1
1
|
import { type BaseSelectComponentProps } from '../../typings/index';
|
|
2
2
|
import { type AddressValuesKeys } from '../../context/BillingAddressFormContext';
|
|
3
|
+
import { type Country } from '../../utils/countryStateCity';
|
|
3
4
|
type TCountryFieldName = 'billing_address_country_code' | 'shipping_address_country_code' | 'customer_address_country_code';
|
|
4
5
|
interface Props extends Omit<BaseSelectComponentProps, 'options' | 'name'>, Pick<JSX.IntrinsicElements['select'], 'className' | 'id' | 'style'> {
|
|
5
6
|
name: Extract<AddressValuesKeys, TCountryFieldName>;
|
|
6
7
|
required?: boolean;
|
|
7
8
|
disabled?: boolean;
|
|
9
|
+
/**
|
|
10
|
+
* Optional country list to override default ones.
|
|
11
|
+
*/
|
|
12
|
+
countries?: Country[];
|
|
8
13
|
}
|
|
9
14
|
export declare function AddressCountrySelector(props: Props): JSX.Element;
|
|
10
15
|
export default AddressCountrySelector;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.AddressCountrySelector=void 0;const tslib_1=require("tslib"),jsx_runtime_1=require("react/jsx-runtime"),react_1=require("react"),BaseSelect_1=tslib_1.__importDefault(require("../utils/BaseSelect")),BillingAddressFormContext_1=tslib_1.__importDefault(require("../../context/BillingAddressFormContext")),ShippingAddressFormContext_1=tslib_1.__importDefault(require("../../context/ShippingAddressFormContext")),countryStateCity_1=require("../../utils/countryStateCity"),CustomerAddressFormContext_1=tslib_1.__importDefault(require("../../context/CustomerAddressFormContext"));function AddressCountrySelector(props){const{required=!0,value,name,className}=props,p=tslib_1.__rest(props,["required","value","name","className"]),billingAddress=(0,react_1.useContext)(BillingAddressFormContext_1.default),shippingAddress=(0,react_1.useContext)(ShippingAddressFormContext_1.default),customerAddress=(0,react_1.useContext)(CustomerAddressFormContext_1.default);(0,react_1.useEffect)(()=>{value&&billingAddress?.setValue&&billingAddress.setValue(name,value),value&&shippingAddress?.setValue&&shippingAddress.setValue(name,value),value&&customerAddress?.setValue&&customerAddress.setValue(name,value)},[value]);const hasError=(0,react_1.useMemo)(()=>{var _a,_b,_c,_d,_e,_f;return!!(!((_b=(_a=billingAddress?.errors)===null||_a===void 0?void 0:_a[name])===null||_b===void 0)&&_b.error||!((_d=(_c=shippingAddress?.errors)===null||_c===void 0?void 0:_c[name])===null||_d===void 0)&&_d.error||!((_f=(_e=customerAddress?.errors)===null||_e===void 0?void 0:_e[name])===null||_f===void 0)&&_f.error)},[value,billingAddress?.errors,shippingAddress?.errors,customerAddress?.errors]),errorClassName=billingAddress?.errorClassName||shippingAddress?.errorClassName||customerAddress?.errorClassName,classNameComputed=`${className??""} ${hasError&&errorClassName?errorClassName:""}`;return(0,jsx_runtime_1.jsx)(BaseSelect_1.default,Object.assign({className:classNameComputed,ref:billingAddress?.validation||shippingAddress?.validation||customerAddress?.validation,required,options:(0,countryStateCity_1.getCountries)(),name,value},p))}exports.AddressCountrySelector=AddressCountrySelector,exports.default=AddressCountrySelector;
|
|
2
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.AddressCountrySelector=void 0;const tslib_1=require("tslib"),jsx_runtime_1=require("react/jsx-runtime"),react_1=require("react"),BaseSelect_1=tslib_1.__importDefault(require("../utils/BaseSelect")),BillingAddressFormContext_1=tslib_1.__importDefault(require("../../context/BillingAddressFormContext")),ShippingAddressFormContext_1=tslib_1.__importDefault(require("../../context/ShippingAddressFormContext")),countryStateCity_1=require("../../utils/countryStateCity"),CustomerAddressFormContext_1=tslib_1.__importDefault(require("../../context/CustomerAddressFormContext"));function AddressCountrySelector(props){const{required=!0,value,name,className,countries}=props,p=tslib_1.__rest(props,["required","value","name","className","countries"]),billingAddress=(0,react_1.useContext)(BillingAddressFormContext_1.default),shippingAddress=(0,react_1.useContext)(ShippingAddressFormContext_1.default),customerAddress=(0,react_1.useContext)(CustomerAddressFormContext_1.default);(0,react_1.useEffect)(()=>{value&&billingAddress?.setValue&&billingAddress.setValue(name,value),value&&shippingAddress?.setValue&&shippingAddress.setValue(name,value),value&&customerAddress?.setValue&&customerAddress.setValue(name,value)},[value]);const hasError=(0,react_1.useMemo)(()=>{var _a,_b,_c,_d,_e,_f;return!!(!((_b=(_a=billingAddress?.errors)===null||_a===void 0?void 0:_a[name])===null||_b===void 0)&&_b.error||!((_d=(_c=shippingAddress?.errors)===null||_c===void 0?void 0:_c[name])===null||_d===void 0)&&_d.error||!((_f=(_e=customerAddress?.errors)===null||_e===void 0?void 0:_e[name])===null||_f===void 0)&&_f.error)},[value,billingAddress?.errors,shippingAddress?.errors,customerAddress?.errors]),errorClassName=billingAddress?.errorClassName||shippingAddress?.errorClassName||customerAddress?.errorClassName,classNameComputed=`${className??""} ${hasError&&errorClassName?errorClassName:""}`;return(0,jsx_runtime_1.jsx)(BaseSelect_1.default,Object.assign({className:classNameComputed,ref:billingAddress?.validation||shippingAddress?.validation||customerAddress?.validation,required,options:(0,countryStateCity_1.getCountries)(countries),name,value},p))}exports.AddressCountrySelector=AddressCountrySelector,exports.default=AddressCountrySelector;
|
|
@@ -1,10 +1,17 @@
|
|
|
1
1
|
import { type AddressStateSelectName, type BaseSelectComponentProps } from '../../typings/index';
|
|
2
|
+
import { type States } from '../../utils/countryStateCity';
|
|
2
3
|
type Props = Omit<BaseSelectComponentProps, 'options' | 'name'> & {
|
|
3
4
|
name: AddressStateSelectName;
|
|
4
5
|
required?: boolean;
|
|
5
6
|
disabled?: boolean;
|
|
6
7
|
inputClassName?: string;
|
|
7
8
|
selectClassName?: string;
|
|
9
|
+
/**
|
|
10
|
+
* Optional states list to extend the default one.
|
|
11
|
+
* This component will try to render a select getting as options the states found for the selected country.
|
|
12
|
+
* If the country has no states, it will render a text input field instead.
|
|
13
|
+
*/
|
|
14
|
+
states?: States;
|
|
8
15
|
} & Pick<JSX.IntrinsicElements['select'], 'className' | 'id' | 'style'>;
|
|
9
16
|
export declare function AddressStateSelector(props: Props): JSX.Element;
|
|
10
17
|
export default AddressStateSelector;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.AddressStateSelector=void 0;const tslib_1=require("tslib"),jsx_runtime_1=require("react/jsx-runtime"),react_1=require("react"),BaseSelect_1=tslib_1.__importDefault(require("../utils/BaseSelect")),BillingAddressFormContext_1=tslib_1.__importDefault(require("../../context/BillingAddressFormContext")),ShippingAddressFormContext_1=tslib_1.__importDefault(require("../../context/ShippingAddressFormContext")),isEmpty_1=tslib_1.__importDefault(require("lodash/isEmpty")),countryStateCity_1=require("../../utils/countryStateCity"),
|
|
2
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.AddressStateSelector=void 0;const tslib_1=require("tslib"),jsx_runtime_1=require("react/jsx-runtime"),react_1=require("react"),BaseSelect_1=tslib_1.__importDefault(require("../utils/BaseSelect")),BillingAddressFormContext_1=tslib_1.__importDefault(require("../../context/BillingAddressFormContext")),ShippingAddressFormContext_1=tslib_1.__importDefault(require("../../context/ShippingAddressFormContext")),isEmpty_1=tslib_1.__importDefault(require("lodash/isEmpty")),countryStateCity_1=require("../../utils/countryStateCity"),AddressContext_1=tslib_1.__importDefault(require("../../context/AddressContext")),BaseInput_1=tslib_1.__importDefault(require("../utils/BaseInput")),CustomerAddressFormContext_1=tslib_1.__importDefault(require("../../context/CustomerAddressFormContext"));function AddressStateSelector(props){var _a;const{required=!0,value,name,className="",inputClassName="",selectClassName="",states}=props,p=tslib_1.__rest(props,["required","value","name","className","inputClassName","selectClassName","states"]),billingAddress=(0,react_1.useContext)(BillingAddressFormContext_1.default),shippingAddress=(0,react_1.useContext)(ShippingAddressFormContext_1.default),customerAddress=(0,react_1.useContext)(CustomerAddressFormContext_1.default),{errors:addressErrors}=(0,react_1.useContext)(AddressContext_1.default),[hasError,setHasError]=(0,react_1.useState)(!1),[countryCode,setCountryCode]=(0,react_1.useState)(""),[val,setVal]=(0,react_1.useState)(value||""),stateOptions=(0,react_1.useMemo)(()=>(0,isEmpty_1.default)(countryCode)?[]:(0,countryStateCity_1.getStateOfCountry)({countryCode,states}),[states,countryCode]),isEmptyStates=(0,react_1.useMemo)(()=>()=>(0,isEmpty_1.default)(stateOptions),[stateOptions]);(0,react_1.useEffect)(()=>{var _a2,_b,_c,_d,_e,_f,_g,_h,_j,_k,_l,_m,_o,_p;const billingCountryCode=typeof((_a2=billingAddress?.values)===null||_a2===void 0?void 0:_a2.billing_address_country_code)=="string"?(_b=billingAddress?.values)===null||_b===void 0?void 0:_b.billing_address_country_code:(_d=(_c=billingAddress?.values)===null||_c===void 0?void 0:_c.billing_address_country_code)===null||_d===void 0?void 0:_d.value;billingCountryCode&&billingCountryCode!==countryCode&&setCountryCode(billingCountryCode);const shippingCountryCode=typeof((_e=shippingAddress?.values)===null||_e===void 0?void 0:_e.shipping_address_country_code)=="string"?(_f=shippingAddress?.values)===null||_f===void 0?void 0:_f.shipping_address_country_code:(_h=(_g=shippingAddress?.values)===null||_g===void 0?void 0:_g.shipping_address_country_code)===null||_h===void 0?void 0:_h.value;if(shippingCountryCode&&shippingCountryCode!==countryCode&&setCountryCode(shippingCountryCode),[Object.keys(billingAddress).length>0,billingCountryCode,countryCode!==billingCountryCode].every(Boolean)&&billingCountryCode&&!(0,countryStateCity_1.isValidState)({stateCode:val,countryCode:billingCountryCode,states})&&!isEmptyStates()&&(billingAddress.resetField&&billingAddress?.resetField(name),setVal("")),[!(0,isEmpty_1.default)(shippingAddress),shippingCountryCode,countryCode!==shippingCountryCode].every(Boolean)&&shippingCountryCode&&!(0,countryStateCity_1.isValidState)({stateCode:val,countryCode:shippingCountryCode,states})&&!isEmptyStates()&&(shippingAddress.resetField&&shippingAddress?.resetField(name),setVal("")),!(0,isEmpty_1.default)(billingAddress)){const fieldError=(_k=(_j=billingAddress?.errors)===null||_j===void 0?void 0:_j[name])===null||_k===void 0?void 0:_k.error;setHasError(!!fieldError)}if(!(0,isEmpty_1.default)(customerAddress)){const fieldError=(_m=(_l=customerAddress?.errors)===null||_l===void 0?void 0:_l[name])===null||_m===void 0?void 0:_m.error;setHasError(!!fieldError)}if(!(0,isEmpty_1.default)(shippingAddress)){const fieldError=(_p=(_o=shippingAddress?.errors)===null||_o===void 0?void 0:_o[name])===null||_p===void 0?void 0:_p.error;setHasError(!!fieldError)}return()=>{setHasError(!1)}},[value,billingAddress,shippingAddress,addressErrors,customerAddress]);const errorClassName=billingAddress?.errorClassName||shippingAddress?.errorClassName||customerAddress?.errorClassName||"",classNameComputed=isEmptyStates()?`${className} ${inputClassName} ${hasError?errorClassName:""}`:`${className} ${selectClassName} ${hasError?errorClassName:""}`;return isEmptyStates()?(0,jsx_runtime_1.jsx)(BaseInput_1.default,Object.assign({},p,{name,ref:billingAddress?.validation||shippingAddress?.validation||customerAddress?.validation,className:classNameComputed,required,placeholder:((_a=p.placeholder)===null||_a===void 0?void 0:_a.label)||"",defaultValue:val,type:"text"})):(0,jsx_runtime_1.jsx)(BaseSelect_1.default,Object.assign({},p,{className:classNameComputed,ref:billingAddress?.validation||shippingAddress?.validation||customerAddress?.validation,required,options:stateOptions,name,value:val}))}exports.AddressStateSelector=AddressStateSelector,exports.default=AddressStateSelector;
|
|
@@ -3,6 +3,11 @@ interface Props extends Omit<JSX.IntrinsicElements['form'], 'onSubmit'> {
|
|
|
3
3
|
children: ReactNode;
|
|
4
4
|
reset?: boolean;
|
|
5
5
|
errorClassName?: string;
|
|
6
|
+
/**
|
|
7
|
+
* Array of countries that have states has select options. Ignore this if you are not overriding the default states list.
|
|
8
|
+
* If you are overriding the default states list, you must pass the countries that have states as select options.
|
|
9
|
+
*/
|
|
10
|
+
countriesWithPredefinedStateOptions?: string[];
|
|
6
11
|
}
|
|
7
12
|
export declare function CustomerAddressForm(props: Props): JSX.Element;
|
|
8
13
|
export default CustomerAddressForm;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.CustomerAddressForm=void 0;const tslib_1=require("tslib"),jsx_runtime_1=require("react/jsx-runtime"),AddressContext_1=tslib_1.__importDefault(require("../../context/AddressContext")),rapid_form_1=require("rapid-form"),react_1=require("react"),CustomerAddressFormContext_1=tslib_1.__importDefault(require("../../context/CustomerAddressFormContext")),OrderContext_1=tslib_1.__importDefault(require("../../context/OrderContext")),
|
|
2
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.CustomerAddressForm=void 0;const tslib_1=require("tslib"),jsx_runtime_1=require("react/jsx-runtime"),AddressContext_1=tslib_1.__importDefault(require("../../context/AddressContext")),rapid_form_1=require("rapid-form"),react_1=require("react"),CustomerAddressFormContext_1=tslib_1.__importDefault(require("../../context/CustomerAddressFormContext")),OrderContext_1=tslib_1.__importDefault(require("../../context/OrderContext")),countryStateCity_1=require("../../utils/countryStateCity");function CustomerAddressForm(props){const{children,errorClassName,autoComplete="on",reset=!1,countriesWithPredefinedStateOptions}=props,p=tslib_1.__rest(props,["children","errorClassName","autoComplete","reset","countriesWithPredefinedStateOptions"]),{validation,values,errors,reset:resetForm}=(0,rapid_form_1.useRapidForm)(),{setAddressErrors,setAddress}=(0,react_1.useContext)(AddressContext_1.default),{order}=(0,react_1.useContext)(OrderContext_1.default),ref=(0,react_1.useRef)(null);(0,react_1.useEffect)(()=>{var _a,_b,_c,_d;if(Object.keys(errors).length>0){const formErrors=[];for(const fieldName in errors){const code=(_a=errors[fieldName])===null||_a===void 0?void 0:_a.code,message=((_b=errors[fieldName])===null||_b===void 0?void 0:_b.message)||"";fieldName==="billing_address_state_code"?values.state_code?delete errors[fieldName]:formErrors.push({code,message,resource:"billing_address",field:fieldName}):formErrors.push({code,message,resource:"billing_address",field:fieldName})}setAddressErrors(formErrors,"billing_address")}else if(Object.keys(values).length>0){setAddressErrors([],"billing_address");for(const name in values){const field=values[name];if(field?.value&&(values[name.replace("billing_address_","")]=field.value,delete values[name]),["billing_address_state_code"].includes(name)){const countryCode=((_c=values.billing_address_country_code)===null||_c===void 0?void 0:_c.value)||values.country_code;!(0,countryStateCity_1.isEmptyStates)({countryCode,countriesWithPredefinedStateOptions})&&!field.value&&delete values.billing_address_state_code}}setAddress({values,resource:"billing_address"})}reset&&(Object.keys(values).length>0||Object.keys(errors).length>0)&&ref&&((_d=ref.current)===null||_d===void 0||_d.reset(),resetForm({target:ref.current}),setAddressErrors([],"billing_address"),setAddress({values:{},resource:"billing_address"}))},[errors,values,reset]);const providerValues={values,validation,setValue:(name,value)=>{const field={[name.replace("billing_address_","")]:value};setAddress({values:Object.assign(Object.assign({},values),field),resource:"billing_address"})},errorClassName,requiresBillingInfo:order?.requires_billing_info||!1,errors,resetField:name=>{resetForm({currentTarget:ref.current},name)}};return(0,jsx_runtime_1.jsx)(CustomerAddressFormContext_1.default.Provider,{value:providerValues,children:(0,jsx_runtime_1.jsx)("form",Object.assign({ref,autoComplete},p,{children}))})}exports.CustomerAddressForm=CustomerAddressForm,exports.default=CustomerAddressForm;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.ExternalPayment=void 0;const tslib_1=require("tslib"),jsx_runtime_1=require("react/jsx-runtime"),Parent_1=tslib_1.__importDefault(require("../utils/Parent")),PaymentMethodContext_1=tslib_1.__importDefault(require("../../context/PaymentMethodContext")),react_1=require("react");function ExternalPayment(props){const{setPaymentRef}=(0,react_1.useContext)(PaymentMethodContext_1.default),ref=(0,react_1.useRef)(null);
|
|
2
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.ExternalPayment=void 0;const tslib_1=require("tslib"),jsx_runtime_1=require("react/jsx-runtime"),Parent_1=tslib_1.__importDefault(require("../utils/Parent")),PaymentMethodContext_1=tslib_1.__importDefault(require("../../context/PaymentMethodContext")),react_1=require("react"),OrderContext_1=tslib_1.__importDefault(require("../../context/OrderContext"));function ExternalPayment(props){const{setPaymentRef}=(0,react_1.useContext)(PaymentMethodContext_1.default),{order,updateOrder}=(0,react_1.useContext)(OrderContext_1.default),ref=(0,react_1.useRef)(null);(0,react_1.useEffect)(()=>{ref?.current!=null&&(ref.current.onsubmit=()=>tslib_1.__awaiter(this,void 0,void 0,function*(){return!0}),setPaymentRef({ref}))},[ref]);const parentProps=Object.assign(Object.assign({},props),{order,updateOrder});return props?.customComponent!=null&&props.show?(0,jsx_runtime_1.jsxs)("form",{ref,children:[(0,jsx_runtime_1.jsx)(Parent_1.default,Object.assign({},parentProps,{children:props.customComponent})),props?.templateCustomerSaveToWallet!=null&&(0,jsx_runtime_1.jsx)(Parent_1.default,{name:"save_payment_source_to_customer_wallet",children:props.templateCustomerSaveToWallet})]}):null}exports.ExternalPayment=ExternalPayment,exports.default=ExternalPayment;
|