@payloadcms/storage-r2 0.0.1-beta.0

package/src/ui/PriceRowLabel/index.tsx

@@ -0,0 +1,56 @@
+'use client'
+
+import { useRowLabel } from '@payloadcms/ui'
+import { useMemo } from 'react'
+
+import type { CurrenciesConfig } from '../../types.js'
+
+import './index.css'
+import { convertFromBaseValue } from '../PriceInput/utilities.js'
+
+type Props = {
+  currenciesConfig: CurrenciesConfig
+}
+
+export const PriceRowLabel: React.FC<Props> = (props) => {
+  const { currenciesConfig } = props
+  const { defaultCurrency, supportedCurrencies } = currenciesConfig
+
+  const { data } = useRowLabel<{ amount: number; currency: string }>()
+
+  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 (
+    <div className="priceRowLabel">
+      <div className="priceLabel">Price:</div>
+
+      <div className="priceValue">
+        <span>
+          {currency?.symbol}
+          {amount}
+        </span>
+        <span>({data.currency})</span>
+      </div>
+    </div>
+  )
+}

package/src/ui/VariantOptionsSelector/ErrorBox.tsx

@@ -0,0 +1,27 @@
+'use client'
+
+import { FieldError, useField, useTranslation } from '@payloadcms/ui'
+
+type Props = {
+  children?: React.ReactNode
+  existingOptions: string[]
+  path: string
+}
+
+export const ErrorBox: React.FC<Props> = (props) => {
+  const { children, path } = props
+  const { errorMessage, showError } = useField<(number | string)[]>({ path })
+
+  return (
+    <div className="variantOptionsSelectorError">
+      <FieldError message={errorMessage} path={path} showError={showError} />
+      <div
+        className={['variantOptionsSelectorErrorWrapper', showError && 'showError']
+          .filter(Boolean)
+          .join(' ')}
+      >
+        {children}
+      </div>
+    </div>
+  )
+}

package/src/ui/VariantOptionsSelector/OptionsSelect.tsx

