@commercelayer/react-components 4.5.1 → 4.5.2-beta.1

package/lib/esm/components/skus/SkuField.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { type ConditionalElement } from '../../typings/index';
 import { type TGenericChildrenProps, type TResources } from '../utils/GenericFieldComponent';
 type SkuFieldChildrenProps = TGenericChildrenProps<TResources['Sku']>;

package/lib/esm/components/stock_transfers/StockTransfer.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import type { DefaultChildrenType } from '../../typings/globals';
 interface Props {
     children: DefaultChildrenType;

package/lib/esm/components/stock_transfers/StockTransferField.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { type ConditionalElement } from '../../typings/index';
 import { type TGenericChildrenProps, type TResources } from '../utils/GenericFieldComponent';
 type StockTransferFieldChildrenProps = TGenericChildrenProps<TResources['StockTransfer']>;

package/lib/esm/components/utils/AddressCardsTemplate.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import type { Address } from '@commercelayer/sdk';
 import AddressChildrenContext from '../../context/AddressChildrenContext';
 import { type ChildrenFunction } from '../../typings/index';

package/lib/esm/components/utils/BaseOrderPrice.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { type PropsType } from '../../utils/PropsType';
 import { type baseOrderPricePropTypes } from '../../typings/index';
 export type BaseOrderPriceProps = PropsType<typeof baseOrderPricePropTypes, unknown> & Omit<JSX.IntrinsicElements['span'], 'children'>;

package/lib/esm/components/utils/PaymentCardsTemplate.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { type PaymentResource } from '../../reducers/PaymentMethodReducer';
 import PaymentSourceContext, { type IconBrand } from '../../context/PaymentSourceContext';
 import { type ChildrenFunction } from '../../typings/index';

package/lib/esm/components/utils/PriceTemplate.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { type PriceProps } from '../prices/Price';
 export type PTemplateProps = {
     formattedAmount?: string;

package/lib/esm/components/utils/getAllErrors.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { type LineItem } from '@commercelayer/sdk';
 import { type BaseError } from '../../typings/errors';
 import { type TResourceError } from '../errors/Errors';

package/lib/esm/reducers/AddressReducer.js

@@ -1,2 +1,2 @@
 "use client";
-import baseReducer from"../utils/baseReducer";import isEmpty from"lodash/isEmpty";import getSdk from"../utils/getSdk";import camelCase from"lodash/camelCase";export const addressFields=["city","company","country_code","first_name","last_name","line_1","line_2","phone","state_code","zip_code"],addressInitialState={errors:[]},setAddressErrors=({errors,dispatch,currentErrors=[],resource})=>{const billingErrors=resource==="billing_address"?errors.filter(e=>e.resource===resource):currentErrors.filter(e=>e.resource==="billing_address"),shippingErrors=resource==="shipping_address"?errors.filter(e=>e.resource===resource):currentErrors.filter(e=>e.resource==="shipping_address"),finalErrors=[...billingErrors,...shippingErrors];dispatch&&dispatch({type:"setErrors",payload:{errors:finalErrors}})},setAddress=({values,resource,dispatch})=>{dispatch&&dispatch({type:"setAddress",payload:{[`${resource}`]:values}})},setCloneAddress=(id,resource,dispatch)=>{dispatch({type:"setCloneAddress",payload:{[`${camelCase(resource)}Id`]:id}})};export async function saveAddresses({config,updateOrder,order,state,customerEmail}){const{shipToDifferentAddress,billing_address:billingAddress,shipping_address:shippingAddress,billingAddressId,shippingAddressId}=state;try{const sdk=getSdk(config);if(order){const currentBillingAddressRef=order?.billing_address?.reference,orderAttributes={id:order?.id,_billing_address_clone_id:billingAddressId,_shipping_address_clone_id:billingAddressId,customer_email:customerEmail};if(currentBillingAddressRef===billingAddressId&&(orderAttributes._billing_address_clone_id=order?.billing_address?.id,orderAttributes._shipping_address_clone_id=order?.shipping_address?.id),!isEmpty(billingAddress)&&billingAddress){delete orderAttributes._billing_address_clone_id,delete orderAttributes._shipping_address_clone_id,orderAttributes._shipping_address_same_as_billing=!0;const address=await sdk.addresses.create(billingAddress);orderAttributes.billing_address=sdk.addresses.relationship(address.id)}if(shipToDifferentAddress&&(delete orderAttributes._shipping_address_same_as_billing,shippingAddressId&&(orderAttributes._shipping_address_clone_id=shippingAddressId),!isEmpty(shippingAddress)&&shippingAddress)){delete orderAttributes._shipping_address_clone_id;const address=await sdk.addresses.create(shippingAddress);orderAttributes.shipping_address=sdk.addresses.relationship(address.id)}if(!isEmpty(orderAttributes)&&updateOrder)return{success:!0,order:(await updateOrder({id:order.id,attributes:orderAttributes}))?.order}}return{success:!1}}catch(error){return console.error(error),{success:!1,error}}}const type=["setErrors","setAddress","setShipToDifferentAddress","setCloneAddress","cleanup"],addressReducer=(state,reducer)=>baseReducer(state,reducer,type);export default addressReducer;
+import baseReducer from"../utils/baseReducer";import isEmpty from"lodash/isEmpty";import getSdk from"../utils/getSdk";import camelCase from"lodash/camelCase";export const addressFields=["city","company","country_code","first_name","last_name","line_1","line_2","phone","state_code","zip_code"],addressInitialState={errors:[]},setAddressErrors=({errors,dispatch,currentErrors=[],resource})=>{const billingErrors=resource==="billing_address"?errors.filter(e=>e.resource===resource):currentErrors.filter(e=>e.resource==="billing_address"),shippingErrors=resource==="shipping_address"?errors.filter(e=>e.resource===resource):currentErrors.filter(e=>e.resource==="shipping_address"),finalErrors=[...billingErrors,...shippingErrors];dispatch&&dispatch({type:"setErrors",payload:{errors:finalErrors}})},setAddress=({values,resource,dispatch})=>{dispatch&&dispatch({type:"setAddress",payload:{[`${resource}`]:values}})},setCloneAddress=(id,resource,dispatch)=>{dispatch({type:"setCloneAddress",payload:{[`${camelCase(resource)}Id`]:id}})};export async function saveAddresses({config,updateOrder,order,state,customerEmail}){const{shipToDifferentAddress,billing_address:billingAddress,shipping_address:shippingAddress,billingAddressId,shippingAddressId}=state;try{const sdk=getSdk(config);if(order){const currentBillingAddressRef=order?.billing_address?.reference;console.log("billingAddress",billingAddress),console.log("shippingAddress",shippingAddress);const orderAttributes={id:order?.id,_billing_address_clone_id:billingAddressId,_shipping_address_clone_id:billingAddressId,customer_email:customerEmail};if(currentBillingAddressRef===billingAddressId&&(orderAttributes._billing_address_clone_id=order?.billing_address?.id,orderAttributes._shipping_address_clone_id=order?.shipping_address?.id),!isEmpty(billingAddress)&&billingAddress){delete orderAttributes._billing_address_clone_id,delete orderAttributes._shipping_address_clone_id,orderAttributes._shipping_address_same_as_billing=!0;const address=await sdk.addresses.create(billingAddress);orderAttributes.billing_address=sdk.addresses.relationship(address.id)}if(shipToDifferentAddress&&(delete orderAttributes._shipping_address_same_as_billing,shippingAddressId&&(orderAttributes._shipping_address_clone_id=shippingAddressId),!isEmpty(shippingAddress)&&shippingAddress)){delete orderAttributes._shipping_address_clone_id;const address=await sdk.addresses.create(shippingAddress);orderAttributes.shipping_address=sdk.addresses.relationship(address.id)}if(!isEmpty(orderAttributes)&&updateOrder)return{success:!0,order:(await updateOrder({id:order.id,attributes:orderAttributes}))?.order}}return{success:!1}}catch(error){return console.error(error),{success:!1,error}}}const type=["setErrors","setAddress","setShipToDifferentAddress","setCloneAddress","cleanup"],addressReducer=(state,reducer)=>baseReducer(state,reducer,type);export default addressReducer;

package/lib/esm/typings/globals.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export type DefaultChildrenType = JSX.Element[] | JSX.Element | null;
 type Enumerate<N extends number, Acc extends number[] = []> = Acc['length'] extends N ? Acc[number] : Enumerate<N, [...Acc, Acc['length']]>;
 export type TRange<F extends number, T extends number> = Exclude<Enumerate<T>, Enumerate<F>>;

package/lib/esm/utils/filterChildren.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { type DefaultChildrenType } from '../typings/globals';
 interface Props<T> {
     children: DefaultChildrenType;

package/lib/esm/utils/getCardDetails.d.ts

@@ -10,7 +10,7 @@ interface CardDetails {
 }
 interface Args {
     paymentType: PaymentResource;
-    customerPayment: Partial<CustomerPaymentSource>;
+    customerPayment: CustomerPaymentSource;
 }
 export default function getCardDetails({ paymentType, customerPayment }: Args): CardDetails;
 export {};

package/lib/esm/utils/getCardDetails.js

@@ -1,2 +1,2 @@
 "use client";
-export default function getCardDetails({paymentType,customerPayment}){switch(paymentType){case"checkout_com_payments":{const source=customerPayment.payment_source?.payment_response?.source;if(source)return{brand:source.scheme.toLowerCase(),exp_month:source.expiry_month,exp_year:source.expiry_year,last4:source.last4};break}case"stripe_payments":{const ps=customerPayment.payment_source,source=ps?.options?.card??ps?.payment_method?.card??ps?.payment_instrument?{brand:ps?.payment_instrument?.card_type,exp_month:ps?.payment_instrument?.card_expiry_month,exp_year:ps?.payment_instrument?.card_expiry_year,last4:ps?.payment_instrument?.card_last_digits,issuer_type:ps?.payment_instrument?.issuer_type}:void 0;if(source)return{...source};break}case"braintree_payments":{const source=customerPayment.payment_source?.options?.card;if(source)return{...source};break}case"adyen_payments":{const ps=customerPayment.payment_source,source=ps?.payment_request_data?.payment_method,authorized=ps?.payment_response?.resultCode==="Authorised",last4=ps?.payment_response?.additionalData?.cardSummary??ps?.payment_instrument?.card_last_digits??"****";if(source&&authorized){const brand=source.type==="scheme"?source.brand??"credit-card":source.type.replace("_account","");return{...source,last4,brand}}break}default:{const source=customerPayment.payment_source?.metadata?.card;if(source)return{...source};break}}return{brand:"",exp_month:"**",exp_year:"**",last4:"****",issuer_type:""}}
+export default function getCardDetails({paymentType,customerPayment}){switch(paymentType){case"checkout_com_payments":{const source=customerPayment.payment_source?.payment_response?.source;if(source)return{brand:source.scheme.toLowerCase(),exp_month:source.expiry_month,exp_year:source.expiry_year,last4:source.last4};break}case"stripe_payments":{const ps=customerPayment.payment_source,source=ps?.options?.card??ps?.payment_method?.card??ps?.payment_instrument?{brand:ps?.payment_instrument?.card_type,exp_month:ps?.payment_instrument?.card_expiry_month,exp_year:ps?.payment_instrument?.card_expiry_year,last4:ps?.payment_instrument?.card_last_digits,issuer_type:ps?.payment_instrument?.issuer_type}:void 0;if(source)return{...source};break}case"klarna_payments":{const ps=customerPayment.payment_source,source=ps?.payment_instrument?{brand:"klarna",exp_month:"",exp_year:"",last4:"",issuer_type:ps?.payment_instrument?.issuer_type}:void 0;if(source)return{...source};break}case"braintree_payments":{const source=customerPayment.payment_source?.options?.card;if(source)return{...source};break}case"adyen_payments":{const ps=customerPayment.payment_source,source=ps?.payment_request_data?.payment_method,authorized=ps?.payment_response?.resultCode==="Authorised",last4=ps?.payment_response?.additionalData?.cardSummary??ps?.payment_instrument?.card_last_digits??"****";if(source&&authorized){const brand=source.type==="scheme"?source.brand??"credit-card":source.type.replace("_account","");return{...source,last4,brand}}break}default:{const source=customerPayment.payment_source?.metadata?.card;if(source)return{...source};break}}return{brand:"",exp_month:"**",exp_year:"**",last4:"****",issuer_type:""}}

package/lib/esm/utils/getLoaderComponent.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 import { type LoaderType } from '../typings/index';
 export default function getLoaderComponent(loader: LoaderType): JSX.Element;

package/lib/esm/utils/getPrices.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { type Price } from '@commercelayer/sdk';
 import { type PTemplateProps } from '../components/utils/PriceTemplate';
 export declare function getPriceByCode(skuPrices: Price[], code?: string): Price | undefined;

package/lib/esm/utils/shipments.js

@@ -1,2 +1,2 @@
 "use client";
-import compact from"lodash/compact";import isEmpty from"lodash/isEmpty";export function shipmentsFilled(shipments){const filled=compact(shipments.filter(shipment=>!isEmpty(shipment.shipping_method)));return!isEmpty(filled)}export function isDoNotShip(lineItems){const itemDoNotShip=[],items=lineItems?lineItems.filter(({item_type})=>item_type==="skus").map(lineItem=>(lineItem.item&&lineItem?.item?.do_not_ship&&itemDoNotShip.push(!0),lineItem)):[];return itemDoNotShip.length>0&&itemDoNotShip.length===items.length}
+import compact from"lodash/compact";import isEmpty from"lodash/isEmpty";export function shipmentsFilled(shipments){const filled=compact(shipments.filter(shipment=>!isEmpty(shipment.shipping_method)));return!isEmpty(filled)}export function isDoNotShip(lineItems){const itemDoNotShip=[],items=lineItems?lineItems.filter(({item_type})=>item_type==="skus").map(lineItem=>(lineItem.item?.do_not_ship&&itemDoNotShip.push(!0),lineItem)):[];return itemDoNotShip.length>0&&itemDoNotShip.length===items.length}

package/lib/esm/utils/validateFormFields.js

@@ -1,2 +1,2 @@
 "use client";
-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{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 val="checked"in v||(v.value==="on"?!1:v.value),attrName=v.getAttribute("name");if(attrName&&required.includes(attrName)||v.required){const error=validateValue(val,v.name,v.type,resourceType);isEmpty(error)||errors.push(error),values={...values,[`${v.name}`]:val}}v.getAttribute("name")&&(values=!!v.getAttribute("data-metadata")?{...values,metadata:{...values.metadata,[`${v.name}`]:val}}:{...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;
+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{addressFields}from"../reducers/AddressReducer";const EMAIL_PATTERN=/^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;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 val="checked"in v||(v.value==="on"?!1:v.value),attrName=v.getAttribute("name");if(attrName&&required.includes(attrName)||v.required){const error=validateValue(val,v.name,v.type,resourceType);isEmpty(error)||errors.push(error),values={...values,[`${v.name}`]:val}}v.getAttribute("name")&&(values=!!v.getAttribute("data-metadata")?{...values,metadata:{...values.metadata,[`${v.name}`]:val}}:{...values,[`${v.name}`]:val})}),{errors,values}};export const fieldsExist=(address,schema=addressFields)=>{if(address.business){const required=without(schema,"first_name","last_name","line_2"),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": "4.5.1",
+  "version": "4.5.2-beta.1",
   "description": "The Official Commerce Layer React Components",
   "main": "lib/cjs/index.js",
   "module": "lib/esm/index.js",
@@ -167,14 +167,14 @@
   "dependencies": {
     "@ac-dev/countries-service": "^1.2.0",
     "@ac-dev/states-service": "^1.1.1",
-    "@adyen/adyen-web": "^5.49.3",
-    "@commercelayer/sdk": "^5.10.0",
-    "@stripe/react-stripe-js": "^2.1.2",
-    "@stripe/stripe-js": "^2.0.0",
-    "@tanstack/react-table": "^8.9.3",
+    "@adyen/adyen-web": "^5.51.0",
+    "@commercelayer/sdk": "^5.13.2",
+    "@stripe/react-stripe-js": "^2.2.0",
+    "@stripe/stripe-js": "^2.1.3",
+    "@tanstack/react-table": "^8.9.8",
     "@types/iframe-resizer": "^3.5.9",
-    "axios": "^1.4.0",
-    "braintree-web": "^3.97.0",
+    "axios": "^1.5.0",
+    "braintree-web": "^3.97.1",
     "frames-react": "^1.1.0",
     "iframe-resizer": "^4.3.6",
     "jwt-decode": "^3.1.2",
@@ -184,38 +184,38 @@
   "devDependencies": {
     "@commercelayer/js-auth": "^4.1.1",
     "@faker-js/faker": "^8.0.2",
-    "@playwright/test": "^1.36.2",
+    "@playwright/test": "^1.37.1",
     "@testing-library/dom": "^9.3.1",
     "@testing-library/react": "^14.0.0",
-    "@types/braintree-web": "^3.94.0",
-    "@types/lodash": "^4.14.197",
-    "@types/node": "^20.4.9",
+    "@types/braintree-web": "^3.96.4",
+    "@types/lodash": "^4.14.198",
+    "@types/node": "^20.6.0",
     "@types/prop-types": "^15.7.5",
-    "@types/react": "^18.2.20",
-    "@types/react-test-renderer": "^18.0.0",
+    "@types/react": "^18.2.21",
+    "@types/react-test-renderer": "^18.0.1",
     "@types/react-window": "^1.8.5",
     "@vitejs/plugin-react": "^4.0.4",
     "@vitest/coverage-c8": "^0.33.0",
     "jsdom": "^22.1.0",
     "minimize-js": "^1.4.0",
-    "msw": "^1.2.3",
+    "msw": "^1.3.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-test-renderer": "^18.2.0",
     "tsc-alias": "^1.8.7",
-    "tslib": "^2.6.1",
-    "typescript": "^5.1.6",
+    "tslib": "^2.6.2",
+    "typescript": "^5.2.2",
     "vite": "^4.4.9",
-    "vite-tsconfig-paths": "^4.2.0",
-    "vitest": "^0.34.1"
+    "vite-tsconfig-paths": "^4.2.1",
+    "vitest": "^0.34.4"
   },
   "peerDependencies": {
     "react": "^18.0.0"
   },
   "scripts": {
-    "lint": "eslint src",
-    "lint:fix": "eslint src --fix",
-    "test": "pnpm run lint && vitest run --silent",
+    "lint": "eslint src --ext .ts,.tsx",
+    "lint:fix": "eslint src --ext .ts,.tsx --fix",
+    "test": "pnpm lint && vitest run --silent",
     "coverage": "vitest run --coverage",
     "test:e2e": "NODE_ENV=test playwright test",
     "test:e2e:coverage": "nyc pnpm test:e2e && pnpm coverage:report",