@medusajs/dashboard 0.0.1

package/src/v2-routes/promotions/common/edit-rules/components/edit-rules-form/edit-rules-form.tsx

@@ -0,0 +1,423 @@
+import { zodResolver } from "@hookform/resolvers/zod"
+import { XMarkMini } from "@medusajs/icons"
+import { PromotionDTO, PromotionRuleDTO } from "@medusajs/types"
+import { Badge, Button, Heading, Input, Select, Text } from "@medusajs/ui"
+import i18n from "i18next"
+import { Fragment, useState } from "react"
+import { useFieldArray, useForm } from "react-hook-form"
+import { useTranslation } from "react-i18next"
+import * as zod from "zod"
+import { Form } from "../../../../../../components/common/form"
+import { Combobox } from "../../../../../../components/inputs/combobox"
+import { RouteDrawer } from "../../../../../../components/route-modal"
+import { usePromotionRuleValues } from "../../../../../../hooks/api/promotions"
+import { RuleTypeValues } from "../../edit-rules"
+import { getDisguisedRules } from "./utils"
+
+type EditPromotionFormProps = {
+  promotion: PromotionDTO
+  rules: PromotionRuleDTO[]
+  ruleType: RuleTypeValues
+  attributes: any[]
+  operators: any[]
+  handleSubmit: any
+  isSubmitting: boolean
+}
+
+const EditRules = zod.object({
+  rules: zod.array(
+    zod.object({
+      id: zod.string().optional(),
+      attribute: zod
+        .string()
+        .min(1, { message: i18n.t("promotions.form.required") }),
+      operator: zod
+        .string()
+        .min(1, { message: i18n.t("promotions.form.required") }),
+      values: zod.union([
+        zod.number().min(1, { message: i18n.t("promotions.form.required") }),
+        zod.string().min(1, { message: i18n.t("promotions.form.required") }),
+        zod
+          .array(zod.string())
+          .min(1, { message: i18n.t("promotions.form.required") }),
+      ]),
+      required: zod.boolean().optional(),
+      field_type: zod.string().optional(),
+    })
+  ),
+})
+
+const RuleValueFormField = ({
+  identifier,
+  scope,
+  valuesFields,
+  valuesRef,
+  fieldRule,
+  attributes,
+  ruleType,
+}) => {
+  const attribute = attributes?.find(
+    (attr) => attr.value === fieldRule.attribute
+  )
+  const { values: options = [] } = usePromotionRuleValues(
+    ruleType,
+    attribute?.id,
+    {
+      enabled: !!attribute?.id && !attribute.disguised,
+    }
+  )
+
+  return (
+    <Form.Field
+      key={`${identifier}.${scope}.${valuesFields.name}-${fieldRule.attribute}`}
+      {...valuesFields}
+      render={({ field: { onChange, ref, ...field } }) => {
+        if (fieldRule.field_type === "number") {
+          return (
+            <Form.Item className="basis-1/2">
+              <Form.Control>
+                <Input
+                  {...field}
+                  type="number"
+                  onChange={onChange}
+                  className="bg-ui-bg-base"
+                  ref={valuesRef}
+                  min={1}
+                />
+              </Form.Control>
+              <Form.ErrorMessage />
+            </Form.Item>
+          )
+        } else if (fieldRule.field_type === "text") {
+          return (
+            <Form.Item className="basis-1/2">
+              <Form.Control>
+                <Input
+                  {...field}
+                  onChange={onChange}
+                  className="bg-ui-bg-base"
+                />
+              </Form.Control>
+              <Form.ErrorMessage />
+            </Form.Item>
+          )
+        } else {
+          return (
+            <Form.Item className="basis-1/2">
+              <Form.Control>
+                <Combobox
+                  {...field}
+                  placeholder="Select Values"
+                  options={options}
+                  onChange={onChange}
+                  className="bg-ui-bg-base"
+                />
+              </Form.Control>
+
+              <Form.ErrorMessage />
+            </Form.Item>
+          )
+        }
+      }}
+    />
+  )
+}
+
+export const RulesFormField = ({
+  form,
+  ruleType,
+  fields,
+  attributes,
+  operators,
+  removeRule,
+  updateRule,
+  appendRule,
+  setRulesToRemove,
+  rulesToRemove,
+  scope = "rules",
+}) => {
+  const { t } = useTranslation()
+
+  return (
+    <div className="flex flex-col">
+      <Heading level="h2" className="mb-2">
+        {t(`promotions.fields.conditions.${ruleType}.title`)}
+      </Heading>
+
+      <Text className="text-ui-fg-subtle txt-small mb-10">
+        {t(`promotions.fields.conditions.${ruleType}.description`)}
+      </Text>
+
+      {fields.map((fieldRule, index) => {
+        const identifier = fieldRule.id
+        const { ref: attributeRef, ...attributeFields } = form.register(
+          `${scope}.${index}.attribute`
+        )
+        const { ref: operatorRef, ...operatorFields } = form.register(
+          `${scope}.${index}.operator`
+        )
+        const { ref: valuesRef, ...valuesFields } = form.register(
+          `${scope}.${index}.values`
+        )
+
+        return (
+          <Fragment key={`${fieldRule.id}.${index}`}>
+            <div className="bg-ui-bg-subtle border-ui-border-base flex flex-row gap-2 rounded-xl border px-2 py-2">
+              <div className="grow">
+                <Form.Field
+                  key={`${identifier}.${scope}.${attributeFields.name}`}
+                  {...attributeFields}
+                  render={({ field: { onChange, ref, ...field } }) => {
+                    const existingAttributes =
+                      fields?.map((field) => field.attribute) || []
+                    const attributeOptions =
+                      attributes?.filter((attr) => {
+                        if (attr.value === fieldRule.attribute) {
+                          return true
+                        }
+
+                        return !existingAttributes.includes(attr.value)
+                      }) || []
+
+                    return (
+                      <Form.Item className="mb-2">
+                        {fieldRule.required && (
+                          <p className="text text-ui-fg-muted txt-small">
+                            {t("promotions.form.required")}
+                          </p>
+                        )}
+
+                        <Form.Control>
+                          <Select
+                            {...field}
+                            onValueChange={(e) => {
+                              updateRule(index, { ...fieldRule, values: [] })
+                              onChange(e)
+                            }}
+                            disabled={fieldRule.required}
+                          >
+                            <Select.Trigger
+                              ref={attributeRef}
+                              className="bg-ui-bg-base"
+                            >
+                              <Select.Value
+                                placeholder={t(
+                                  "promotions.form.selectAttribute"
+                                )}
+                              />
+                            </Select.Trigger>
+
+                            <Select.Content>
+                              {attributeOptions?.map((c, i) => (
+                                <Select.Item
+                                  key={`${identifier}-attribute-option-${i}`}
+                                  value={c.value}
+                                >
+                                  <span className="text-ui-fg-subtle">
+                                    {c.label}
+                                  </span>
+                                </Select.Item>
+                              ))}
+                            </Select.Content>
+                          </Select>
+                        </Form.Control>
+                        <Form.ErrorMessage />
+                      </Form.Item>
+                    )
+                  }}
+                />
+
+                <div className="flex gap-2">
+                  <Form.Field
+                    key={`${identifier}.${scope}.${operatorFields.name}`}
+                    {...operatorFields}
+                    render={({ field: { onChange, ref, ...field } }) => {
+                      return (
+                        <Form.Item className="basis-1/2">
+                          <Form.Control>
+                            <Select
+                              {...field}
+                              onValueChange={onChange}
+                              disabled={fieldRule.required}
+                            >
+                              <Select.Trigger
+                                ref={operatorRef}
+                                className="bg-ui-bg-base"
+                              >
+                                <Select.Value placeholder="Select Operator" />
+                              </Select.Trigger>
+
+                              <Select.Content>
+                                {operators?.map((c, i) => (
+                                  <Select.Item
+                                    key={`${identifier}-operator-option-${i}`}
+                                    value={c.value}
+                                  >
+                                    <span className="text-ui-fg-subtle">
+                                      {c.label}
+                                    </span>
+                                  </Select.Item>
+                                ))}
+                              </Select.Content>
+                            </Select>
+                          </Form.Control>
+                          <Form.ErrorMessage />
+                        </Form.Item>
+                      )
+                    }}
+                  />
+
+                  <RuleValueFormField
+                    identifier={identifier}
+                    scope={scope}
+                    valuesFields={valuesFields}
+                    valuesRef={valuesRef}
+                    fieldRule={fieldRule}
+                    attributes={attributes}
+                    ruleType={ruleType}
+                  />
+                </div>
+              </div>
+
+              <div className="flex-none self-center px-1">
+                <XMarkMini
+                  className={`text-ui-fg-muted cursor-pointer ${
+                    fieldRule.required ? "invisible" : "visible"
+                  }`}
+                  onClick={() => {
+                    if (!fieldRule.required) {
+                      fieldRule.id &&
+                        setRulesToRemove &&
+                        setRulesToRemove([...rulesToRemove, fieldRule])
+
+                      removeRule(index)
+                    }
+                  }}
+                />
+              </div>
+            </div>
+
+            {index < fields.length - 1 && (
+              <div className="relative px-6 py-3">
+                <div className="border-ui-border-strong absolute bottom-0 left-[40px] top-0 z-[-1] w-px bg-[linear-gradient(var(--border-strong)_33%,rgba(255,255,255,0)_0%)] bg-[length:1px_3px] bg-repeat-y"></div>
+
+                <Badge size="2xsmall" className=" text-xs">
+                  {t("promotions.form.and")}
+                </Badge>
+              </div>
+            )}
+          </Fragment>
+        )
+      })}
+
+      <div className="mt-8">
+        <Button
+          type="button"
+          variant="secondary"
+          className="inline-block"
+          onClick={() => {
+            appendRule({
+              attribute: "",
+              operator: "",
+              values: [],
+              required: false,
+            })
+          }}
+        >
+          {t("promotions.fields.addCondition")}
+        </Button>
+
+        <Button
+          type="button"
+          variant="transparent"
+          className="text-ui-fg-muted hover:text-ui-fg-subtle ml-2 inline-block"
+          onClick={() => {
+            const indicesToRemove = fields
+              .map((field, index) => (field.required ? null : index))
+              .filter((f) => f !== null)
+
+            setRulesToRemove &&
+              setRulesToRemove(fields.filter((f) => !f.required))
+            removeRule(indicesToRemove)
+          }}
+        >
+          {t("promotions.fields.clearAll")}
+        </Button>
+      </div>
+    </div>
+  )
+}
+
+export const EditRulesForm = ({
+  promotion,
+  rules,
+  ruleType,
+  attributes,
+  operators,
+  handleSubmit,
+  isSubmitting,
+}: EditPromotionFormProps) => {
+  const { t } = useTranslation()
+  const requiredAttributes = attributes?.filter((ra) => ra.required) || []
+  const requiredAttributeValues = requiredAttributes?.map((ra) => ra.value)
+  const disguisedRules =
+    getDisguisedRules(promotion, requiredAttributes, ruleType) || []
+  const [rulesToRemove, setRulesToRemove] = useState([])
+
+  const form = useForm<zod.infer<typeof EditRules>>({
+    defaultValues: {
+      rules: [...disguisedRules, ...rules].map((rule) => ({
+        id: rule.id,
+        required: requiredAttributeValues.includes(rule.attribute),
+        field_type: rule.field_type,
+        attribute: rule.attribute!,
+        operator: rule.operator!,
+        values: rule?.values?.map((v: { value: string }) => v.value!),
+      })),
+    },
+    resolver: zodResolver(EditRules),
+  })
+
+  const { fields, append, remove, update } = useFieldArray({
+    control: form.control,
+    name: "rules",
+    keyName: "rules_id",
+  })
+
+  const handleFormSubmit = form.handleSubmit(handleSubmit(rulesToRemove))
+
+  return (
+    <RouteDrawer.Form form={form}>
+      <form onSubmit={handleFormSubmit} className="flex h-full flex-col">
+        <RouteDrawer.Body>
+          <RulesFormField
+            form={form}
+            ruleType={ruleType}
+            attributes={attributes}
+            operators={operators}
+            fields={fields}
+            setRulesToRemove={setRulesToRemove}
+            rulesToRemove={rulesToRemove}
+            appendRule={append}
+            removeRule={remove}
+            updateRule={update}
+          />
+        </RouteDrawer.Body>
+
+        <RouteDrawer.Footer>
+          <div className="flex items-center justify-end gap-x-2">
+            <RouteDrawer.Close asChild>
+              <Button size="small" variant="secondary" disabled={isSubmitting}>
+                {t("actions.cancel")}
+              </Button>
+            </RouteDrawer.Close>
+
+            <Button size="small" type="submit" isLoading={isSubmitting}>
+              {t("actions.save")}
+            </Button>
+          </div>
+        </RouteDrawer.Footer>
+      </form>
+    </RouteDrawer.Form>
+  )
+}