@@ -0,0 +1,78 @@
+'use client'
+
+import type { SelectFieldClient } from 'payload'
+
+import { FieldLabel, ReactSelect, useField, useForm } from '@payloadcms/ui'
+import { useCallback, useId, useMemo } from 'react'
+
+type Props = {
+  field: Omit<SelectFieldClient, 'type'>
+  label: string
+  options: { label: string; value: number | string }[]
+  path: string
+}
+
+export const OptionsSelect: React.FC<Props> = (props) => {
+  const {
+    field: { required },
+    label,
+    options: optionsFromProps,
+    path,
+  } = props
+
+  const { setValue, value } = useField<(number | string)[]>({ 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 (
+    <div className="variantOptionsSelectorItem">
+      <FieldLabel htmlFor={id} label={label} required={required} />
+
+      <ReactSelect
+        inputId={id}
+        onChange={handleChange}
+        options={optionsFromProps}
+        value={selectedValue}
+      />
+    </div>
+  )
+}

package/src/ui/VariantOptionsSelector/index.css

@@ -0,0 +1,37 @@
+@layer payload-default {
+  .variantOptionsSelector {
+    margin-top: calc(var(--spacing-field) * 2);
+    margin-bottom: calc(var(--spacing-field) * 2);
+  }
+
+  .variantOptionsSelectorHeading {
+    font-size: calc(var(--base) * 1);
+    font-weight: 500;
+    color: var(--color-text);
+    margin-bottom: calc(var(--base) * 0.5);
+  }
+
+  .variantOptionsSelectorItem {
+    display: flex;
+    flex-direction: column;
+    gap: 0;
+  }
+
+  .variantOptionsSelectorList {
+    display: flex;
+    flex-direction: column;
+    gap: calc(var(--base) * 0.75);
+  }
+
+  .variantOptionsSelectorError {
+    position: relative;
+  }
+
+  .variantOptionsSelectorErrorWrapper {
+    &.showError {
+      border-radius: 2px;
+      outline: 1px solid var(--theme-error-400);
+      outline-offset: 2px;
+    }
+  }
+}

package/src/ui/VariantOptionsSelector/index.tsx

@@ -0,0 +1,83 @@
+import type { SelectFieldServerProps } from 'payload'
+
+import { FieldLabel } from '@payloadcms/ui'
+
+import { ErrorBox } from './ErrorBox.js'
+import './index.css'
+import { OptionsSelect } from './OptionsSelect.js'
+type Props = {} & SelectFieldServerProps
+
+export const VariantOptionsSelector: React.FC<Props> = async (props) => {
+  const { clientField, data, path, req, user } = props
+  const { label } = clientField
+
+  const product = await req.payload.findByID({
+    id: data.product,
+    collection: 'products',
+    depth: 0,
+    select: {
+      variants: true,
+      variantTypes: true,
+    },
+    user,
+  })
+
+  // @ts-expect-error - TODO: Fix types
+  const existingVariantOptions = product.variants?.docs?.map((variant) => variant.options) ?? []
+
+  const variantTypeIDs = product.variantTypes
+
+  const variantTypes = []
+
+  // Need to get the variant types separately so that the options are populated
+  // @ts-expect-error - TODO: Fix types
+  if (variantTypeIDs?.length && variantTypeIDs.length > 0) {
+    // @ts-expect-error - TODO: Fix types
+    for (const variantTypeID of variantTypeIDs) {
+      const variantType = await req.payload.findByID({
+        id: variantTypeID,
+        collection: 'variantTypes',
+        depth: 1,
+        joins: {
+          options: {
+            sort: 'value',
+          },
+        },
+      })
+
+      if (variantType) {
+        variantTypes.push(variantType)
+      }
+    }
+  }
+
+  return (
+    <div className="variantOptionsSelector">
+      <div className="variantOptionsSelectorHeading">
+        <FieldLabel as="span" label={label} />
+      </div>
+
+      <ErrorBox existingOptions={existingVariantOptions} path={path}>
+        <div className="variantOptionsSelectorList">
+          {variantTypes.map((type) => {
+            // @ts-expect-error - TODO: Fix types
+            const options = type.options.docs.map((option) => ({
+              label: option.label,
+              value: option.id,
+            }))
+
+            return (
+              <OptionsSelect
+                field={clientField}
+                key={type.name}
+                label={type.label || type.name}
+                options={options}
+                path={path}
+              />
+            )
+          })}
+        </div>
+      </ErrorBox>
+    </div>
+  )
+}

package/src/utilities/defaultProductsValidation.ts

@@ -0,0 +1,42 @@
+import type { ProductsValidation } from '../types.js'
+
+import { MissingPrice, OutOfStock } from './errorCodes.js'
+
+export const defaultProductsValidation: ProductsValidation = ({
+  currenciesConfig,
+  currency,
+  product,
+  quantity = 1,
+  variant,
+}) => {
+  if (!currency) {
+    throw new Error('Currency must be provided for product validation.')
+  }
+
+  const priceField = `priceIn${currency.toUpperCase()}`
+
+  if (variant) {
+    if (!variant[priceField]) {
+      throw new Error(`Variant with ID ${variant.id} does not have a price in ${currency}.`)
+    }
+
+    if (variant.inventory === 0 || (variant.inventory && variant.inventory < quantity)) {
+      throw new Error(
+        `Variant with ID ${variant.id} is out of stock or does not have enough inventory.`,
+      )
+    }
+  } else if (product) {
+    // Validate the product's details only if the variant is not provided as it can have its own inventory and price
+    if (!product[priceField]) {
+      throw new Error(`Product does not have a price in.`, {
+        cause: { code: MissingPrice, codes: [product.id, currency] },
+      })
+    }
+
+    if (product.inventory === 0 || (product.inventory && product.inventory < quantity)) {
+      throw new Error(`Product is out of stock or does not have enough inventory.`, {
+        cause: { code: OutOfStock, codes: [product.id] },
+      })
+    }
+  }
+}

package/src/utilities/errorCodes.ts

@@ -0,0 +1,14 @@
+export const AddressNotFound = 'AddressNotFound'
+export const AddressValidationError = 'AddressValidationError'
+export const InvalidCurrency = 'InvalidCurrency'
+export const InvalidPaymentMethod = 'InvalidPaymentMethod'
+export const InvalidQuantity = 'InvalidQuantity'
+export const MissingCurrency = 'MissingCurrency'
+export const MissingInventory = 'MissingInventory'
+export const MissingPrice = 'MissingPrice'
+export const MissingProduct = 'MissingProduct'
+export const MissingVariant = 'MissingVariant'
+export const NotEnoughInventory = 'NotEnoughInventory'
+export const OutOfStock = 'OutOfStock'
+export const PaymentFailed = 'PaymentFailed'
+export const UserNotAuthenticated = 'UserNotAuthenticated'

package/src/utilities/getCollectionSlugMap.ts

@@ -0,0 +1,84 @@
+import type { CollectionSlugMap, SanitizedEcommercePluginConfig } from '../types.js'
+
+type Props = {
+  sanitizedPluginConfig: SanitizedEcommercePluginConfig
+}
+
+/**
+ * Generates a map of collection slugs based on the sanitized plugin configuration.
+ * Takes into consideration any collection overrides provided in the plugin.
+ */
+export const getCollectionSlugMap = ({ sanitizedPluginConfig }: Props): CollectionSlugMap => {
+  const defaultSlugMap: CollectionSlugMap = {
+    addresses: 'addresses',
+    carts: 'carts',
+    customers: 'users',
+    orders: 'orders',
+    products: 'products',
+    transactions: 'transactions',
+    variantOptions: 'variantOptions',
+    variants: 'variants',
+    variantTypes: 'variantTypes',
+  }
+
+  const collectionSlugsMap: CollectionSlugMap = {
+    ...defaultSlugMap,
+  }
+
+  if (typeof sanitizedPluginConfig.customers === 'object' && sanitizedPluginConfig.customers.slug) {
+    collectionSlugsMap.customers = sanitizedPluginConfig.customers.slug
+
+    if (
+      typeof sanitizedPluginConfig.addresses === 'object' &&
+      sanitizedPluginConfig.addresses.collectionOverride?.slug
+    ) {
+      collectionSlugsMap.addresses = sanitizedPluginConfig.addresses.collectionOverride.slug
+    }
+  }
+
+  if (
+    typeof sanitizedPluginConfig.orders === 'object' &&
+    sanitizedPluginConfig.orders.ordersCollection?.slug
+  ) {
+    collectionSlugsMap.orders = sanitizedPluginConfig.orders.ordersCollection.slug
+  }
+
+  if (typeof sanitizedPluginConfig.products === 'object') {
+    if (sanitizedPluginConfig.products.productsCollection?.slug) {
+      collectionSlugsMap.products = sanitizedPluginConfig.products.productsCollection.slug
+    }
+
+    if (typeof sanitizedPluginConfig.products.variants === 'object') {
+      if (sanitizedPluginConfig.products.variants.variantsCollection?.slug) {
+        collectionSlugsMap.variants =
+          sanitizedPluginConfig.products.variants.variantsCollection.slug
+      }
+
+      if (sanitizedPluginConfig.products.variants.variantOptionsCollection?.slug) {
+        collectionSlugsMap.variantOptions =
+          sanitizedPluginConfig.products.variants.variantOptionsCollection.slug
+      }
+
+      if (sanitizedPluginConfig.products.variants.variantTypesCollection?.slug) {
+        collectionSlugsMap.variantTypes =
+          sanitizedPluginConfig.products.variants.variantTypesCollection.slug
+      }
+    }
+  }
+
+  if (
+    typeof sanitizedPluginConfig.transactions === 'object' &&
+    sanitizedPluginConfig.transactions.transactionsCollection?.slug
+  ) {
+    collectionSlugsMap.transactions = sanitizedPluginConfig.transactions.transactionsCollection.slug
+  }
+
+  if (
+    typeof sanitizedPluginConfig.carts === 'object' &&
+    sanitizedPluginConfig.carts.cartsCollection?.slug
+  ) {
+    collectionSlugsMap.carts = sanitizedPluginConfig.carts.cartsCollection.slug
+  }
+
+  return collectionSlugsMap
+}

package/src/utilities/sanitizePluginConfig.ts

@@ -0,0 +1,80 @@
+import type { EcommercePluginConfig, SanitizedEcommercePluginConfig } from '../types.js'
+
+import { defaultAddressFields } from '../addresses/defaultAddressFields.js'
+import { USD } from '../currencies/index.js'
+
+type Props = {
+  pluginConfig: EcommercePluginConfig
+}
+
+export const sanitizePluginConfig = ({ pluginConfig }: Props): SanitizedEcommercePluginConfig => {
+  const config = {
+    ...pluginConfig,
+  } as Partial<SanitizedEcommercePluginConfig>
+
+  if (typeof config.customers === 'undefined') {
+    config.customers = {
+      slug: 'users',
+    }
+  }
+
+  if (
+    typeof config.addresses === 'undefined' ||
+    (typeof config.addresses === 'boolean' && config.addresses === true)
+  ) {
+    config.addresses = {
+      addressFields: defaultAddressFields(),
+    }
+  } else {
+    const addressFields =
+      (typeof pluginConfig.addresses === 'object' &&
+        typeof pluginConfig.addresses.addressFields === 'function' &&
+        pluginConfig.addresses.addressFields({
+          defaultFields: defaultAddressFields(),
+        })) ||
+      defaultAddressFields()
+
+    config.addresses = {
+      ...config.addresses,
+      addressFields,
+    }
+  }
+
+  if (!config.currencies) {
+    config.currencies = {
+      defaultCurrency: 'USD',
+      supportedCurrencies: [USD],
+    }
+  }
+
+  if (
+    typeof config.inventory === 'undefined' ||
+    (typeof config.inventory === 'boolean' && config.inventory === true)
+  ) {
+    config.inventory = {
+      fieldName: 'inventory',
+    }
+  }
+
+  if (typeof config.carts === 'undefined') {
+    config.carts = true
+  }
+
+  if (typeof config.orders === 'undefined') {
+    config.orders = true
+  }
+
+  if (typeof config.transactions === 'undefined') {
+    config.transactions = true
+  }
+
+  if (typeof config.payments === 'undefined') {
+    config.payments = {
+      paymentMethods: [],
+    }
+  } else if (!config.payments.paymentMethods) {
+    config.payments.paymentMethods = []
+  }
+
+  return config as SanitizedEcommercePluginConfig
+}

package/src/variants/variantOptionsCollection.ts

@@ -0,0 +1,59 @@
+import type { CollectionConfig, Field } from 'payload'
+
+import type { FieldsOverride } from '../types.js'
+
+type Props = {
+  overrides?: { fields?: FieldsOverride } & Partial<Omit<CollectionConfig, 'fields'>>
+  /**
+   * Slug of the variant types collection, defaults to 'variantTypes'.
+   */
+  variantTypesSlug?: string
+}
+
+export const variantOptionsCollection: (props?: Props) => CollectionConfig = (props) => {
+  const { overrides, variantTypesSlug = 'variantTypes' } = props || {}
+  const fieldsOverride = overrides?.fields
+
+  const variantOptionsDefaultFields: Field[] = [
+    {
+      name: 'variantType',
+      type: 'relationship',
+      admin: {
+        readOnly: true,
+      },
+      relationTo: variantTypesSlug,
+      required: true,
+    },
+    {
+      name: 'label',
+      type: 'text',
+      required: true,
+    },
+    {
+      name: 'value',
+      type: 'text',
+      admin: {
+        description: 'should be defaulted or dynamic based on label',
+      },
+      required: true,
+    },
+  ]
+
+  const fields =
+    fieldsOverride && typeof fieldsOverride === 'function'
+      ? fieldsOverride({ defaultFields: variantOptionsDefaultFields })
+      : variantOptionsDefaultFields
+
+  const baseConfig: CollectionConfig = {
+    slug: 'variantOptions',
+    ...overrides,
+    admin: {
+      group: false,
+      useAsTitle: 'label',
+      ...overrides?.admin,
+    },
+    fields,
+  }
+
+  return { ...baseConfig }
+}

package/src/variants/variantTypesCollection.ts

@@ -0,0 +1,55 @@
+import type { CollectionConfig, Field } from 'payload'
+
+import type { FieldsOverride } from '../types.js'
+
+type Props = {
+  overrides?: { fields?: FieldsOverride } & Partial<Omit<CollectionConfig, 'fields'>>
+  /**
+   * Slug of the variant options collection, defaults to 'variantOptions'.
+   */
+  variantOptionsSlug?: string
+}
+
+export const variantTypesCollection: (props?: Props) => CollectionConfig = (props) => {
+  const { overrides, variantOptionsSlug = 'variantOptions' } = props || {}
+  const fieldsOverride = overrides?.fields
+
+  const variantTypesDefaultFields: Field[] = [
+    {
+      name: 'label',
+      type: 'text',
+      required: true,
+    },
+    {
+      name: 'name',
+      type: 'text',
+      required: true,
+    },
+    {
+      name: 'options',
+      type: 'join',
+      collection: variantOptionsSlug,
+      maxDepth: 2,
+      on: 'variantType',
+      orderable: true,
+    },
+  ]
+
+  const fields =
+    fieldsOverride && typeof fieldsOverride === 'function'
+      ? fieldsOverride({ defaultFields: variantTypesDefaultFields })
+      : variantTypesDefaultFields
+
+  const baseConfig: CollectionConfig = {
+    slug: 'variantTypes',
+    ...overrides,
+    admin: {
+      group: false,
+      useAsTitle: 'label',
+      ...overrides?.admin,
+    },
+    fields,
+  }
+
+  return { ...baseConfig }
+}

package/src/variants/variantsCollection/hooks/beforeChange.ts

@@ -0,0 +1,47 @@
+import type { CollectionBeforeChangeHook } from 'payload'
+
+type Props = {
+  productsSlug: string
+  variantOptionsSlug: string
+}
+
+export const variantsCollectionBeforeChange: (args: Props) => CollectionBeforeChangeHook =
+  ({ productsSlug, variantOptionsSlug }) =>
+  async ({ data, req }) => {
+    if (data?.options?.length && data.options.length > 0) {
+      const titleArray = []
+      const productID = data.product
+      const product = await req.payload.findByID({
+        id: productID,
+        collection: productsSlug,
+        depth: 0,
+        select: {
+          title: true,
+          variantTypes: true,
+        },
+      })
+
+      titleArray.push(product.title)
+
+      for (const option of data.options) {
+        const variantOption = await req.payload.findByID({
+          id: option,
+          collection: variantOptionsSlug,
+          depth: 0,
+          select: {
+            label: true,
+          },
+        })
+
+        if (!variantOption) {
+          continue
+        }
+
+        titleArray.push(variantOption.label)
+      }
+
+      data.title = titleArray.join(' — ')
+    }
+
+    return data
+  }