Skip to content

Commit

Permalink
fix(dashboard): Fixes to campaign and promotions domains (#9022)
Browse files Browse the repository at this point in the history
  • Loading branch information
kasperkristensen authored Sep 5, 2024
1 parent c27aa46 commit e5b90b2
Show file tree
Hide file tree
Showing 29 changed files with 886 additions and 710 deletions.
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
import { Badge } from "@medusajs/ui"

type CellProps = {
code: string
}
Expand All @@ -9,10 +11,9 @@ type HeaderProps = {
export const CodeCell = ({ code }: CellProps) => {
return (
<div className="flex h-full w-full items-center gap-x-3 overflow-hidden">
{/* // TODO: border color inversion*/}
<span className="bg-ui-tag-neutral-bg truncate rounded-md border border-neutral-200 p-1 text-xs">
<Badge size="2xsmall" className="truncate">
{code}
</span>
</Badge>
</div>
)
}
Expand Down

This file was deleted.

19 changes: 17 additions & 2 deletions packages/admin/dashboard/src/i18n/translations/en.json
Original file line number Diff line number Diff line change
Expand Up @@ -1694,8 +1694,15 @@
"title": "Edit buy rules"
}
},
"addToCampaign": {
"title": "Promotion's Campaign"
"campaign": {
"header": "Campaign",
"edit": {
"header": "Edit Campaign",
"successToast": "Successfully updated the campaign of the promotion."
},
"actions": {
"goToCampaign": "Go to campaign"
}
},
"campaign_currency": {
"tooltip": "This is the promotion's currency. Change it from the Details tab."
Expand Down Expand Up @@ -1800,6 +1807,14 @@
"header": "Edit Campaign",
"successToast": "Campaign '{{name}}' was successfully updated."
},
"configuration": {
"header": "Configuration",
"edit": {
"header": "Edit Campaign Configuration",
"description": "Edit the configuration of the campaign.",
"successToast": "Campaign configuration was successfully updated."
}
},
"create": {
"hint": "Create a promotional campaign.",
"header": "Create Campaign",
Expand Down
4 changes: 2 additions & 2 deletions packages/admin/dashboard/src/lib/promotions.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { PromotionDTO } from "@medusajs/types"
import { HttpTypes } from "@medusajs/types"

export enum PromotionStatus {
SCHEDULED = "SCHEDULED",
Expand All @@ -7,7 +7,7 @@ export enum PromotionStatus {
DISABLED = "DISABLED",
}

export const getPromotionStatus = (promotion: PromotionDTO) => {
export const getPromotionStatus = (promotion: HttpTypes.AdminPromotion) => {
const date = new Date()
const campaign = promotion.campaign

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -355,6 +355,11 @@ export const RouteMap: RouteObject[] = [
path: "edit",
lazy: () => import("../../routes/campaigns/campaign-edit"),
},
{
path: "configuration",
lazy: () =>
import("../../routes/campaigns/campaign-configuration"),
},
{
path: "edit-budget",
lazy: () =>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -15,9 +15,9 @@ import { RouteFocusModal, useRouteModal } from "../../../../components/modals"
import { DataTable } from "../../../../components/table/data-table"
import { useAddOrRemoveCampaignPromotions } from "../../../../hooks/api/campaigns"
import { usePromotions } from "../../../../hooks/api/promotions"
import { usePromotionTableColumns } from "../../../../hooks/table/columns-v2/use-promotion-table-columns"
import { usePromotionTableColumns } from "../../../../hooks/table/columns/use-promotion-table-columns"
import { usePromotionTableFilters } from "../../../../hooks/table/filters/use-promotion-table-filters"
import { usePromotionTableQuery } from "../../../../hooks/table/query-v2/use-promotion-table-query"
import { usePromotionTableQuery } from "../../../../hooks/table/query/use-promotion-table-query"
import { useDataTable } from "../../../../hooks/use-data-table"

type AddCampaignPromotionsFormProps = {
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
import { Heading } from "@medusajs/ui"
import { useTranslation } from "react-i18next"
import { useParams } from "react-router-dom"
import { RouteDrawer } from "../../../components/modals"
import { useCampaign } from "../../../hooks/api/campaigns"
import { CampaignConfigurationForm } from "./components/campaign-configuration-form"

export const CampaignConfiguration = () => {
const { t } = useTranslation()

const { id } = useParams()
const { campaign, isLoading, isError, error } = useCampaign(id!)

if (isError) {
throw error
}

return (
<RouteDrawer>
<RouteDrawer.Header>
<RouteDrawer.Title asChild>
<Heading>{t("campaigns.configuration.edit.header")}</Heading>
</RouteDrawer.Title>
<RouteDrawer.Description className="sr-only">
{t("campaigns.configuration.edit.description")}
</RouteDrawer.Description>
</RouteDrawer.Header>
{!isLoading && campaign && (
<CampaignConfigurationForm campaign={campaign} />
)}
</RouteDrawer>
)
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,133 @@
import { zodResolver } from "@hookform/resolvers/zod"
import { AdminCampaign } from "@medusajs/types"
import { Button, DatePicker, toast } from "@medusajs/ui"
import { useForm } from "react-hook-form"
import { useTranslation } from "react-i18next"
import { z } from "zod"

import { Form } from "../../../../../components/common/form"
import { RouteDrawer, useRouteModal } from "../../../../../components/modals"
import { useUpdateCampaign } from "../../../../../hooks/api/campaigns"

type CampaignConfigurationFormProps = {
campaign: AdminCampaign
}

const CampaignConfigurationSchema = z.object({
starts_at: z.date().nullable(),
ends_at: z.date().nullable(),
})

export const CampaignConfigurationForm = ({
campaign,
}: CampaignConfigurationFormProps) => {
const { t } = useTranslation()
const { handleSuccess } = useRouteModal()

const form = useForm<z.infer<typeof CampaignConfigurationSchema>>({
defaultValues: {
starts_at: campaign.starts_at ? new Date(campaign.starts_at) : undefined,
ends_at: campaign.ends_at ? new Date(campaign.ends_at) : undefined,
},
resolver: zodResolver(CampaignConfigurationSchema),
})

const { mutateAsync, isPending } = useUpdateCampaign(campaign.id)

const handleSubmit = form.handleSubmit(async (data) => {
await mutateAsync(
{
starts_at: data.starts_at || null,
ends_at: data.ends_at || null,
},
{
onSuccess: ({ campaign }) => {
toast.success(
t("campaigns.configuration.edit.successToast", {
name: campaign.name,
})
)

handleSuccess()
},
onError: (error) => {
toast.error(error.message)
},
}
)
})

return (
<RouteDrawer.Form form={form}>
<form onSubmit={handleSubmit} className="flex flex-1 flex-col">
<RouteDrawer.Body>
<div className="flex flex-col gap-y-4">
<Form.Field
control={form.control}
name="starts_at"
render={({ field }) => {
return (
<Form.Item>
<Form.Label>{t("campaigns.fields.start_date")}</Form.Label>

<Form.Control>
<DatePicker
granularity="minute"
hourCycle={12}
shouldCloseOnSelect={false}
{...field}
/>
</Form.Control>

<Form.ErrorMessage />
</Form.Item>
)
}}
/>

<Form.Field
control={form.control}
name="ends_at"
render={({ field }) => {
return (
<Form.Item>
<Form.Label>{t("campaigns.fields.end_date")}</Form.Label>

<Form.Control>
<DatePicker
granularity="minute"
shouldCloseOnSelect={false}
{...field}
/>
</Form.Control>

<Form.ErrorMessage />
</Form.Item>
)
}}
/>
</div>
</RouteDrawer.Body>

<RouteDrawer.Footer>
<div className="flex items-center justify-end gap-x-2">
<RouteDrawer.Close asChild>
<Button variant="secondary" size="small">
{t("actions.cancel")}
</Button>
</RouteDrawer.Close>

<Button
isLoading={isPending}
type="submit"
variant="primary"
size="small"
>
{t("actions.save")}
</Button>
</div>
</RouteDrawer.Footer>
</form>
</RouteDrawer.Form>
)
}
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export * from "./campaign-configuration-form"
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export { CampaignConfiguration as Component } from "./campaign-configuration"
Original file line number Diff line number Diff line change
Expand Up @@ -78,8 +78,12 @@ export const CreateCampaignForm = () => {

return (
<RouteFocusModal.Form form={form}>
<form onSubmit={handleSubmit}>
<RouteFocusModal.Header>
<form onSubmit={handleSubmit} className="flex flex-col overflow-hidden">
<RouteFocusModal.Header />
<RouteFocusModal.Body className="flex size-full flex-col items-center overflow-auto py-16">
<CreateCampaignFormFields form={form} />
</RouteFocusModal.Body>
<RouteFocusModal.Footer>
<div className="flex items-center justify-end gap-x-2">
<RouteFocusModal.Close asChild>
<Button size="small" variant="secondary">
Expand All @@ -95,11 +99,7 @@ export const CreateCampaignForm = () => {
{t("actions.create")}
</Button>
</div>
</RouteFocusModal.Header>

<RouteFocusModal.Body className="flex flex-col items-center py-16">
<CreateCampaignFormFields form={form} />
</RouteFocusModal.Body>
</RouteFocusModal.Footer>
</form>
</RouteFocusModal.Form>
)
Expand Down
Loading

0 comments on commit e5b90b2

Please sign in to comment.