@payloadcms/plugin-ecommerce 4.0.0-internal.4cbdd50 → 4.0.0-internal.543da65

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

@@ -1 +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/index.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  required?: 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  required,\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} required={required} />}\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","required","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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"}
+{"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/index.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  required?: 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  required,\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} required={required} />}\n\n      <div className={`${baseClass}Container form-input-group`}>\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 form-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","required","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/dist/ui/PriceInput/index.css

@@ -1,35 +1,23 @@
-.formattedPrice {
-  .formattedPriceLabel {
-    display: block;
-    margin-bottom: 0.5rem;
-    font-size: 0.875rem;
-    font-weight: 500;
-    color: #333;
-  }
-
-  .formattedPriceContainer {
-    display: flex;
-    position: relative;
-  }
+@layer payload-default {
+  .formattedPrice {
+    .formattedPriceCurrencySymbol {
+      position: absolute;
+      inset-inline-start: var(--field-padding-inline);
+      top: 50%;
+      transform: translateY(-50%);
+      color: var(--color-text-secondary);
+      user-select: none;
+      pointer-events: none;
+      z-index: 1;
+    }
 
-  .formattedPriceCurrencySymbol {
-    position: absolute;
-    left: 10px;
-    top: 50%;
-    transform: translateY(calc(-50%));
-    color: var(--theme-elevation-500);
-    user-select: none;
-    pointer-events: none;
-  }
-
-  .formattedPriceInput {
-    padding: 0.5rem 0.5rem 0.5rem 1.75rem;
-    min-width: 2rem;
-    width: fit-content;
-    max-width: 10rem;
-  }
+    .formattedPriceInput {
+      /* Reserve space for the absolutely-positioned currency symbol prefix */
+      padding-inline-start: var(--spacer-4);
+    }
 
-  .formattedPriceDescription {
-    max-width: 46rem;
+    .formattedPriceDescription {
+      max-width: 75ch;
+    }
   }
 }

package/dist/ui/PriceRowLabel/index.css

@@ -2,12 +2,12 @@
   .priceRowLabel {
     display: flex;
     align-items: center;
-    gap: calc(var(--base) * 1);
+    gap: var(--spacer-3);
   }
 
   .priceValue {
     display: flex;
     align-items: center;
-    gap: calc(var(--base) * 0.25);
+    gap: var(--spacer-1);
   }
 }

package/dist/ui/VariantOptionsSelector/index.css

@@ -1,26 +1,24 @@
 @layer payload-default {
   .variantOptionsSelector {
-    margin-top: calc(var(--spacing-field) * 2);
-    margin-bottom: calc(var(--spacing-field) * 2);
+    margin-block: var(--spacer-2);
   }
 
   .variantOptionsSelectorHeading {
-    font-size: calc(var(--base) * 1);
-    font-weight: 500;
+    font-size: var(--text-body-large-font-size);
     color: var(--color-text);
-    margin-bottom: calc(var(--base) * 0.5);
+    margin-block-end: var(--spacer-2);
   }
 
   .variantOptionsSelectorItem {
     display: flex;
     flex-direction: column;
-    gap: 0;
+    gap: var(--spacer-2);
   }
 
   .variantOptionsSelectorList {
     display: flex;
     flex-direction: column;
-    gap: calc(var(--base) * 0.75);
+    gap: var(--spacer-3);
   }
 
   .variantOptionsSelectorError {
@@ -29,9 +27,9 @@
 
   .variantOptionsSelectorErrorWrapper {
     &.showError {
-      border-radius: 2px;
-      outline: 1px solid var(--theme-error-400);
-      outline-offset: 2px;
+      border-radius: var(--radius-small);
+      outline: var(--stroke-width-small) solid var(--field-color-border-error);
+      outline-offset: var(--stroke-width-medium);
     }
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@payloadcms/plugin-ecommerce",
-  "version": "4.0.0-internal.4cbdd50",
+  "version": "4.0.0-internal.543da65",
   "description": "Ecommerce plugin for Payload",
   "keywords": [
     "payload",
@@ -74,8 +74,8 @@
   ],
   "dependencies": {
     "qs-esm": "8.0.1",
-    "@payloadcms/translations": "4.0.0-internal.4cbdd50",
-    "@payloadcms/ui": "4.0.0-internal.4cbdd50"
+    "@payloadcms/translations": "4.0.0-internal.543da65",
+    "@payloadcms/ui": "4.0.0-internal.543da65"
   },
   "devDependencies": {
     "@types/json-schema": "7.0.15",
@@ -83,14 +83,14 @@
     "@types/react-dom": "19.2.3",
     "stripe": "18.3.0",
     "@payloadcms/eslint-config": "3.28.0",
-    "@payloadcms/next": "4.0.0-internal.4cbdd50",
-    "@payloadcms/translations": "4.0.0-internal.4cbdd50",
-    "payload": "4.0.0-internal.4cbdd50"
+    "@payloadcms/next": "4.0.0-internal.543da65",
+    "@payloadcms/translations": "4.0.0-internal.543da65",
+    "payload": "4.0.0-internal.543da65"
   },
   "peerDependencies": {
     "react": "^19.0.1 || ^19.1.2 || ^19.2.1",
     "react-dom": "^19.0.1 || ^19.1.2 || ^19.2.1",
-    "payload": "4.0.0-internal.4cbdd50"
+    "payload": "4.0.0-internal.543da65"
   },
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"

package/dist/@types/assets.d.js

@@ -1,2 +0,0 @@
-
-//# sourceMappingURL=assets.d.js.map

package/dist/@types/assets.d.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/@types/assets.d.ts"],"names":[],"mappings":""}