From f62de56b63d56e2ba548129616881534ebb31833 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Frane=20Poli=C4=87?= <16856471+fPolic@users.noreply.github.com> Date: Mon, 22 Apr 2024 08:35:52 +0200 Subject: [PATCH] feat(dashboard): Region refactor (#7083) * wip: regions refactor * feat: finalize region domain * fix: cleanup error messages --- .../public/locales/en-US/translation.json | 9 +++++ .../dashboard/src/hooks/api/regions.tsx | 4 +- .../regions/common/hooks/use-countries.tsx | 2 +- .../add-countries-form/add-countries-form.tsx | 33 +++++++++------ .../region-add-countries.tsx | 7 +++- .../create-region-form/create-region-form.tsx | 11 +++++ .../regions/region-create/region-create.tsx | 2 +- .../region-country-section.tsx | 40 +++++++++++++++---- .../region-general-section.tsx | 15 ++++++- .../regions/region-detail/region-detail.tsx | 7 +++- .../edit-region-form/edit-region-form.tsx | 14 ++++++- .../regions/region-edit/region-edit.tsx | 4 +- .../region-list-table/region-list-table.tsx | 26 ++++++++++-- 13 files changed, 137 insertions(+), 37 deletions(-) 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 a7414466cf..67a11df248 100644 --- a/packages/admin-next/dashboard/public/locales/en-US/translation.json +++ b/packages/admin-next/dashboard/public/locales/en-US/translation.json @@ -17,6 +17,9 @@ "next": "Next", "prev": "Prev", "is": "is", + "timeline": "Timeline", + "success": "Success", + "error": "Error", "select": "Select", "selected": "Selected", "enabled": "Enabled", @@ -1057,6 +1060,12 @@ "priceType": "Price Type", "flatRate": "Flat Rate", "calculated": "Calculated", + "toast": { + "delete": "Region deleted successfully", + "edit": "Region edit saved", + "create": "Region created successfully", + "countries": "Region countries updated successfully" + }, "shippingOption": { "createShippingOption": "Create Shipping Option", "createShippingOptionHint": "Create a new shipping option for the region.", diff --git a/packages/admin-next/dashboard/src/hooks/api/regions.tsx b/packages/admin-next/dashboard/src/hooks/api/regions.tsx index c009f8c2fb..00d8361b81 100644 --- a/packages/admin-next/dashboard/src/hooks/api/regions.tsx +++ b/packages/admin-next/dashboard/src/hooks/api/regions.tsx @@ -8,7 +8,7 @@ import { import { client } from "../../lib/client" import { queryClient } from "../../lib/medusa" import { queryKeysFactory } from "../../lib/query-key-factory" -import { CreateRegionReq } from "../../types/api-payloads" +import { CreateRegionReq, UpdateRegionReq } from "../../types/api-payloads" import { RegionDeleteRes, RegionListRes, @@ -66,7 +66,7 @@ export const useCreateRegion = ( export const useUpdateRegion = ( id: string, - options?: UseMutationOptions + options?: UseMutationOptions ) => { return useMutation({ mutationFn: (payload) => client.regions.update(id, payload), diff --git a/packages/admin-next/dashboard/src/v2-routes/regions/common/hooks/use-countries.tsx b/packages/admin-next/dashboard/src/v2-routes/regions/common/hooks/use-countries.tsx index edbec55659..a92974ae8d 100644 --- a/packages/admin-next/dashboard/src/v2-routes/regions/common/hooks/use-countries.tsx +++ b/packages/admin-next/dashboard/src/v2-routes/regions/common/hooks/use-countries.tsx @@ -31,7 +31,7 @@ export const useCountries = ({ throw json(`The key ${key} is not a valid order key`, 500) } - const sortKey: keyof Country = key === "code" ? "iso_2" : "name" + const sortKey: keyof RegionCountryDTO = key === "code" ? "iso_2" : "name" data.sort((a, b) => { if (a[sortKey] === null && b[sortKey] === null) { diff --git a/packages/admin-next/dashboard/src/v2-routes/regions/region-add-countries/components/add-countries-form/add-countries-form.tsx b/packages/admin-next/dashboard/src/v2-routes/regions/region-add-countries/components/add-countries-form/add-countries-form.tsx index 9149a16d52..1291a8cfbf 100644 --- a/packages/admin-next/dashboard/src/v2-routes/regions/region-add-countries/components/add-countries-form/add-countries-form.tsx +++ b/packages/admin-next/dashboard/src/v2-routes/regions/region-add-countries/components/add-countries-form/add-countries-form.tsx @@ -9,7 +9,7 @@ import { useForm } from "react-hook-form" import { useTranslation } from "react-i18next" import * as zod from "zod" -import { Button, Checkbox } from "@medusajs/ui" +import { Button, Checkbox, toast } from "@medusajs/ui" import { RegionCountryDTO, RegionDTO } from "@medusajs/types" import { RouteFocusModal, @@ -21,7 +21,7 @@ import { countries as staticCountries } from "../../../../../lib/countries" import { useCountries } from "../../../common/hooks/use-countries" import { useCountryTableColumns } from "../../../common/hooks/use-country-table-columns" import { useCountryTableQuery } from "../../../common/hooks/use-country-table-query" -import { useUpdateRegion } from "../../../../../hooks/api/regions.tsx" +import { useUpdateRegion } from "../../../../../hooks/api/regions" type AddCountriesFormProps = { region: RegionDTO @@ -98,7 +98,7 @@ export const AddCountriesForm = ({ region }: AddCountriesFormProps) => { prefix: PREFIX, }) - const { mutateAsync, isLoading } = useUpdateRegion(region.id) + const { mutateAsync, isPending: isLoading } = useUpdateRegion(region.id) const handleSubmit = form.handleSubmit(async (values) => { const payload = [ @@ -106,16 +106,23 @@ export const AddCountriesForm = ({ region }: AddCountriesFormProps) => { ...values.countries, ] - await mutateAsync( - { + try { + await mutateAsync({ countries: payload, - }, - { - onSuccess: () => { - handleSuccess() - }, - } - ) + }) + + handleSuccess() + + toast.success(t("general.success"), { + description: t("regions.toast.countries"), + dismissLabel: t("actions.close"), + }) + } catch (e) { + toast.error(t("general.error"), { + description: e.message, + dismissLabel: t("actions.close"), + }) + } }) return ( @@ -132,7 +139,7 @@ export const AddCountriesForm = ({ region }: AddCountriesFormProps) => { diff --git a/packages/admin-next/dashboard/src/v2-routes/regions/region-add-countries/region-add-countries.tsx b/packages/admin-next/dashboard/src/v2-routes/regions/region-add-countries/region-add-countries.tsx index 197b393c1e..caa5303d2b 100644 --- a/packages/admin-next/dashboard/src/v2-routes/regions/region-add-countries/region-add-countries.tsx +++ b/packages/admin-next/dashboard/src/v2-routes/regions/region-add-countries/region-add-countries.tsx @@ -6,7 +6,12 @@ import { useRegion } from "../../../hooks/api/regions" export const RegionAddCountries = () => { const { id } = useParams() - const { region, isLoading, isError, error } = useRegion(id!, { + const { + region, + isPending: isLoading, + isError, + error, + } = useRegion(id!, { fields: "*payment_providers", }) diff --git a/packages/admin-next/dashboard/src/v2-routes/regions/region-create/components/create-region-form/create-region-form.tsx b/packages/admin-next/dashboard/src/v2-routes/regions/region-create/components/create-region-form/create-region-form.tsx index a6a6512f7c..7146b63346 100644 --- a/packages/admin-next/dashboard/src/v2-routes/regions/region-create/components/create-region-form/create-region-form.tsx +++ b/packages/admin-next/dashboard/src/v2-routes/regions/region-create/components/create-region-form/create-region-form.tsx @@ -9,6 +9,7 @@ import { Switch, Text, clx, + toast, } from "@medusajs/ui" import { RowSelectionState, createColumnHelper } from "@tanstack/react-table" import { useMemo, useState } from "react" @@ -91,8 +92,18 @@ export const CreateRegionForm = ({ }, { onSuccess: ({ region }) => { + toast.success(t("general.success"), { + description: t("regions.toast.create"), + dismissLabel: t("actions.close"), + }) handleSuccess(`../${region.id}`) }, + onError: (e) => { + toast.error(t("general.error"), { + description: e.message, + dismissLabel: t("actions.close"), + }) + }, } ) }) diff --git a/packages/admin-next/dashboard/src/v2-routes/regions/region-create/region-create.tsx b/packages/admin-next/dashboard/src/v2-routes/regions/region-create/region-create.tsx index 7c87e90a05..0c74f803b4 100644 --- a/packages/admin-next/dashboard/src/v2-routes/regions/region-create/region-create.tsx +++ b/packages/admin-next/dashboard/src/v2-routes/regions/region-create/region-create.tsx @@ -5,7 +5,7 @@ import { usePaymentProviders } from "../../../hooks/api/payments" import { useStore } from "../../../hooks/api/store" export const RegionCreate = () => { - const { store, isLoading, isError, error } = useStore() + const { store, isPending: isLoading, isError, error } = useStore() const storeCurrencies = (store?.supported_currency_codes ?? []).map( (code) => currencies[code.toUpperCase()] diff --git a/packages/admin-next/dashboard/src/v2-routes/regions/region-detail/components/region-country-section/region-country-section.tsx b/packages/admin-next/dashboard/src/v2-routes/regions/region-detail/components/region-country-section/region-country-section.tsx index 26d1121dd3..c26ad9fd0e 100644 --- a/packages/admin-next/dashboard/src/v2-routes/regions/region-detail/components/region-country-section/region-country-section.tsx +++ b/packages/admin-next/dashboard/src/v2-routes/regions/region-detail/components/region-country-section/region-country-section.tsx @@ -1,5 +1,5 @@ import { PlusMini, Trash } from "@medusajs/icons" -import { Checkbox, Container, Heading, usePrompt } from "@medusajs/ui" +import { Checkbox, Container, Heading, toast, usePrompt } from "@medusajs/ui" import { RegionCountryDTO, RegionDTO } from "@medusajs/types" import { ColumnDef, @@ -14,7 +14,7 @@ import { useDataTable } from "../../../../../hooks/use-data-table" import { useCountries } from "../../../common/hooks/use-countries" import { useCountryTableColumns } from "../../../common/hooks/use-country-table-columns" import { useCountryTableQuery } from "../../../common/hooks/use-country-table-query" -import { useUpdateRegion } from "../../../../../hooks/api/regions.tsx" +import { useUpdateRegion } from "../../../../../hooks/api/regions" type RegionCountrySectionProps = { region: RegionDTO @@ -82,9 +82,21 @@ export const RegionCountrySection = ({ region }: RegionCountrySectionProps) => { .filter((c) => !ids.includes(c.iso_2)) .map((c) => c.iso_2) - await mutateAsync({ - countries: payload, - }) + try { + await mutateAsync({ + countries: payload, + }) + + toast.success(t("general.success"), { + description: t("regions.toast.countries"), + dismissLabel: t("actions.close"), + }) + } catch (e) { + toast.error(t("general.error"), { + description: e.message, + dismissLabel: t("actions.close"), + }) + } } return ( @@ -158,9 +170,21 @@ const CountryActions = ({ return } - await mutateAsync({ - countries: payload, - }) + try { + await mutateAsync({ + countries: payload, + }) + + toast.success(t("general.success"), { + description: t("regions.toast.countries"), + dismissLabel: t("actions.close"), + }) + } catch (e) { + toast.error(t("general.error"), { + description: e.message, + dismissLabel: t("actions.close"), + }) + } } return ( diff --git a/packages/admin-next/dashboard/src/v2-routes/regions/region-detail/components/region-general-section/region-general-section.tsx b/packages/admin-next/dashboard/src/v2-routes/regions/region-detail/components/region-general-section/region-general-section.tsx index 0812463af9..104fcc4620 100644 --- a/packages/admin-next/dashboard/src/v2-routes/regions/region-detail/components/region-general-section/region-general-section.tsx +++ b/packages/admin-next/dashboard/src/v2-routes/regions/region-detail/components/region-general-section/region-general-section.tsx @@ -1,6 +1,6 @@ import { PencilSquare, Trash } from "@medusajs/icons" import { RegionDTO } from "@medusajs/types" -import { Badge, Container, Heading, Text, usePrompt } from "@medusajs/ui" +import { Badge, Container, Heading, Text, toast, usePrompt } from "@medusajs/ui" import { useTranslation } from "react-i18next" import { useNavigate } from "react-router-dom" @@ -76,7 +76,18 @@ const RegionActions = ({ region }: { region: RegionDTO }) => { return } - await mutateAsync(undefined) + try { + await mutateAsync(undefined) + toast.success(t("general.success"), { + description: t("regions.toast.delete"), + dismissLabel: t("actions.close"), + }) + } catch (e) { + toast.error(t("general.error"), { + description: e.message, + dismissLabel: t("actions.close"), + }) + } navigate("/settings/regions", { replace: true }) } diff --git a/packages/admin-next/dashboard/src/v2-routes/regions/region-detail/region-detail.tsx b/packages/admin-next/dashboard/src/v2-routes/regions/region-detail/region-detail.tsx index 32c0f6c1cf..24e63acc1a 100644 --- a/packages/admin-next/dashboard/src/v2-routes/regions/region-detail/region-detail.tsx +++ b/packages/admin-next/dashboard/src/v2-routes/regions/region-detail/region-detail.tsx @@ -12,7 +12,12 @@ export const RegionDetail = () => { > const { id } = useParams() - const { region, isLoading, isError, error } = useRegion( + const { + region, + isPending: isLoading, + isError, + error, + } = useRegion( id!, { fields: "*payment_providers,*countries" }, { diff --git a/packages/admin-next/dashboard/src/v2-routes/regions/region-edit/components/edit-region-form/edit-region-form.tsx b/packages/admin-next/dashboard/src/v2-routes/regions/region-edit/components/edit-region-form/edit-region-form.tsx index c4b11fcfc1..e127bcb129 100644 --- a/packages/admin-next/dashboard/src/v2-routes/regions/region-edit/components/edit-region-form/edit-region-form.tsx +++ b/packages/admin-next/dashboard/src/v2-routes/regions/region-edit/components/edit-region-form/edit-region-form.tsx @@ -1,4 +1,4 @@ -import { Button, Input, Select, Text } from "@medusajs/ui" +import { Button, Input, Select, Text, toast } from "@medusajs/ui" import { useForm } from "react-hook-form" import { useTranslation } from "react-i18next" import * as zod from "zod" @@ -42,7 +42,7 @@ export const EditRegionForm = ({ }, }) - const { mutateAsync, isLoading } = useUpdateRegion(region.id) + const { mutateAsync, isPending: isLoading } = useUpdateRegion(region.id) const handleSubmit = form.handleSubmit(async (values) => { await mutateAsync( @@ -53,8 +53,18 @@ export const EditRegionForm = ({ }, { onSuccess: () => { + toast.success(t("general.success"), { + description: t("regions.toast.edit"), + dismissLabel: t("actions.close"), + }) handleSuccess() }, + onError: (e) => { + toast.error(t("general.error"), { + description: e.message, + dismissLabel: t("actions.close"), + }) + }, } ) }) diff --git a/packages/admin-next/dashboard/src/v2-routes/regions/region-edit/region-edit.tsx b/packages/admin-next/dashboard/src/v2-routes/regions/region-edit/region-edit.tsx index dab4bfa9e6..0f98f3b894 100644 --- a/packages/admin-next/dashboard/src/v2-routes/regions/region-edit/region-edit.tsx +++ b/packages/admin-next/dashboard/src/v2-routes/regions/region-edit/region-edit.tsx @@ -15,14 +15,14 @@ export const RegionEdit = () => { const { region, - isLoading: isRegionLoading, + isPending: isRegionLoading, isError: isRegionError, error: regionError, } = useRegion(id!, { fields: "*payment_providers" }) const { store, - isLoading: isStoreLoading, + isPending: isStoreLoading, isError: isStoreError, error: storeError, } = useStore() diff --git a/packages/admin-next/dashboard/src/v2-routes/regions/region-list/components/region-list-table/region-list-table.tsx b/packages/admin-next/dashboard/src/v2-routes/regions/region-list/components/region-list-table/region-list-table.tsx index d037b1fc2b..13a77d8e76 100644 --- a/packages/admin-next/dashboard/src/v2-routes/regions/region-list/components/region-list-table/region-list-table.tsx +++ b/packages/admin-next/dashboard/src/v2-routes/regions/region-list/components/region-list-table/region-list-table.tsx @@ -1,10 +1,11 @@ import { PencilSquare, Trash } from "@medusajs/icons" import { RegionDTO } from "@medusajs/types" -import { Button, Container, Heading, usePrompt } from "@medusajs/ui" +import { Button, Container, Heading, usePrompt, toast } from "@medusajs/ui" import { createColumnHelper } from "@tanstack/react-table" import { useMemo } from "react" import { useTranslation } from "react-i18next" import { Link } from "react-router-dom" +import { keepPreviousData } from "@tanstack/react-query" import { ActionMenu } from "../../../../../components/common/action-menu" import { DataTable } from "../../../../../components/table/data-table" @@ -20,13 +21,19 @@ export const RegionListTable = () => { const { t } = useTranslation() const { searchParams, raw } = useRegionTableQuery({ pageSize: PAGE_SIZE }) - const { regions, count, isLoading, isError, error } = useRegions( + const { + regions, + count, + isPending: isLoading, + isError, + error, + } = useRegions( { ...searchParams, fields: "*payment_providers", }, { - keepPreviousData: true, + placeholderData: keepPreviousData, } ) @@ -96,7 +103,18 @@ const RegionActions = ({ region }: { region: RegionDTO }) => { return } - await mutateAsync(undefined) + try { + await mutateAsync(undefined) + toast.success(t("general.success"), { + description: t("regions.toast.delete"), + dismissLabel: t("actions.close"), + }) + } catch (e) { + toast.error(t("general.error"), { + description: e.message, + dismissLabel: t("actions.close"), + }) + } } return (