@commercelayer/react-components 4.23.0 → 4.23.2

package/lib/cjs/components/payment_gateways/CheckoutComGateway.d.ts

@@ -1,5 +1,5 @@
-import type { GatewayBaseType } from '../payment_gateways/PaymentGateway';
-import { type JSX } from 'react';
+import type { GatewayBaseType } from "../payment_gateways/PaymentGateway";
+import { type JSX } from "react";
 type Props = GatewayBaseType;
 export declare function CheckoutComGateway(props: Props): JSX.Element | null;
 export default CheckoutComGateway;

package/lib/cjs/components/payment_gateways/CheckoutComGateway.js

@@ -1,2 +1,2 @@
 "use client";
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.CheckoutComGateway=CheckoutComGateway;const tslib_1=require("tslib"),jsx_runtime_1=require("react/jsx-runtime"),CheckoutComPayment_1=tslib_1.__importDefault(require("../payment_source/CheckoutComPayment")),CustomerContext_1=tslib_1.__importDefault(require("../../context/CustomerContext")),OrderContext_1=tslib_1.__importDefault(require("../../context/OrderContext")),PaymentMethodChildrenContext_1=tslib_1.__importDefault(require("../../context/PaymentMethodChildrenContext")),PaymentMethodContext_1=tslib_1.__importDefault(require("../../context/PaymentMethodContext")),PaymentSourceContext_1=tslib_1.__importDefault(require("../../context/PaymentSourceContext")),PaymentMethodReducer_1=require("../../reducers/PaymentMethodReducer"),isEmpty_1=tslib_1.__importDefault(require("lodash/isEmpty")),react_1=tslib_1.__importDefault(require("react")),PaymentCardsTemplate_1=tslib_1.__importDefault(require("../utils/PaymentCardsTemplate")),getCardDetails_1=tslib_1.__importDefault(require("../../utils/getCardDetails"));function CheckoutComGateway(props){const{readonly,showCard,handleEditClick,children,templateCustomerCards,show,loading,loaderComponent,templateCustomerSaveToWallet}=props,p=tslib_1.__rest(props,["readonly","showCard","handleEditClick","children","templateCustomerCards","show","loading","loaderComponent","templateCustomerSaveToWallet"]),{order}=react_1.default.useContext(OrderContext_1.default),{payment}=react_1.default.useContext(PaymentMethodChildrenContext_1.default),{payments,isGuest}=react_1.default.useContext(CustomerContext_1.default),{currentPaymentMethodId,config,paymentSource}=react_1.default.useContext(PaymentMethodContext_1.default),paymentResource="checkout_com_payments",locale=order?.language_code;if(!readonly&&payment?.id!==currentPaymentMethodId)return null;const publicKey=paymentSource?.public_key,paymentConfig=config?(0,PaymentMethodReducer_1.getPaymentConfig)(paymentResource,config):{},customerPayments=!(0,isEmpty_1.default)(payments)&&payments?payments.filter(customerPayment=>{var _a;return((_a=customerPayment.payment_source)===null||_a===void 0?void 0:_a.type)===paymentResource}):[];if(readonly||showCard){const card=(0,getCardDetails_1.default)({customerPayment:{payment_source:paymentSource},paymentType:paymentResource}),value=Object.assign(Object.assign({},card),{showCard,handleEditClick,readonly});return card.brand?(0,jsx_runtime_1.jsx)(PaymentSourceContext_1.default.Provider,{value,children}):null}return!isGuest&&templateCustomerCards?(0,jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment,{children:[(0,isEmpty_1.default)(customerPayments)?null:(0,jsx_runtime_1.jsx)("div",{className:p.className,children:(0,jsx_runtime_1.jsx)(PaymentCardsTemplate_1.default,{paymentResource,customerPayments,children:templateCustomerCards})}),(0,jsx_runtime_1.jsx)(CheckoutComPayment_1.default,Object.assign({show,templateCustomerSaveToWallet,publicKey,locale},paymentConfig))]}):(0,jsx_runtime_1.jsx)(CheckoutComPayment_1.default,Object.assign({show,publicKey,locale},paymentConfig))}exports.default=CheckoutComGateway;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.CheckoutComGateway=CheckoutComGateway;const tslib_1=require("tslib"),jsx_runtime_1=require("react/jsx-runtime"),CheckoutComPayment_1=tslib_1.__importDefault(require("../payment_source/CheckoutComPayment")),CustomerContext_1=tslib_1.__importDefault(require("../../context/CustomerContext")),OrderContext_1=tslib_1.__importDefault(require("../../context/OrderContext")),PaymentMethodChildrenContext_1=tslib_1.__importDefault(require("../../context/PaymentMethodChildrenContext")),PaymentMethodContext_1=tslib_1.__importDefault(require("../../context/PaymentMethodContext")),PaymentSourceContext_1=tslib_1.__importDefault(require("../../context/PaymentSourceContext")),PaymentMethodReducer_1=require("../../reducers/PaymentMethodReducer"),isEmpty_1=tslib_1.__importDefault(require("lodash/isEmpty")),react_1=tslib_1.__importDefault(require("react")),PaymentCardsTemplate_1=tslib_1.__importDefault(require("../utils/PaymentCardsTemplate")),getCardDetails_1=tslib_1.__importDefault(require("../../utils/getCardDetails"));function CheckoutComGateway(props){const{readonly,showCard,handleEditClick,children,templateCustomerCards,show,loading,loaderComponent,templateCustomerSaveToWallet}=props,p=tslib_1.__rest(props,["readonly","showCard","handleEditClick","children","templateCustomerCards","show","loading","loaderComponent","templateCustomerSaveToWallet"]),{order}=react_1.default.useContext(OrderContext_1.default),{payment}=react_1.default.useContext(PaymentMethodChildrenContext_1.default),{payments,isGuest}=react_1.default.useContext(CustomerContext_1.default),{currentPaymentMethodId,config,paymentSource}=react_1.default.useContext(PaymentMethodContext_1.default),paymentResource="checkout_com_payments",locale=order?.language_code;if(!readonly&&payment?.id!==currentPaymentMethodId)return null;const publicKey=paymentSource?.public_key,paymentConfig=config?(0,PaymentMethodReducer_1.getPaymentConfig)(paymentResource,config):{},customerPayments=!(0,isEmpty_1.default)(payments)&&payments?payments.filter(customerPayment=>{var _a;return((_a=customerPayment.payment_source)===null||_a===void 0?void 0:_a.type)===paymentResource}):[];if(readonly||showCard){const card=(0,getCardDetails_1.default)({customerPayment:{payment_source:paymentSource},paymentType:paymentResource}),value=Object.assign(Object.assign({},card),{showCard,handleEditClick,readonly});return card.brand?(0,jsx_runtime_1.jsx)(PaymentSourceContext_1.default.Provider,{value,children}):null}return!isGuest&&templateCustomerCards?(0,jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment,{children:[(0,isEmpty_1.default)(customerPayments)?null:(0,jsx_runtime_1.jsx)("div",{className:p.className,children:(0,jsx_runtime_1.jsx)(PaymentCardsTemplate_1.default,{paymentResource,customerPayments,children:templateCustomerCards})}),(0,jsx_runtime_1.jsx)(CheckoutComPayment_1.default,Object.assign({show,templateCustomerSaveToWallet,publicKey,locale},paymentConfig.checkoutComPayment))]}):(0,jsx_runtime_1.jsx)(CheckoutComPayment_1.default,Object.assign({show,publicKey,locale},paymentConfig))}exports.default=CheckoutComGateway;

