@sgftech/medusa-plugin-product-variant-licenses 0.0.1

package/.cache/admin/src/domain/pricing/new/new.tsx

@@ -0,0 +1,769 @@
+import { zodResolver } from "@hookform/resolvers/zod"
+import {
+  Button,
+  FocusModal,
+  ProgressTabs,
+  Text,
+  usePrompt,
+  type ProgressStatus,
+} from "@medusajs/ui"
+import * as React from "react"
+import { useForm, useWatch } from "react-hook-form"
+import * as z from "zod"
+
+import { Product } from "@medusajs/medusa"
+import { useAdminCreatePriceList } from "medusa-react"
+import { Form } from "../../../components/helpers/form"
+import useNotification from "../../../hooks/use-notification"
+import { useFeatureFlag } from "../../../providers/feature-flag-provider"
+import { getErrorMessage } from "../../../utils/error-messages"
+import { nestedForm } from "../../../utils/nested-form"
+
+import {
+  PriceListDetailsForm,
+  priceListDetailsSchema,
+  PriceListStatus,
+  PriceListType,
+} from "../forms/price-list-details-form"
+
+import {
+  getDbSafeAmount,
+  PriceListPricesForm,
+  priceListPricesSchema,
+  usePricesFormData,
+  type PricePayload,
+} from "../forms/price-list-prices-form"
+
+import {
+  PriceListProductPricesForm,
+  priceListProductPricesSchema,
+  type PriceListProductPricesSchema,
+} from "../forms/price-list-product-prices-form"
+
+import { ExclamationCircle, Spinner } from "@medusajs/icons"
+import { useTranslation } from "react-i18next"
+import {
+  PriceListProductsForm,
+  priceListProductsSchema,
+} from "../forms/price-list-products-form"
+
+enum Tab {
+  DETAILS = "details",
+  PRODUCTS = "products",
+  PRICES = "prices",
+  EDIT = "edit",
+}
+
+const priceListNewSchema = z.object({
+  details: priceListDetailsSchema,
+  products: priceListProductsSchema,
+  prices: priceListPricesSchema,
+})
+
+type PriceListNewSchema = z.infer<typeof priceListNewSchema>
+
+type StepStatus = {
+  [key in Tab]: ProgressStatus
+}
+
+const PriceListNew = () => {
+  const [open, setOpen] = React.useState(false)
+  const [product, setProduct] = React.useState<Product | null>(null)
+
+  const [selectedIds, setSelectedIds] = React.useState<string[]>([])
+
+  const [tab, setTab] = React.useState<Tab>(Tab.DETAILS)
+  const [status, setStatus] = React.useState<StepStatus>({
+    [Tab.DETAILS]: "not-started",
+    [Tab.PRODUCTS]: "not-started",
+    [Tab.PRICES]: "not-started",
+    [Tab.EDIT]: "not-started",
+  })
+
+  const { t } = useTranslation()
+
+  const promptTitle = t("price-list-new-form-prompt-title", "Are you sure?")
+  const promptExitDescription = t(
+    "price-list-new-form-prompt-exit-description",
+    "You have unsaved changes, are you sure you want to exit?"
+  )
+  const promptBackDescription = t(
+    "price-list-new-form-prompt-back-description",
+    "You have unsaved changes, are you sure you want to go back?"
+  )
+
+  const prompt = usePrompt()
+  const notification = useNotification()
+
+  const { isFeatureEnabled } = useFeatureFlag()
+  const isTaxInclPricesEnabled = isFeatureEnabled("tax_inclusive_pricing")
+
+  const form = useForm<PriceListNewSchema>({
+    resolver: zodResolver(priceListNewSchema),
+    defaultValues: {
+      details: {
+        type: {
+          value: "sale",
+        },
+        general: {
+          name: "",
+          description: "",
+          tax_inclusive: false,
+        },
+        customer_groups: {
+          ids: [],
+        },
+        dates: {
+          ends_at: null,
+          starts_at: null,
+        },
+      },
+      products: {
+        ids: [],
+      },
+      prices: {
+        products: {},
+      },
+    },
+  })
+
+  const {
+    trigger,
+    reset,
+    getValues,
+    setValue,
+    setError,
+    handleSubmit,
+    formState: { isDirty },
+  } = form
+
+  const taxToggleState = useWatch({
+    control: form.control,
+    name: "details.general.tax_inclusive",
+    defaultValue: false,
+  })
+
+  const {
+    control: editControl,
+    handleSubmit: handleEditSubmit,
+    reset: resetEdit,
+    formState: { isDirty: isEditDirty },
+    setValue: setEditValue,
+    getValues: getEditValues,
+  } = useForm<PriceListProductPricesSchema>({
+    resolver: zodResolver(priceListProductPricesSchema),
+  })
+
+  const { mutateAsync, isLoading: isSubmitting } = useAdminCreatePriceList()
+
+  const { isLoading, isError, isNotFound, regions, currencies } =
+    usePricesFormData({
+      productIds: selectedIds,
+      enable: {
+        products: false,
+      },
+    })
+
+  const onCloseModal = React.useCallback(() => {
+    setOpen(false)
+    setTab(Tab.DETAILS)
+    setSelectedIds([])
+    setStatus({
+      [Tab.DETAILS]: "not-started",
+      [Tab.PRODUCTS]: "not-started",
+      [Tab.PRICES]: "not-started",
+      [Tab.EDIT]: "not-started",
+    })
+    resetEdit()
+    reset()
+  }, [reset, resetEdit])
+
+  const onModalStateChange = React.useCallback(
+    async (open: boolean) => {
+      if (!open && (isDirty || isEditDirty)) {
+        const response = await prompt({
+          title: promptTitle,
+          description: promptExitDescription,
+        })
+
+        if (!response) {
+          setOpen(true)
+          return
+        }
+
+        onCloseModal()
+      }
+
+      setOpen(open)
+    },
+    [
+      isDirty,
+      isEditDirty,
+      promptTitle,
+      promptExitDescription,
+      prompt,
+      onCloseModal,
+    ]
+  )
+
+  /**
+   * On hitting "Save Prices" in the edit tab, we need
+   * to update the corresponding product in the form.
+   */
+  const onSavePriceEdit = handleEditSubmit((data) => {
+    if (!product) {
+      return
+    }
+
+    setValue(`prices.products.${product.id}`, data, {
+      shouldDirty: true,
+      shouldTouch: true,
+    })
+
+    setProduct(null)
+    resetEdit(undefined, {
+      keepDirty: false,
+      keepTouched: false,
+    })
+    setTab(Tab.PRICES)
+  })
+
+  const onSubmit = React.useCallback(
+    async (status: PriceListStatus) => {
+      await handleSubmit(async (data) => {
+        const prices: PricePayload[] = []
+
+        const productPriceKeys = Object.keys(data.prices.products)
+        const productIds = data.products.ids
+
+        if (!productPriceKeys.length || !data.prices.products) {
+          setError("prices.products", {
+            type: "manual",
+            message: t(
+              "price-list-new-form-no-prices-error",
+              "Please set prices for at least one product."
+            ) as string,
+          })
+
+          return
+        }
+
+        const missingProducts = productIds.filter(
+          (id) => !productPriceKeys.includes(id)
+        )
+
+        if (missingProducts.length > 0) {
+          const res = await prompt({
+            title: t(
+              "price-list-new-form-missing-prices-title",
+              "Incomplete price list"
+            ),
+            description: t(
+              "price-list-new-products-modal-missing-prices-description",
+              "Prices have not been assigned to all of your chosen products. Would you like to proceed?"
+            ),
+          })
+
+          if (!res) {
+            return
+          }
+        }
+
+        /**
+         * Loop through all the products and variants
+         * and create a payload for each price.
+         *
+         * If a price does not have an amount, we
+         * skip it.
+         */
+        for (const productId of Object.keys(data.prices.products)) {
+          const product = data.prices.products[productId]
+
+          for (const variantId of Object.keys(product.variants)) {
+            const variant = product.variants[variantId]
+
+            if (variant.currency) {
+              for (const currencyCode of Object.keys(variant.currency)) {
+                const { amount } = variant.currency[currencyCode]
+
+                if (!amount) {
+                  continue
+                }
+
+                const dbSafeAmount = getDbSafeAmount(
+                  currencyCode,
+                  parseFloat(amount)
+                )
+
+                if (!dbSafeAmount) {
+                  continue
+                }
+
+                const payload: PricePayload = {
+                  amount: dbSafeAmount,
+                  variant_id: variantId,
+                  currency_code: currencyCode,
+                }
+
+                prices.push(payload)
+              }
+            }
+
+            if (variant.region) {
+              for (const regionId of Object.keys(variant.region)) {
+                const { amount } = variant.region[regionId]
+
+                if (!amount) {
+                  continue
+                }
+
+                const dbSafeAmount = getDbSafeAmount(
+                  regions.find((r) => r.id === regionId)!.currency_code,
+                  parseFloat(amount)
+                )
+
+                if (!dbSafeAmount) {
+                  continue
+                }
+
+                const payload: PricePayload = {
+                  amount: dbSafeAmount,
+                  variant_id: variantId,
+                  region_id: regionId,
+                }
+
+                prices.push(payload)
+              }
+            }
+          }
+        }
+
+        await mutateAsync(
+          {
+            name: data.details.general.name,
+            description: data.details.general.description,
+            type: data.details.type.value as PriceListType,
+            includes_tax: isTaxInclPricesEnabled
+              ? data.details.general.tax_inclusive
+              : undefined,
+            customer_groups: data.details.customer_groups.ids.map((id) => ({
+              id,
+            })),
+            status: status,
+            ends_at: data.details.dates.ends_at || undefined,
+            starts_at: data.details.dates.starts_at || undefined,
+            prices,
+          },
+          {
+            onSuccess: () => {
+              notification(
+                t(
+                  "price-list-new-form-notification-success-title",
+                  "Price list created"
+                ),
+                t(
+                  "price-list-new-form-notification-success-message",
+                  `Successfully created price list`
+                ),
+                "success"
+              )
+
+              onCloseModal()
+            },
+            onError: (err) => {
+              notification(
+                t(
+                  "price-list-new-form-notification-error-title",
+                  "An error occurred"
+                ),
+                getErrorMessage(err),
+                "error"
+              )
+            },
+          }
+        )
+      })()
+    },
+    [
+      handleSubmit,
+      mutateAsync,
+      notification,
+      onCloseModal,
+      setError,
+      prompt,
+      t,
+      isTaxInclPricesEnabled,
+      regions,
+    ]
+  )
+
+  const onSetProduct = React.useCallback(
+    (product: Product | null) => {
+      if (!product) {
+        setProduct(null)
+        setTab(Tab.PRICES)
+        return
+      }
+
+      const defaultValues = getValues(`prices.products.${product.id}`)
+      resetEdit(defaultValues)
+      setProduct(product)
+      setTab(Tab.EDIT)
+    },
+    [resetEdit, getValues]
+  )
+
+  /**
+   * When exiting the "Edit" tab, we need to check
+   * if the user has unsaved changes. If they do,
+   * we need to prompt them whether they want to
+   * continue or not.
+   */
+  const onExitProductPrices = React.useCallback(
+    async (tab = Tab.PRICES) => {
+      if (isEditDirty) {
+        const res = await prompt({
+          title: promptTitle,
+          description: promptBackDescription,
+        })
+
+        if (!res) {
+          return
+        }
+      }
+
+      setTab(tab)
+      setProduct(null)
+      resetEdit(undefined, {
+        keepDirty: false,
+        keepTouched: false,
+      })
+    },
+    [prompt, resetEdit, isEditDirty, promptTitle, promptBackDescription]
+  )
+
+  /**
+   * If the current tab is edit, we need to
+   * check if the user wants to exit the edit
+   * tab or if they want to save the changes
+   * before continuing.
+   */
+  const onTabChange = React.useCallback(
+    async (value: Tab) => {
+      if (tab === Tab.EDIT) {
+        await onExitProductPrices(value)
+        return
+      }
+
+      setTab(value)
+    },
+    [tab, onExitProductPrices]
+  )
+
+  /**
+   * Callback for ensuring that we don't submit prices
+   * for products that the user has unselected.
+   */
+  const onUpdateSelectedProductIds = React.useCallback(
+    (ids: string[]) => {
+      setSelectedIds((prev) => {
+        /**
+         * If the previous ids are the same as the new ids,
+         * we need to unregister the old ids that are no
+         * longer selected.
+         */
+        for (const id of prev) {
+          if (!ids.includes(id)) {
+            setValue(`prices.products.${id}`, { variants: {} })
+          }
+        }
+
+        return ids
+      })
+    },
+    [setValue]
+  )
+
+  /**
+   * Callback for validating the details form.
+   */
+  const onValidateDetails = React.useCallback(async () => {
+    const result = await trigger("details")
+
+    if (!result) {
+      setStatus((prev) => ({
+        ...prev,
+        [Tab.DETAILS]: "in-progress",
+      }))
+
+      return
+    }
+
+    setTab(Tab.PRODUCTS)
+    setStatus((prev) => ({
+      ...prev,
+      [Tab.DETAILS]: "completed",
+    }))
+  }, [trigger])
+
+  /**
+   * Callback for validating the products form.
+   */
+  const onValidateProducts = React.useCallback(async () => {
+    const result = await trigger("products")
+
+    if (!result) {
+      setStatus((prev) => ({
+        ...prev,
+        [Tab.PRODUCTS]: "in-progress",
+      }))
+
+      return
+    }
+
+    const ids = getValues("products.ids")
+
+    onUpdateSelectedProductIds(ids)
+
+    setTab(Tab.PRICES)
+    setStatus((prev) => ({
+      ...prev,
+      [Tab.PRODUCTS]: "completed",
+    }))
+  }, [trigger, getValues, onUpdateSelectedProductIds])
+
+  /**
+   * Depending on the current tab, the next button
+   * will have different functionality.
+   */
+  const onNext = React.useCallback(async () => {
+    switch (tab) {
+      case Tab.DETAILS:
+        await onValidateDetails()
+        break
+      case Tab.PRODUCTS:
+        await onValidateProducts()
+        break
+      case Tab.PRICES:
+        await onSubmit(PriceListStatus.ACTIVE)
+        break
+      case Tab.EDIT:
+        await onSavePriceEdit()
+        break
+    }
+  }, [onValidateDetails, onValidateProducts, onSubmit, onSavePriceEdit, tab])
+
+  const nextButtonText = React.useMemo(() => {
+    switch (tab) {
+      case Tab.PRICES:
+        return t(
+          "price-list-new-form-next-button-save-and-publish",
+          "Save and Publish"
+        )
+      case Tab.EDIT:
+        return t("price-list-new-form-next-button-save", "Save Prices")
+      default:
+        return t("price-list-new-form-next-button-continue", "Continue")
+    }
+  }, [tab, t])
+
+  /**
+   * Depending on the current tab, the back button
+   * will have different functionality.
+   */
+  const onBack = React.useCallback(async () => {
+    switch (tab) {
+      case Tab.DETAILS:
+        await onModalStateChange(false)
+        break
+      case Tab.PRODUCTS:
+        setTab(Tab.DETAILS)
+        break
+      case Tab.PRICES:
+        setTab(Tab.PRODUCTS)
+        break
+      case Tab.EDIT:
+        await onExitProductPrices()
+        break
+    }
+  }, [onModalStateChange, onExitProductPrices, tab])
+
+  const backButtonText = React.useMemo(() => {
+    switch (tab) {
+      case Tab.DETAILS:
+        return t("price-list-new-form-back-button-cancel", "Cancel")
+      default:
+        return t("price-list-new-form-back-button-back", "Back")
+    }
+  }, [tab, t])
+
+  return (
+    <FocusModal open={open} onOpenChange={onModalStateChange}>
+      <FocusModal.Trigger asChild>
+        <Button variant="secondary">Create New</Button>
+      </FocusModal.Trigger>
+      <ProgressTabs
+        value={tab}
+        onValueChange={(tab) => onTabChange(tab as Tab)}
+      >
+        <FocusModal.Content>
+          <FocusModal.Header className="flex w-full items-center justify-start">
+            <ProgressTabs.List className="border-ui-border-base -my-2 ml-2 min-w-0 flex-1 border-l">
+              <ProgressTabs.Trigger
+                value={Tab.DETAILS}
+                className="w-full min-w-0 max-w-[200px]"
+                status={status[Tab.DETAILS]}
+              >
+                <span className="w-full overflow-hidden text-ellipsis whitespace-nowrap">
+                  {t("price-list-new-form-details-tab", "Create Price List")}
+                </span>
+              </ProgressTabs.Trigger>
+              <ProgressTabs.Trigger
+                value={Tab.PRODUCTS}
+                disabled={status[Tab.DETAILS] !== "completed"}
+                className="w-full min-w-0  max-w-[200px]"
+                status={status[Tab.PRODUCTS]}
+              >
+                <span className="w-full overflow-hidden text-ellipsis whitespace-nowrap">
+                  {t("price-list-new-form-products-tab", "Choose Products")}
+                </span>
+              </ProgressTabs.Trigger>
+              <ProgressTabs.Trigger
+                value={Tab.PRICES}
+                disabled={
+                  status[Tab.DETAILS] !== "completed" ||
+                  status[Tab.PRODUCTS] !== "completed"
+                }
+                className="w-full min-w-0 max-w-[200px]"
+                status={status[Tab.PRICES]}
+              >
+                <span className="w-full overflow-hidden text-ellipsis whitespace-nowrap">
+                  {t("price-list-new-form-prices-tab", "Edit Prices")}
+                </span>
+              </ProgressTabs.Trigger>
+              {product && (
+                <ProgressTabs.Trigger
+                  value={Tab.EDIT}
+                  disabled={isLoading || isError}
+                  className="w-full min-w-0 max-w-[200px]"
+                  status={isEditDirty ? "in-progress" : "not-started"}
+                >
+                  <span className="w-full overflow-hidden text-ellipsis whitespace-nowrap">
+                    {product?.title}
+                  </span>
+                </ProgressTabs.Trigger>
+              )}
+            </ProgressTabs.List>
+            <div className="ml-auto flex items-center justify-end gap-x-2">
+              <Button
+                variant="secondary"
+                onClick={onBack}
+                disabled={isSubmitting}
+              >
+                {backButtonText}
+              </Button>
+              {tab === Tab.PRICES && !isSubmitting && (
+                <Button onClick={() => onSubmit(PriceListStatus.DRAFT)}>
+                  {t("price-list-new-form-save-as-draft", "Save as Draft")}
+                </Button>
+              )}
+              <Button type="button" onClick={onNext} isLoading={isSubmitting}>
+                {nextButtonText}
+              </Button>
+            </div>
+          </FocusModal.Header>
+          {open && (
+            <FocusModal.Body className="flex h-full w-full flex-col items-center overflow-y-auto">
+              <Form {...form}>
+                <ProgressTabs.Content
+                  value={Tab.DETAILS}
+                  className="h-full w-full max-w-[720px]"
+                >
+                  <div className="px-8 py-12">
+                    <PriceListDetailsForm
+                      form={nestedForm(form, "details")}
+                      layout="focus"
+                      enableTaxToggle={isTaxInclPricesEnabled}
+                    />
+                  </div>
+                </ProgressTabs.Content>
+                <ProgressTabs.Content
+                  value={Tab.PRODUCTS}
+                  className="h-full w-full"
+                >
+                  <PriceListProductsForm form={nestedForm(form, "products")} />
+                </ProgressTabs.Content>
+
+                <ProgressTabs.Content
+                  value={Tab.PRICES}
+                  className="h-full w-full"
+                >
+                  {isLoading ? (
+                    <div className="flex h-full w-full items-center justify-center">
+                      <Spinner className="text-ui-fg-subtle animate-spin" />
+                    </div>
+                  ) : isError || isNotFound ? (
+                    <div className="flex h-full w-full items-center justify-center">
+                      <div className="text-ui-fg-subtle flex items-center gap-x-2">
+                        <ExclamationCircle />
+                        <Text>
+                          {t(
+                            "price-list-new-form-error-loading-products",
+                            "An error occurred while preparing the form. Reload the page and try again. If the issue persists, try again later."
+                          )}
+                        </Text>
+                      </div>
+                    </div>
+                  ) : (
+                    <PriceListPricesForm
+                      setProduct={onSetProduct}
+                      form={nestedForm(form, "prices")}
+                      productIds={selectedIds}
+                    />
+                  )}
+                </ProgressTabs.Content>
+                {product && (
+                  <ProgressTabs.Content
+                    value={Tab.EDIT}
+                    className="h-full w-full"
+                  >
+                    {isLoading ? (
+                      <div className="flex h-full w-full items-center justify-center">
+                        <Spinner className="text-ui-fg-subtle animate-spin" />
+                      </div>
+                    ) : isError || isNotFound ? (
+                      <div className="flex h-full w-full items-center justify-center">
+                        <div className="text-ui-fg-subtle flex items-center gap-x-2">
+                          <ExclamationCircle />
+                          <Text>
+                            {t(
+                              "price-list-new-form-error-loading-products",
+                              "An error occurred while preparing the form. Reload the page and try again. If the issue persists, try again later."
+                            )}
+                          </Text>
+                        </div>
+                      </div>
+                    ) : (
+                      <PriceListProductPricesForm
+                        priceListTaxInclusive={taxToggleState}
+                        taxInclEnabled={isTaxInclPricesEnabled}
+                        product={product}
+                        currencies={currencies}
+                        regions={regions}
+                        control={editControl}
+                        getValues={getEditValues}
+                        setValue={setEditValue}
+                      />
+                    )}
+                  </ProgressTabs.Content>
+                )}
+              </Form>
+            </FocusModal.Body>
+          )}
+        </FocusModal.Content>
+      </ProgressTabs>
+    </FocusModal>
+  )
+}
+
+export { PriceListNew }