package/src/v2-routes/promotions/common/edit-rules/components/edit-rules-form/index.ts

@@ -0,0 +1 @@
+export * from "./edit-rules-form"

package/src/v2-routes/promotions/common/edit-rules/components/edit-rules-form/utils.ts

@@ -0,0 +1,52 @@
+import { PromotionDTO } from "@medusajs/types"
+import { RuleType } from "../../edit-rules"
+
+// We are disguising couple of database columns as rules here, namely
+// apply_to_quantity and buy_rules_min_quantity.
+// We need to transform the database value into a disugised "rule" shape
+// for the form
+export function getDisguisedRules(
+  promotion: PromotionDTO,
+  requiredAttributes: any[],
+  ruleType: string
+) {
+  if (ruleType === RuleType.RULES && !requiredAttributes?.length) {
+    return []
+  }
+
+  const applyToQuantityRule = requiredAttributes.find(
+    (attr) => attr.id === "apply_to_quantity"
+  )
+
+  const buyRulesMinQuantityRule = requiredAttributes.find(
+    (attr) => attr.id === "buy_rules_min_quantity"
+  )
+
+  if (ruleType === RuleType.TARGET_RULES) {
+    return [
+      {
+        id: "apply_to_quantity",
+        attribute: "apply_to_quantity",
+        operator: "eq",
+        required: applyToQuantityRule?.required,
+        field_type: applyToQuantityRule?.field_type,
+        values: [{ value: promotion?.application_method?.apply_to_quantity }],
+      },
+    ]
+  }
+
+  if (ruleType === RuleType.BUY_RULES) {
+    return [
+      {
+        id: "buy_rules_min_quantity",
+        attribute: "buy_rules_min_quantity",
+        operator: "eq",
+        required: buyRulesMinQuantityRule?.required,
+        field_type: buyRulesMinQuantityRule?.field_type,
+        values: [
+          { value: promotion?.application_method?.buy_rules_min_quantity },
+        ],
+      },
+    ]
+  }
+}