package/lib/cjs/components/payment_source/CheckoutComPayment.d.ts

@@ -1,48 +1,32 @@
 import { type JSX } from "react";
 import type { PaymentMethodConfig } from "../../reducers/PaymentMethodReducer";
 import type { PaymentSourceProps } from "./PaymentSource";
+interface ElementAppearance {
+    fontFamily?: string;
+    fontSize?: string;
+    fontWeight?: number;
+    letterSpacing?: number;
+    lineHeight?: string;
+}
 interface Appearance {
-    colorAction: string;
-    colorBackground: string;
-    colorBorder: string;
-    colorDisabled: string;
-    colorError: string;
-    colorFormBackground: string;
-    colorFormBorder: string;
-    colorInverse: string;
-    colorOutline: string;
-    colorPrimary: string;
-    colorSecondary: string;
-    colorSuccess: string;
-    button: {
-        fontFamily: string;
-        fontSize: string;
-        fontWeight: number;
-        letterSpacing: number;
-        lineHeight: string;
-    };
-    footnote: {
-        fontFamily: string;
-        fontSize: string;
-        fontWeight: number;
-        letterSpacing: number;
-        lineHeight: string;
-    };
-    label: {
-        fontFamily: string;
-        fontSize: string;
-        fontWeight: number;
-        letterSpacing: number;
-        lineHeight: string;
-    };
-    subheading: {
-        fontFamily: string;
-        fontSize: string;
-        fontWeight: number;
-        letterSpacing: number;
-        lineHeight: string;
-    };
-    borderRadius: [string, string];
+    colorAction?: string;
+    colorBackground?: string;
+    colorBorder?: string;
+    colorDisabled?: string;
+    colorError?: string;
+    colorFormBackground?: string;
+    colorFormBorder?: string;
+    colorInverse?: string;
+    colorOutline?: string;
+    colorPrimary?: string;
+    colorSecondary?: string;
+    colorSuccess?: string;
+    borderRadius?: [string, string];
+    button?: ElementAppearance;
+    footnote?: ElementAppearance;
+    label?: ElementAppearance;
+    input?: ElementAppearance;
+    subheading?: ElementAppearance;
 }
 export interface CheckoutComConfig {
     containerClassName?: string;
@@ -51,7 +35,7 @@ export interface CheckoutComConfig {
     success_url: string;
     failure_url: string;
     options?: {
-        appearance: Partial<Appearance>;
+        appearance: Appearance;
     };
     [key: string]: unknown;
 }

package/lib/esm/components/payment_gateways/CheckoutComGateway.d.ts

@@ -1,5 +1,5 @@
-import type { GatewayBaseType } from '../payment_gateways/PaymentGateway';
-import { type JSX } from 'react';
+import type { GatewayBaseType } from "../payment_gateways/PaymentGateway";
+import { type JSX } from "react";
 type Props = GatewayBaseType;
 export declare function CheckoutComGateway(props: Props): JSX.Element | null;
 export default CheckoutComGateway;

package/lib/esm/components/payment_gateways/CheckoutComGateway.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as _jsx,Fragment as _Fragment,jsxs as _jsxs}from"react/jsx-runtime";import CheckoutComPayment from"../payment_source/CheckoutComPayment";import CustomerContext from"../../context/CustomerContext";import OrderContext from"../../context/OrderContext";import PaymentMethodChildrenContext from"../../context/PaymentMethodChildrenContext";import PaymentMethodContext from"../../context/PaymentMethodContext";import PaymentSourceContext from"../../context/PaymentSourceContext";import{getPaymentConfig}from"../../reducers/PaymentMethodReducer";import isEmpty from"lodash/isEmpty";import React from"react";import PaymentCardsTemplate from"../utils/PaymentCardsTemplate";import getCardDetails from"../../utils/getCardDetails";export function CheckoutComGateway(props){const{readonly,showCard,handleEditClick,children,templateCustomerCards,show,loading,loaderComponent,templateCustomerSaveToWallet,...p}=props,{order}=React.useContext(OrderContext),{payment}=React.useContext(PaymentMethodChildrenContext),{payments,isGuest}=React.useContext(CustomerContext),{currentPaymentMethodId,config,paymentSource}=React.useContext(PaymentMethodContext),paymentResource="checkout_com_payments",locale=order?.language_code;if(!readonly&&payment?.id!==currentPaymentMethodId)return null;const publicKey=paymentSource?.public_key,paymentConfig=config?getPaymentConfig(paymentResource,config):{},customerPayments=!isEmpty(payments)&&payments?payments.filter(customerPayment=>customerPayment.payment_source?.type===paymentResource):[];if(readonly||showCard){const card=getCardDetails({customerPayment:{payment_source:paymentSource},paymentType:paymentResource}),value={...card,showCard,handleEditClick,readonly};return card.brand?_jsx(PaymentSourceContext.Provider,{value,children}):null}return!isGuest&&templateCustomerCards?_jsxs(_Fragment,{children:[isEmpty(customerPayments)?null:_jsx("div",{className:p.className,children:_jsx(PaymentCardsTemplate,{paymentResource,customerPayments,children:templateCustomerCards})}),_jsx(CheckoutComPayment,{show,templateCustomerSaveToWallet,publicKey,locale,...paymentConfig})]}):_jsx(CheckoutComPayment,{show,publicKey,locale,...paymentConfig})}export default CheckoutComGateway;
+import{jsx as _jsx,Fragment as _Fragment,jsxs as _jsxs}from"react/jsx-runtime";import CheckoutComPayment from"../payment_source/CheckoutComPayment";import CustomerContext from"../../context/CustomerContext";import OrderContext from"../../context/OrderContext";import PaymentMethodChildrenContext from"../../context/PaymentMethodChildrenContext";import PaymentMethodContext from"../../context/PaymentMethodContext";import PaymentSourceContext from"../../context/PaymentSourceContext";import{getPaymentConfig}from"../../reducers/PaymentMethodReducer";import isEmpty from"lodash/isEmpty";import React from"react";import PaymentCardsTemplate from"../utils/PaymentCardsTemplate";import getCardDetails from"../../utils/getCardDetails";export function CheckoutComGateway(props){const{readonly,showCard,handleEditClick,children,templateCustomerCards,show,loading,loaderComponent,templateCustomerSaveToWallet,...p}=props,{order}=React.useContext(OrderContext),{payment}=React.useContext(PaymentMethodChildrenContext),{payments,isGuest}=React.useContext(CustomerContext),{currentPaymentMethodId,config,paymentSource}=React.useContext(PaymentMethodContext),paymentResource="checkout_com_payments",locale=order?.language_code;if(!readonly&&payment?.id!==currentPaymentMethodId)return null;const publicKey=paymentSource?.public_key,paymentConfig=config?getPaymentConfig(paymentResource,config):{},customerPayments=!isEmpty(payments)&&payments?payments.filter(customerPayment=>customerPayment.payment_source?.type===paymentResource):[];if(readonly||showCard){const card=getCardDetails({customerPayment:{payment_source:paymentSource},paymentType:paymentResource}),value={...card,showCard,handleEditClick,readonly};return card.brand?_jsx(PaymentSourceContext.Provider,{value,children}):null}return!isGuest&&templateCustomerCards?_jsxs(_Fragment,{children:[isEmpty(customerPayments)?null:_jsx("div",{className:p.className,children:_jsx(PaymentCardsTemplate,{paymentResource,customerPayments,children:templateCustomerCards})}),_jsx(CheckoutComPayment,{show,templateCustomerSaveToWallet,publicKey,locale,...paymentConfig.checkoutComPayment})]}):_jsx(CheckoutComPayment,{show,publicKey,locale,...paymentConfig})}export default CheckoutComGateway;

