From 39e73b2d2f9d60268411d182a9c6224f3c156990 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Frane=20Poli=C4=87?= <16856471+fPolic@users.noreply.github.com> Date: Mon, 11 Mar 2024 08:06:27 +0100 Subject: [PATCH] feat(dashboard) admin 3.0 create discounts form (#6590) --- .../public/locales/en-US/translation.json | 10 + .../create-discount-details.tsx | 654 +++++++++++++++++- .../create-discount-form.tsx | 147 +++- .../components/create-discount-form/types.ts | 5 + .../edit-discount-configuration-form.tsx | 420 +++++------ 5 files changed, 991 insertions(+), 245 deletions(-) create mode 100644 packages/admin-next/dashboard/src/routes/discounts/create/components/create-discount-form/types.ts diff --git a/packages/admin-next/dashboard/public/locales/en-US/translation.json b/packages/admin-next/dashboard/public/locales/en-US/translation.json index 70a5adfe85..8b6f9602e2 100644 --- a/packages/admin-next/dashboard/public/locales/en-US/translation.json +++ b/packages/admin-next/dashboard/public/locales/en-US/translation.json @@ -237,12 +237,15 @@ "discounts": { "domain": "Discounts", "startDate": "Start date", + "createDiscountTitle": "Create discount", "validDuration": "Duration of the discount", "redemptionsLimit": "Redemptions limit", "endDate": "End date", + "type": "Discount type", "percentageDiscount": "Percentage discount", "freeShipping": "Free shipping", "fixedDiscount": "Fixed discount", + "fixedAmount": "Fixed amount", "validRegions": "Valid regions", "deleteWarning": "You are about to delete the discount {{code}}. This action cannot be undone.", "editDiscountDetails": "Edit discount details", @@ -260,6 +263,13 @@ "chooseValidRegions": "Choose valid regions", "noConditions": "No conditions are defined for this discount.", "editConditions": "Edit conditions", + "conditionsHint": "Create conditions to apply on the discount", + "isTemplateDiscount": "Is this a template discount?", + "percentageDescription" : "Discount applied in %", + "fixedDescription" : "Amount discount", + "shippingDescription" : "Override delivery amount", + "selectRegionFirst": "Select region first", + "templateHint": "Template discounts allow you to define a set of rules that can be used across a group of discounts. This is useful in campaigns that should generate unique codes for each user, but where the rules for all unique codes should be the same.", "conditions": { "including": { "products_one": "Discount applies to <0/> product.", diff --git a/packages/admin-next/dashboard/src/routes/discounts/create/components/create-discount-form/create-discount-details.tsx b/packages/admin-next/dashboard/src/routes/discounts/create/components/create-discount-form/create-discount-details.tsx index a21c05aed1..937922e6aa 100644 --- a/packages/admin-next/dashboard/src/routes/discounts/create/components/create-discount-form/create-discount-details.tsx +++ b/packages/admin-next/dashboard/src/routes/discounts/create/components/create-discount-form/create-discount-details.tsx @@ -1,8 +1,24 @@ -import { Heading, Input, Text } from "@medusajs/ui" +import { useEffect, useMemo } from "react" +import { + Checkbox, + DatePicker, + Heading, + Input, + Select, + Switch, + Text, + Textarea, + RadioGroup, + CurrencyInput, +} from "@medusajs/ui" import { Trans, useTranslation } from "react-i18next" +import { useAdminRegions } from "medusa-react" import { Form } from "../../../../../components/common/form" -import { CreateDiscountFormReturn } from "./create-discount-form.tsx" +import { CreateDiscountFormReturn } from "./create-discount-form" +import { Combobox } from "../../../../../components/common/combobox" +import { getCurrencySymbol } from "../../../../../lib/currencies" +import { DiscountRuleType } from "./types" type CreateDiscountPropsProps = { form: CreateDiscountFormReturn @@ -11,56 +27,638 @@ type CreateDiscountPropsProps = { export const CreateDiscountDetails = ({ form }: CreateDiscountPropsProps) => { const { t } = useTranslation() + const { regions } = useAdminRegions() + + const watchType = form.watch("type") + const watchRegion = form.watch("regions") + + const isFixedDiscount = watchType === DiscountRuleType.FIXED + const isFreeShipping = watchType === DiscountRuleType.FREE_SHIPPING + + const activeRegion = useMemo(() => { + if (!watchRegion || !regions?.length) { + return + } + + return regions.find((r) => r.id === watchRegion[0]) + }, [regions, watchRegion]) + + useEffect(() => { + form.setValue("regions", []) + form.setValue("value", undefined) + }, [watchType]) + return (
- {t("discount.createDiscountTitle")} - - {t("discounts.createDiscountHint")} - + {t("discounts.createDiscountTitle")}
-
-
-
- { - return ( - - {t("fields.code")} - - - - - ) - }} - /> + {/* DETAILS */} +
+ { + return ( + + {t("discounts.type")} + + + + + + + + + + ) + }} + /> + +
+ { + return ( + + + {t("discounts.chooseValidRegions")} + + + {isFixedDiscount ? ( + + ) : ( + ({ + label: r.name, + value: r.id, + }))} + value={value} + onChange={onChange} + {...field} + /> + )} + + + + ) + }} + /> +
+ +
+ { + return ( + + {t("fields.code")} + + + + + + ) + }} + /> + {!isFreeShipping && ( { + render={({ field: { onChange, ...field } }) => { return ( - {t("fields.percentage")} + + {isFixedDiscount + ? t("fields.amount") + : t("fields.percentage")} + - + {isFixedDiscount ? ( + activeRegion ? ( + + ) : ( + + ) + ) : ( + { + const value = e.target.value + if (value === "") { + onChange(null) + } else { + onChange(parseFloat(value)) + } + }} + /> + )} + ) }} /> -
+ )} +
+ + + ]} + /> + + + { + return ( + + {t("fields.description")} + +