@payloadcms/plugin-ecommerce 0.0.1-beta.0 → 3.57.0-internal.36ffe2b

package/dist/types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/types.ts"],"sourcesContent":["import type {\n  Access,\n  CollectionConfig,\n  DefaultDocumentIDType,\n  Endpoint,\n  Field,\n  FieldAccess,\n  GroupField,\n  PayloadRequest,\n  SelectType,\n  TypedCollection,\n  Where,\n} from 'payload'\n\nexport type FieldsOverride = (args: { defaultFields: Field[] }) => Field[]\n\nexport type CollectionOverride = (args: {\n  defaultCollection: CollectionConfig\n}) => CollectionConfig | Promise<CollectionConfig>\n\nexport type CartItem = {\n  id: DefaultDocumentIDType\n  product: DefaultDocumentIDType | TypedCollection['products']\n  quantity: number\n  variant?: DefaultDocumentIDType | TypedCollection['variants']\n}\n\ntype DefaultCartType = {\n  currency?: string\n  customer?: DefaultDocumentIDType | TypedCollection['customers']\n  id: DefaultDocumentIDType\n  items: CartItem[]\n  subtotal?: number\n}\n\nexport type Cart = DefaultCartType\n\ntype InitiatePaymentReturnType = {\n  /**\n   * Allows for additional data to be returned, such as payment method specific data\n   */\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  [key: string]: any\n  message: string\n}\n\ntype InitiatePayment = (args: {\n  /**\n   * The slug of the customers collection, defaults to 'users'.\n   */\n  customersSlug?: string\n  data: {\n    /**\n     * Billing address for the payment.\n     */\n    billingAddress: TypedCollection['addresses']\n    /**\n     * Cart items.\n     */\n    cart: Cart\n    /**\n     * Currency code to use for the payment.\n     */\n    currency: string\n    customerEmail: string\n    /**\n     * Shipping address for the payment.\n     */\n    shippingAddress?: TypedCollection['addresses']\n  }\n  req: PayloadRequest\n  /**\n   * The slug of the transactions collection, defaults to 'transactions'.\n   * For example, this is used to create a record of the payment intent in the transactions collection.\n   */\n  transactionsSlug: string\n}) => InitiatePaymentReturnType | Promise<InitiatePaymentReturnType>\n\ntype ConfirmOrderReturnType = {\n  /**\n   * Allows for additional data to be returned, such as payment method specific data\n   */\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  [key: string]: any\n  message: string\n  orderID: DefaultDocumentIDType\n  transactionID: DefaultDocumentIDType\n}\n\ntype ConfirmOrder = (args: {\n  /**\n   * The slug of the carts collection, defaults to 'carts'.\n   * For example, this is used to retrieve the cart for the order.\n   */\n  cartsSlug?: string\n  /**\n   * The slug of the customers collection, defaults to 'users'.\n   */\n  customersSlug?: string\n  /**\n   * Data made available to the payment method when confirming an order. You should get the cart items from the transaction.\n   */\n  data: {\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    [key: string]: any // Allows for additional data to be passed through, such as payment method specific data\n    customerEmail?: string\n  }\n  /**\n   * The slug of the orders collection, defaults to 'orders'.\n   */\n  ordersSlug?: string\n  req: PayloadRequest\n  /**\n   * The slug of the transactions collection, defaults to 'transactions'.\n   * For example, this is used to create a record of the payment intent in the transactions collection.\n   */\n  transactionsSlug?: string\n}) => ConfirmOrderReturnType | Promise<ConfirmOrderReturnType>\n\n/**\n * The full payment adapter config expected as part of the config for the Ecommerce plugin.\n *\n * You can insert this type directly or return it from a function constructing it.\n */\nexport type PaymentAdapter = {\n  /**\n   * The function that is called via the `/api/payments/{provider_name}/confirm-order` endpoint to confirm an order after a payment has been made.\n   *\n   * You should handle the order confirmation logic here.\n   *\n   * @example\n   *\n   * ```ts\n   * const confirmOrder: ConfirmOrder = async ({ data: { customerEmail }, ordersSlug, req, transactionsSlug }) => {\n      // Confirm the payment with Stripe or another payment provider here\n      // Create an order in the orders collection here\n      // Update the record of the payment intent in the transactions collection here\n      return {\n        message: 'Order confirmed successfully',\n        orderID: 'order_123',\n        transactionID: 'txn_123',\n        // Include any additional data required for the payment method here\n      }\n    }\n   * ```\n   */\n  confirmOrder: ConfirmOrder\n  /**\n   * An array of endpoints to be bootstrapped to Payload's API in order to support the payment method. All API paths are relative to `/api/payments/{provider_name}`.\n   *\n   * So for example, path `/webhooks` in the Stripe adapter becomes `/api/payments/stripe/webhooks`.\n   *\n   * @example '/webhooks'\n   */\n  endpoints?: Endpoint[]\n  /**\n   * A group configuration to be used in the admin interface to display the payment method.\n   *\n   * @example\n   *\n   * ```ts\n   * const groupField: GroupField = {\n      name: 'stripe',\n      type: 'group',\n      admin: {\n        condition: (data) => data?.paymentMethod === 'stripe',\n      },\n      fields: [\n        {\n          name: 'stripeCustomerID',\n          type: 'text',\n          label: 'Stripe Customer ID',\n          required: true,\n        },\n        {\n          name: 'stripePaymentIntentID',\n          type: 'text',\n          label: 'Stripe PaymentIntent ID',\n          required: true,\n        },\n      ],\n    }\n   * ```\n   */\n  group: GroupField\n  /**\n   * The function that is called via the `/api/payments/{provider_name}/initiate` endpoint to initiate a payment for an order.\n   *\n   * You should handle the payment initiation logic here.\n   *\n   * @example\n   *\n   * ```ts\n   * const initiatePayment: InitiatePayment = async ({ data: { cart, currency, customerEmail, billingAddress, shippingAddress }, req, transactionsSlug }) => {\n      // Create a payment intent with Stripe or another payment provider here\n      // Create a record of the payment intent in the transactions collection here\n      return {\n        message: 'Payment initiated successfully',\n        // Include any additional data required for the payment method here\n      }\n    }\n   * ```\n   */\n  initiatePayment: InitiatePayment\n  /**\n   * The label of the payment method\n   * @example\n   * 'Bank Transfer'\n   */\n  label?: string\n  /**\n   * The name of the payment method\n   * @example 'stripe'\n   */\n  name: string\n}\n\nexport type PaymentAdapterClient = {\n  confirmOrder: boolean\n  initiatePayment: boolean\n} & Pick<PaymentAdapter, 'label' | 'name'>\n\nexport type Currency = {\n  /**\n   * The ISO 4217 currency code\n   * @example 'usd'\n   */\n  code: string\n  /**\n   * The number of decimal places the currency uses\n   * @example 2\n   */\n  decimals: number\n  /**\n   * A user friendly name for the currency.\n   *\n   * @example 'US Dollar'\n   */\n  label: string\n  /**\n   * The symbol of the currency\n   * @example '$'\n   */\n  symbol: string\n}\n\n/**\n * Commonly used arguments for a Payment Adapter function, it's use is entirely optional.\n */\nexport type PaymentAdapterArgs = {\n  /**\n   * Overrides the default fields of the collection. Affects the payment fields on collections such as transactions.\n   */\n  groupOverrides?: { fields?: FieldsOverride } & Partial<Omit<GroupField, 'fields'>>\n  /**\n   * The visually readable label for the payment method.\n   * @example 'Bank Transfer'\n   */\n  label?: string\n}\n\n/**\n * Commonly used arguments for a Payment Adapter function, it's use is entirely optional.\n */\nexport type PaymentAdapterClientArgs = {\n  /**\n   * The visually readable label for the payment method.\n   * @example 'Bank Transfer'\n   */\n  label?: string\n}\n\nexport type VariantsConfig = {\n  /**\n   * Override the default variants collection. If you override the collection, you should ensure it has the required fields for variants or re-use the default fields.\n   *\n   * @example\n   *\n   * ```ts\n   * variants: {\n      variantOptionsCollectionOverride: ({ defaultCollection }) => ({\n        ...defaultCollection,\n        fields: [\n          ...defaultCollection.fields,\n          {\n            name: 'customField',\n            label: 'Custom Field',\n            type: 'text',\n          },\n        ],\n      })\n    }\n  ```\n   */\n  variantOptionsCollectionOverride?: CollectionOverride\n  /**\n   * Override the default variants collection. If you override the collection, you should ensure it has the required fields for variants or re-use the default fields.\n   *\n   * @example\n   *\n   * ```ts\n   * variants: {\n      variantsCollectionOverride: ({ defaultCollection }) => ({\n        ...defaultCollection,\n        fields: [\n          ...defaultCollection.fields,\n          {\n            name: 'customField',\n            label: 'Custom Field',\n            type: 'text',\n          },\n        ],\n      })\n    }\n  ```\n   */\n  variantsCollectionOverride?: CollectionOverride\n  /**\n   * Override the default variants collection. If you override the collection, you should ensure it has the required fields for variants or re-use the default fields.\n   *\n   * @example\n   *\n   * ```ts\n   * variants: {\n      variantTypesCollectionOverride: ({ defaultCollection }) => ({\n        ...defaultCollection,\n        fields: [\n          ...defaultCollection.fields,\n          {\n            name: 'customField',\n            label: 'Custom Field',\n            type: 'text',\n          },\n        ],\n      })\n    }\n  ```\n   */\n  variantTypesCollectionOverride?: CollectionOverride\n}\n\nexport type ProductsConfig = {\n  /**\n   * Override the default products collection. If you override the collection, you should ensure it has the required fields for products or re-use the default fields.\n   *\n   * @example\n   *\n   * ```ts\n    products: {\n      productsCollectionOverride: ({ defaultCollection }) => ({\n        ...defaultCollection,\n        fields: [\n          ...defaultCollection.fields,\n          {\n            name: 'notes',\n            label: 'Notes',\n            type: 'textarea',\n          },\n        ],\n      })\n    }\n    ```\n   */\n  productsCollectionOverride?: CollectionOverride\n  /**\n   * Customise the validation used for checking products or variants before a transaction is created or a payment can be confirmed.\n   */\n  validation?: ProductsValidation\n  /**\n   * Enable variants and provide configuration for the variant collections.\n   *\n   * Defaults to true.\n   */\n  variants?: boolean | VariantsConfig\n}\n\nexport type OrdersConfig = {\n  /**\n   * Override the default orders collection. If you override the collection, you should ensure it has the required fields for orders or re-use the default fields.\n   *\n   * @example\n   *\n   * ```ts\n      orders: {\n        ordersCollectionOverride: ({ defaultCollection }) => ({\n          ...defaultCollection,\n          fields: [\n            ...defaultCollection.fields,\n            {\n              name: 'notes',\n              label: 'Notes',\n              type: 'textarea',\n            },\n          ],\n        })\n      }\n    ```\n   */\n  ordersCollectionOverride?: CollectionOverride\n}\n\nexport type TransactionsConfig = {\n  /**\n   * Override the default transactions collection. If you override the collection, you should ensure it has the required fields for transactions or re-use the default fields.\n   *\n   * @example\n   *\n   * ```ts\n    transactions: {\n      transactionsCollectionOverride: ({ defaultCollection }) => ({\n        ...defaultCollection,\n        fields: [\n          ...defaultCollection.fields,\n          {\n            name: 'notes',\n            label: 'Notes',\n            type: 'textarea',\n          },\n        ],\n      })\n    }\n    ```\n   */\n  transactionsCollectionOverride?: CollectionOverride\n}\n\nexport type CustomQuery = {\n  depth?: number\n  select?: SelectType\n  where?: Where\n}\n\nexport type PaymentsConfig = {\n  paymentMethods?: PaymentAdapter[]\n  productsQuery?: CustomQuery\n  variantsQuery?: CustomQuery\n}\n\nexport type CountryType = {\n  /**\n   * A user friendly name for the country.\n   */\n  label: string\n  /**\n   * The ISO 3166-1 alpha-2 country code.\n   * @example 'US'\n   */\n  value: string\n}\n\n/**\n * Configuration for the addresses used by the Ecommerce plugin. Use this to override the default collection or fields used throughout\n */\ntype AddressesConfig = {\n  /**\n   * Override the default addresses collection. If you override the collection, you should ensure it has the required fields for addresses or re-use the default fields.\n   *\n   * @example\n   * ```ts\n   * addressesCollectionOverride: (defaultCollection) => {\n   *  return {\n   *    ...defaultCollection,\n   *    fields: [\n   *      ...defaultCollection.fields,\n   *      // add custom fields here\n   *    ],\n   *  }\n   * }\n   * ```\n   */\n  addressesCollectionOverride?: CollectionOverride\n  /**\n   * These fields will be applied to all locations where addresses are used, such as Orders and Transactions. Preferred use over the collectionOverride config.\n   */\n  addressFields?: FieldsOverride\n  /**\n   * Provide an array of countries to support for addresses. This will be used in the admin interface to provide a select field of countries.\n   *\n   * Defaults to a set of commonly used countries.\n   *\n   * @example\n   * ```\n   * [\n      { label: 'United States', value: 'US' },\n      { label: 'Canada', value: 'CA' },\n    ]\n   */\n  supportedCountries?: CountryType[]\n}\n\nexport type CustomersConfig = {\n  /**\n   * Slug of the customers collection, defaults to 'users'.\n   * This is used to link carts and orders to customers.\n   */\n  slug: string\n}\n\nexport type CartsConfig = {\n  cartsCollectionOverride?: CollectionOverride\n}\n\nexport type InventoryConfig = {\n  /**\n   * Override the default field used to track inventory levels. Defaults to 'inventory'.\n   */\n  fieldName?: string\n}\n\nexport type CurrenciesConfig = {\n  /**\n   * Defaults to the first supported currency.\n   *\n   * @example 'USD'\n   */\n  defaultCurrency: string\n  /**\n   *\n   */\n  supportedCurrencies: Currency[]\n}\n\n/**\n * A function that validates a product or variant before a transaction is created or completed.\n * This should throw an error if validation fails as it will be caught by the function calling it.\n */\nexport type ProductsValidation = (args: {\n  /**\n   * The full currencies config, allowing you to check against supported currencies and their settings.\n   */\n  currenciesConfig?: CurrenciesConfig\n  /**\n   * The ISO 4217 currency code being usen in this transaction.\n   */\n  currency?: string\n  /**\n   * The full product data.\n   */\n  product: TypedCollection['products']\n  /**\n   * Quantity to check the inventory amount against.\n   */\n  quantity: number\n  /**\n   * The full variant data, if a variant was selected for the product otherwise it will be undefined.\n   */\n  variant?: TypedCollection['variants']\n}) => Promise<void> | void\n\n/**\n * A map of collection slugs used by the Ecommerce plugin.\n * Provides an easy way to track the slugs of collections even when they are overridden.\n */\nexport type CollectionSlugMap = {\n  addresses: string\n  carts: string\n  customers: string\n  orders: string\n  products: string\n  transactions: string\n  variantOptions: string\n  variants: string\n  variantTypes: string\n}\n\n/**\n * Access control functions used throughout the Ecommerce plugin.\n * You must provide these when configuring the plugin.\n *\n * @example\n *\n * ```ts\n *  access: {\n      adminOnly,\n      adminOnlyFieldAccess,\n      adminOrCustomerOwner,\n      adminOrPublishedStatus,\n      customerOnlyFieldAccess,\n    }\n  ```\n */\nexport type AccessConfig = {\n  /**\n   * Limited to only admin users.\n   */\n  adminOnly: Access\n  /**\n   * Limited to only admin users, specifically for Field level access control.\n   */\n  adminOnlyFieldAccess: FieldAccess\n  /**\n   * Is the owner of the document via the `customer` field or is an admin.\n   */\n  adminOrCustomerOwner: Access\n  /**\n   * The document status is published or user is admin.\n   */\n  adminOrPublishedStatus: Access\n  /**\n   * Authenticated users only. Defaults to the example function.\n   *\n   * @example\n   * anyUser: ({ req }) => !!req?.user\n   */\n  authenticatedOnly?: Access\n  /**\n   * Limited to customers only, specifically for Field level access control.\n   */\n  customerOnlyFieldAccess: FieldAccess\n  /**\n   * Entirely public access. Defaults to the example function.\n   *\n   * @example\n   * publicAccess: () => true\n   */\n  publicAccess?: Access\n}\n\nexport type EcommercePluginConfig = {\n  /**\n   * Customise the access control for the plugin.\n   *\n   * @example\n   * ```ts\n   * ```\n   */\n  access: AccessConfig\n  /**\n   * Enable the addresses collection to allow customers, transactions and orders to have multiple addresses for shipping and billing. Accepts an override to customise the addresses collection.\n   * Defaults to supporting a default set of countries.\n   */\n  addresses?: AddressesConfig | boolean\n  /**\n   * Configure the target collection used for carts.\n   *\n   * Defaults to true.\n   */\n  carts?: boolean | CartsConfig\n  /**\n   * Configure supported currencies and default settings.\n   *\n   * Defaults to supporting USD.\n   */\n  currencies?: CurrenciesConfig\n  /**\n   * Configure the target collection used for customers.\n   *\n   * @example\n   * ```ts\n   * customers: {\n   *  slug: 'users', // default\n   * }\n   *\n   */\n  customers: CustomersConfig\n  /**\n   * Enable tracking of inventory for products and variants. Accepts a config object to override the default collection settings.\n   *\n   * Defaults to true.\n   */\n  inventory?: boolean | InventoryConfig\n  /**\n   * Enables orders and accepts a config object to override the default collection settings.\n   *\n   * Defaults to true.\n   */\n  orders?: boolean | OrdersConfig\n  /**\n   * Enable tracking of payments. Accepts a config object to override the default collection settings.\n   *\n   * Defaults to true when the paymentMethods array is provided.\n   */\n  payments?: PaymentsConfig\n  /**\n   * Enables products and variants. Accepts a config object to override the product collection and each variant collection type.\n   *\n   * Defaults to true.\n   */\n  products?: boolean | ProductsConfig\n  /**\n   * Enable tracking of transactions. Accepts a config object to override the default collection settings.\n   *\n   * Defaults to true when the paymentMethods array is provided.\n   */\n  transactions?: boolean | TransactionsConfig\n}\n\nexport type SanitizedEcommercePluginConfig = {\n  access: Required<AccessConfig>\n  addresses: { addressFields: Field[] } & Omit<AddressesConfig, 'addressFields'>\n  currencies: Required<CurrenciesConfig>\n  inventory?: InventoryConfig\n  payments: {\n    paymentMethods: [] | PaymentAdapter[]\n  }\n} & Omit<\n  Required<EcommercePluginConfig>,\n  'access' | 'addresses' | 'currencies' | 'inventory' | 'payments'\n>\n"],"names":[],"mappings":"AA+qBA,WAWC"}

package/dist/ui/PriceCell/index.d.ts

@@ -0,0 +1,12 @@
+import type { DefaultCellComponentProps, TypedCollection } from 'payload';
+import type { CurrenciesConfig, Currency } from '../../types.js';
+type Props = {
+    cellData?: number;
+    currenciesConfig: CurrenciesConfig;
+    currency?: Currency;
+    path: string;
+    rowData: Partial<TypedCollection['products']>;
+} & DefaultCellComponentProps;
+export declare const PriceCell: React.FC<Props>;
+export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/ui/PriceCell/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/PriceCell/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,yBAAyB,EAAE,eAAe,EAAE,MAAM,SAAS,CAAA;AAIzE,OAAO,KAAK,EAAE,gBAAgB,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAA;AAIhE,KAAK,KAAK,GAAG;IACX,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,gBAAgB,EAAE,gBAAgB,CAAA;IAClC,QAAQ,CAAC,EAAE,QAAQ,CAAA;IACnB,IAAI,EAAE,MAAM,CAAA;IACZ,OAAO,EAAE,OAAO,CAAC,eAAe,CAAC,UAAU,CAAC,CAAC,CAAA;CAC9C,GAAG,yBAAyB,CAAA;AAE7B,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CA+BrC,CAAA"}

package/dist/ui/PriceCell/index.js

@@ -0,0 +1,38 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTranslation } from '@payloadcms/ui';
+import { convertFromBaseValue } from '../utilities.js';
+export const PriceCell = (args)=>{
+    const { t } = useTranslation();
+    const { cellData, currenciesConfig, currency: currencyFromProps, rowData } = args;
+    const currency = currencyFromProps || currenciesConfig.supportedCurrencies[0];
+    if (!currency) {
+        // @ts-expect-error - plugin translations are not typed yet
+        return /*#__PURE__*/ _jsx("span", {
+            children: t('plugin-ecommerce:currencyNotSet')
+        });
+    }
+    if ((!cellData || typeof cellData !== 'number') && 'enableVariants' in rowData && rowData.enableVariants) {
+        // @ts-expect-error - plugin translations are not typed yet
+        return /*#__PURE__*/ _jsx("span", {
+            children: t('plugin-ecommerce:priceSetInVariants')
+        });
+    }
+    if (!cellData) {
+        // @ts-expect-error - plugin translations are not typed yet
+        return /*#__PURE__*/ _jsx("span", {
+            children: t('plugin-ecommerce:priceNotSet')
+        });
+    }
+    return /*#__PURE__*/ _jsxs("span", {
+        children: [
+            currency.symbol,
+            convertFromBaseValue({
+                baseValue: cellData,
+                currency
+            })
+        ]
+    });
+};
+
+//# sourceMappingURL=index.js.map

package/dist/ui/PriceCell/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/PriceCell/index.tsx"],"sourcesContent":["'use client'\nimport type { DefaultCellComponentProps, TypedCollection } from 'payload'\n\nimport { useTranslation } from '@payloadcms/ui'\n\nimport type { CurrenciesConfig, Currency } from '../../types.js'\n\nimport { convertFromBaseValue } from '../utilities.js'\n\ntype Props = {\n  cellData?: number\n  currenciesConfig: CurrenciesConfig\n  currency?: Currency\n  path: string\n  rowData: Partial<TypedCollection['products']>\n} & DefaultCellComponentProps\n\nexport const PriceCell: React.FC<Props> = (args) => {\n  const { t } = useTranslation()\n  const { cellData, currenciesConfig, currency: currencyFromProps, rowData } = args\n\n  const currency = currencyFromProps || currenciesConfig.supportedCurrencies[0]\n\n  if (!currency) {\n    // @ts-expect-error - plugin translations are not typed yet\n    return <span>{t('plugin-ecommerce:currencyNotSet')}</span>\n  }\n\n  if (\n    (!cellData || typeof cellData !== 'number') &&\n    'enableVariants' in rowData &&\n    rowData.enableVariants\n  ) {\n    // @ts-expect-error - plugin translations are not typed yet\n    return <span>{t('plugin-ecommerce:priceSetInVariants')}</span>\n  }\n\n  if (!cellData) {\n    // @ts-expect-error - plugin translations are not typed yet\n    return <span>{t('plugin-ecommerce:priceNotSet')}</span>\n  }\n\n  return (\n    <span>\n      {currency.symbol}\n      {convertFromBaseValue({ baseValue: cellData, currency })}\n    </span>\n  )\n}\n"],"names":["useTranslation","convertFromBaseValue","PriceCell","args","t","cellData","currenciesConfig","currency","currencyFromProps","rowData","supportedCurrencies","span","enableVariants","symbol","baseValue"],"mappings":"AAAA;;AAGA,SAASA,cAAc,QAAQ,iBAAgB;AAI/C,SAASC,oBAAoB,QAAQ,kBAAiB;AAUtD,OAAO,MAAMC,YAA6B,CAACC;IACzC,MAAM,EAAEC,CAAC,EAAE,GAAGJ;IACd,MAAM,EAAEK,QAAQ,EAAEC,gBAAgB,EAAEC,UAAUC,iBAAiB,EAAEC,OAAO,EAAE,GAAGN;IAE7E,MAAMI,WAAWC,qBAAqBF,iBAAiBI,mBAAmB,CAAC,EAAE;IAE7E,IAAI,CAACH,UAAU;QACb,2DAA2D;QAC3D,qBAAO,KAACI;sBAAMP,EAAE;;IAClB;IAEA,IACE,AAAC,CAAA,CAACC,YAAY,OAAOA,aAAa,QAAO,KACzC,oBAAoBI,WACpBA,QAAQG,cAAc,EACtB;QACA,2DAA2D;QAC3D,qBAAO,KAACD;sBAAMP,EAAE;;IAClB;IAEA,IAAI,CAACC,UAAU;QACb,2DAA2D;QAC3D,qBAAO,KAACM;sBAAMP,EAAE;;IAClB;IAEA,qBACE,MAACO;;YACEJ,SAASM,MAAM;YACfZ,qBAAqB;gBAAEa,WAAWT;gBAAUE;YAAS;;;AAG5D,EAAC"}

package/dist/ui/PriceInput/FormattedInput.d.ts

@@ -0,0 +1,17 @@
+import type { StaticDescription, StaticLabel } from 'payload';
+import type { Currency } from '../../types.js';
+interface Props {
+    currency?: Currency;
+    description?: StaticDescription;
+    disabled?: boolean;
+    error?: string;
+    id?: string;
+    label?: StaticLabel;
+    path: string;
+    placeholder?: string;
+    readOnly?: boolean;
+    supportedCurrencies: Currency[];
+}
+export declare const FormattedInput: React.FC<Props>;
+export {};
+//# sourceMappingURL=FormattedInput.d.ts.map

package/dist/ui/PriceInput/FormattedInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormattedInput.d.ts","sourceRoot":"","sources":["../../../src/ui/PriceInput/FormattedInput.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AAK7D,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAA;AAK9C,UAAU,KAAK;IACb,QAAQ,CAAC,EAAE,QAAQ,CAAA;IACnB,WAAW,CAAC,EAAE,iBAAiB,CAAA;IAC/B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,KAAK,CAAC,EAAE,WAAW,CAAA;IACnB,IAAI,EAAE,MAAM,CAAA;IACZ,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,mBAAmB,EAAE,QAAQ,EAAE,CAAA;CAChC;AAID,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CA0I1C,CAAA"}

package/dist/ui/PriceInput/FormattedInput.js

@@ -0,0 +1,146 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { FieldDescription, FieldLabel, useField, useFormFields } from '@payloadcms/ui';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { USD } from '../../currencies/index.js';
+import { convertFromBaseValue, convertToBaseValue } from '../utilities.js';
+const baseClass = 'formattedPrice';
+export const FormattedInput = ({ id: idFromProps, currency: currencyFromProps, description, disabled = false, label, path, placeholder = '0.00', readOnly, supportedCurrencies })=>{
+    const { setValue, value } = useField({
+        path
+    });
+    const [displayValue, setDisplayValue] = useState('');
+    const inputRef = useRef(null);
+    const isFirstRender = useRef(true);
+    const debounceTimer = useRef(null);
+    const parentPath = path.split('.').slice(0, -1).join('.');
+    const currencyPath = parentPath ? `${parentPath}.currency` : 'currency';
+    const currencyFromSelectField = useFormFields(([fields, _])=>fields[currencyPath]);
+    const currencyCode = currencyFromProps?.code ?? currencyFromSelectField?.value;
+    const id = idFromProps || path;
+    const currency = useMemo(()=>{
+        if (currencyCode && supportedCurrencies) {
+            const foundCurrency = supportedCurrencies.find((supportedCurrency)=>supportedCurrency.code === currencyCode);
+            return foundCurrency ?? supportedCurrencies[0] ?? USD;
+        }
+        return supportedCurrencies[0] ?? USD;
+    }, [
+        currencyCode,
+        supportedCurrencies
+    ]);
+    useEffect(()=>{
+        if (isFirstRender.current) {
+            isFirstRender.current = false;
+            if (value === undefined || value === null) {
+                setDisplayValue('');
+            } else {
+                setDisplayValue(convertFromBaseValue({
+                    baseValue: value,
+                    currency
+                }));
+            }
+        }
+    }, [
+        currency,
+        value,
+        currencyFromProps
+    ]);
+    const updateValue = useCallback((inputValue)=>{
+        if (inputValue === '') {
+            setValue(null);
+            return;
+        }
+        const baseValue = convertToBaseValue({
+            currency,
+            displayValue: inputValue
+        });
+        setValue(baseValue);
+    }, [
+        currency,
+        setValue
+    ]);
+    const handleInputChange = useCallback((e)=>{
+        const inputValue = e.target.value;
+        if (!/^\d*(?:\.\d*)?$/.test(inputValue) && inputValue !== '') {
+            return;
+        }
+        setDisplayValue(inputValue);
+        // Clear any existing timer
+        if (debounceTimer.current) {
+            clearTimeout(debounceTimer.current);
+        }
+        // Only update the base value after a delay to avoid formatting while typing
+        debounceTimer.current = setTimeout(()=>{
+            updateValue(inputValue);
+        }, 500);
+    }, [
+        updateValue,
+        setDisplayValue
+    ]);
+    const handleInputBlur = useCallback(()=>{
+        if (displayValue === '') {
+            return;
+        }
+        // Clear any pending debounce
+        if (debounceTimer.current) {
+            clearTimeout(debounceTimer.current);
+            debounceTimer.current = null;
+        }
+        const baseValue = convertToBaseValue({
+            currency,
+            displayValue
+        });
+        const formattedValue = convertFromBaseValue({
+            baseValue,
+            currency
+        });
+        if (value != baseValue) {
+            setValue(baseValue);
+        }
+        setDisplayValue(formattedValue);
+    }, [
+        currency,
+        displayValue,
+        setValue,
+        value
+    ]);
+    return /*#__PURE__*/ _jsxs("div", {
+        className: `field-type number ${baseClass}`,
+        children: [
+            label && /*#__PURE__*/ _jsx(FieldLabel, {
+                as: "label",
+                htmlFor: id,
+                label: label
+            }),
+            /*#__PURE__*/ _jsxs("div", {
+                className: `${baseClass}Container`,
+                children: [
+                    /*#__PURE__*/ _jsx("div", {
+                        className: `${baseClass}CurrencySymbol`,
+                        children: /*#__PURE__*/ _jsx("span", {
+                            children: currency.symbol
+                        })
+                    }),
+                    /*#__PURE__*/ _jsx("input", {
+                        className: `${baseClass}Input`,
+                        disabled: disabled || readOnly,
+                        id: id,
+                        onBlur: handleInputBlur,
+                        onChange: handleInputChange,
+                        placeholder: placeholder,
+                        ref: inputRef,
+                        type: "text",
+                        value: displayValue
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsx(FieldDescription, {
+                className: `${baseClass}Description`,
+                description: description,
+                path: path
+            })
+        ]
+    });
+};
+
+//# sourceMappingURL=FormattedInput.js.map

package/dist/ui/PriceInput/FormattedInput.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/PriceInput/FormattedInput.tsx"],"sourcesContent":["'use client'\n\nimport type { StaticDescription, StaticLabel } from 'payload'\n\nimport { FieldDescription, FieldLabel, useField, useFormFields } from '@payloadcms/ui'\nimport { useCallback, useEffect, useMemo, useRef, useState } from 'react'\n\nimport type { Currency } from '../../types.js'\n\nimport { USD } from '../../currencies/index.js'\nimport { convertFromBaseValue, convertToBaseValue } from '../utilities.js'\n\ninterface Props {\n  currency?: Currency\n  description?: StaticDescription\n  disabled?: boolean\n  error?: string\n  id?: string\n  label?: StaticLabel\n  path: string\n  placeholder?: string\n  readOnly?: boolean\n  supportedCurrencies: Currency[]\n}\n\nconst baseClass = 'formattedPrice'\n\nexport const FormattedInput: React.FC<Props> = ({\n  id: idFromProps,\n  currency: currencyFromProps,\n  description,\n  disabled = false,\n  label,\n  path,\n  placeholder = '0.00',\n  readOnly,\n  supportedCurrencies,\n}) => {\n  const { setValue, value } = useField<number>({ path })\n  const [displayValue, setDisplayValue] = useState<string>('')\n\n  const inputRef = useRef<HTMLInputElement>(null)\n  const isFirstRender = useRef(true)\n  const debounceTimer = useRef<NodeJS.Timeout | null>(null)\n\n  const parentPath = path.split('.').slice(0, -1).join('.')\n  const currencyPath = parentPath ? `${parentPath}.currency` : 'currency'\n\n  const currencyFromSelectField = useFormFields(([fields, _]) => fields[currencyPath])\n\n  const currencyCode = currencyFromProps?.code ?? (currencyFromSelectField?.value as string)\n  const id = idFromProps || path\n\n  const currency = useMemo<Currency>(() => {\n    if (currencyCode && supportedCurrencies) {\n      const foundCurrency = supportedCurrencies.find(\n        (supportedCurrency) => supportedCurrency.code === currencyCode,\n      )\n\n      return foundCurrency ?? supportedCurrencies[0] ?? USD\n    }\n\n    return supportedCurrencies[0] ?? USD\n  }, [currencyCode, supportedCurrencies])\n\n  useEffect(() => {\n    if (isFirstRender.current) {\n      isFirstRender.current = false\n\n      if (value === undefined || value === null) {\n        setDisplayValue('')\n      } else {\n        setDisplayValue(convertFromBaseValue({ baseValue: value, currency }))\n      }\n    }\n  }, [currency, value, currencyFromProps])\n\n  const updateValue = useCallback(\n    (inputValue: string) => {\n      if (inputValue === '') {\n        setValue(null)\n\n        return\n      }\n\n      const baseValue = convertToBaseValue({ currency, displayValue: inputValue })\n\n      setValue(baseValue)\n    },\n    [currency, setValue],\n  )\n\n  const handleInputChange = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      const inputValue = e.target.value\n\n      if (!/^\\d*(?:\\.\\d*)?$/.test(inputValue) && inputValue !== '') {\n        return\n      }\n\n      setDisplayValue(inputValue)\n\n      // Clear any existing timer\n      if (debounceTimer.current) {\n        clearTimeout(debounceTimer.current)\n      }\n\n      // Only update the base value after a delay to avoid formatting while typing\n      debounceTimer.current = setTimeout(() => {\n        updateValue(inputValue)\n      }, 500)\n    },\n    [updateValue, setDisplayValue],\n  )\n\n  const handleInputBlur = useCallback(() => {\n    if (displayValue === '') {\n      return\n    }\n\n    // Clear any pending debounce\n    if (debounceTimer.current) {\n      clearTimeout(debounceTimer.current)\n      debounceTimer.current = null\n    }\n\n    const baseValue = convertToBaseValue({ currency, displayValue })\n    const formattedValue = convertFromBaseValue({ baseValue, currency })\n\n    if (value != baseValue) {\n      setValue(baseValue)\n    }\n\n    setDisplayValue(formattedValue)\n  }, [currency, displayValue, setValue, value])\n\n  return (\n    <div className={`field-type number ${baseClass}`}>\n      {label && <FieldLabel as=\"label\" htmlFor={id} label={label} />}\n\n      <div className={`${baseClass}Container`}>\n        <div className={`${baseClass}CurrencySymbol`}>\n          <span>{currency.symbol}</span>\n        </div>\n\n        {/* eslint-disable-next-line jsx-a11y/control-has-associated-label */}\n        <input\n          className={`${baseClass}Input`}\n          disabled={disabled || readOnly}\n          id={id}\n          onBlur={handleInputBlur}\n          onChange={handleInputChange}\n          placeholder={placeholder}\n          ref={inputRef}\n          type=\"text\"\n          value={displayValue}\n        />\n      </div>\n      <FieldDescription\n        className={`${baseClass}Description`}\n        description={description}\n        path={path}\n      />\n    </div>\n  )\n}\n"],"names":["FieldDescription","FieldLabel","useField","useFormFields","useCallback","useEffect","useMemo","useRef","useState","USD","convertFromBaseValue","convertToBaseValue","baseClass","FormattedInput","id","idFromProps","currency","currencyFromProps","description","disabled","label","path","placeholder","readOnly","supportedCurrencies","setValue","value","displayValue","setDisplayValue","inputRef","isFirstRender","debounceTimer","parentPath","split","slice","join","currencyPath","currencyFromSelectField","fields","_","currencyCode","code","foundCurrency","find","supportedCurrency","current","undefined","baseValue","updateValue","inputValue","handleInputChange","e","target","test","clearTimeout","setTimeout","handleInputBlur","formattedValue","div","className","as","htmlFor","span","symbol","input","onBlur","onChange","ref","type"],"mappings":"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"}

package/{src/ui/PriceInput/index.scss → dist/ui/PriceInput/index.css}

@@ -24,5 +24,12 @@
 
   .formattedPriceInput {
     padding: 0.5rem 0.5rem 0.5rem 1.75rem;
+    min-width: 2rem;
+    width: fit-content;
+    max-width: 10rem;
+  }
+
+  .formattedPriceDescription {
+    max-width: 46rem;
   }
 }

package/dist/ui/PriceInput/index.d.ts

@@ -0,0 +1,11 @@
+import type { NumberFieldServerProps } from 'payload';
+import './index.css';
+import type { CurrenciesConfig, Currency } from '../../types.js';
+type Props = {
+    currenciesConfig: CurrenciesConfig;
+    currency?: Currency;
+    path: string;
+} & NumberFieldServerProps;
+export declare const PriceInput: React.FC<Props>;
+export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/ui/PriceInput/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/PriceInput/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAA;AAErD,OAAO,aAAa,CAAA;AAEpB,OAAO,KAAK,EAAE,gBAAgB,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAA;AAIhE,KAAK,KAAK,GAAG;IACX,gBAAgB,EAAE,gBAAgB,CAAA;IAClC,QAAQ,CAAC,EAAE,QAAQ,CAAA;IACnB,IAAI,EAAE,MAAM,CAAA;CACb,GAAG,sBAAsB,CAAA;AAE1B,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CA6BtC,CAAA"}

package/dist/ui/PriceInput/index.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import './index.css';
+import { FormattedInput } from './FormattedInput.js';
+export const PriceInput = (args)=>{
+    const { clientField: { label }, currenciesConfig, currency: currencyFromProps, field, i18n: { t }, i18n, path, readOnly } = args;
+    const description = field.admin?.description ? typeof field.admin.description === 'function' ? field.admin.description({
+        i18n,
+        t
+    }) : field.admin.description : undefined;
+    return /*#__PURE__*/ _jsx(FormattedInput, {
+        currency: currencyFromProps,
+        description: description,
+        label: label,
+        path: path,
+        readOnly: readOnly,
+        supportedCurrencies: currenciesConfig?.supportedCurrencies
+    });
+};
+
+//# sourceMappingURL=index.js.map

package/dist/ui/PriceInput/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/PriceInput/index.tsx"],"sourcesContent":["import type { NumberFieldServerProps } from 'payload'\n\nimport './index.css'\n\nimport type { CurrenciesConfig, Currency } from '../../types.js'\n\nimport { FormattedInput } from './FormattedInput.js'\n\ntype Props = {\n  currenciesConfig: CurrenciesConfig\n  currency?: Currency\n  path: string\n} & NumberFieldServerProps\n\nexport const PriceInput: React.FC<Props> = (args) => {\n  const {\n    clientField: { label },\n    currenciesConfig,\n    currency: currencyFromProps,\n    field,\n    i18n: { t },\n    i18n,\n    path,\n    readOnly,\n  } = args\n\n  const description = field.admin?.description\n    ? typeof field.admin.description === 'function'\n      ? // @ts-expect-error - weird type issue on 't' here\n        field.admin.description({ i18n, t })\n      : field.admin.description\n    : undefined\n\n  return (\n    <FormattedInput\n      currency={currencyFromProps}\n      description={description}\n      label={label}\n      path={path}\n      readOnly={readOnly}\n      supportedCurrencies={currenciesConfig?.supportedCurrencies}\n    />\n  )\n}\n"],"names":["FormattedInput","PriceInput","args","clientField","label","currenciesConfig","currency","currencyFromProps","field","i18n","t","path","readOnly","description","admin","undefined","supportedCurrencies"],"mappings":";AAEA,OAAO,cAAa;AAIpB,SAASA,cAAc,QAAQ,sBAAqB;AAQpD,OAAO,MAAMC,aAA8B,CAACC;IAC1C,MAAM,EACJC,aAAa,EAAEC,KAAK,EAAE,EACtBC,gBAAgB,EAChBC,UAAUC,iBAAiB,EAC3BC,KAAK,EACLC,MAAM,EAAEC,CAAC,EAAE,EACXD,IAAI,EACJE,IAAI,EACJC,QAAQ,EACT,GAAGV;IAEJ,MAAMW,cAAcL,MAAMM,KAAK,EAAED,cAC7B,OAAOL,MAAMM,KAAK,CAACD,WAAW,KAAK,aAEjCL,MAAMM,KAAK,CAACD,WAAW,CAAC;QAAEJ;QAAMC;IAAE,KAClCF,MAAMM,KAAK,CAACD,WAAW,GACzBE;IAEJ,qBACE,KAACf;QACCM,UAAUC;QACVM,aAAaA;QACbT,OAAOA;QACPO,MAAMA;QACNC,UAAUA;QACVI,qBAAqBX,kBAAkBW;;AAG7C,EAAC"}

package/dist/ui/PriceRowLabel/index.d.ts

@@ -0,0 +1,8 @@
+import type { CurrenciesConfig } from '../../types.js';
+import './index.css';
+type Props = {
+    currenciesConfig: CurrenciesConfig;
+};
+export declare const PriceRowLabel: React.FC<Props>;
+export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/ui/PriceRowLabel/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/PriceRowLabel/index.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAA;AAEtD,OAAO,aAAa,CAAA;AAGpB,KAAK,KAAK,GAAG;IACX,gBAAgB,EAAE,gBAAgB,CAAA;CACnC,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAyCzC,CAAA"}

package/dist/ui/PriceRowLabel/index.js

@@ -0,0 +1,66 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRowLabel } from '@payloadcms/ui';
+import { useMemo } from 'react';
+import './index.css';
+import { convertFromBaseValue } from '../utilities.js';
+export const PriceRowLabel = (props)=>{
+    const { currenciesConfig } = props;
+    const { defaultCurrency, supportedCurrencies } = currenciesConfig;
+    const { data } = useRowLabel();
+    const currency = useMemo(()=>{
+        if (data.currency) {
+            return supportedCurrencies.find((c)=>c.code === data.currency) ?? supportedCurrencies[0];
+        }
+        const fallbackCurrency = supportedCurrencies.find((c)=>c.code === defaultCurrency);
+        if (fallbackCurrency) {
+            return fallbackCurrency;
+        }
+        return supportedCurrencies[0];
+    }, [
+        data.currency,
+        supportedCurrencies,
+        defaultCurrency
+    ]);
+    const amount = useMemo(()=>{
+        if (data.amount) {
+            return convertFromBaseValue({
+                baseValue: data.amount,
+                currency: currency
+            });
+        }
+        return '0';
+    }, [
+        currency,
+        data.amount
+    ]);
+    return /*#__PURE__*/ _jsxs("div", {
+        className: "priceRowLabel",
+        children: [
+            /*#__PURE__*/ _jsx("div", {
+                className: "priceLabel",
+                children: "Price:"
+            }),
+            /*#__PURE__*/ _jsxs("div", {
+                className: "priceValue",
+                children: [
+                    /*#__PURE__*/ _jsxs("span", {
+                        children: [
+                            currency?.symbol,
+                            amount
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsxs("span", {
+                        children: [
+                            "(",
+                            data.currency,
+                            ")"
+                        ]
+                    })
+                ]
+            })
+        ]
+    });
+};
+
+//# sourceMappingURL=index.js.map

package/dist/ui/PriceRowLabel/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/PriceRowLabel/index.tsx"],"sourcesContent":["'use client'\n\nimport { useRowLabel } from '@payloadcms/ui'\nimport { useMemo } from 'react'\n\nimport type { CurrenciesConfig } from '../../types.js'\n\nimport './index.css'\nimport { convertFromBaseValue } from '../utilities.js'\n\ntype Props = {\n  currenciesConfig: CurrenciesConfig\n}\n\nexport const PriceRowLabel: React.FC<Props> = (props) => {\n  const { currenciesConfig } = props\n  const { defaultCurrency, supportedCurrencies } = currenciesConfig\n\n  const { data } = useRowLabel<{ amount: number; currency: string }>()\n\n  const currency = useMemo(() => {\n    if (data.currency) {\n      return supportedCurrencies.find((c) => c.code === data.currency) ?? supportedCurrencies[0]\n    }\n\n    const fallbackCurrency = supportedCurrencies.find((c) => c.code === defaultCurrency)\n\n    if (fallbackCurrency) {\n      return fallbackCurrency\n    }\n\n    return supportedCurrencies[0]\n  }, [data.currency, supportedCurrencies, defaultCurrency])\n\n  const amount = useMemo(() => {\n    if (data.amount) {\n      return convertFromBaseValue({ baseValue: data.amount, currency: currency! })\n    }\n\n    return '0'\n  }, [currency, data.amount])\n\n  return (\n    <div className=\"priceRowLabel\">\n      <div className=\"priceLabel\">Price:</div>\n\n      <div className=\"priceValue\">\n        <span>\n          {currency?.symbol}\n          {amount}\n        </span>\n        <span>({data.currency})</span>\n      </div>\n    </div>\n  )\n}\n"],"names":["useRowLabel","useMemo","convertFromBaseValue","PriceRowLabel","props","currenciesConfig","defaultCurrency","supportedCurrencies","data","currency","find","c","code","fallbackCurrency","amount","baseValue","div","className","span","symbol"],"mappings":"AAAA;;AAEA,SAASA,WAAW,QAAQ,iBAAgB;AAC5C,SAASC,OAAO,QAAQ,QAAO;AAI/B,OAAO,cAAa;AACpB,SAASC,oBAAoB,QAAQ,kBAAiB;AAMtD,OAAO,MAAMC,gBAAiC,CAACC;IAC7C,MAAM,EAAEC,gBAAgB,EAAE,GAAGD;IAC7B,MAAM,EAAEE,eAAe,EAAEC,mBAAmB,EAAE,GAAGF;IAEjD,MAAM,EAAEG,IAAI,EAAE,GAAGR;IAEjB,MAAMS,WAAWR,QAAQ;QACvB,IAAIO,KAAKC,QAAQ,EAAE;YACjB,OAAOF,oBAAoBG,IAAI,CAAC,CAACC,IAAMA,EAAEC,IAAI,KAAKJ,KAAKC,QAAQ,KAAKF,mBAAmB,CAAC,EAAE;QAC5F;QAEA,MAAMM,mBAAmBN,oBAAoBG,IAAI,CAAC,CAACC,IAAMA,EAAEC,IAAI,KAAKN;QAEpE,IAAIO,kBAAkB;YACpB,OAAOA;QACT;QAEA,OAAON,mBAAmB,CAAC,EAAE;IAC/B,GAAG;QAACC,KAAKC,QAAQ;QAAEF;QAAqBD;KAAgB;IAExD,MAAMQ,SAASb,QAAQ;QACrB,IAAIO,KAAKM,MAAM,EAAE;YACf,OAAOZ,qBAAqB;gBAAEa,WAAWP,KAAKM,MAAM;gBAAEL,UAAUA;YAAU;QAC5E;QAEA,OAAO;IACT,GAAG;QAACA;QAAUD,KAAKM,MAAM;KAAC;IAE1B,qBACE,MAACE;QAAIC,WAAU;;0BACb,KAACD;gBAAIC,WAAU;0BAAa;;0BAE5B,MAACD;gBAAIC,WAAU;;kCACb,MAACC;;4BACET,UAAUU;4BACVL;;;kCAEH,MAACI;;4BAAK;4BAAEV,KAAKC,QAAQ;4BAAC;;;;;;;AAI9B,EAAC"}

package/dist/ui/VariantOptionsSelector/ErrorBox.d.ts

@@ -0,0 +1,8 @@
+type Props = {
+    children?: React.ReactNode;
+    existingOptions: string[];
+    path: string;
+};
+export declare const ErrorBox: React.FC<Props>;
+export {};
+//# sourceMappingURL=ErrorBox.d.ts.map

package/dist/ui/VariantOptionsSelector/ErrorBox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ErrorBox.d.ts","sourceRoot":"","sources":["../../../src/ui/VariantOptionsSelector/ErrorBox.tsx"],"names":[],"mappings":"AAIA,KAAK,KAAK,GAAG;IACX,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,eAAe,EAAE,MAAM,EAAE,CAAA;IACzB,IAAI,EAAE,MAAM,CAAA;CACb,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAgBpC,CAAA"}

package/dist/ui/VariantOptionsSelector/ErrorBox.js

@@ -0,0 +1,28 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { FieldError, useField } from '@payloadcms/ui';
+export const ErrorBox = (props)=>{
+    const { children, path } = props;
+    const { errorMessage, showError } = useField({
+        path
+    });
+    return /*#__PURE__*/ _jsxs("div", {
+        className: "variantOptionsSelectorError",
+        children: [
+            /*#__PURE__*/ _jsx(FieldError, {
+                message: errorMessage,
+                path: path,
+                showError: showError
+            }),
+            /*#__PURE__*/ _jsx("div", {
+                className: [
+                    'variantOptionsSelectorErrorWrapper',
+                    showError && 'showError'
+                ].filter(Boolean).join(' '),
+                children: children
+            })
+        ]
+    });
+};
+
+//# sourceMappingURL=ErrorBox.js.map

package/dist/ui/VariantOptionsSelector/ErrorBox.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/VariantOptionsSelector/ErrorBox.tsx"],"sourcesContent":["'use client'\n\nimport { FieldError, useField, useTranslation } from '@payloadcms/ui'\n\ntype Props = {\n  children?: React.ReactNode\n  existingOptions: string[]\n  path: string\n}\n\nexport const ErrorBox: React.FC<Props> = (props) => {\n  const { children, path } = props\n  const { errorMessage, showError } = useField<(number | string)[]>({ path })\n\n  return (\n    <div className=\"variantOptionsSelectorError\">\n      <FieldError message={errorMessage} path={path} showError={showError} />\n      <div\n        className={['variantOptionsSelectorErrorWrapper', showError && 'showError']\n          .filter(Boolean)\n          .join(' ')}\n      >\n        {children}\n      </div>\n    </div>\n  )\n}\n"],"names":["FieldError","useField","ErrorBox","props","children","path","errorMessage","showError","div","className","message","filter","Boolean","join"],"mappings":"AAAA;;AAEA,SAASA,UAAU,EAAEC,QAAQ,QAAwB,iBAAgB;AAQrE,OAAO,MAAMC,WAA4B,CAACC;IACxC,MAAM,EAAEC,QAAQ,EAAEC,IAAI,EAAE,GAAGF;IAC3B,MAAM,EAAEG,YAAY,EAAEC,SAAS,EAAE,GAAGN,SAA8B;QAAEI;IAAK;IAEzE,qBACE,MAACG;QAAIC,WAAU;;0BACb,KAACT;gBAAWU,SAASJ;gBAAcD,MAAMA;gBAAME,WAAWA;;0BAC1D,KAACC;gBACCC,WAAW;oBAAC;oBAAsCF,aAAa;iBAAY,CACxEI,MAAM,CAACC,SACPC,IAAI,CAAC;0BAEPT;;;;AAIT,EAAC"}

package/dist/ui/VariantOptionsSelector/OptionsSelect.d.ts

@@ -0,0 +1,13 @@
+import type { SelectFieldClient } from 'payload';
+type Props = {
+    field: Omit<SelectFieldClient, 'type'>;
+    label: string;
+    options: {
+        label: string;
+        value: number | string;
+    }[];
+    path: string;
+};
+export declare const OptionsSelect: React.FC<Props>;
+export {};
+//# sourceMappingURL=OptionsSelect.d.ts.map

package/dist/ui/VariantOptionsSelector/OptionsSelect.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"OptionsSelect.d.ts","sourceRoot":"","sources":["../../../src/ui/VariantOptionsSelector/OptionsSelect.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAA;AAKhD,KAAK,KAAK,GAAG;IACX,KAAK,EAAE,IAAI,CAAC,iBAAiB,EAAE,MAAM,CAAC,CAAA;IACtC,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,EAAE,CAAA;IACpD,IAAI,EAAE,MAAM,CAAA;CACb,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CA+DzC,CAAA"}

package/dist/ui/VariantOptionsSelector/OptionsSelect.js

@@ -0,0 +1,71 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { FieldLabel, ReactSelect, useField } from '@payloadcms/ui';
+import { useCallback, useId, useMemo } from 'react';
+export const OptionsSelect = (props)=>{
+    const { field: { required }, label, options: optionsFromProps, path } = props;
+    const { setValue, value } = useField({
+        path
+    });
+    const id = useId();
+    const selectedValue = useMemo(()=>{
+        if (!value || !Array.isArray(value) || value.length === 0) {
+            return undefined;
+        }
+        const foundOption = optionsFromProps.find((option)=>{
+            return value.find((item)=>item === option.value);
+        });
+        return foundOption;
+    }, [
+        optionsFromProps,
+        value
+    ]);
+    const handleChange = useCallback(// @ts-expect-error - TODO: Fix types
+    (option)=>{
+        if (selectedValue) {
+            let selectedValueIndex = -1;
+            const valuesWithoutSelected = [
+                ...value
+            ].filter((o, index)=>{
+                if (o === selectedValue.value) {
+                    selectedValueIndex = index;
+                    return false;
+                }
+                return true;
+            });
+            const newValues = [
+                ...valuesWithoutSelected
+            ];
+            newValues.splice(selectedValueIndex, 0, option.value);
+            setValue(newValues);
+        } else {
+            const values = [
+                ...value || [],
+                option.value
+            ];
+            setValue(values);
+        }
+    }, [
+        selectedValue,
+        setValue,
+        value
+    ]);
+    return /*#__PURE__*/ _jsxs("div", {
+        className: "variantOptionsSelectorItem",
+        children: [
+            /*#__PURE__*/ _jsx(FieldLabel, {
+                htmlFor: id,
+                label: label,
+                required: required
+            }),
+            /*#__PURE__*/ _jsx(ReactSelect, {
+                inputId: id,
+                onChange: handleChange,
+                options: optionsFromProps,
+                value: selectedValue
+            })
+        ]
+    });
+};
+
+//# sourceMappingURL=OptionsSelect.js.map

package/dist/ui/VariantOptionsSelector/OptionsSelect.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/VariantOptionsSelector/OptionsSelect.tsx"],"sourcesContent":["'use client'\n\nimport type { SelectFieldClient } from 'payload'\n\nimport { FieldLabel, ReactSelect, useField, useForm } from '@payloadcms/ui'\nimport { useCallback, useId, useMemo } from 'react'\n\ntype Props = {\n  field: Omit<SelectFieldClient, 'type'>\n  label: string\n  options: { label: string; value: number | string }[]\n  path: string\n}\n\nexport const OptionsSelect: React.FC<Props> = (props) => {\n  const {\n    field: { required },\n    label,\n    options: optionsFromProps,\n    path,\n  } = props\n\n  const { setValue, value } = useField<(number | string)[]>({ path })\n  const id = useId()\n\n  const selectedValue = useMemo(() => {\n    if (!value || !Array.isArray(value) || value.length === 0) {\n      return undefined\n    }\n    const foundOption = optionsFromProps.find((option) => {\n      return value.find((item) => item === option.value)\n    })\n\n    return foundOption\n  }, [optionsFromProps, value])\n\n  const handleChange = useCallback(\n    // @ts-expect-error - TODO: Fix types\n    (option) => {\n      if (selectedValue) {\n        let selectedValueIndex = -1\n\n        const valuesWithoutSelected = [...value].filter((o, index) => {\n          if (o === selectedValue.value) {\n            selectedValueIndex = index\n            return false\n          }\n\n          return true\n        })\n\n        const newValues = [...valuesWithoutSelected]\n\n        newValues.splice(selectedValueIndex, 0, option.value)\n\n        setValue(newValues)\n      } else {\n        const values = [...(value || []), option.value]\n\n        setValue(values)\n      }\n    },\n    [selectedValue, setValue, value],\n  )\n\n  return (\n    <div className=\"variantOptionsSelectorItem\">\n      <FieldLabel htmlFor={id} label={label} required={required} />\n\n      <ReactSelect\n        inputId={id}\n        onChange={handleChange}\n        options={optionsFromProps}\n        value={selectedValue}\n      />\n    </div>\n  )\n}\n"],"names":["FieldLabel","ReactSelect","useField","useCallback","useId","useMemo","OptionsSelect","props","field","required","label","options","optionsFromProps","path","setValue","value","id","selectedValue","Array","isArray","length","undefined","foundOption","find","option","item","handleChange","selectedValueIndex","valuesWithoutSelected","filter","o","index","newValues","splice","values","div","className","htmlFor","inputId","onChange"],"mappings":"AAAA;;AAIA,SAASA,UAAU,EAAEC,WAAW,EAAEC,QAAQ,QAAiB,iBAAgB;AAC3E,SAASC,WAAW,EAAEC,KAAK,EAAEC,OAAO,QAAQ,QAAO;AASnD,OAAO,MAAMC,gBAAiC,CAACC;IAC7C,MAAM,EACJC,OAAO,EAAEC,QAAQ,EAAE,EACnBC,KAAK,EACLC,SAASC,gBAAgB,EACzBC,IAAI,EACL,GAAGN;IAEJ,MAAM,EAAEO,QAAQ,EAAEC,KAAK,EAAE,GAAGb,SAA8B;QAAEW;IAAK;IACjE,MAAMG,KAAKZ;IAEX,MAAMa,gBAAgBZ,QAAQ;QAC5B,IAAI,CAACU,SAAS,CAACG,MAAMC,OAAO,CAACJ,UAAUA,MAAMK,MAAM,KAAK,GAAG;YACzD,OAAOC;QACT;QACA,MAAMC,cAAcV,iBAAiBW,IAAI,CAAC,CAACC;YACzC,OAAOT,MAAMQ,IAAI,CAAC,CAACE,OAASA,SAASD,OAAOT,KAAK;QACnD;QAEA,OAAOO;IACT,GAAG;QAACV;QAAkBG;KAAM;IAE5B,MAAMW,eAAevB,YACnB,qCAAqC;IACrC,CAACqB;QACC,IAAIP,eAAe;YACjB,IAAIU,qBAAqB,CAAC;YAE1B,MAAMC,wBAAwB;mBAAIb;aAAM,CAACc,MAAM,CAAC,CAACC,GAAGC;gBAClD,IAAID,MAAMb,cAAcF,KAAK,EAAE;oBAC7BY,qBAAqBI;oBACrB,OAAO;gBACT;gBAEA,OAAO;YACT;YAEA,MAAMC,YAAY;mBAAIJ;aAAsB;YAE5CI,UAAUC,MAAM,CAACN,oBAAoB,GAAGH,OAAOT,KAAK;YAEpDD,SAASkB;QACX,OAAO;YACL,MAAME,SAAS;mBAAKnB,SAAS,EAAE;gBAAGS,OAAOT,KAAK;aAAC;YAE/CD,SAASoB;QACX;IACF,GACA;QAACjB;QAAeH;QAAUC;KAAM;IAGlC,qBACE,MAACoB;QAAIC,WAAU;;0BACb,KAACpC;gBAAWqC,SAASrB;gBAAIN,OAAOA;gBAAOD,UAAUA;;0BAEjD,KAACR;gBACCqC,SAAStB;gBACTuB,UAAUb;gBACVf,SAASC;gBACTG,OAAOE;;;;AAIf,EAAC"}

package/dist/ui/VariantOptionsSelector/index.d.ts

@@ -0,0 +1,6 @@
+import type { SelectFieldServerProps } from 'payload';
+import './index.css';
+type Props = {} & SelectFieldServerProps;
+export declare const VariantOptionsSelector: React.FC<Props>;
+export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/ui/VariantOptionsSelector/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/VariantOptionsSelector/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAA;AAKrD,OAAO,aAAa,CAAA;AAEpB,KAAK,KAAK,GAAG,EAAE,GAAG,sBAAsB,CAAA;AAExC,eAAO,MAAM,sBAAsB,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CA0ElD,CAAA"}