fix: fix tabs + required fields (#7892)

This commit is contained in:
Riqwan Thamir
2024-07-01 17:23:45 +02:00
committed by GitHub
parent 5c7c28709f
commit d58a626d0a
8 changed files with 57 additions and 50 deletions
@@ -1101,6 +1101,11 @@
"sections": { "sections": {
"details": "Promotion Details" "details": "Promotion Details"
}, },
"tabs": {
"template": "Template",
"promotion": "Promotion",
"campaign": "Campaign"
},
"fields": { "fields": {
"method": "Method", "method": "Method",
"type": "Type", "type": "Type",
@@ -1128,6 +1133,9 @@
} }
} }
}, },
"tooltips": {
"campaignType": "Select the currency code in the promotion tab to enable it."
},
"errors": { "errors": {
"requiredField": "Required field" "requiredField": "Required field"
}, },
@@ -18,16 +18,11 @@ export const CreateCampaignSchema = zod.object({
campaign_identifier: zod.string().min(1), campaign_identifier: zod.string().min(1),
starts_at: zod.date().optional(), starts_at: zod.date().optional(),
ends_at: zod.date().optional(), ends_at: zod.date().optional(),
budget: zod budget: zod.object({
.object({ limit: zod.number().min(0).nullish(),
limit: zod.number().min(0).optional().nullable(), type: zod.enum(["spend", "usage"]),
type: zod.enum(["spend", "usage"]), currency_code: zod.string().nullish(),
currency_code: zod.string().optional().nullable(), }),
})
.refine((data) => data.type !== "spend" || data.currency_code, {
path: ["currency_code"],
message: `required field`,
}),
}) })
export const defaultCampaignValues = { export const defaultCampaignValues = {
@@ -35,7 +30,7 @@ export const defaultCampaignValues = {
description: "", description: "",
campaign_identifier: "", campaign_identifier: "",
budget: { budget: {
type: "spend" as CampaignBudgetTypeValues, type: "usage" as CampaignBudgetTypeValues,
currency_code: null, currency_code: null,
limit: null, limit: null,
}, },
@@ -32,6 +32,11 @@ export const CreateCampaignFormFields = ({ form, fieldScope = "" }) => {
name: `${fieldScope}budget.currency_code`, name: `${fieldScope}budget.currency_code`,
}) })
const promotionCurrencyValue = useWatch({
control: form.control,
name: `application_method.currency_code`,
})
const watchPromotionCurrencyCode = useWatch({ const watchPromotionCurrencyCode = useWatch({
control: form.control, control: form.control,
name: "application_method.currency_code", name: "application_method.currency_code",
@@ -192,7 +197,15 @@ export const CreateCampaignFormFields = ({ form, fieldScope = "" }) => {
render={({ field }) => { render={({ field }) => {
return ( return (
<Form.Item> <Form.Item>
<Form.Label>{t("campaigns.budget.fields.type")}</Form.Label> <Form.Label
tooltip={
currencyValue
? undefined
: t("promotions.tooltips.campaignType")
}
>
{t("campaigns.budget.fields.type")}
</Form.Label>
<Form.Control> <Form.Control>
<RadioGroup <RadioGroup
@@ -200,17 +213,18 @@ export const CreateCampaignFormFields = ({ form, fieldScope = "" }) => {
{...field} {...field}
onValueChange={field.onChange} onValueChange={field.onChange}
> >
<RadioGroup.ChoiceBox
value={"spend"}
label={t("campaigns.budget.type.spend.title")}
description={t("campaigns.budget.type.spend.description")}
/>
<RadioGroup.ChoiceBox <RadioGroup.ChoiceBox
value={"usage"} value={"usage"}
label={t("campaigns.budget.type.usage.title")} label={t("campaigns.budget.type.usage.title")}
description={t("campaigns.budget.type.usage.description")} description={t("campaigns.budget.type.usage.description")}
/> />
<RadioGroup.ChoiceBox
value={"spend"}
label={t("campaigns.budget.type.spend.title")}
description={t("campaigns.budget.type.spend.description")}
disabled={!!!(currencyValue || promotionCurrencyValue)}
/>
</RadioGroup> </RadioGroup>
</Form.Control> </Form.Control>
<Form.ErrorMessage /> <Form.ErrorMessage />
@@ -78,39 +78,30 @@ export const RulesFormField = ({
} }
if (ruleType === "rules" && !fields.length) { if (ruleType === "rules" && !fields.length) {
form.resetField("rules")
replace(generateRuleAttributes(rules) as any) replace(generateRuleAttributes(rules) as any)
} }
if (ruleType === "rules" && promotionType === "standard") { if (ruleType === "buy-rules" && !fields.length) {
form.resetField("application_method.buy_rules") form.resetField("application_method.buy_rules")
form.resetField("application_method.target_rules") const rulesToAppend =
} promotion?.id || promotionType === "standard"
? rules
if ( : [...rules, requiredProductRule]
["buy-rules", "target-rules"].includes(ruleType) &&
promotionType === "standard"
) {
form.resetField(scope)
replace([])
}
if (
["buy-rules", "target-rules"].includes(ruleType) &&
promotionType === "buyget"
) {
form.resetField(scope)
const rulesToAppend = promotion?.id
? rules
: [...rules, requiredProductRule]
replace(generateRuleAttributes(rulesToAppend) as any) replace(generateRuleAttributes(rulesToAppend) as any)
return
} }
form.resetField(scope) if (ruleType === "target-rules" && !fields.length) {
form.resetField("application_method.target_rules")
const rulesToAppend =
promotion?.id || promotionType === "standard"
? rules
: [...rules, requiredProductRule]
replace(generateRuleAttributes(rules) as any) replace(generateRuleAttributes(rulesToAppend) as any)
}
}, [promotionType, isLoading]) }, [promotionType, isLoading])
return ( return (
@@ -322,18 +322,18 @@ export const CreatePromotionForm = () => {
value={Tab.TYPE} value={Tab.TYPE}
status={detailsProgress} status={detailsProgress}
> >
{t("fields.type")} {t("promotions.tabs.template")}
</ProgressTabs.Trigger> </ProgressTabs.Trigger>
<ProgressTabs.Trigger <ProgressTabs.Trigger
className="w-full" className="w-full"
value={Tab.PROMOTION} value={Tab.PROMOTION}
> >
{t("fields.details")} {t("promotions.tabs.promotion")}
</ProgressTabs.Trigger> </ProgressTabs.Trigger>
<ProgressTabs.Trigger className="w-full" value={Tab.CAMPAIGN}> <ProgressTabs.Trigger className="w-full" value={Tab.CAMPAIGN}>
{t("promotions.fields.campaign")} {t("promotions.tabs.campaign")}
</ProgressTabs.Trigger> </ProgressTabs.Trigger>
</ProgressTabs.List> </ProgressTabs.List>
</div> </div>
@@ -87,7 +87,7 @@ export interface CreateCampaignDTO {
/** /**
* The associated campaign budget. * The associated campaign budget.
*/ */
budget?: CreateCampaignBudgetDTO budget?: CreateCampaignBudgetDTO | null
} }
/** /**
@@ -29,7 +29,7 @@ export const AdminGetCampaignsParams = createFindParams({
export const CreateCampaignBudget = z export const CreateCampaignBudget = z
.object({ .object({
type: z.nativeEnum(CampaignBudgetType), type: z.nativeEnum(CampaignBudgetType),
limit: z.number().optional(), limit: z.number().nullish(),
currency_code: z.string().nullish(), currency_code: z.string().nullish(),
}) })
.strict() .strict()
@@ -52,7 +52,7 @@ export const CreateCampaignBudget = z
export const UpdateCampaignBudget = z export const UpdateCampaignBudget = z
.object({ .object({
limit: z.number().optional(), limit: z.number().nullish(),
}) })
.strict() .strict()
@@ -62,7 +62,7 @@ export const AdminCreateCampaign = z
name: z.string(), name: z.string(),
campaign_identifier: z.string(), campaign_identifier: z.string(),
description: z.string().nullish(), description: z.string().nullish(),
budget: CreateCampaignBudget.optional(), budget: CreateCampaignBudget.nullish(),
starts_at: z.coerce.date().nullish(), starts_at: z.coerce.date().nullish(),
ends_at: z.coerce.date().nullish(), ends_at: z.coerce.date().nullish(),
promotions: z.array(z.object({ id: z.string() })).optional(), promotions: z.array(z.object({ id: z.string() })).optional(),
@@ -51,7 +51,6 @@ export default class Promotion {
fieldName: "campaign_id", fieldName: "campaign_id",
nullable: true, nullable: true,
mapToPk: true, mapToPk: true,
onDelete: "set null",
}) })
campaign_id: string | null = null campaign_id: string | null = null