@commercelayer/react-components 3.2.0 → 3.2.1

package/README.md

@@ -105,7 +105,7 @@ import {
 
 You can style the selling price and the full price as you like by passing the `className` and `compareClassName` props to the `Price` component. You can choose not to show the full price by passing `showCompare={false}` (default is `true`).
 
-If you need to paginate the list of prices, pass the `perPage` prop to the `PricesContainer` component (default is `10`) — to learn how pagination works, check our [API reference](https://docs.commercelayer.io/api/pagination) or our [SDK documentation](https://github.com/commercelayer/commercelayer-js-sdk#how-to-paginate-a-collection-of-skus).
+If you need to paginate the list of prices, pass the `perPage` prop to the `PricesContainer` component (default is `10`) — to learn how pagination works, check our [API reference](https://docs.commercelayer.io/api/pagination) or our [SDK documentation](https://github.com/commercelayer/commercelayer-sdk#how-to-paginate-a-collection-of-skus).
 
 ## Add to cart
 
@@ -186,7 +186,7 @@ When you add a product to your shopping cart:
 
 > A common best practice — especially for multi-country ecommerce — is to use as `persistKey` a key containing the country code, so that you have a different shopping cart for each country.
 
-If you need to set some of the [order object](https://docs.commercelayer.io/api/resources/orders/create_order) attributes at the moment of the order creation, pass to the optional prop `attributes` to the `OrderContainer` component.
+If you need to set some of the [order object](https://docs.commercelayer.io/developers/v/api-reference/orders/object) attributes at the moment of the order creation, pass to the optional prop `attributes` to the `OrderContainer` component.
 
 ## Shopping cart
 

package/lib/components/BillingAddressForm.js

@@ -1 +1 @@
-import{__rest}from"tslib";import{jsx as _jsx}from"react/jsx-runtime";import AddressesContext from"../context/AddressContext";import useRapidForm from"rapid-form";import{useContext,useEffect,useRef}from"react";import BillingAddressFormContext from"../context/BillingAddressFormContext";import{isEmpty}from"lodash";import components from"../config/components";import OrderContext from"../context/OrderContext";import{getSaveBillingAddressToAddressBook}from"../utils/localStorage";import{businessMandatoryField}from"../utils/validateFormFields";const propTypes=components.BillingAddressForm.propTypes,BillingAddressForm=props=>{const{children,errorClassName,autoComplete="on",reset=!1}=props,p=__rest(props,["children","errorClassName","autoComplete","reset"]),{validation,values,errors,reset:resetForm}=useRapidForm(),{setAddressErrors,setAddress,isBusiness}=useContext(AddressesContext),{saveAddressToCustomerAddressBook,order,include,addResourceToInclude,includeLoaded}=useContext(OrderContext),ref=useRef(null);useEffect(()=>{var _a,_b,_c;if((include==null?void 0:include.includes("billing_address"))?(includeLoaded==null?void 0:includeLoaded.billing_address)||addResourceToInclude({newResourceLoaded:{billing_address:!0}}):addResourceToInclude({newResource:"billing_address"}),isEmpty(errors)){if(!isEmpty(values)){setAddressErrors([],"billing_address");for(const name in values){const field=values[name];businessMandatoryField(name,isBusiness)||delete values[name],(field==null?void 0:field.value)&&(values[name.replace("billing_address_","")]=field.value,delete values[name]),(field==null?void 0:field.type)==="checkbox"&&(delete values[name],saveAddressToCustomerAddressBook({type:"billing_address",value:field.checked}))}console.log("values",values),setAddress({values:Object.assign(Object.assign({},values),isBusiness&&{business:isBusiness}),resource:"billing_address"})}}else{const formErrors=[];for(const fieldName in errors){const{code,message}=errors[fieldName];["billing_address_state_code"].includes(fieldName)?isEmpty(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")}const checkboxChecked=((_b=(_a=ref.current)===null||_a===void 0?void 0:_a.querySelector('[name="billing_address_save_to_customer_book"]'))===null||_b===void 0?void 0:_b.checked)||getSaveBillingAddressToAddressBook();reset&&(!isEmpty(values)||!isEmpty(errors)||checkboxChecked)&&(saveAddressToCustomerAddressBook&&saveAddressToCustomerAddressBook({type:"billing_address",value:!1}),ref&&((_c=ref.current)===null||_c===void 0||_c.reset(),resetForm({target:ref.current}),setAddressErrors([],"billing_address"),setAddress({values:{},resource:"billing_address"})))},[errors,values,reset,include,includeLoaded,isBusiness]);const providerValues={isBusiness,values,validation,setValue:(name,value)=>{const field={[name.replace("billing_address_","")]:value};setAddress({values:Object.assign(Object.assign(Object.assign({},values),field),isBusiness&&{business:isBusiness}),resource:"billing_address"})},errorClassName,requiresBillingInfo:(order==null?void 0:order.requires_billing_info)||!1,errors,resetField:name=>resetForm({currentTarget:ref.current},name)};return _jsx(BillingAddressFormContext.Provider,Object.assign({value:providerValues},{children:_jsx("form",Object.assign({ref,autoComplete},p,{children}),void 0)}),void 0)};BillingAddressForm.propTypes=propTypes;export default BillingAddressForm;
+import{__rest}from"tslib";import{jsx as _jsx}from"react/jsx-runtime";import AddressesContext from"../context/AddressContext";import useRapidForm from"rapid-form";import{useContext,useEffect,useRef}from"react";import BillingAddressFormContext from"../context/BillingAddressFormContext";import{isEmpty}from"lodash";import components from"../config/components";import OrderContext from"../context/OrderContext";import{getSaveBillingAddressToAddressBook}from"../utils/localStorage";import{businessMandatoryField}from"../utils/validateFormFields";const propTypes=components.BillingAddressForm.propTypes,BillingAddressForm=props=>{const{children,errorClassName,autoComplete="on",reset=!1}=props,p=__rest(props,["children","errorClassName","autoComplete","reset"]),{validation,values,errors,reset:resetForm}=useRapidForm(),{setAddressErrors,setAddress,isBusiness}=useContext(AddressesContext),{saveAddressToCustomerAddressBook,order,include,addResourceToInclude,includeLoaded}=useContext(OrderContext),ref=useRef(null);useEffect(()=>{var _a,_b,_c;if((include==null?void 0:include.includes("billing_address"))?(includeLoaded==null?void 0:includeLoaded.billing_address)||addResourceToInclude({newResourceLoaded:{billing_address:!0}}):addResourceToInclude({newResource:"billing_address"}),isEmpty(errors)){if(!isEmpty(values)){setAddressErrors([],"billing_address");for(const name in values){const field=values[name];businessMandatoryField(name,isBusiness)||delete values[name],(field==null?void 0:field.value)&&(values[name.replace("billing_address_","")]=field.value,delete values[name]),(field==null?void 0:field.type)==="checkbox"&&(delete values[name],saveAddressToCustomerAddressBook({type:"billing_address",value:field.checked}))}setAddress({values:Object.assign(Object.assign({},values),isBusiness&&{business:isBusiness}),resource:"billing_address"})}}else{const formErrors=[];for(const fieldName in errors){const{code,message}=errors[fieldName];["billing_address_state_code"].includes(fieldName)?isEmpty(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")}const checkboxChecked=((_b=(_a=ref.current)===null||_a===void 0?void 0:_a.querySelector('[name="billing_address_save_to_customer_book"]'))===null||_b===void 0?void 0:_b.checked)||getSaveBillingAddressToAddressBook();reset&&(!isEmpty(values)||!isEmpty(errors)||checkboxChecked)&&(saveAddressToCustomerAddressBook&&saveAddressToCustomerAddressBook({type:"billing_address",value:!1}),ref&&((_c=ref.current)===null||_c===void 0||_c.reset(),resetForm({target:ref.current}),setAddressErrors([],"billing_address"),setAddress({values:{},resource:"billing_address"})))},[errors,values,reset,include,includeLoaded,isBusiness]);const providerValues={isBusiness,values,validation,setValue:(name,value)=>{const field={[name.replace("billing_address_","")]:value};setAddress({values:Object.assign(Object.assign(Object.assign({},values),field),isBusiness&&{business:isBusiness}),resource:"billing_address"})},errorClassName,requiresBillingInfo:(order==null?void 0:order.requires_billing_info)||!1,errors,resetField:name=>resetForm({currentTarget:ref.current},name)};return _jsx(BillingAddressFormContext.Provider,Object.assign({value:providerValues},{children:_jsx("form",Object.assign({ref,autoComplete},p,{children}),void 0)}),void 0)};BillingAddressForm.propTypes=propTypes;export default BillingAddressForm;

package/lib/utils/validateFormFields.js

@@ -1 +1 @@
-import isEmpty from"lodash/isEmpty";import isString from"lodash/isString";import without from"lodash/without";import keys from"lodash/keys";import map from"lodash/map";import get from"lodash/get";import{addressFields}from"../reducers/AddressReducer";const EMAIL_PATTERN=/[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$/;export const validateValue=(val,name,type,resourceType)=>val?type==="email"&&isString(val)&&!val.match(EMAIL_PATTERN)?{field:name,code:"VALIDATION_ERROR",message:`${name} - is not valid`,resourceType}:{}:{field:name,code:"VALIDATION_ERROR",message:`${name} - is required`,resourceType};const validateFormFields=(fields,required,resourceType)=>{const errors=[];let values={metadata:{}};return map(fields,v=>{const isTick=!!get(v,"checked"),val=isTick||(v.value==="on"?!1:v.value),attrName=v.getAttribute("name");if(attrName&&required.indexOf(attrName)!==-1||v.required){const error=validateValue(val,v.name,v.type,resourceType);isEmpty(error)||errors.push(error),values=Object.assign(Object.assign({},values),{[`${v.name}`]:val})}v.getAttribute("name")&&(values=!!v.getAttribute("data-metadata")?Object.assign(Object.assign({},values),{metadata:Object.assign(Object.assign({},values.metadata),{[`${v.name}`]:val})}):Object.assign(Object.assign({},values),{[`${v.name}`]:val}))}),{errors,values}};export const fieldsExist=(address,schema=addressFields)=>{if(address.business){const required=without(schema,"first_name","last_name"),validAddress=keys(address).filter(k=>required.includes(k));return required.length>validAddress.length}else{const required=without(schema,"line_2","company"),validAddress=keys(address).filter(k=>required.includes(k));return required.length>validAddress.length}};const businessOptionalFields=["billing_address_first_name","billing_address_last_name","shipping_address_first_name","shipping_address_last_name","first_name","last_name"],customerOptionalFields=["billing_address_company","billing_address_line_2","shipping_address_company","shipping_address_line_2","company","line_2"];export function businessMandatoryField(fieldName,isBusiness){return!(isBusiness&&businessOptionalFields.includes(fieldName)||!isBusiness&&customerOptionalFields.includes(fieldName))}export default validateFormFields;
+import isEmpty from"lodash/isEmpty";import isString from"lodash/isString";import without from"lodash/without";import keys from"lodash/keys";import map from"lodash/map";import get from"lodash/get";import{addressFields}from"../reducers/AddressReducer";const EMAIL_PATTERN=/[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$/;export const validateValue=(val,name,type,resourceType)=>val?type==="email"&&isString(val)&&!val.match(EMAIL_PATTERN)?{field:name,code:"VALIDATION_ERROR",message:`${name} - is not valid`,resourceType}:{}:{field:name,code:"VALIDATION_ERROR",message:`${name} - is required`,resourceType};const validateFormFields=(fields,required,resourceType)=>{const errors=[];let values={metadata:{}};return map(fields,v=>{const isTick=!!get(v,"checked"),val=isTick||(v.value==="on"?!1:v.value),attrName=v.getAttribute("name");if(attrName&&required.indexOf(attrName)!==-1||v.required){const error=validateValue(val,v.name,v.type,resourceType);isEmpty(error)||errors.push(error),values=Object.assign(Object.assign({},values),{[`${v.name}`]:val})}v.getAttribute("name")&&(values=!!v.getAttribute("data-metadata")?Object.assign(Object.assign({},values),{metadata:Object.assign(Object.assign({},values.metadata),{[`${v.name}`]:val})}):Object.assign(Object.assign({},values),{[`${v.name}`]:val}))}),{errors,values}};export const fieldsExist=(address,schema=addressFields)=>{if(address.business){const required=without(schema,"first_name","last_name"),validAddress=keys(address).filter(k=>required.includes(k));return required.length>validAddress.length}else{const required=without(schema,"line_2","company"),validAddress=keys(address).filter(k=>required.includes(k));return required.length>validAddress.length}};const businessOptionalFields=["billing_address_first_name","billing_address_last_name","shipping_address_first_name","shipping_address_last_name","first_name","last_name"],customerOptionalFields=["billing_address_company","shipping_address_company","company"];export function businessMandatoryField(fieldName,isBusiness){return!(isBusiness&&businessOptionalFields.includes(fieldName)||!isBusiness&&customerOptionalFields.includes(fieldName))}export default validateFormFields;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@commercelayer/react-components",
-  "version": "3.2.0",
+  "version": "3.2.1",
   "description": "The Official Commerce Layer React Components",
   "module": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -44,7 +44,9 @@
   "scripts": {
     "test": "jest",
     "test:coverage": "jest --coverage",
-    "test:playwright": "playwright test",
+    "test:e2e": "NODE_ENV=test playwright test",
+    "test:e2e:coverage": "nyc npm run test:e2e && npm run coverage:report",
+    "coverage:report": "nyc report --reporter=html",
     "lint": "eslint src",
     "build": "tsc -b tsconfig.prod.json --verbose",
     "postbuild": "tsc-alias -p tsconfig.prod.json &&  minimize-js lib -w -s",
@@ -133,6 +135,7 @@
     "jest": "^27.4.7",
     "minimize-js": "^1.2.0",
     "next": "^12.0.9",
+    "nyc": "^15.1.0",
     "playwright": "^1.18.1",
     "postcss": "^8.4.5",
     "postcss-loader": "^6.2.1",