Remove lodash dependency

examples/checkout/shipments.tsx

@@ -22,7 +22,7 @@ import {
   ShippingMethodRadioButtonType,
   Errors,
 } from 'packages/react-components/src'
-import isEmpty from 'lodash/isEmpty'
+import { isEmpty } from 'packages/react-components/src/utils/isEmpty'
 import { useRouter } from 'next/router'
 import getSdk from '#utils/getSdk'
 

packages/react-components/package.json

@@ -68,7 +68,6 @@
     "frames-react": "^1.2.3",
     "iframe-resizer": "^4.3.6",
     "jwt-decode": "^4.0.0",
-    "lodash": "^4.17.21",
     "rapid-form": "3.1.0"
   },
   "devDependencies": {
@@ -79,7 +78,6 @@
     "@testing-library/dom": "^10.4.1",
     "@testing-library/react": "^16.3.1",
     "@types/braintree-web": "^3.96.17",
-    "@types/lodash": "^4.17.21",
     "@types/node": "^25.0.3",
     "@types/prop-types": "^15.7.15",
     "@types/react": "^19.1.8",

packages/react-components/src/components/SubmitButton.tsx

@@ -1,13 +1,12 @@
 import type { ReactNode, JSX } from 'react';
 import Parent from '#components/utils/Parent'
 import type { ChildrenFunction } from '#typings/index'
-import isFunction from 'lodash/isFunction'
 
 interface ChildrenProps extends Omit<Props, 'children'> {}
 
 interface Props extends Omit<JSX.IntrinsicElements['button'], 'children' | 'ref'> {
   children?: ChildrenFunction<ChildrenProps>
-  label?: string | ReactNode
+  label?: string | ReactNode | (() => ReactNode)
 }
 
 export function SubmitButton(props: Props): JSX.Element {
@@ -20,7 +19,7 @@ export function SubmitButton(props: Props): JSX.Element {
     <Parent {...parentProps}>{children}</Parent>
   ) : (
     <button type='submit' {...p}>
-      {isFunction(label) ? label() : label}
+      {typeof label === 'function' ? label() : label}
     </button>
   )
 }

packages/react-components/src/components/addresses/Address.tsx

@@ -1,5 +1,5 @@
 import type { Address as AddressType } from "@commercelayer/sdk"
-import isEmpty from "lodash/isEmpty"
+import { isEmpty } from "#utils/isEmpty"
 import { type JSX, useContext, useEffect, useState } from "react"
 import AddressCardsTemplate, {
   type AddressCardsTemplateChildren,

packages/react-components/src/components/addresses/AddressStateSelector.tsx

@@ -7,7 +7,7 @@ import type {
 } from "#typings"
 import BillingAddressFormContext from "#context/BillingAddressFormContext"
 import ShippingAddressFormContext from "#context/ShippingAddressFormContext"
-import isEmpty from "lodash/isEmpty"
+import { isEmpty } from "#utils/isEmpty"
 import {
   getStateOfCountry,
   isValidState,

packages/react-components/src/components/addresses/SaveAddressesButton.tsx

@@ -1,5 +1,4 @@
 import type { Order } from "@commercelayer/sdk"
-import isFunction from "lodash/isFunction"
 import { type JSX, type ReactNode, useContext, useState } from "react"
 import Parent from "#components/utils/Parent"
 import AddressContext from "#context/AddressContext"
@@ -24,7 +23,7 @@ interface ChildrenProps extends Omit<Props, "children"> {}
 interface Props
   extends Omit<JSX.IntrinsicElements["button"], "children" | "onClick"> {
   children?: ChildrenFunction<ChildrenProps>
-  label?: string | ReactNode
+  label?: string | ReactNode | (() => ReactNode)
   onClick?: (params: TOnClick) => void
   addressId?: string
   requiredMetadataFields?: string[]
@@ -179,7 +178,7 @@ export function SaveAddressesButton(props: Props): JSX.Element {
       }}
       {...p}
     >
-      {isFunction(label) ? label() : label}
+      {typeof label === 'function' ? label() : label}
     </button>
   )
 }

packages/react-components/src/components/customers/SaveCustomerButton.tsx

@@ -1,7 +1,7 @@
 import { type ReactNode, useContext, type JSX } from 'react';
 import Parent from '#components/utils/Parent'
 import type { ChildrenFunction } from '#typings/index'
-import isEmpty from 'lodash/isEmpty'
+import { isEmpty } from '#utils/isEmpty'
 import CustomerContext from '#context/CustomerContext'
 
 interface ChildrenProps extends Omit<Props, 'children'> {

packages/react-components/src/components/gift_cards/GiftCard.tsx

@@ -1,6 +1,6 @@
 import { useRef, useContext, type RefObject, type JSX } from 'react';
 import validateFormFields from '#utils/validateFormFields'
-import isEmpty from 'lodash/isEmpty'
+import { isEmpty } from '#utils/isEmpty'
 import GiftCardContext from '#context/GiftCardContext'
 import type { GiftCardI } from '#reducers/GiftCardReducer'
 import type { BaseState } from '#typings/index'

packages/react-components/src/components/line_items/LineItemOption.tsx

@@ -1,6 +1,5 @@
 import { useContext, type CSSProperties, type JSX } from 'react';
 import LineItemOptionChildrenContext from '#context/LineItemOptionChildrenContext'
-import map from 'lodash/map'
 import Parent from '#components/utils/Parent'
 import type { LineItemOption as LineItemOptionType } from '@commercelayer/sdk'
 import type { ChildrenFunction } from '#typings/index'
@@ -42,11 +41,11 @@ export function LineItemOption(props: Props): JSX.Element {
   const label = name != null ? lineItemOption?.options?.[name] : ''
   const components =
     showAll && isJSON(JSON.stringify(lineItemOption?.options)) ? (
-      map(lineItemOption?.options, (value: string, key) => {
+      Object.entries(lineItemOption?.options ?? {}).map(([key, value]) => {
         return (
           <TagElement key={key} {...p}>
             {`${key}:`}
-            <span className={valueClassName}>{`${value}`}</span>
+            <span className={valueClassName}>{`${value as string}`}</span>
           </TagElement>
         )
       })

packages/react-components/src/components/orders/OrderListRow.tsx

@@ -6,7 +6,6 @@ import OrderListChildrenContext, {
   type TableAccessor
 } from '#context/OrderListChildrenContext'
 import isDate from '#utils/isDate'
-import last from 'lodash/last'
 import { flexRender, type Row } from '@tanstack/react-table'
 
 interface ChildrenProps extends Omit<Props, 'children'> {
@@ -43,7 +42,7 @@ export function OrderListRow({ field, children, ...p }: Props): JSX.Element {
     actionsContainerClassName
   } = useContext(OrderListChildrenContext)
   const cell = row?.getVisibleCells().filter((cell) => cell.column.id === field)
-  const isLastRow = last(row?.getVisibleCells())?.column.id === field
+  const isLastRow = row?.getVisibleCells().at(-1)?.column.id === field
   const As = 'td'
   const ActionRow = (): JSX.Element | null => {
     return (

packages/react-components/src/components/orders/PlaceOrderButton.tsx

@@ -1,6 +1,5 @@
 /** biome-ignore-all lint/correctness/useExhaustiveDependencies: Avoid infinite loop */
 import type { Order } from "@commercelayer/sdk"
-import isFunction from "lodash/isFunction"
 import {
   type JSX,
   type MouseEvent,
@@ -33,7 +32,7 @@ interface Props
   /**
    * The label of the button
    */
-  label?: string | ReactNode
+  label?: string | ReactNode | (() => ReactNode)
   /**
    * The label of the button when it's loading
    */
@@ -583,7 +582,7 @@ export function PlaceOrderButton(props: Props): JSX.Element {
   const disabledButton = disabled !== undefined ? disabled : notPermitted
   const labelButton = isLoading
     ? loadingLabel
-    : isFunction(label)
+    : typeof label === 'function'
       ? label()
       : label
   const parentProps = {

packages/react-components/src/components/payment_gateways/AdyenGateway.tsx

@@ -1,5 +1,5 @@
 import type { StripeElementLocale } from "@stripe/stripe-js"
-import isEmpty from "lodash/isEmpty"
+import { isEmpty } from "#utils/isEmpty"
 import { type JSX, useContext } from "react"
 import type { GatewayBaseType } from "#components/payment_gateways/PaymentGateway"
 import AdyenPayment from "#components/payment_source/AdyenPayment"

packages/react-components/src/components/payment_gateways/BraintreeGateway.tsx

@@ -8,7 +8,7 @@ import PaymentSourceContext from '#context/PaymentSourceContext'
 import type { PaymentResource } from '#reducers/PaymentMethodReducer'
 import getCardDetails from '#utils/getCardDetails'
 import type { StripeElementLocale } from '@stripe/stripe-js'
-import isEmpty from 'lodash/isEmpty'
+import { isEmpty } from '#utils/isEmpty'
 import { useContext, type JSX } from 'react';
 import PaymentCardsTemplate from '../utils/PaymentCardsTemplate'
 import { getPaymentAttributes } from '#utils/getPaymentAttributes'

packages/react-components/src/components/payment_gateways/CheckoutComGateway.tsx

@@ -1,5 +1,5 @@
 import type { StripeElementLocale } from "@stripe/stripe-js"
-import isEmpty from "lodash/isEmpty"
+import { isEmpty } from "#utils/isEmpty"
 import React, { type JSX } from "react"
 import type { GatewayBaseType } from "#components/payment_gateways/PaymentGateway"
 import CheckoutComPayment from "#components/payment_source/CheckoutComPayment"

packages/react-components/src/components/payment_gateways/ExternalGateway.tsx

@@ -11,7 +11,7 @@ import {
 } from "#reducers/PaymentMethodReducer"
 import getCardDetails from "#utils/getCardDetails"
 import type { StripeElementLocale } from "@stripe/stripe-js"
-import isEmpty from "lodash/isEmpty"
+import { isEmpty } from "#utils/isEmpty"
 import React, { type JSX } from "react"
 import PaymentCardsTemplate from "../utils/PaymentCardsTemplate"
 

packages/react-components/src/components/payment_gateways/KlarnaGateway.tsx

@@ -10,7 +10,7 @@ import {
   getPaymentConfig,
   type PaymentResource
 } from '#reducers/PaymentMethodReducer'
-import isEmpty from 'lodash/isEmpty'
+import { isEmpty } from '#utils/isEmpty'
 import PaymentCardsTemplate from '#components/utils/PaymentCardsTemplate'
 import getCardDetails from '#utils/getCardDetails'
 

packages/react-components/src/components/payment_gateways/PaypalGateway.tsx

@@ -7,7 +7,7 @@ import PaymentSourceContext from '#context/PaymentSourceContext'
 import type { PaymentResource } from '#reducers/PaymentMethodReducer'
 import getCardDetails from '#utils/getCardDetails'
 import { getPaymentAttributes } from '#utils/getPaymentAttributes'
-import isEmpty from 'lodash/isEmpty'
+import { isEmpty } from '#utils/isEmpty'
 import { useContext, type JSX } from 'react';
 
 type Props = Partial<GatewayBaseType>

packages/react-components/src/components/payment_gateways/StripeGateway.tsx

@@ -1,5 +1,5 @@
 import type { StripeElementLocale } from "@stripe/stripe-js"
-import isEmpty from "lodash/isEmpty"
+import { isEmpty } from "#utils/isEmpty"
 import { type JSX, useContext } from "react"
 import type { GatewayBaseType } from "#components/payment_gateways/PaymentGateway"
 import StripePayment from "#components/payment_source/StripePayment"

packages/react-components/src/components/payment_gateways/WireTransferGateway.tsx

@@ -9,7 +9,7 @@ import {
   type PaymentResource
 } from '#reducers/PaymentMethodReducer'
 import getCardDetails from '#utils/getCardDetails'
-import isEmpty from 'lodash/isEmpty'
+import { isEmpty } from '#utils/isEmpty'
 import { useContext, type JSX } from 'react';
 
 type Props = GatewayBaseType

packages/react-components/src/components/payment_source/BraintreePayment.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
 import { type FormEvent, useContext, useEffect, useRef, useState, type JSX } from 'react';
 import PaymentMethodContext from '#context/PaymentMethodContext'
-import isEmpty from 'lodash/isEmpty'
+import { isEmpty } from '#utils/isEmpty'
 import OrderContext from '#context/OrderContext'
 import Parent from '#components/utils/Parent'
 import type { PaymentSourceProps } from './PaymentSource'

packages/react-components/src/components/payment_source/PaymentSourceBrandName.tsx

@@ -1,7 +1,6 @@
 import PaymentSourceContext, {
   type IconBrand
 } from '#context/PaymentSourceContext'
-import capitalize from 'lodash/capitalize'
 import { useContext, type JSX } from 'react';
 import Parent from '#components/utils/Parent'
 import type { ChildrenFunction } from '#typings'
@@ -24,7 +23,9 @@ export function PaymentSourceBrandName({
   const { brand } = useContext(PaymentSourceContext)
   const { brand: customerCardBrand } = useContext(CustomerPaymentSourceContext)
   const cardBrand = brand ?? customerCardBrand
-  const brandName = cardBrand && capitalize(cardBrand.replace(/_|-/gm, ' '))
+  const capitalizeStr = (str?: string): string =>
+    str ? str.charAt(0).toUpperCase() + str.slice(1).toLowerCase() : ''
+  const brandName = cardBrand && capitalizeStr(cardBrand.replace(/_|-/gm, ' '))
   const parentProps = {
     brand: brandName,
     label,
@@ -33,7 +34,7 @@ export function PaymentSourceBrandName({
   return children ? (
     <Parent {...parentProps}>{children}</Parent>
   ) : (
-    <span {...props}>{label || capitalize(brandName)}</span>
+    <span {...props}>{label || capitalizeStr(brandName)}</span>
   )
 }
 

packages/react-components/src/components/payment_source/PaypalPayment.tsx

@@ -1,12 +1,11 @@
 import PaymentMethodContext from '#context/PaymentMethodContext'
-import isFunction from 'lodash/isFunction'
 import { type ReactNode, useContext, useEffect, useRef, type JSX } from 'react';
 
 export interface PaypalConfig {
   return_url: string
   cancel_url: string
   infoMessage?: {
-    text?: string | ReactNode
+    text?: string | ReactNode | (() => ReactNode)
     className?: string
   }
 }
@@ -71,7 +70,7 @@ export function PaypalPayment({
     <form ref={ref}>
       <div {...p}>
         <span className={infoMessage?.className}>
-          {isFunction(infoMessage?.text)
+          {typeof infoMessage?.text === 'function'
             ? infoMessage?.text()
             : infoMessage?.text || defaultMessage}
         </span>

packages/react-components/src/components/shipments/ShipmentField.tsx

@@ -1,6 +1,5 @@
 import { useContext, type JSX } from 'react';
 import Parent from '#components/utils/Parent'
-import get from 'lodash/get'
 import type { Shipment } from '@commercelayer/sdk'
 import ShipmentChildrenContext from '#context/ShipmentChildrenContext'
 
@@ -26,7 +25,10 @@ export function ShipmentField(props: Props): JSX.Element {
   const { name } = props
   const { shipment, keyNumber } = useContext(ShipmentChildrenContext)
   const key = name
-  const text = key !== 'key_number' ? get(shipment, key) : keyNumber
+  const text =
+    key !== 'key_number'
+      ? (shipment?.[key as keyof Shipment] as string | number | undefined)
+      : keyNumber
   const parentProps = {
     shipment,
     ...props

packages/react-components/src/components/shipments/ShipmentsContainer.tsx

@@ -11,7 +11,7 @@ import shipmentReducer, {
 import OrderContext from '#context/OrderContext'
 import CommerceLayerContext from '#context/CommerceLayerContext'
 import type { BaseError } from '#typings/errors'
-import isEmpty from 'lodash/isEmpty'
+import { isEmpty } from '#utils/isEmpty'
 
 interface Props {
   children: ReactNode

packages/react-components/src/components/shipping_methods/ShippingMethod.tsx

@@ -1,7 +1,7 @@
 import { useContext, type ReactNode, useEffect, useState, type JSX } from 'react';
 import ShippingMethodChildrenContext from '#context/ShippingMethodChildrenContext'
 import ShipmentChildrenContext from '#context/ShipmentChildrenContext'
-import isEmpty from 'lodash/isEmpty'
+import { isEmpty } from '#utils/isEmpty'
 
 interface Props {
   children: ReactNode

packages/react-components/src/components/utils/BaseOrderPrice.tsx

@@ -4,7 +4,7 @@ import Parent from './Parent'
 import { useState, useEffect, useContext, type JSX } from 'react';
 import type { PropsType } from '#utils/PropsType'
 import type { baseOrderPricePropTypes } from '#typings'
-import isEmpty from 'lodash/isEmpty'
+import { isEmpty } from '#utils/isEmpty'
 
 export type BaseOrderPriceProps = PropsType<
   typeof baseOrderPricePropTypes,

packages/react-components/src/reducers/AddressReducer.ts

@@ -1,5 +1,4 @@
 import type { Address, Order, OrderUpdate } from "@commercelayer/sdk"
-import camelCase from "lodash/camelCase"
 import type { Dispatch } from "react"
 import type { TResourceError } from "#components/errors/Errors"
 import type { AddressValuesKeys } from "#context/BillingAddressFormContext"
@@ -164,7 +163,7 @@ export const setCloneAddress: SetCloneAddress = (id, resource, dispatch) => {
   dispatch({
     type: "setCloneAddress",
     payload: {
-      [`${camelCase(resource)}Id`]: id,
+      [`${resource.replace(/_([a-z])/g, (_, c: string) => c.toUpperCase())}Id`]: id,
     },
   })
 }

packages/react-components/src/reducers/GiftCardReducer.ts

@@ -11,7 +11,7 @@ import type {
 import type { BaseMetadata } from '#typings'
 import type { Dispatch } from 'react'
 import type { CommerceLayerConfig } from '#context/CommerceLayerContext'
-import isEmpty from 'lodash/isEmpty'
+import { isEmpty } from '#utils/isEmpty'
 import type { BaseError } from '#typings/errors'
 import getErrors from '#utils/getErrors'
 import getSdk from '#utils/getSdk'

packages/react-components/src/reducers/OrderReducer.ts

@@ -7,7 +7,7 @@ import type {
   QueryParamsRetrieve,
   ResourceUpdate,
 } from "@commercelayer/sdk"
-import isEmpty from "lodash/isEmpty"
+import { isEmpty } from "#utils/isEmpty"
 import type { Dispatch } from "react"
 import type { CommerceLayerConfig } from "#context/CommerceLayerContext"
 import type { BaseError } from "#typings/errors"

packages/react-components/src/reducers/PlaceOrderReducer.ts

@@ -1,5 +1,5 @@
 import type { Order, OrderUpdate, StripePayment } from "@commercelayer/sdk"
-import isEmpty from "lodash/isEmpty"
+import { isEmpty } from "#utils/isEmpty"
 import type { Dispatch, RefObject } from "react"
 import type { CommerceLayerConfig } from "#context/CommerceLayerContext"
 import type { BaseError } from "#typings/errors"

packages/react-components/src/utils/addressesManager.ts

@@ -9,7 +9,7 @@ import type {
   Order,
   OrderUpdate,
 } from "@commercelayer/sdk"
-import isEmpty from "lodash/isEmpty"
+import { isEmpty } from "#utils/isEmpty"
 import { type AddressField, addressFields } from "#reducers/AddressReducer"
 import type { TCustomerAddress } from "#reducers/CustomerReducer"
 import type { BaseError } from "#typings/errors"

packages/react-components/src/utils/countryStateCity.ts

@@ -1,4 +1,4 @@
-import isEmpty from "lodash/isEmpty"
+import { isEmpty } from "#utils/isEmpty"
 
 /**
  * Validate the list of countries the user can optionally pass or returns our default list