package/lib/esm/components/payment_source/CheckoutComPayment.d.ts

@@ -1,48 +1,32 @@
 import { type JSX } from "react";
 import type { PaymentMethodConfig } from "../../reducers/PaymentMethodReducer";
 import type { PaymentSourceProps } from "./PaymentSource";
+interface ElementAppearance {
+    fontFamily?: string;
+    fontSize?: string;
+    fontWeight?: number;
+    letterSpacing?: number;
+    lineHeight?: string;
+}
 interface Appearance {
-    colorAction: string;
-    colorBackground: string;
-    colorBorder: string;
-    colorDisabled: string;
-    colorError: string;
-    colorFormBackground: string;
-    colorFormBorder: string;
-    colorInverse: string;
-    colorOutline: string;
-    colorPrimary: string;
-    colorSecondary: string;
-    colorSuccess: string;
-    button: {
-        fontFamily: string;
-        fontSize: string;
-        fontWeight: number;
-        letterSpacing: number;
-        lineHeight: string;
-    };
-    footnote: {
-        fontFamily: string;
-        fontSize: string;
-        fontWeight: number;
-        letterSpacing: number;
-        lineHeight: string;
-    };
-    label: {
-        fontFamily: string;
-        fontSize: string;
-        fontWeight: number;
-        letterSpacing: number;
-        lineHeight: string;
-    };
-    subheading: {
-        fontFamily: string;
-        fontSize: string;
-        fontWeight: number;
-        letterSpacing: number;
-        lineHeight: string;
-    };
-    borderRadius: [string, string];
+    colorAction?: string;
+    colorBackground?: string;
+    colorBorder?: string;
+    colorDisabled?: string;
+    colorError?: string;
+    colorFormBackground?: string;
+    colorFormBorder?: string;
+    colorInverse?: string;
+    colorOutline?: string;
+    colorPrimary?: string;
+    colorSecondary?: string;
+    colorSuccess?: string;
+    borderRadius?: [string, string];
+    button?: ElementAppearance;
+    footnote?: ElementAppearance;
+    label?: ElementAppearance;
+    input?: ElementAppearance;
+    subheading?: ElementAppearance;
 }
 export interface CheckoutComConfig {
     containerClassName?: string;
@@ -51,7 +35,7 @@ export interface CheckoutComConfig {
     success_url: string;
     failure_url: string;
     options?: {
-        appearance: Partial<Appearance>;
+        appearance: Appearance;
     };
     [key: string]: unknown;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@commercelayer/react-components",
-  "version": "4.23.0",
+  "version": "4.23.2",
   "description": "The Official Commerce Layer React Components",
   "main": "lib/cjs/index.js",
   "module": "lib/esm/index.js",