package/src/v2-routes/promotions/common/edit-rules/components/edit-rules-wrapper/edit-rules-wrapper.tsx

@@ -0,0 +1,137 @@
+import { PromotionDTO, PromotionRuleDTO } from "@medusajs/types"
+import { useRouteModal } from "../../../../../../components/route-modal"
+import {
+  usePromotionAddRules,
+  usePromotionRemoveRules,
+  usePromotionRuleAttributes,
+  usePromotionRuleOperators,
+  usePromotionUpdateRules,
+  useUpdatePromotion,
+} from "../../../../../../hooks/api/promotions"
+import { RuleTypeValues } from "../../edit-rules"
+import { EditRulesForm } from "../edit-rules-form"
+import { getDisguisedRules } from "../edit-rules-form/utils"
+
+type EditPromotionFormProps = {
+  promotion: PromotionDTO
+  rules: PromotionRuleDTO[]
+  ruleType: RuleTypeValues
+}
+
+export const EditRulesWrapper = ({
+  promotion,
+  rules,
+  ruleType,
+}: EditPromotionFormProps) => {
+  const { handleSuccess } = useRouteModal()
+  const {
+    attributes,
+    isError: isAttributesError,
+    error: attributesError,
+  } = usePromotionRuleAttributes(ruleType!)
+
+  const {
+    operators,
+    isError: isOperatorsError,
+    error: operatorsError,
+  } = usePromotionRuleOperators()
+
+  if (isAttributesError || isOperatorsError) {
+    throw attributesError || operatorsError
+  }
+
+  const requiredAttributes = attributes?.filter((ra) => ra.required) || []
+  const disguisedRules =
+    getDisguisedRules(promotion, requiredAttributes, ruleType) || []
+
+  const { mutateAsync: updatePromotion } = useUpdatePromotion(promotion.id)
+  const { mutateAsync: addPromotionRules } = usePromotionAddRules(
+    promotion.id,
+    ruleType
+  )
+
+  const { mutateAsync: removePromotionRules } = usePromotionRemoveRules(
+    promotion.id,
+    ruleType
+  )
+
+  const { mutateAsync: updatePromotionRules, isPending } =
+    usePromotionUpdateRules(promotion.id, ruleType)
+
+  const handleSubmit = (rulesToRemove?: any[]) => {
+    return async function (data) {
+      const applicationMethodData: Record<any, any> = {}
+      const { rules: allRules = [] } = data
+
+      const disguisedRulesData = allRules.filter((rule) =>
+        disguisedRules.map((rule) => rule.id).includes(rule.id!)
+      )
+
+      // For all the rules that were disguised, convert them to actual values in the
+      // database, they are currently all under application_method. If more of these are coming
+      // up, abstract this away.
+      for (const rule of disguisedRulesData) {
+        applicationMethodData[rule.id!] = parseInt(rule.values as string)
+      }
+
+      // This variable will contain the rules that are actual rule objects, without the disguised
+      // objects
+      const rulesData = allRules.filter(
+        (rule) => !disguisedRules.map((rule) => rule.id).includes(rule.id!)
+      )
+
+      const rulesToCreate = rulesData.filter((rule) => !("id" in rule))
+      const rulesToUpdate = rulesData.filter(
+        (rule) => typeof rule.id === "string"
+      )
+
+      if (Object.keys(applicationMethodData).length) {
+        await updatePromotion({ application_method: applicationMethodData })
+      }
+
+      rulesToCreate.length &&
+        (await addPromotionRules({
+          rules: rulesToCreate.map((rule) => {
+            return {
+              attribute: rule.attribute,
+              operator: rule.operator,
+              values: rule.values,
+            } as any
+          }),
+        }))
+
+      rulesToRemove?.length &&
+        (await removePromotionRules({
+          rule_ids: rulesToRemove.map((r) => r.id!),
+        }))
+
+      rulesToUpdate.length &&
+        (await updatePromotionRules({
+          rules: rulesToUpdate.map((rule) => {
+            return {
+              id: rule.id!,
+              attribute: rule.attribute,
+              operator: rule.operator,
+              values: rule.values,
+            } as any
+          }),
+        }))
+
+      handleSuccess()
+    }
+  }
+
+  if (attributes && operators) {
+    return (
+      <EditRulesForm
+        promotion={promotion}
+        rules={rules}
+        ruleType={ruleType}
+        attributes={attributes}
+        operators={operators}
+        handleSubmit={handleSubmit}
+        isSubmitting={isPending}
+      />
+    )
+  }
+}

package/src/v2-routes/promotions/common/edit-rules/components/edit-rules-wrapper/index.ts

@@ -0,0 +1 @@
+export * from "./edit-rules-wrapper"

package/src/v2-routes/promotions/common/edit-rules/edit-rules.tsx

@@ -0,0 +1,63 @@
+import { PromotionRuleDTO } from "@medusajs/types"
+import { Heading } from "@medusajs/ui"
+import { useTranslation } from "react-i18next"
+import { useParams } from "react-router-dom"
+import { RouteDrawer } from "../../../../components/route-modal"
+import { usePromotion } from "../../../../hooks/api/promotions"
+import { EditRulesWrapper } from "./components/edit-rules-wrapper"
+
+export enum RuleType {
+  RULES = "rules",
+  BUY_RULES = "buy-rules",
+  TARGET_RULES = "target-rules",
+}
+export type RuleTypeValues = "rules" | "buy-rules" | "target-rules"
+
+export const EditRules = () => {
+  const params = useParams()
+  const allowedParams: string[] = [
+    RuleType.RULES,
+    RuleType.BUY_RULES,
+    RuleType.TARGET_RULES,
+  ]
+
+  if (!allowedParams.includes(params.ruleType!)) {
+    throw "invalid page"
+  }
+
+  const { t } = useTranslation()
+  const ruleType = params.ruleType as RuleTypeValues
+  const id = params.id as string
+  const rules: PromotionRuleDTO[] = []
+  const { promotion, isPending: isLoading, isError, error } = usePromotion(id)
+
+  if (promotion) {
+    if (ruleType === RuleType.RULES) {
+      rules.push(...(promotion.rules || []))
+    } else if (ruleType === RuleType.TARGET_RULES) {
+      rules.push(...(promotion?.application_method?.target_rules || []))
+    } else if (ruleType === RuleType.BUY_RULES) {
+      rules.push(...(promotion.application_method?.buy_rules || []))
+    }
+  }
+
+  if (isError) {
+    throw error
+  }
+
+  return (
+    <RouteDrawer>
+      <RouteDrawer.Header>
+        <Heading>{t(`promotions.edit.${ruleType}.title`)}</Heading>
+      </RouteDrawer.Header>
+
+      {!isLoading && promotion && (
+        <EditRulesWrapper
+          promotion={promotion}
+          rules={rules}
+          ruleType={ruleType}
+        />
+      )}
+    </RouteDrawer>
+  )
+}

package/src/v2-routes/promotions/common/edit-rules/index.ts

@@ -0,0 +1 @@
+export { EditRules as Component } from "./edit-rules"