asyavee/medusa-store
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

feat(admin-ui): Multi-language support (#4962)

Browse Source
This commit is contained in:
Geoffroy Empain
2023-09-12 14:53:48 +02:00
committed by GitHub
parent 107aaa371c
commit afd4e72cdf
348 changed files with 9668 additions and 2298 deletions
Download Patch File Download Diff File Expand all files Collapse all files

96
packages/admin-ui/ui/src/assets/styles/emoji-picker.css
View File

@@ -1,107 +1,109 @@
.emoji-picker-react {
padding: 16px !important;
border: none !important;
padding: 16px !important;
border: none !important;
}
.emoji-picker-react .emoji-group {
padding: 0 !important;
font-size: 12px !important;
font-weight: 400 !important;
padding: 0 !important;
font-size: 12px !important;
font-weight: 400 !important;
}
.emoji-picker-react .emoji-group:before {
font-family: "Inter" !important;
text-transform: none !important;
font-size: 12px !important;
font-weight: 600 !important;
font-family: "Inter" !important;
text-transform: none !important;
font-size: 12px !important;
font-weight: 600 !important;
}
.emoji-picker-react .native {
font-size: 24px !important;
font-size: 24px !important;
}
.emoji-picker-react .emoji {
color: #F3F4F6 !important;
color: #f3f4f6 !important;
}
.emoji-picker-react input.emoji-search {
background-color: #F9FAFB !important;
border-radius: 4px !important;
border-color: #E5E7EB !important;
margin: 0 !important;
width: 100% !important;
font-size: 12px !important;
font-family: "Inter" !important;
color: #111827 !important;
caret-color: #7C3AED !important;
background-color: #f9fafb !important;
border-radius: 4px !important;
border-color: #e5e7eb !important;
margin: 0 !important;
width: 100% !important;
font-size: 12px !important;
font-family: "Inter" !important;
color: #111827 !important;
caret-color: #7c3aed !important;
}
.emoji-picker-react input.emoji-search::placeholder {
font-size: 12px !important;
font-family: "Inter" !important;
color: #9CA3AF !important;
font-size: 12px !important;
font-family: "Inter" !important;
color: #9ca3af !important;
}
.emoji-picker-react .emoji-categories button.icn-smileys_people {
background-image: url("../svg/happy.svg") !important;
background-image: url("../svg/happy.svg") !important;
}
.emoji-picker-react .emoji-categories button.icn-animals_nature {
background-image: url("../svg/sprout.svg") !important;
background-image: url("../svg/sprout.svg") !important;
}
.emoji-picker-react .emoji-categories button.icn-food_drink {
background-image: url("../svg/carrot.svg") !important;
background-image: url("../svg/carrot.svg") !important;
}
.emoji-picker-react .emoji-categories button.icn-travel_places {
background-image: url("../svg/plane.svg") !important;
background-image: url("../svg/plane.svg") !important;
}
.emoji-picker-react .emoji-categories button.icn-activities {
background-image: url("../svg/controller.svg") !important;
background-image: url("../svg/controller.svg") !important;
}
.emoji-picker-react .emoji-categories button.icn-objects {
background-image: url("../svg/lightbulb.svg") !important;
background-image: url("../svg/lightbulb.svg") !important;
}
.emoji-picker-react .emoji-categories button.icn-symbols {
background-image: url("../svg/heart.svg") !important;
background-image: url("../svg/heart.svg") !important;
}
.emoji-picker-react .emoji-categories button.icn-flags {
background-image: url("../svg/flag.svg") !important;
background-image: url("../svg/flag.svg") !important;
}
.emoji-picker-react .emoji-categories button {
width: 32px !important;
height: 32px !important;
border-radius: 4px !important;
width: 32px !important;
height: 32px !important;
border-radius: 4px !important;
}
.emoji-picker-react .emoji-categories button.active {
background-color: white !important;
background-color: white !important;
}
.emoji-picker-react .emoji-categories {
background-color: #F3F4F6 !important;
padding: 4px !important;
border-radius: 4px !important;
margin-bottom: 8px !important;
background-color: #f3f4f6 !important;
padding: 4px !important;
border-radius: 4px !important;
margin-bottom: 8px !important;
}
.emoji-picker-react .active-category-indicator-wrapper .active-category-indicator {
display: none !important;
.emoji-picker-react
.active-category-indicator-wrapper
.active-category-indicator {
display: none !important;
}
.emoji-scroll-wrapper {
overflow-x: hidden !important;
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
overflow-x: hidden !important;
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
.emoji-scroll-wrapper::-webkit-scrollbar {
/* chrome */
display: none;
}
/* chrome */
display: none;
}

8
packages/admin-ui/ui/src/components/atoms/back-button/index.tsx
View File

@@ -1,5 +1,6 @@
import clsx from "clsx"
import { useNavigate } from "react-router-dom"
import { useTranslation } from "react-i18next"
import ArrowLeftIcon from "../../fundamentals/icons/arrow-left-icon"
type Props = {
@@ -8,7 +9,8 @@ type Props = {
className?: string
}
const BackButton = ({ path, label = "Go back", className }: Props) => {
const BackButton = ({ path, label, className }: Props) => {
const { t } = useTranslation()
const navigate = useNavigate()
return (
<button
@@ -19,7 +21,9 @@ const BackButton = ({ path, label = "Go back", className }: Props) => {
>
<div className="gap-x-xsmall text-grey-50 inter-grey-40 inter-small-semibold flex items-center">
<ArrowLeftIcon size={20} />
<span className="ml-1">{label}</span>
<span className="ml-1">
{label || t("back-button-go-back", "Go back")}
</span>
</div>
</button>
)

4
packages/admin-ui/ui/src/components/forms/product/organize-form/index.tsx
View File

@@ -2,14 +2,14 @@ import { Controller } from "react-hook-form"
import NestedMultiselect from "../../../../domain/categories/components/multiselect"
import {
FeatureFlag,
useFeatureFlag
useFeatureFlag,
} from "../../../../providers/feature-flag-provider"
import { Option } from "../../../../types/shared"
import { NestedForm } from "../../../../utils/nested-form"
import InputHeader from "../../../fundamentals/input-header"
import {
NextCreateableSelect,
NextSelect
NextSelect,
} from "../../../molecules/select/next-select"
import TagInput from "../../../molecules/tag-input"
import useOrganizeData from "./use-organize-data"

4
packages/admin-ui/ui/src/components/forms/product/thumbnail-form/index.tsx
View File

@@ -3,9 +3,7 @@ import { FormImage } from "../../../../types/shared"
import { NestedForm } from "../../../../utils/nested-form"
import FileUploadField from "../../../atoms/file-upload-field"
import TrashIcon from "../../../fundamentals/icons/trash-icon"
import Actionables, {
ActionType
} from "../../../molecules/actionables"
import Actionables, { ActionType } from "../../../molecules/actionables"
export type ThumbnailFormType = {
images: FormImage[]

26
packages/admin-ui/ui/src/components/molecules/sales-channels-display/index.tsx
View File

@@ -3,6 +3,7 @@ import { useAdminSalesChannels } from "medusa-react"
import React from "react"
import Tooltip from "../../atoms/tooltip"
import Badge from "../../fundamentals/badge"
import { Trans, useTranslation } from "react-i18next"
type Props = {
channels?: SalesChannel[]
@@ -11,7 +12,10 @@ type Props = {
const SalesChannelsDisplay = ({ channels = [] }: Props) => {
const { count } = useAdminSalesChannels()
const remainder = Math.max(channels.length - 3, 0)
const { t } = useTranslation()
const availableChannelsCount = channels.length ? channels.length : 0
const totalChannelsCount = count || 0
return (
<div className="gap-y-small flex flex-col">
{channels.length > 0 && (
@@ -41,13 +45,21 @@ const SalesChannelsDisplay = ({ channels = [] }: Props) => {
</div>
)}
<p className="inter-base-regular text-grey-50">
Available in{" "}
<span className="inter-base-semibold text-grey-90">
{channels.length ? channels.length : 0}
</span>{" "}
out of{" "}
<span className="inter-base-semibold text-grey-90">{count || 0}</span>{" "}
Sales Channels
<Trans
i18nKey="sales-channels-display-available-count"
availableChannelsCount={availableChannelsCount}
totalChannelsCount={totalChannelsCount}
>
Available in{" "}
<span className="inter-base-semibold text-grey-90">
{{ availableChannelsCount }}
</span>{" "}
out of{" "}
<span className="inter-base-semibold text-grey-90">
{{ totalChannelsCount }}
</span>{" "}
Sales Channels
</Trans>
</p>
</div>
)

0
packages/admin-ui/ui/src/components/molecules/tag-grid.tsx/index.tsx → packages/admin-ui/ui/src/components/molecules/tag-grid/index.tsx
View File

31
packages/admin-ui/ui/src/components/organisms/activity-drawer/index.tsx
View File

@@ -1,4 +1,5 @@
import React, { useEffect } from "react"
import { useTranslation } from "react-i18next"
import useOutsideClick from "../../../hooks/use-outside-click"
import { usePolling } from "../../../providers/polling-provider"
@@ -8,6 +9,7 @@ import SidedMouthFaceIcon from "../../fundamentals/icons/sided-mouth-face"
import BatchJobActivityList from "../batch-jobs-activity-list"
const ActivityDrawer = ({ onDismiss }) => {
const { t } = useTranslation()
const ref = React.useRef<HTMLDivElement>(null)
const { batchJobs, hasPollingError, refetch } = usePolling()
useOutsideClick(onDismiss, ref)
@@ -21,7 +23,9 @@ const ActivityDrawer = ({ onDismiss }) => {
ref={ref}
className="bg-grey-0 shadow-dropdown rounded-rounded fixed top-[64px] bottom-2 right-3 flex w-[400px] flex-col overflow-x-hidden rounded"
>
<div className="inter-large-semibold pt-7 pl-8 pb-1">Activity</div>
<div className="inter-large-semibold pt-7 pl-8 pb-1">
{t("activity-drawer-activity", "Activity")}
</div>
{!hasPollingError ? (
batchJobs ? (
@@ -37,33 +41,44 @@ const ActivityDrawer = ({ onDismiss }) => {
}
const EmptyActivityDrawer = () => {
const { t } = useTranslation()
return (
<div className="flex h-full w-full flex-col items-center justify-center p-4">
<SidedMouthFaceIcon size={36} />
<span className={"inter-large-semibold text-grey-90 mt-4"}>
It's quite in here...
{t("activity-drawer-no-notifications-title", "It's quiet in here...")}
</span>
<span className={"text-grey-60 inter-base-regular mt-4 text-center"}>
You don't have any notifications at the moment, but once you do they
will live here.
{t(
"activity-drawer-no-notifications-description",
"You don't have any notifications at the moment, but once you do they will live here."
)}
</span>
</div>
)
}
const ErrorActivityDrawer = () => {
const { t } = useTranslation()
return (
<div className="flex h-full w-full flex-col items-center justify-center p-4">
<SadFaceIcon size={36} />
<span className={"inter-large-semibold text-grey-90 mt-4"}>Oh no...</span>
<span className={"inter-large-semibold text-grey-90 mt-4"}>
{t("activity-drawer-error-title", "Oh no...")}
</span>
<span className={"text-grey-60 inter-base-regular mt-2 text-center"}>
Something went wrong while trying to fetch your notifications - We will
keep trying!
{t(
"activity-drawer-error-description",
"Something went wrong while trying to fetch your notifications - We will keep trying!"
)}
</span>
<div className="mt-4 flex items-center">
<Spinner size={"small"} variant={"secondary"} />
<span className="ml-2.5">Processing...</span>
<span className="ml-2.5">
{t("activity-drawer-processing", "Processing...")}
</span>
</div>
</div>
)

33
packages/admin-ui/ui/src/components/organisms/analytics-config-form/index.tsx
View File

@@ -1,6 +1,7 @@
import clsx from "clsx"
import { useEffect } from "react"
import { Controller, useWatch } from "react-hook-form"
import { useTranslation } from "react-i18next"
import { NestedForm } from "../../../utils/nested-form"
import Switch from "../../atoms/switch"
import InfoIcon from "../../fundamentals/icons/info-icon"
@@ -18,6 +19,7 @@ type Props = {
const AnalyticsConfigForm = ({ form, compact }: Props) => {
const { control, setValue, path } = form
const { t } = useTranslation()
const watchOptOut = useWatch({
control,
@@ -41,13 +43,14 @@ const AnalyticsConfigForm = ({ form, compact }: Props) => {
<div className="gap-y-2xsmall flex flex-1 flex-col">
<div className="flex items-center">
<h2 className="inter-base-semibold mr-2">
Anonymize my usage data{" "}
{t("analytics-config-form-title", "Anonymize my usage data")}
</h2>
{compact && (
<Tooltip
content="You can choose to anonymize your usage data. If this option is
selected, we will not collect your personal information, such as
your name and email address."
content={t(
"analytics-config-form-description",
"You can choose to anonymize your usage data. If this option is selected, we will not collect your personal information, such as your name and email address."
)}
side="top"
>
<InfoIcon size="18px" color={"#889096"} />
@@ -56,9 +59,10 @@ const AnalyticsConfigForm = ({ form, compact }: Props) => {
</div>
{!compact && (
<p className="inter-base-regular text-grey-50">
You can choose to anonymize your usage data. If this option is
selected, we will not collect your personal information, such as
your name and email address.
{t(
"analytics-config-form-description",
"You can choose to anonymize your usage data. If this option is selected, we will not collect your personal information, such as your name and email address."
)}
</p>
)}
</div>
@@ -80,11 +84,17 @@ const AnalyticsConfigForm = ({ form, compact }: Props) => {
<div className="gap-y-2xsmall flex flex-1 flex-col">
<div className="flex items-center">
<h2 className="inter-base-semibold mr-2">
Opt out of sharing my usage data
{t(
"analytics-config-form-opt-out",
"Opt out of sharing my usage data"
)}
</h2>
{compact && (
<Tooltip
content="You can always opt out of sharing your usage data at any time."
content={t(
"analytics-config-form-opt-out-later",
"You can always opt out of sharing your usage data at any time."
)}
side="top"
>
<InfoIcon size="18px" color={"#889096"} />
@@ -93,7 +103,10 @@ const AnalyticsConfigForm = ({ form, compact }: Props) => {
</div>
{!compact && (
<p className="inter-base-regular text-grey-50">
You can always opt out of sharing your usage data at any time.
{t(
"analytics-config-form-opt-out-later",
"You can always opt out of sharing your usage data at any time."
)}
</p>
)}
</div>

40
packages/admin-ui/ui/src/components/organisms/analytics-preferences/index.tsx
View File

@@ -1,5 +1,6 @@
import clsx from "clsx"
import { useForm, useWatch } from "react-hook-form"
import { useTranslation } from "react-i18next"
import useNotification from "../../../hooks/use-notification"
import { useAnalytics } from "../../../providers/analytics-provider"
import { useAdminCreateAnalyticsConfig } from "../../../services/analytics"
@@ -18,6 +19,7 @@ type AnalyticsPreferenceFormType = {
}
const AnalyticsPreferencesModal = () => {
const { t } = useTranslation()
const notification = useNotification()
const { mutate, isLoading } = useAdminCreateAnalyticsConfig()
@@ -56,8 +58,11 @@ const AnalyticsPreferencesModal = () => {
mutate(config, {
onSuccess: () => {
notification(
"Success",
"Your preferences were successfully updated",
t("analytics-preferences-success", "Success"),
t(
"analytics-preferences-your-preferences-were-successfully-updated",
"Your preferences were successfully updated"
),
"success"
)
@@ -68,7 +73,11 @@ const AnalyticsPreferencesModal = () => {
setSubmittingConfig(false)
},
onError: (err) => {
notification("Error", getErrorMessage(err), "error")
notification(
t("analytics-preferences-error", "Error"),
getErrorMessage(err),
"error"
)
setSubmittingConfig(false)
},
})
@@ -80,27 +89,29 @@ const AnalyticsPreferencesModal = () => {
<div className="flex flex-col items-center">
<div className="mt-5xlarge flex w-full max-w-[664px] flex-col">
<h1 className="inter-xlarge-semibold mb-large">
Help us get better
{t(
"analytics-preferences-help-us-get-better",
"Help us get better"
)}
</h1>
<p className="text-grey-50">
To create the most compelling e-commerce experience we would like
to gain insights in how you use Medusa. User insights allow us to
build a better, more engaging, and more usable products. We only
collect data for product improvements. Read what data we gather in
our{" "}
{t(
"analytics-preferences-disclaimer",
"To create the most compelling e-commerce experience we would like to gain insights in how you use Medusa. User insights allow us to build a better, more engaging, and more usable products. We only collect data for product improvements. Read what data we gather in our"
)}{" "}
<a
href="https://docs.medusajs.com/usage"
rel="noreferrer noopener"
target="_blank"
className="text-violet-60"
>
documentation
{t("analytics-preferences-documentation", "documentation")}
</a>
.
</p>
<div className="mt-xlarge gap-y-xlarge flex flex-col">
<InputField
label="Email"
label={"Email"}
placeholder="you@company.com"
disabled={watchOptOut || watchAnonymize}
className={clsx("transition-opacity", {
@@ -108,7 +119,10 @@ const AnalyticsPreferencesModal = () => {
})}
{...register("email", {
pattern: {
message: "Please enter a valid email",
message: t(
"analytics-preferences-please-enter-a-valid-email",
"Please enter a valid email"
),
value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
},
})}
@@ -123,7 +137,7 @@ const AnalyticsPreferencesModal = () => {
loading={isLoading}
onClick={onSubmit}
>
Continue
{t("analytics-preferences-continue", "Continue")}
</Button>
</div>
</div>

13
packages/admin-ui/ui/src/components/organisms/currency-input/index.tsx
View File

@@ -18,6 +18,7 @@ import PlusIcon from "../../fundamentals/icons/plus-icon"
import InputHeader from "../../fundamentals/input-header"
import Input from "../../molecules/input"
import Select from "../../molecules/select"
import { useTranslation } from "react-i18next"
type CurrencyInputProps = {
currencyCodes?: string[]
@@ -74,6 +75,7 @@ const Root: React.FC<CurrencyInputProps> = ({
label: code.toUpperCase(),
value: code,
})) ?? []
const { t } = useTranslation()
const [selectedCurrency, setSelectedCurrency] = useState<
CurrencyType | undefined
@@ -132,7 +134,7 @@ const Root: React.FC<CurrencyInputProps> = ({
{!readOnly ? (
<Select
enableSearch
label="Currency"
label={t("currency-input-currency", "Currency")}
value={value}
onChange={onCurrencyChange}
options={options}
@@ -140,7 +142,7 @@ const Root: React.FC<CurrencyInputProps> = ({
/>
) : (
<Input
label="Currency"
label={t("currency-input-currency", "Currency")}
value={value?.label}
readOnly
className="pointer-events-none"
@@ -172,6 +174,8 @@ const Amount = forwardRef<HTMLInputElement, AmountInputProps>(
}: AmountInputProps,
ref
) => {
const { t } = useTranslation()
const { currencyInfo } = useContext(CurrencyContext)
const [invalid, setInvalid] = useState<boolean>(false)
const [formattedValue, setFormattedValue] = useState<string | undefined>(
@@ -250,7 +254,10 @@ const Amount = forwardRef<HTMLInputElement, AmountInputProps>(
<Tooltip
open={invalid}
side={"top"}
content={invalidMessage || "Amount is not valid"}
content={
invalidMessage ||
t("currency-input-amount-is-not-valid", "Amount is not valid")
}
>
<span className="inter-base-regular text-grey-40 mr-xsmall">
{currencyInfo.symbol_native}

29
packages/admin-ui/ui/src/components/organisms/delete-prompt.tsx
View File

@@ -1,4 +1,5 @@
import React, { useState } from "react"
import { useTranslation } from "react-i18next"
import useNotification from "../../hooks/use-notification"
import { getErrorMessage } from "../../utils/error-messages"
@@ -16,14 +17,15 @@ type DeletePromptProps = {
}
const DeletePrompt: React.FC<DeletePromptProps> = ({
heading = "Are you sure you want to delete?",
heading,
text = "",
successText = "Delete successful",
cancelText = "No, cancel",
confirmText = "Yes, remove",
successText,
cancelText,
confirmText,
handleClose,
onDelete,
}) => {
const { t } = useTranslation()
const notification = useNotification()
const [isLoading, setIsLoading] = useState(false)
@@ -34,7 +36,12 @@ const DeletePrompt: React.FC<DeletePromptProps> = ({
onDelete()
.then(() => {
if (successText) {
notification("Success", successText, "success")
notification(
t("organisms-success", "Success"),
successText ||
t("organisms-delete-successful", "Delete successful"),
"success"
)
}
})
.catch((err) => notification("Error", getErrorMessage(err), "error"))
@@ -49,7 +56,13 @@ const DeletePrompt: React.FC<DeletePromptProps> = ({
<Modal.Body>
<Modal.Content>
<div className="flex flex-col">
<span className="inter-large-semibold">{heading}</span>
<span className="inter-large-semibold">
{heading ||
t(
"organisms-are-you-sure-you-want-to-delete",
"Are you sure you want to delete?"
)}
</span>
<span className="inter-base-regular text-grey-50 mt-1">{text}</span>
</div>
</Modal.Content>
@@ -61,7 +74,7 @@ const DeletePrompt: React.FC<DeletePromptProps> = ({
size="small"
onClick={handleClose}
>
{cancelText}
{cancelText || t("organisms-no-cancel", "No, cancel")}
</Button>
<Button
loading={isLoading}
@@ -71,7 +84,7 @@ const DeletePrompt: React.FC<DeletePromptProps> = ({
onClick={handleSubmit}
disabled={isLoading}
>
{confirmText}
{confirmText || t("organisms-yes-remove", "Yes, remove")}
</Button>
</div>
</Modal.Footer>

12
packages/admin-ui/ui/src/components/organisms/details-collapsible/index.tsx
View File

@@ -1,6 +1,7 @@
import * as RadixCollapsible from "@radix-ui/react-collapsible"
import clsx from "clsx"
import React, { useState } from "react"
import { useTranslation } from "react-i18next"
import ArrowDownIcon from "../../fundamentals/icons/arrow-down-icon"
import ArrowUpIcon from "../../fundamentals/icons/arrow-up-icon"
@@ -17,10 +18,19 @@ const DetailsCollapsible = ({
contentProps,
children,
}: DetailsCollapsibleProps) => {
const { t } = useTranslation()
const [open, setOpen] = useState(false)
const Icon = open ? ArrowUpIcon : ArrowDownIcon
const label = open ? "Hide additional details" : "Show additional details"
const label = open
? t(
"details-collapsible-hide-additional-details",
"Hide additional details"
)
: t(
"details-collapsible-show-additional-details",
"Show additional details"
)
return (
<RadixCollapsible.Root

42
packages/admin-ui/ui/src/components/organisms/edit-user-modal/index.tsx
View File

@@ -2,6 +2,7 @@ import { User } from "@medusajs/medusa"
import { useAdminUpdateUser } from "medusa-react"
import React, { useEffect } from "react"
import { useForm } from "react-hook-form"
import { useTranslation } from "react-i18next"
import useNotification from "../../../hooks/use-notification"
import { getErrorMessage } from "../../../utils/error-messages"
import FormValidator from "../../../utils/form-validator"
@@ -33,6 +34,7 @@ const EditUserModal: React.FC<EditUserModalProps> = ({
formState: { errors },
} = useForm<EditUserModalFormData>()
const notification = useNotification()
const { t } = useTranslation()
useEffect(() => {
reset(mapUser(user))
@@ -41,11 +43,19 @@ const EditUserModal: React.FC<EditUserModalProps> = ({
const onSubmit = (data: EditUserModalFormData) => {
mutate(data, {
onSuccess: () => {
notification("Success", `User was updated`, "success")
notification(
t("edit-user-modal-success", "Success"),
t("edit-user-modal-user-was-updated", "User was updated"),
"success"
)
onSuccess()
},
onError: (error) => {
notification("Error", getErrorMessage(error), "error")
notification(
t("edit-user-modal-error", "Error"),
getErrorMessage(error),
"error"
)
},
onSettled: () => {
handleClose()
@@ -58,13 +68,18 @@ const EditUserModal: React.FC<EditUserModalProps> = ({
<form onSubmit={handleSubmit(onSubmit)}>
<Modal.Body>
<Modal.Header handleClose={handleClose}>
<span className="inter-xlarge-semibold">Edit User</span>
<span className="inter-xlarge-semibold">
{t("edit-user-modal-edit-user", "Edit User")}
</span>
</Modal.Header>
<Modal.Content>
<div className="gap-large mb-base grid w-full grid-cols-2">
<InputField
label="First Name"
placeholder="First name..."
label={t("edit-user-modal-first-name-label", "First Name")}
placeholder={t(
"edit-user-modal-first-name-placeholder",
"First name..."
)}
required
{...register("first_name", {
required: FormValidator.required("First name"),
@@ -74,8 +89,11 @@ const EditUserModal: React.FC<EditUserModalProps> = ({
errors={errors}
/>
<InputField
label="Last Name"
placeholder="Last name..."
label={t("edit-user-modal-last-name-label", "Last Name")}
placeholder={t(
"edit-user-modal-last-name-placeholder",
"Last name..."
)}
required
{...register("last_name", {
required: FormValidator.required("Last name"),
@@ -85,7 +103,11 @@ const EditUserModal: React.FC<EditUserModalProps> = ({
errors={errors}
/>
</div>
<InputField label="Email" disabled value={user.email} />
<InputField
label={t("edit-user-modal-email", "Email")}
disabled
value={user.email}
/>
</Modal.Content>
<Modal.Footer>
<div className="flex w-full justify-end">
@@ -95,7 +117,7 @@ const EditUserModal: React.FC<EditUserModalProps> = ({
onClick={handleClose}
className="mr-2"
>
Cancel
{t("edit-user-modal-cancel", "Cancel")}
</Button>
<Button
loading={isLoading}
@@ -103,7 +125,7 @@ const EditUserModal: React.FC<EditUserModalProps> = ({
variant="primary"
size="small"
>
Save
{t("edit-user-modal-save", "Save")}
</Button>
</div>
</Modal.Footer>

81
packages/admin-ui/ui/src/components/organisms/error-boundary/index.tsx
View File

@@ -1,9 +1,11 @@
import { AxiosError } from "axios"
import React, { ErrorInfo } from "react"
import { analyticsOptIn } from "../../../services/analytics"
import { Translation } from "react-i18next"
import Button from "../../fundamentals/button"
import { WRITE_KEY } from "../../../constants/analytics"
import { AnalyticsBrowser } from "@segment/analytics-next"
import { TFunction } from "i18next"
type State = {
hasError: boolean
@@ -16,7 +18,7 @@ type Props = {
}
// Analytics instance used for tracking errors
let analyticsInstance: ReturnType<typeof AnalyticsBrowser.load> | undefined;
let analyticsInstance: ReturnType<typeof AnalyticsBrowser.load> | undefined
const analytics = () => {
if (!analyticsInstance) {
@@ -75,10 +77,14 @@ class ErrorBoundary extends React.Component<Props, State> {
</p>
)}
<h1 className="inter-xlarge-semibold mb-xsmall">
{errorMessage(this.state.status)}
<Translation>
{(t) => errorMessage(t, this.state.status)}
</Translation>
</h1>
<p className="inter-base-regular text-grey-50">
{errorDescription(this.state.status)}
<Translation>
{(t) => errorDescription(t, this.state.status)}
</Translation>
</p>
</div>
@@ -88,7 +94,11 @@ class ErrorBoundary extends React.Component<Props, State> {
variant="primary"
onClick={this.dismissError}
>
Back to dashboard
<Translation>
{(t) =>
t("error-boundary-back-to-dashboard", "Back to dashboard")
}
</Translation>
</Button>
</div>
</div>
@@ -112,43 +122,72 @@ const shouldTrackEvent = async (error: Error) => {
return false
}
return await analyticsOptIn();
return await analyticsOptIn()
}
const errorMessage = (status?: number) => {
const defaultMessage = "An unknown error occured"
const errorMessage = (t: TFunction, status?: number) => {
const defaultMessage = t(
"error-boundary-an-unknown-error-occured",
"An unknown error occured"
)
if (!status) {
return defaultMessage
}
const message = {
400: "Bad request",
401: "You are not logged in",
403: "You do not have permission perform this action",
404: "Page was not found",
500: "An unknown server error occured",
503: "Server is currently unavailable",
400: t("error-boundary-bad-request", "Bad request"),
401: t("error-boundary-you-are-not-logged-in", "You are not logged in"),
403: t(
"error-boundary-you-do-not-have-permission-perform-this-action",
"You do not have permission perform this action"
),
404: t("error-boundary-page-was-not-found", "Page was not found"),
500: t(
"error-boundary-an-unknown-server-error-occured",
"An unknown server error occured"
),
503: t("error-boundary-503", "Server is currently unavailable"),
}[status]
return message || defaultMessage
}
const errorDescription = (status?: number) => {
const defaultDescription =
const errorDescription = (t: TFunction, status?: number) => {
const defaultDescription = t(
"error-boundary-500",
"An error occurred with unspecified causes, this is most likely due to a techinical issue on our end. Please try refreshing the page. If the issue keeps happening, contact your administrator."
)
if (!status) {
return defaultDescription
}
const description = {
400: "The request was malformed, fix your request and please try again.",
401: "You are not logged in, please log in to proceed.",
403: "You do not have permission perform this action, if you think this is a mistake, contact your administrator.",
404: "The page you have requested was not found, please check the URL and try again.",
500: "The server was not able to handle your request, this is mostly likely due to a techinical issue on our end. Please try again. If the issue keeps happening, contact your administrator.",
503: "The server is temporarily unavailable, and your request could not be processed. Please try again later. If the issue keeps happening, contact your administrator.",
400: t(
"error-boundary-400",
"The request was malformed, fix your request and please try again."
),
401: t(
"error-boundary-401",
"You are not logged in, please log in to proceed."
),
403: t(
"error-boundary-403",
"You do not have permission perform this action, if you think this is a mistake, contact your administrator."
),
404: t(
"error-boundary-404",
"The page you have requested was not found, please check the URL and try again."
),
500: t(
"error-boundary-500-2",
"The server was not able to handle your request, this is mostly likely due to a techinical issue on our end. Please try again. If the issue keeps happening, contact your administrator."
),
503: t(
"error-boundary-503-2",
"The server is temporarily unavailable, and your request could not be processed. Please try again later. If the issue keeps happening, contact your administrator."
),
}[status]
return description || defaultDescription

8
packages/admin-ui/ui/src/components/organisms/export-modal/index.tsx
View File

@@ -1,4 +1,5 @@
import React from "react"
import { useTranslation } from "react-i18next"
import Button from "../../fundamentals/button"
import Modal from "../../molecules/modal"
@@ -15,6 +16,7 @@ const ExportModal: React.FC<ExportModalProps> = ({
loading,
onSubmit,
}) => {
const { t } = useTranslation()
return (
<Modal handleClose={handleClose}>
<Modal.Body>
@@ -30,7 +32,7 @@ const ExportModal: React.FC<ExportModalProps> = ({
overview.
</div> */}
<div className="inter-small-regular text-grey-50 mb-4 flex">
Initialize an export of your data
{t("export-modal-title", "Initialize an export of your data")}
</div>
</Modal.Content>
<Modal.Footer>
@@ -41,7 +43,7 @@ const ExportModal: React.FC<ExportModalProps> = ({
onClick={handleClose}
className="mr-2"
>
Cancel
{t("export-modal-cancel", "Cancel")}
</Button>
<Button
loading={loading}
@@ -50,7 +52,7 @@ const ExportModal: React.FC<ExportModalProps> = ({
size="small"
onClick={onSubmit}
>
Export
{t("export-modal-export", "Export")}
</Button>
</div>
</Modal.Footer>

6
packages/admin-ui/ui/src/components/organisms/file-upload-modal/index.tsx
View File

@@ -1,4 +1,5 @@
import React from "react"
import { useTranslation } from "react-i18next"
import FileUploadField from "../../atoms/file-upload-field"
import Modal from "../../molecules/modal"
@@ -13,11 +14,14 @@ const FileUploadModal: React.FC<FileUploadModalProps> = ({
filetypes,
setFiles,
}) => {
const { t } = useTranslation()
return (
<Modal handleClose={handleClose}>
<Modal.Body>
<Modal.Header handleClose={handleClose}>
<span className="inter-xlarge-semibold">Upload a new photo</span>
<span className="inter-xlarge-semibold">
{t("file-upload-modal-upload-a-new-photo", "Upload a new photo")}
</span>
</Modal.Header>
<Modal.Content>
<div className="h-96">

19
packages/admin-ui/ui/src/components/organisms/gift-card-banner/index.tsx
View File

@@ -1,4 +1,5 @@
import React, { useMemo } from "react"
import { useTranslation } from "react-i18next"
import { normalizeAmount } from "../../../utils/prices"
import EditIcon from "../../fundamentals/icons/edit-icon"
import TrashIcon from "../../fundamentals/icons/trash-icon"
@@ -6,7 +7,7 @@ import UnpublishIcon from "../../fundamentals/icons/unpublish-icon"
import StatusIndicator from "../../fundamentals/status-indicator"
import { ActionType } from "../../molecules/actionables"
import BannerCard from "../../molecules/banner-card"
import TagGrid from "../../molecules/tag-grid.tsx"
import TagGrid from "../../molecules/tag-grid"
type GiftCardVariant = {
prices: {
@@ -38,19 +39,23 @@ const GiftCardBanner: React.FC<GiftCardBannerProps> = ({
onUnpublish,
onDelete,
}) => {
const { t } = useTranslation()
const actions: ActionType[] = [
{
label: "Edit",
label: t("gift-card-banner-edit", "Edit"),
onClick: onEdit,
icon: <EditIcon size={16} />,
},
{
label: status === "published" ? "Unpublish" : "Publish",
label:
status === "published"
? t("gift-card-banner-unpublish", "Unpublish")
: t("gift-card-banner-publish", "Publish"),
onClick: onUnpublish,
icon: <UnpublishIcon size={16} />,
},
{
label: "Delete",
label: t("gift-card-banner-delete", "Delete"),
onClick: onDelete,
icon: <TrashIcon size={16} />,
variant: "danger",
@@ -84,7 +89,11 @@ const GiftCardBanner: React.FC<GiftCardBannerProps> = ({
<TagGrid tags={denominations} badgeVariant="default" />
<StatusIndicator
variant={status === "published" ? "success" : "danger"}
title={status === "published" ? "Published" : "Unpublished"}
title={
status === "published"
? t("gift-card-banner-published", "Published")
: t("gift-card-banner-unpublished", "Unpublished")
}
/>
</div>
</BannerCard.Footer>

37
packages/admin-ui/ui/src/components/organisms/gift-card-denominations-section/add-denominations-modal.tsx
View File

@@ -2,6 +2,7 @@ import { Product } from "@medusajs/medusa"
import { useAdminCreateVariant, useAdminStore } from "medusa-react"
import { useCallback, useMemo } from "react"
import { useForm } from "react-hook-form"
import { useTranslation } from "react-i18next"
import useNotification from "../../../hooks/use-notification"
import { getErrorMessage } from "../../../utils/error-messages"
import { nestedForm } from "../../../utils/nested-form"
@@ -31,6 +32,7 @@ type AddDenominationModalFormType = {
}
const AddDenominationModal = ({ open, onClose, giftCard }: Props) => {
const { t } = useTranslation()
const { mutate, isLoading: isMutating } = useAdminCreateVariant(giftCard.id)
const { store } = useAdminStore()
@@ -114,8 +116,14 @@ const AddDenominationModal = ({ open, onClose, giftCard }: Props) => {
mutate(payload, {
onSuccess: () => {
notification(
"Denomination added",
"A new denomination was successfully added",
t(
"gift-card-denominations-section-denomination-added",
"Denomination added"
),
t(
"gift-card-denominations-section-a-new-denomination-was-successfully-added",
"A new denomination was successfully added"
),
"success"
)
handleClose()
@@ -124,13 +132,20 @@ const AddDenominationModal = ({ open, onClose, giftCard }: Props) => {
const errorMessage = () => {
// @ts-ignore
if (error.response?.data?.type === "duplicate_error") {
return `A denomination with that default value already exists`
return t(
"gift-card-denominations-section-a-denomination-with-that-default-value-already-exists",
"A denomination with that default value already exists"
)
} else {
return getErrorMessage(error)
}
}
notification("Error", errorMessage(), "error")
notification(
t("gift-card-denominations-section-error", "Error"),
errorMessage(),
"error"
)
},
})
})
@@ -139,7 +154,12 @@ const AddDenominationModal = ({ open, onClose, giftCard }: Props) => {
<Modal open={open} handleClose={handleClose}>
<Modal.Body>
<Modal.Header handleClose={handleClose}>
<h1 className="inter-xlarge-semibold">Add Denomination</h1>
<h1 className="inter-xlarge-semibold">
{t(
"gift-card-denominations-section-add-denomination",
"Add Denomination"
)}
</h1>
</Modal.Header>
<form onSubmit={onSubmit}>
<Modal.Content>
@@ -153,7 +173,7 @@ const AddDenominationModal = ({ open, onClose, giftCard }: Props) => {
type="button"
onClick={handleClose}
>
Cancel
{t("gift-card-denominations-section-cancel", "Cancel")}
</Button>
<Button
variant="primary"
@@ -162,7 +182,10 @@ const AddDenominationModal = ({ open, onClose, giftCard }: Props) => {
disabled={isMutating || !isDirty}
loading={isMutating}
>
Save and close
{t(
"gift-card-denominations-section-save-and-close",
"Save and close"
)}
</Button>
</div>
</Modal.Footer>

32
packages/admin-ui/ui/src/components/organisms/gift-card-denominations-section/edit-denominations-modal.tsx
View File

@@ -7,6 +7,7 @@ import {
} from "medusa-react"
import { useCallback, useEffect } from "react"
import { useForm } from "react-hook-form"
import { useTranslation } from "react-i18next"
import useNotification from "../../../hooks/use-notification"
import { getErrorMessage } from "../../../utils/error-messages"
import { nestedForm } from "../../../utils/nested-form"
@@ -31,6 +32,7 @@ const EditDenominationsModal = ({
onClose,
open,
}: EditDenominationsModalProps) => {
const { t } = useTranslation()
const { store } = useAdminStore()
const { mutate, isLoading } = useAdminUpdateVariant(denomination.product_id)
@@ -91,15 +93,25 @@ const EditDenominationsModal = ({
{
onSuccess: () => {
notification(
"Denomination updated",
"A new denomination was successfully updated",
t(
"gift-card-denominations-section-denomination-updated",
"Denomination updated"
),
t(
"gift-card-denominations-section-a-new-denomination-was-successfully-updated",
"A new denomination was successfully updated"
),
"success"
)
queryClient.invalidateQueries(adminProductKeys.all)
handleClose()
},
onError: (error) => {
notification("Error", getErrorMessage(error), "error")
notification(
t("gift-card-denominations-section-error", "Error"),
getErrorMessage(error),
"error"
)
},
}
)
@@ -109,7 +121,12 @@ const EditDenominationsModal = ({
<Modal open={open} handleClose={handleClose}>
<Modal.Body>
<Modal.Header handleClose={handleClose}>
<h1 className="inter-xlarge-semibold">Edit Denomination</h1>
<h1 className="inter-xlarge-semibold">
{t(
"gift-card-denominations-section-edit-denomination",
"Edit Denomination"
)}
</h1>
</Modal.Header>
<form onSubmit={onSubmit}>
<Modal.Content>
@@ -123,7 +140,7 @@ const EditDenominationsModal = ({
type="button"
onClick={handleClose}
>
Cancel
{t("gift-card-denominations-section-cancel", "Cancel")}
</Button>
<Button
variant="primary"
@@ -132,7 +149,10 @@ const EditDenominationsModal = ({
loading={isLoading}
disabled={!isDirty || isLoading}
>
Save and close
{t(
"gift-card-denominations-section-save-and-close",
"Save and close"
)}
</Button>
</div>
</Modal.Footer>

12
packages/admin-ui/ui/src/components/organisms/gift-card-denominations-section/index.tsx
View File

@@ -1,4 +1,5 @@
import { Product } from "@medusajs/medusa"
import { useTranslation } from "react-i18next"
import useToggleState from "../../../hooks/use-toggle-state"
import PlusIcon from "../../fundamentals/icons/plus-icon"
import Section from "../section"
@@ -12,6 +13,7 @@ type GiftCardDenominationsSectionProps = {
const GiftCardDenominationsSection = ({
giftCard,
}: GiftCardDenominationsSectionProps) => {
const { t } = useTranslation()
const {
state: addDenomination,
close: closeAddDenomination,
@@ -21,11 +23,17 @@ const GiftCardDenominationsSection = ({
return (
<>
<Section
title="Denominations"
title={t(
"gift-card-denominations-section-denominations",
"Denominations"
)}
forceDropdown
actions={[
{
label: "Add Denomination",
label: t(
"gift-card-denominations-section-add-denomination",
"Add Denomination"
),
onClick: openAddDenomination,
icon: <PlusIcon size={20} />,
},

51
packages/admin-ui/ui/src/components/organisms/gift-card-denominations-section/use-denominations-columns.tsx
View File

@@ -2,6 +2,7 @@ import { MoneyAmount, ProductVariant } from "@medusajs/medusa"
import { createColumnHelper } from "@tanstack/react-table"
import { useAdminDeleteVariant, useAdminStore } from "medusa-react"
import { useMemo } from "react"
import { useTranslation } from "react-i18next"
import useImperativeDialog from "../../../hooks/use-imperative-dialog"
import useNotification from "../../../hooks/use-notification"
import useToggleState from "../../../hooks/use-toggle-state"
@@ -17,6 +18,7 @@ const columnHelper = createColumnHelper<ProductVariant>()
export const useDenominationColumns = () => {
const { store } = useAdminStore()
const { t } = useTranslation()
const columns = useMemo(() => {
if (!store) {
@@ -27,7 +29,10 @@ export const useDenominationColumns = () => {
return [
columnHelper.display({
header: "Denomination",
header: t(
"gift-card-denominations-section-denomination",
"Denomination"
),
id: "denomination",
cell: ({ row }) => {
const defaultDenomination = row.original.prices.find(
@@ -50,7 +55,10 @@ export const useDenominationColumns = () => {
},
}),
columnHelper.display({
header: "In other currencies",
header: t(
"gift-card-denominations-section-in-other-currencies",
"In other currencies"
),
id: "other_currencies",
cell: ({ row }) => {
const otherCurrencies = row.original.prices.filter(
@@ -98,7 +106,13 @@ export const useDenominationColumns = () => {
</ul>
}
>
<span className="text-grey-50 cursor-default">{`, and ${remainder.length} more`}</span>
<span className="text-grey-50 cursor-default">
{t(
"gift-card-denominations-section-and-more",
", and {{count}} more",
{ count: remainder.length }
)}
</span>
</Tooltip>
)}
</p>
@@ -118,6 +132,7 @@ export const useDenominationColumns = () => {
}
const Actions = ({ original }: { original: ProductVariant }) => {
const { t } = useTranslation()
const { state, open, close } = useToggleState()
const { mutateAsync } = useAdminDeleteVariant(original.product_id)
@@ -127,21 +142,37 @@ const Actions = ({ original }: { original: ProductVariant }) => {
const onDelete = async () => {
const shouldDelete = await dialog({
heading: "Delete denomination",
text: "Are you sure you want to delete this denomination?",
heading: t(
"gift-card-denominations-section-delete-denomination",
"Delete denomination"
),
text: t(
"gift-card-denominations-section-confirm-delete",
"Are you sure you want to delete this denomination?"
),
})
if (shouldDelete) {
mutateAsync(original.id, {
onSuccess: () => {
notification(
"Denomination deleted",
"Denomination was successfully deleted",
t(
"gift-card-denominations-section-denomination-deleted",
"Denomination deleted"
),
t(
"gift-card-denominations-section-denomination-was-successfully-deleted",
"Denomination was successfully deleted"
),
"success"
)
},
onError: (error) => {
notification("Error", getErrorMessage(error), "error")
notification(
t("gift-card-denominations-section-error", "Error"),
getErrorMessage(error),
"error"
)
},
})
}
@@ -149,12 +180,12 @@ const Actions = ({ original }: { original: ProductVariant }) => {
const actions: ActionType[] = [
{
label: "Edit",
label: t("gift-card-denominations-section-edit", "Edit"),
onClick: open,
icon: <EditIcon size={20} />,
},
{
label: "Delete",
label: t("gift-card-denominations-section-delete", "Delete"),
onClick: onDelete,
icon: <TrashIcon size={20} />,
variant: "danger",

35
packages/admin-ui/ui/src/components/organisms/help-dialog/index.tsx
View File

@@ -1,4 +1,5 @@
import React, { useState } from "react"
import { useTranslation } from "react-i18next"
import Button from "../../fundamentals/button"
import DiscordIcon from "../../fundamentals/icons/discord-icon"
import InputField from "../../molecules/input"
@@ -12,6 +13,7 @@ type MailDialogProps = {
}
const MailDialog = ({ open, onClose }: MailDialogProps) => {
const { t } = useTranslation()
const [subject, setSubject] = useState("")
const [body, setBody] = useState("")
const [link, setLink] = useState("mailto:support@medusajs.com")
@@ -30,21 +32,30 @@ const MailDialog = ({ open, onClose }: MailDialogProps) => {
<Dialog.Content className="bg-grey-0 shadow-dropdown rounded-rounded fixed top-[64px] bottom-2 right-3 flex w-[400px] flex-col justify-between p-8">
<div>
<Dialog.Title className="inter-xlarge-semibold mb-1">
How can we help?
{t("help-dialog-how-can-we-help", "How can we help?")}
</Dialog.Title>
<Dialog.Description className="inter-small-regular text-grey-50 mb-6">
We usually respond in a few hours
{t(
"help-dialog-we-usually-respond-in-a-few-hours",
"We usually respond in a few hours"
)}
</Dialog.Description>
<InputField
label={"Subject"}
label={t("help-dialog-subject", "Subject")}
value={subject}
className="mb-4"
placeholder="What is it about?..."
placeholder={t(
"help-dialog-what-is-it-about",
"What is it about?..."
)}
onChange={(e) => setSubject(e.target.value)}
/>
<TextArea
label={"How can we help?"}
placeholder="Write a message..."
label={t("help-dialog-how-can-we-help", "How can we help?")}
placeholder={t(
"help-dialog-write-a-message",
"Write a message..."
)}
value={body}
onChange={(e) => {
setBody(e.target.value)
@@ -65,15 +76,21 @@ const MailDialog = ({ open, onClose }: MailDialogProps) => {
<DiscordIcon size={24} />
</span>
<p className="text-grey-40 inter-small-regular text-center leading-6">
Feel free to join our community of
{t(
"help-dialog-feel-free-to-join-our-community-of",
"Feel free to join our community of"
)}
<br />
merchants and e-commerce developers
{t(
"help-dialog-merchants-and-e-commerce-developers",
"merchants and e-commerce developers"
)}
</p>
</div>
</a>
<a className="w-full" href={link}>
<Button variant="primary" size="large" className="w-full">
Send a message
{t("help-dialog-send-a-message", "Send a message")}
</Button>
</a>
</div>

45
packages/admin-ui/ui/src/components/organisms/invite-modal/index.tsx
View File

@@ -1,6 +1,7 @@
import { useAdminCreateInvite } from "medusa-react"
import React from "react"
import { Controller, useForm } from "react-hook-form"
import { useTranslation } from "react-i18next"
import useNotification from "../../../hooks/use-notification"
import { Role } from "../../../types/shared"
import { getErrorMessage } from "../../../utils/error-messages"
@@ -20,6 +21,7 @@ type InviteModalFormData = {
const InviteModal: React.FC<InviteModalProps> = ({ handleClose }) => {
const notification = useNotification()
const { t } = useTranslation()
const { mutate, isLoading } = useAdminCreateInvite()
@@ -33,20 +35,34 @@ const InviteModal: React.FC<InviteModalProps> = ({ handleClose }) => {
},
{
onSuccess: () => {
notification("Success", `Invitation sent to ${data.user}`, "success")
notification(
t("invite-modal-success", "Success"),
t(
"invite-modal-invitation-sent-to",
"Invitation sent to {{user}}",
{
user: data.user,
}
),
"success"
)
handleClose()
},
onError: (error) => {
notification("Error", getErrorMessage(error), "error")
notification(
t("invite-modal-error", "Error"),
getErrorMessage(error),
"error"
)
},
}
)
}
const roleOptions: Role[] = [
{ value: "member", label: "Member" },
{ value: "admin", label: "Admin" },
{ value: "developer", label: "Developer" },
{ value: "member", label: t("invite-modal-member", "Member") },
{ value: "admin", label: t("invite-modal-admin", "Admin") },
{ value: "developer", label: t("invite-modal-developer", "Developer") },
]
return (
@@ -54,12 +70,14 @@ const InviteModal: React.FC<InviteModalProps> = ({ handleClose }) => {
<form onSubmit={handleSubmit(onSubmit)}>
<Modal.Body>
<Modal.Header handleClose={handleClose}>
<span className="inter-xlarge-semibold">Invite Users</span>
<span className="inter-xlarge-semibold">
{t("invite-modal-invite-users", "Invite Users")}
</span>
</Modal.Header>
<Modal.Content>
<div className="gap-y-base flex flex-col">
<InputField
label="Email"
label={t("invite-modal-email", "Email")}
placeholder="lebron@james.com"
required
{...register("user", { required: true })}
@@ -67,12 +85,15 @@ const InviteModal: React.FC<InviteModalProps> = ({ handleClose }) => {
<Controller
name="role"
control={control}
defaultValue={{ label: "Member", value: "member" }}
defaultValue={{
label: t("invite-modal-member", "Member"),
value: "member",
}}
render={({ field: { value, onChange, onBlur, ref } }) => {
return (
<NextSelect
label="Role"
placeholder="Select role"
label={t("invite-modal-role", "Role")}
placeholder={t("invite-modal-select-role", "Select role")}
onBlur={onBlur}
ref={ref}
onChange={onChange}
@@ -93,7 +114,7 @@ const InviteModal: React.FC<InviteModalProps> = ({ handleClose }) => {
type="button"
onClick={handleClose}
>
Cancel
{t("invite-modal-cancel", "Cancel")}
</Button>
<Button
loading={isLoading}
@@ -102,7 +123,7 @@ const InviteModal: React.FC<InviteModalProps> = ({ handleClose }) => {
className="text-small w-32 justify-center"
variant="primary"
>
Invite
{t("invite-modal-invite", "Invite")}
</Button>
</div>
</Modal.Footer>

15
packages/admin-ui/ui/src/components/organisms/login-card/index.tsx
View File

@@ -2,6 +2,7 @@ import { useAdminLogin } from "medusa-react"
import { useForm } from "react-hook-form"
import { useNavigate } from "react-router-dom"
import { useWidgets } from "../../../providers/widget-provider"
import { useTranslation } from "react-i18next"
import InputError from "../../atoms/input-error"
import WidgetContainer from "../../extensions/widget-container"
import Button from "../../fundamentals/button"
@@ -25,6 +26,7 @@ const LoginCard = ({ toResetPassword }: LoginCardProps) => {
} = useForm<FormValues>()
const navigate = useNavigate()
const { mutate, isLoading } = useAdminLogin()
const { t } = useTranslation()
const { getWidgets } = useWidgets()
@@ -38,7 +40,10 @@ const LoginCard = ({ toResetPassword }: LoginCardProps) => {
"password",
{
type: "manual",
message: "These credentials do not match our records.",
message: t(
"login-card-no-match",
"These credentials do not match our records."
),
},
{
shouldFocus: true,
@@ -62,17 +67,17 @@ const LoginCard = ({ toResetPassword }: LoginCardProps) => {
<form onSubmit={handleSubmit(onSubmit)}>
<div className="flex flex-col items-center">
<h1 className="inter-xlarge-semibold text-grey-90 mb-large text-[20px]">
Log in to Medusa
{t("login-card-log-in-to-medusa", "Log in to Medusa")}
</h1>
<div>
<SigninInput
placeholder="Email"
placeholder={t("login-card-email", "Email")}
{...register("email", { required: true })}
autoComplete="email"
className="mb-small"
/>
<SigninInput
placeholder="Password"
placeholder={t("login-card-password", "Password")}
type={"password"}
{...register("password", { required: true })}
autoComplete="current-password"
@@ -93,7 +98,7 @@ const LoginCard = ({ toResetPassword }: LoginCardProps) => {
className="inter-small-regular text-grey-50 mt-8 cursor-pointer"
onClick={toResetPassword}
>
Forgot your password?
{t("login-card-forgot-your-password", "Forgot your password?")}
</span>
</div>
</form>

4
packages/admin-ui/ui/src/components/organisms/metadata/index.tsx
View File

@@ -1,4 +1,5 @@
import React, { useEffect, useState } from "react"
import { useTranslation } from "react-i18next"
import Button from "../../fundamentals/button"
import PlusIcon from "../../fundamentals/icons/plus-icon"
import TrashIcon from "../../fundamentals/icons/trash-icon"
@@ -20,6 +21,7 @@ const Metadata: React.FC<AddMetadataProps> = ({
setMetadata,
heading = "Metadata",
}) => {
const { t } = useTranslation()
const [localData, setLocalData] = useState<MetadataField[]>([])
useEffect(() => {
@@ -79,7 +81,7 @@ const Metadata: React.FC<AddMetadataProps> = ({
onClick={addKeyPair}
>
<PlusIcon size={20} />
Add Metadata
{t("metadata-add-metadata", "Add Metadata")}
</Button>
</div>
</div>

28
packages/admin-ui/ui/src/components/organisms/product-attributes-section/attribute-modal.tsx
View File

@@ -1,6 +1,7 @@
import { Product } from "@medusajs/medusa"
import { useEffect } from "react"
import { useForm } from "react-hook-form"
import { useTranslation } from "react-i18next"
import useEditProductActions from "../../../hooks/use-edit-product-actions"
import { countries } from "../../../utils/countries"
import { nestedForm } from "../../../utils/nested-form"
@@ -23,6 +24,7 @@ type AttributesForm = {
}
const AttributeModal = ({ product, open, onClose }: Props) => {
const { t } = useTranslation()
const { onUpdate, updating } = useEditProductActions(product.id)
const form = useForm<AttributesForm>({
defaultValues: getDefaultValues(product),
@@ -67,21 +69,33 @@ const AttributeModal = ({ product, open, onClose }: Props) => {
<Modal open={open} handleClose={onReset} isLargeModal>
<Modal.Body>
<Modal.Header handleClose={onReset}>
<h1 className="inter-xlarge-semibold m-0">Edit Attributes</h1>
<h1 className="inter-xlarge-semibold m-0">
{t("product-attributes-section-edit-attributes", "Edit Attributes")}
</h1>
</Modal.Header>
<form onSubmit={onSubmit}>
<Modal.Content>
<div className="mb-xlarge">
<h2 className="inter-large-semibold mb-2xsmall">Dimensions</h2>
<h2 className="inter-large-semibold mb-2xsmall">
{t("product-attributes-section-dimensions", "Dimensions")}
</h2>
<p className="inter-base-regular text-grey-50 mb-large">
Configure to calculate the most accurate shipping rates
{t(
"product-attributes-section-configure-to-calculate-the-most-accurate-shipping-rates",
"Configure to calculate the most accurate shipping rates"
)}
</p>
<DimensionsForm form={nestedForm(form, "dimensions")} />
</div>
<div>
<h2 className="inter-large-semibold mb-2xsmall">Customs</h2>
<h2 className="inter-large-semibold mb-2xsmall">
{t("product-attributes-section-customs", "Customs")}
</h2>
<p className="inter-base-regular text-grey-50 mb-large">
Configure to calculate the most accurate shipping rates
{t(
"product-attributes-section-configure-to-calculate-the-most-accurate-shipping-rates",
"Configure to calculate the most accurate shipping rates"
)}
</p>
<CustomsForm form={nestedForm(form, "customs")} />
</div>
@@ -94,7 +108,7 @@ const AttributeModal = ({ product, open, onClose }: Props) => {
type="button"
onClick={onReset}
>
Cancel
{t("product-attributes-section-cancel", "Cancel")}
</Button>
<Button
size="small"
@@ -103,7 +117,7 @@ const AttributeModal = ({ product, open, onClose }: Props) => {
disabled={!isDirty}
loading={updating}
>
Save
{t("product-attributes-section-save", "Save")}
</Button>
</div>
</Modal.Footer>

25
packages/admin-ui/ui/src/components/organisms/product-attributes-section/index.tsx
View File

@@ -1,4 +1,5 @@
import { Product } from "@medusajs/medusa"
import { useTranslation } from "react-i18next"
import useToggleState from "../../../hooks/use-toggle-state"
import EditIcon from "../../fundamentals/icons/edit-icon"
import { ActionType } from "../../molecules/actionables"
@@ -10,6 +11,7 @@ type Props = {
}
const ProductAttributesSection = ({ product }: Props) => {
const { t } = useTranslation()
const { state, toggle, close } = useToggleState()
const actions: ActionType[] = [
@@ -24,7 +26,9 @@ const ProductAttributesSection = ({ product }: Props) => {
<>
<Section title="Attributes" actions={actions} forceDropdown>
<div className="gap-y-xsmall mb-large mt-base flex flex-col">
<h2 className="inter-base-semibold">Dimensions</h2>
<h2 className="inter-base-semibold">
{t("product-attributes-section-dimensions", "Dimensions")}
</h2>
<div className="gap-y-xsmall flex flex-col">
<Attribute attribute="Height" value={product.height} />
<Attribute attribute="Width" value={product.width} />
@@ -33,12 +37,23 @@ const ProductAttributesSection = ({ product }: Props) => {
</div>
</div>
<div className="gap-y-xsmall flex flex-col">
<h2 className="inter-base-semibold">Customs</h2>
<h2 className="inter-base-semibold">
{t("product-attributes-section-customs", "Customs")}
</h2>
<div className="gap-y-xsmall flex flex-col">
<Attribute attribute="MID Code" value={product.mid_code} />
<Attribute attribute="HS Code" value={product.hs_code} />
<Attribute
attribute="Country of origin"
attribute={t("product-attributes-section-mid-code", "MID Code")}
value={product.mid_code}
/>
<Attribute
attribute={t("product-attributes-section-hs-code", "HS Code")}
value={product.hs_code}
/>
<Attribute
attribute={t(
"product-attributes-section-country-of-origin",
"Country of origin"
)}
value={product.origin_country}
/>
</div>

20
packages/admin-ui/ui/src/components/organisms/product-general-section/channels-modal.tsx
View File

@@ -1,5 +1,6 @@
import { Product, SalesChannel } from "@medusajs/medusa"
import { useAdminUpdateProduct } from "medusa-react"
import { useTranslation } from "react-i18next"
import SalesChannelsModal from "../../forms/product/sales-channels-modal"
import useNotification from "../../../hooks/use-notification"
@@ -11,6 +12,7 @@ type Props = {
const ChannelsModal = ({ product, open, onClose }: Props) => {
const notification = useNotification()
const { t } = useTranslation()
const { mutateAsync } = useAdminUpdateProduct(product.id)
@@ -19,9 +21,23 @@ const ChannelsModal = ({ product, open, onClose }: Props) => {
await mutateAsync({
sales_channels: channels.map((c) => ({ id: c.id })),
})
notification("Success", "Successfully updated sales channels", "success")
notification(
t("product-general-section-success", "Success"),
t(
"product-general-section-successfully-updated-sales-channels",
"Successfully updated sales channels"
),
"success"
)
} catch (e) {
notification("Error", "Failed to update sales channels", "error")
notification(
t("product-general-section-error", "Error"),
t(
"product-general-section-failed-to-update-sales-channels",
"Failed to update sales channels"
),
"error"
)
}
}

20
packages/admin-ui/ui/src/components/organisms/product-general-section/general-modal.tsx
View File

@@ -1,3 +1,4 @@
import { useTranslation } from "react-i18next"
import DiscountableForm, {
DiscountableFormType,
} from "../../forms/product/discountable-form"
@@ -33,6 +34,7 @@ type GeneralFormWrapper = {
}
const GeneralModal = ({ product, open, onClose }: Props) => {
const { t } = useTranslation()
const { onUpdate, updating } = useEditProductActions(product.id)
const form = useForm<GeneralFormWrapper>({
defaultValues: getDefaultValues(product),
@@ -95,7 +97,10 @@ const GeneralModal = ({ product, open, onClose }: Props) => {
<Modal.Body>
<Modal.Header handleClose={onReset}>
<h1 className="inter-xlarge-semibold m-0">
Edit General Information
{t(
"product-general-section-edit-general-information",
"Edit General Information"
)}
</h1>
</Modal.Header>
<form onSubmit={onSubmit}>
@@ -106,7 +111,10 @@ const GeneralModal = ({ product, open, onClose }: Props) => {
/>
<div className="my-xlarge">
<h2 className="inter-base-semibold mb-base">
Organize {product.is_giftcard ? "Gift Card" : "Product"}
Organize{" "}
{product.is_giftcard
? t("product-general-section-gift-card", "Gift Card")
: t("product-general-section-product", "Product")}
</h2>
<OrganizeForm form={nestedForm(form, "organize")} />
</div>
@@ -115,7 +123,9 @@ const GeneralModal = ({ product, open, onClose }: Props) => {
isGiftCard={product.is_giftcard}
/>
<div className="mt-xlarge">
<h2 className="inter-base-semibold mb-base">Metadata</h2>
<h2 className="inter-base-semibold mb-base">
{t("product-general-section-metadata", "Metadata")}
</h2>
<MetadataForm form={nestedForm(form, "metadata")} />
</div>
</Modal.Content>
@@ -127,7 +137,7 @@ const GeneralModal = ({ product, open, onClose }: Props) => {
type="button"
onClick={onReset}
>
Cancel
{t("product-general-section-cancel", "Cancel")}
</Button>
<Button
size="small"
@@ -136,7 +146,7 @@ const GeneralModal = ({ product, open, onClose }: Props) => {
disabled={!isDirty}
loading={updating}
>
Save
{t("product-general-section-save", "Save")}
</Button>
</div>
</Modal.Footer>

68
packages/admin-ui/ui/src/components/organisms/product-general-section/index.tsx
View File

@@ -1,4 +1,5 @@
import { Product } from "@medusajs/medusa"
import { useTranslation } from "react-i18next"
import useEditProductActions from "../../../hooks/use-edit-product-actions"
import useToggleState from "../../../hooks/use-toggle-state"
import {
@@ -22,6 +23,7 @@ type Props = {
}
const ProductGeneralSection = ({ product }: Props) => {
const { t } = useTranslation()
const { onDelete, onStatusChange } = useEditProductActions(product.id)
const {
state: infoState,
@@ -39,12 +41,15 @@ const ProductGeneralSection = ({ product }: Props) => {
const actions: ActionType[] = [
{
label: "Edit General Information",
label: t(
"product-general-section-edit-general-information",
"Edit General Information"
),
onClick: toggleInfo,
icon: <EditIcon size={20} />,
},
{
label: "Delete",
label: t("product-general-section-delete", "Delete"),
onClick: onDelete,
variant: "danger",
icon: <TrashIcon size={20} />,
@@ -53,7 +58,10 @@ const ProductGeneralSection = ({ product }: Props) => {
if (isFeatureEnabled("sales_channels")) {
actions.splice(1, 0, {
label: "Edit Sales Channels",
label: t(
"product-general-section-edit-sales-channels",
"Edit Sales Channels"
),
onClick: toggleChannels,
icon: <ChannelsIcon size={20} />,
})
@@ -68,8 +76,8 @@ const ProductGeneralSection = ({ product }: Props) => {
status={
<StatusSelector
isDraft={product?.status === "draft"}
activeState="Published"
draftState="Draft"
activeState={t("product-general-section-published", "Published")}
draftState={t("product-general-section-draft", "Draft")}
onChange={() => onStatusChange(product.status)}
/>
}
@@ -123,33 +131,50 @@ const Detail = ({ title, value }: DetailProps) => {
const ProductDetails = ({ product }: Props) => {
const { isFeatureEnabled } = useFeatureFlag()
const { t } = useTranslation()
return (
<div className="mt-8 flex flex-col gap-y-3">
<h2 className="inter-base-semibold">Details</h2>
<Detail title="Subtitle" value={product.subtitle} />
<Detail title="Handle" value={product.handle} />
<Detail title="Type" value={product.type?.value} />
<Detail title="Collection" value={product.collection?.title} />
<h2 className="inter-base-semibold">
{t("product-general-section-details", "Details")}
</h2>
<Detail
title={t("product-general-section-subtitle", "Subtitle")}
value={product.subtitle}
/>
<Detail
title={t("product-general-section-handle", "Handle")}
value={product.handle}
/>
<Detail
title={t("product-general-section-type", "Type")}
value={product.type?.value}
/>
<Detail
title={t("product-general-section-collection", "Collection")}
value={product.collection?.title}
/>
{isFeatureEnabled(FeatureFlag.PRODUCT_CATEGORIES) && (
<Detail
title="Category"
title={t("product-general-section-category", "Category")}
value={product.categories.map((c) => c.name)}
/>
)}
<Detail
title="Discountable"
value={product.discountable ? "True" : "False"}
title={t("product-general-section-discountable", "Discountable")}
value={
product.discountable
? t("product-general-section-true", "True")
: t("product-general-section-false", "False")
}
/>
<Detail
title="Metadata"
title={t("product-general-section-metadata", "Metadata")}
value={
Object.entries(product.metadata || {}).length > 0
? `${Object.entries(product.metadata || {}).length} ${
Object.keys(product.metadata || {}).length === 1
? "item"
: "items"
}`
? t("product-general-section-count", "{{count}}", {
count: Object.keys(product.metadata || {}).length,
})
: undefined
}
/>
@@ -176,10 +201,13 @@ const ProductTags = ({ product }: Props) => {
}
const ProductSalesChannels = ({ product }: Props) => {
const { t } = useTranslation()
return (
<FeatureToggle featureFlag="sales_channels">
<div className="mt-xlarge">
<h2 className="inter-base-semibold mb-xsmall">Sales channels</h2>
<h2 className="inter-base-semibold mb-xsmall">
{t("product-general-section-sales-channels", "Sales channels")}
</h2>
<SalesChannelsDisplay channels={product.sales_channels} />
</div>
</FeatureToggle>

4
packages/admin-ui/ui/src/components/organisms/product-media-section/index.tsx
View File

@@ -1,4 +1,5 @@
import { Product } from "@medusajs/medusa"
import { useTranslation } from "react-i18next"
import useToggleState from "../../../hooks/use-toggle-state"
import { ActionType } from "../../molecules/actionables"
import Section from "../../organisms/section"
@@ -10,10 +11,11 @@ type Props = {
const ProductMediaSection = ({ product }: Props) => {
const { state, close, toggle } = useToggleState()
const { t } = useTranslation()
const actions: ActionType[] = [
{
label: "Edit Media",
label: t("product-media-section-edit-media", "Edit Media"),
onClick: toggle,
},
]

35
packages/admin-ui/ui/src/components/organisms/product-media-section/media-modal.tsx
View File

@@ -1,6 +1,7 @@
import { Product } from "@medusajs/medusa"
import { useEffect } from "react"
import { useForm } from "react-hook-form"
import { useTranslation } from "react-i18next"
import useEditProductActions from "../../../hooks/use-edit-product-actions"
import useNotification from "../../../hooks/use-notification"
import { FormImage } from "../../../types/shared"
@@ -21,6 +22,7 @@ type MediaFormWrapper = {
}
const MediaModal = ({ product, open, onClose }: Props) => {
const { t } = useTranslation()
const { onUpdate, updating } = useEditProductActions(product.id)
const form = useForm<MediaFormWrapper>({
defaultValues: getDefaultValues(product),
@@ -49,17 +51,27 @@ const MediaModal = ({ product, open, onClose }: Props) => {
try {
preppedImages = await prepareImages(data.media.images)
} catch (error) {
let errorMessage = "Something went wrong while trying to upload images."
let errorMessage = t(
"product-media-section-upload-images-error",
"Something went wrong while trying to upload images."
)
const response = (error as any).response as Response
if (response.status === 500) {
errorMessage =
errorMessage +
" " +
"You might not have a file service configured. Please contact your administrator"
t(
"product-media-section-file-service-not-configured",
"You might not have a file service configured. Please contact your administrator"
)
}
notification("Error", errorMessage, "error")
notification(
t("product-media-section-error", "Error"),
errorMessage,
"error"
)
return
}
const urls = preppedImages.map((image) => image.url)
@@ -76,14 +88,21 @@ const MediaModal = ({ product, open, onClose }: Props) => {
<Modal open={open} handleClose={onReset} isLargeModal>
<Modal.Body>
<Modal.Header handleClose={onReset}>
<h1 className="inter-xlarge-semibold m-0">Edit Media</h1>
<h1 className="inter-xlarge-semibold m-0">
{t("product-media-section-edit-media", "Edit Media")}
</h1>
</Modal.Header>
<form onSubmit={onSubmit}>
<Modal.Content>
<div>
<h2 className="inter-large-semibold mb-2xsmall">Media</h2>
<h2 className="inter-large-semibold mb-2xsmall">
{t("product-media-section-media", "Media")}
</h2>
<p className="inter-base-regular text-grey-50 mb-large">
Add images to your product.
{t(
"product-media-section-add-images-to-your-product",
"Add images to your product."
)}
</p>
<div>
<MediaForm form={nestedForm(form, "media")} />
@@ -98,7 +117,7 @@ const MediaModal = ({ product, open, onClose }: Props) => {
type="button"
onClick={onReset}
>
Cancel
{t("product-media-section-cancel", "Cancel")}
</Button>
<Button
size="small"
@@ -107,7 +126,7 @@ const MediaModal = ({ product, open, onClose }: Props) => {
disabled={!isDirty}
loading={updating}
>
Save and close
{t("product-media-section-save-and-close", "Save and close")}
</Button>
</div>
</Modal.Footer>

10
packages/admin-ui/ui/src/components/organisms/product-raw-section/index.tsx
View File

@@ -1,4 +1,5 @@
import { Product } from "@medusajs/medusa"
import { useTranslation } from "react-i18next"
import JSONView from "../../molecules/json-view"
import Section from "../section"
@@ -8,8 +9,15 @@ type Props = {
/** Temporary component, should be replaced with <RawJson /> but since the design is different we will use this to not break the existing design across admin. */
const ProductRawSection = ({ product }: Props) => {
const { t } = useTranslation()
return (
<Section title={product.is_giftcard ? "Raw Gift Card" : "Raw Product"}>
<Section
title={
product.is_giftcard
? t("product-raw-section-raw-gift-card", "Raw Gift Card")
: t("product-raw-section-raw-product", "Raw Product")
}
>
<div className="pt-base">
<JSONView data={product} />
</div>

21
packages/admin-ui/ui/src/components/organisms/product-thumbnail-section/index.tsx
View File

@@ -1,5 +1,6 @@
import { Product } from "@medusajs/medusa"
import clsx from "clsx"
import { useTranslation } from "react-i18next"
import useEditProductActions from "../../../hooks/use-edit-product-actions"
import useNotification from "../../../hooks/use-notification"
import useToggleState from "../../../hooks/use-toggle-state"
@@ -14,6 +15,7 @@ type Props = {
}
const ProductThumbnailSection = ({ product }: Props) => {
const { t } = useTranslation()
const { onUpdate, updating } = useEditProductActions(product.id)
const { state, toggle, close } = useToggleState()
@@ -27,10 +29,21 @@ const ProductThumbnailSection = ({ product }: Props) => {
},
{
onSuccess: () => {
notification("Success", "Successfully deleted thumbnail", "success")
notification(
t("product-thumbnail-section-success", "Success"),
t(
"product-thumbnail-section-successfully-deleted-thumbnail",
"Successfully deleted thumbnail"
),
"success"
)
},
onError: (err) => {
notification("Error", getErrorMessage(err), "error")
notification(
t("product-thumbnail-section-error", "Error"),
getErrorMessage(err),
"error"
)
},
}
)
@@ -48,7 +61,9 @@ const ProductThumbnailSection = ({ product }: Props) => {
type="button"
onClick={toggle}
>
{product.thumbnail ? "Edit" : "Upload"}
{product.thumbnail
? t("product-thumbnail-section-edit", "Edit")
: t("product-thumbnail-section-upload", "Upload")}
</Button>
{product.thumbnail && (
<TwoStepDelete onDelete={handleDelete} deleting={updating} />

41
packages/admin-ui/ui/src/components/organisms/product-thumbnail-section/thumbnail-modal.tsx
View File

@@ -1,6 +1,7 @@
import { Product } from "@medusajs/medusa"
import { useEffect } from "react"
import { useForm } from "react-hook-form"
import { useTranslation } from "react-i18next"
import useEditProductActions from "../../../hooks/use-edit-product-actions"
import useNotification from "../../../hooks/use-notification"
import { FormImage } from "../../../types/shared"
@@ -23,6 +24,7 @@ type ThumbnailFormWrapper = {
}
const ThumbnailModal = ({ product, open, onClose }: Props) => {
const { t } = useTranslation()
const { onUpdate, updating } = useEditProductActions(product.id)
const form = useForm<ThumbnailFormWrapper>({
defaultValues: getDefaultValues(product),
@@ -51,18 +53,27 @@ const ThumbnailModal = ({ product, open, onClose }: Props) => {
try {
preppedImages = await prepareImages(data.thumbnail.images)
} catch (error) {
let errorMessage =
let errorMessage = t(
"product-thumbnail-section-upload-thumbnail-error",
"Something went wrong while trying to upload the thumbnail."
)
const response = (error as any).response as Response
if (response.status === 500) {
errorMessage =
errorMessage +
" " +
"You might not have a file service configured. Please contact your administrator"
t(
"product-thumbnail-section-you-might-not-have-a-file-service-configured-please-contact-your-administrator",
"You might not have a file service configured. Please contact your administrator"
)
}
notification("Error", errorMessage, "error")
notification(
t("product-thumbnail-section-error", "Error"),
errorMessage,
"error"
)
return
}
const url = preppedImages?.[0]?.url
@@ -80,14 +91,23 @@ const ThumbnailModal = ({ product, open, onClose }: Props) => {
<Modal open={open} handleClose={onReset} isLargeModal>
<Modal.Body>
<Modal.Header handleClose={onReset}>
<h1 className="inter-xlarge-semibold m-0">Upload Thumbnail</h1>
<h1 className="inter-xlarge-semibold m-0">
{t(
"product-thumbnail-section-upload-thumbnail",
"Upload Thumbnail"
)}
</h1>
</Modal.Header>
<form onSubmit={onSubmit}>
<Modal.Content>
<h2 className="inter-large-semibold mb-2xsmall">Thumbnail</h2>
<h2 className="inter-large-semibold mb-2xsmall">
{t("product-thumbnail-section-thumbnail", "Thumbnail")}
</h2>
<p className="inter-base-regular text-grey-50 mb-large">
Used to represent your product during checkout, social sharing and
more.
{t(
"product-thumbnail-section-used-to-represent-your-product-during-checkout-social-sharing-and-more",
"Used to represent your product during checkout, social sharing and more."
)}
</p>
<ThumbnailForm form={nestedForm(form, "thumbnail")} />
</Modal.Content>
@@ -99,7 +119,7 @@ const ThumbnailModal = ({ product, open, onClose }: Props) => {
type="button"
onClick={onReset}
>
Cancel
{t("product-thumbnail-section-cancel", "Cancel")}
</Button>
<Button
size="small"
@@ -108,7 +128,10 @@ const ThumbnailModal = ({ product, open, onClose }: Props) => {
disabled={!isDirty}
loading={updating}
>
Save and close
{t(
"product-thumbnail-section-save-and-close",
"Save and close"
)}
</Button>
</div>
</Modal.Footer>

12
packages/admin-ui/ui/src/components/organisms/product-variant-tree/index.tsx
View File

@@ -1,5 +1,6 @@
import { Product, ProductVariant } from "@medusajs/medusa"
import React from "react"
import { useTranslation } from "react-i18next"
import { ActionType } from "../../molecules/actionables"
import { CollapsibleTree } from "../../molecules/collapsible-tree"
@@ -58,6 +59,7 @@ const ProductVariantTree: React.FC<ProductVariantTreeProps> = ({
}
const ProductVariantLeaf = ({ sku, title, prices = [] }: LeafProps) => {
const { t } = useTranslation()
const filteredPrices = prices.filter((pr) => pr.price_list_id)
return (
<div className="flex flex-1">
@@ -68,12 +70,14 @@ const ProductVariantLeaf = ({ sku, title, prices = [] }: LeafProps) => {
<div className="text-grey-50 flex flex-1 items-center justify-end">
<div className="text-grey-50 mr-xsmall">
{filteredPrices.length ? (
<span>{`${filteredPrices.length} price${
filteredPrices.length > 1 ? "s" : ""
}`}</span>
<span>
{t("product-variant-tree-count", "{{count}}", {
count: filteredPrices.length,
})}
</span>
) : (
<span className="inter-small-semibold text-orange-40">
Add prices
{t("product-variant-tree-add-prices", "Add prices")}
</span>
)}
</div>

10
packages/admin-ui/ui/src/components/organisms/product-variants-section/add-variant-modal.tsx
View File

@@ -1,5 +1,6 @@
import { AdminPostProductsProductVariantsReq, Product } from "@medusajs/medusa"
import { useEffect } from "react"
import { useTranslation } from "react-i18next"
import EditFlowVariantForm, {
EditFlowVariantFormType,
} from "../../forms/product/variant-form/edit-flow-variant-form"
@@ -22,6 +23,7 @@ type Props = {
const AddVariantModal = ({ open, onClose, product }: Props) => {
const context = useLayeredModal()
const { t } = useTranslation()
const { client } = useMedusa()
const form = useForm<EditFlowVariantFormType>({
@@ -93,7 +95,9 @@ const AddVariantModal = ({ open, onClose, product }: Props) => {
<LayeredModal context={context} open={open} handleClose={resetAndClose}>
<Modal.Body>
<Modal.Header handleClose={resetAndClose}>
<h1 className="inter-xlarge-semibold">Add Variant</h1>
<h1 className="inter-xlarge-semibold">
{t("product-variants-section-add-variant", "Add Variant")}
</h1>
</Modal.Header>
<form onSubmit={onSubmit}>
<Modal.Content>
@@ -107,7 +111,7 @@ const AddVariantModal = ({ open, onClose, product }: Props) => {
type="button"
onClick={resetAndClose}
>
Cancel
{t("product-variants-section-cancel", "Cancel")}
</Button>
<Button
variant="primary"
@@ -115,7 +119,7 @@ const AddVariantModal = ({ open, onClose, product }: Props) => {
type="submit"
loading={addingVariant}
>
Save and close
{t("product-variants-section-save-and-close", "Save and close")}
</Button>
</div>
</Modal.Footer>

14
packages/admin-ui/ui/src/components/organisms/product-variants-section/edit-variant-inventory-modal.tsx
View File

@@ -1,3 +1,4 @@
import { useTranslation } from "react-i18next"
import EditFlowVariantForm, {
EditFlowVariantFormType,
} from "../../forms/product/variant-inventory-form/edit-flow-variant-form"
@@ -30,6 +31,7 @@ type Props = {
}
const EditVariantInventoryModal = ({ onClose, product, variant }: Props) => {
const { t } = useTranslation()
const { client } = useMedusa()
const layeredModalContext = useContext(LayeredModalContext)
const {
@@ -191,7 +193,12 @@ const EditVariantInventoryModal = ({ onClose, product, variant }: Props) => {
return (
<LayeredModal context={layeredModalContext} handleClose={handleClose}>
<Modal.Header handleClose={handleClose}>
<h1 className="inter-xlarge-semibold">Edit stock & inventory</h1>
<h1 className="inter-xlarge-semibold">
{t(
"product-variants-section-edit-stock-inventory",
"Edit stock & inventory"
)}
</h1>
</Modal.Header>
{!isLoadingInventory && (
<StockForm
@@ -222,6 +229,7 @@ const StockForm = ({
handleClose: () => void
updatingVariant: boolean
}) => {
const { t } = useTranslation()
const form = useForm<EditFlowVariantFormType>({
// @ts-ignore
defaultValues: getEditVariantDefaultValues(variantInventory, variant),
@@ -259,7 +267,7 @@ const StockForm = ({
handleClose()
}}
>
Cancel
{t("product-variants-section-cancel", "Cancel")}
</Button>
<Button
variant="primary"
@@ -268,7 +276,7 @@ const StockForm = ({
disabled={!isDirty}
loading={updatingVariant}
>
Save and close
{t("product-variants-section-save-and-close", "Save and close")}
</Button>
</div>
</Modal.Footer>

8
packages/admin-ui/ui/src/components/organisms/product-variants-section/edit-variant-modal.tsx
View File

@@ -1,4 +1,5 @@
import { Product, ProductVariant } from "@medusajs/medusa"
import { useTranslation } from "react-i18next"
import EditFlowVariantForm, {
EditFlowVariantFormType,
} from "../../forms/product/variant-form/edit-flow-variant-form"
@@ -30,6 +31,7 @@ const EditVariantModal = ({
variant,
isDuplicate = false,
}: Props) => {
const { t } = useTranslation()
const form = useForm<EditFlowVariantFormType>({
// @ts-ignore
defaultValues: getEditVariantDefaultValues(variant, product),
@@ -111,7 +113,7 @@ const EditVariantModal = ({
<LayeredModal context={layeredModalContext} handleClose={handleClose}>
<Modal.Header handleClose={handleClose}>
<h1 className="inter-xlarge-semibold">
Edit Variant
{t("product-variants-section-edit-variant", "Edit Variant")}
{variant.title && (
<span className="inter-xlarge-regular text-grey-50">
{" "}
@@ -132,7 +134,7 @@ const EditVariantModal = ({
type="button"
onClick={handleClose}
>
Cancel
{t("product-variants-section-cancel", "Cancel")}
</Button>
<Button
variant="primary"
@@ -141,7 +143,7 @@ const EditVariantModal = ({
disabled={!isDirty && !isDuplicate}
loading={addingVariant || updatingVariant}
>
Save and close
{t("product-variants-section-save-and-close", "Save and close")}
</Button>
</div>
</Modal.Footer>

11
packages/admin-ui/ui/src/components/organisms/product-variants-section/edit-variants-modal/edit-variant-screen.tsx
View File

@@ -4,6 +4,7 @@ import {
ProductVariant,
} from "@medusajs/medusa"
import React, { useContext, useEffect, useMemo } from "react"
import { useTranslation } from "react-i18next"
import EditFlowVariantForm, {
EditFlowVariantFormType,
} from "../../../forms/product/variant-form/edit-flow-variant-form"
@@ -23,6 +24,7 @@ type Props = {
}
const EditVariantScreen = ({ variant, product }: Props) => {
const { t } = useTranslation()
const { onClose } = useEditVariantsModal()
const form = useForm<EditFlowVariantFormType>({
defaultValues: getEditVariantDefaultValues(variant, product),
@@ -67,7 +69,7 @@ const EditVariantScreen = ({ variant, product }: Props) => {
<Modal.Footer>
<div className="gap-x-xsmall flex w-full items-center justify-end">
<Button variant="secondary" size="small" type="button">
Cancel
{t("edit-variants-modal-cancel", "Cancel")}
</Button>
<Button
variant="primary"
@@ -77,7 +79,7 @@ const EditVariantScreen = ({ variant, product }: Props) => {
loading={updatingVariant}
onClick={onSubmitAndBack}
>
Save and go back
{t("edit-variants-modal-save-and-go-back", "Save and go back")}
</Button>
<Button
variant="primary"
@@ -87,7 +89,7 @@ const EditVariantScreen = ({ variant, product }: Props) => {
loading={updatingVariant}
onClick={onSubmitAndClose}
>
Save and close
{t("edit-variants-modal-save-and-close", "Save and close")}
</Button>
</div>
</Modal.Footer>
@@ -133,11 +135,12 @@ export const createUpdatePayload = (
}
export const useEditVariantScreen = (props: Props) => {
const { t } = useTranslation()
const { pop } = React.useContext(LayeredModalContext)
const screen = useMemo(() => {
return {
title: "Edit Variant",
title: t("edit-variants-modal-edit-variant", "Edit Variant"),
subtitle: props.variant.title,
onBack: pop,
view: <EditVariantScreen {...props} />,

28
packages/admin-ui/ui/src/components/organisms/product-variants-section/edit-variants-modal/index.tsx
View File

@@ -6,6 +6,7 @@ import {
useFieldArray,
useForm,
} from "react-hook-form"
import { useTranslation } from "react-i18next"
import useEditProductActions from "../../../../hooks/use-edit-product-actions"
import Button from "../../../fundamentals/button"
import Modal from "../../../molecules/modal"
@@ -36,6 +37,7 @@ export type EditVariantsForm = {
const EditVariantsModal = ({ open, onClose, product }: Props) => {
const context = useContext(LayeredModalContext)
const { onUpdate, updating } = useEditProductActions(product.id)
const { t } = useTranslation()
const form = useForm<EditVariantsForm>({
defaultValues: getDefaultValues(product),
@@ -109,7 +111,10 @@ const EditVariantsModal = ({ open, onClose, product }: Props) => {
() => {
resetAndClose()
},
"Variants were successfully updated"
t(
"edit-variants-modal-update-success",
"Variants were successfully updated"
)
)
})
@@ -122,20 +127,29 @@ const EditVariantsModal = ({ open, onClose, product }: Props) => {
<LayeredModal handleClose={resetAndClose} open={open} context={context}>
<Modal.Body>
<Modal.Header handleClose={resetAndClose}>
<h1 className="inter-xlarge-semibold">Edit Variants</h1>
<h1 className="inter-xlarge-semibold">
{t("edit-variants-modal-edit-variants", "Edit Variants")}
</h1>
</Modal.Header>
<FormProvider {...form}>
<form onSubmit={onSubmit}>
<Modal.Content>
<h2 className="inter-base-semibold mb-small">
Product variants{" "}
{t(
"edit-variants-modal-product-variants",
"Product variants"
)}{" "}
<span className="inter-base-regular text-grey-50">
({product.variants.length})
</span>
</h2>
<div className="pr-base inter-small-semibold text-grey-50 mb-small grid grid-cols-[1fr_1fr_48px]">
<p className="col-start-1 col-end-1 text-left">Variant</p>
<p className="col-start-2 col-end-2 text-right">Inventory</p>
<p className="col-start-1 col-end-1 text-left">
{t("edit-variants-modal-variant", "Variant")}
</p>
<p className="col-start-2 col-end-2 text-right">
{t("edit-variants-modal-inventory", "Inventory")}
</p>
</div>
<div>{fields.map((card, i) => renderCard(card, i))}</div>
</Modal.Content>
@@ -147,7 +161,7 @@ const EditVariantsModal = ({ open, onClose, product }: Props) => {
type="button"
onClick={resetAndClose}
>
Cancel
{t("edit-variants-modal-cancel", "Cancel")}
</Button>
<Button
variant="primary"
@@ -156,7 +170,7 @@ const EditVariantsModal = ({ open, onClose, product }: Props) => {
loading={updating}
disabled={updating || !isDirty}
>
Save and close
{t("edit-variants-modal-save-and-close", "Save and close")}
</Button>
</div>
</Modal.Footer>

4
packages/admin-ui/ui/src/components/organisms/product-variants-section/edit-variants-modal/variant-card.tsx
View File

@@ -4,6 +4,7 @@ import type { Identifier, XYCoord } from "dnd-core"
import { useContext, useMemo, useRef } from "react"
import { useDrag, useDrop } from "react-dnd"
import { useFormContext } from "react-hook-form"
import { useTranslation } from "react-i18next"
import { VariantItem } from "."
import { DragItem } from "../../../../types/shared"
import FormValidator from "../../../../utils/form-validator"
@@ -35,6 +36,7 @@ export const VariantCard = ({
moveCard,
product,
}: VariantCardProps) => {
const { t } = useTranslation()
const {
register,
formState: { errors },
@@ -49,7 +51,7 @@ export const VariantCard = ({
const actions: ActionType[] = useMemo(() => {
return [
{
label: "Edit Variant",
label: t("edit-variants-modal-edit-variant", "Edit Variant"),
icon: <EditIcon size={20} className="text-grey-50" />,
onClick: () => push(editVariantScreen),
},

12
packages/admin-ui/ui/src/components/organisms/product-variants-section/index.tsx
View File

@@ -1,5 +1,6 @@
import OptionsProvider, { useOptionsContext } from "./options-provider"
import { Product, ProductVariant, VariantInventory } from "@medusajs/medusa"
import { useTranslation } from "react-i18next"
import { ActionType } from "../../molecules/actionables"
import AddVariantModal from "./add-variant-modal"
@@ -28,6 +29,7 @@ type Props = {
const ProductVariantsSection = ({ product }: Props) => {
const queryClient = useQueryClient()
const { client } = useMedusa()
const { t } = useTranslation()
const { isFeatureEnabled } = useFeatureFlag()
@@ -69,22 +71,22 @@ const ProductVariantsSection = ({ product }: Props) => {
const actions: ActionType[] = [
{
label: "Add Variant",
label: t("product-variants-section-add-variant", "Add Variant"),
onClick: toggleAddVariant,
icon: <PlusIcon size="20" />,
},
{
label: "Edit Prices",
label: t("product-variants-section-edit-prices", "Edit Prices"),
onClick: toggleEditPrices,
icon: <DollarSignIcon size="20" />,
},
{
label: "Edit Variants",
label: t("product-variants-section-edit-variants", "Edit Variants"),
onClick: toggleEditVariants,
icon: <EditIcon size="20" />,
},
{
label: "Edit Options",
label: t("product-variants-section-edit-options", "Edit Options"),
onClick: toggleOptions,
icon: <GearIcon size="20" />,
},
@@ -130,7 +132,7 @@ const ProductVariantsSection = ({ product }: Props) => {
<ProductOptions />
<div className="mt-xlarge">
<h2 className="inter-large-semibold mb-base">
Product variants{" "}
{t("product-variants-section-product-variants", "Product variants")}{" "}
<span className="inter-large-regular text-grey-50">
({product.variants.length})
</span>

44
packages/admin-ui/ui/src/components/organisms/product-variants-section/options-modal.tsx
View File

@@ -6,6 +6,7 @@ import {
} from "medusa-react"
import { useEffect, useMemo } from "react"
import { useFieldArray, useForm } from "react-hook-form"
import { useTranslation } from "react-i18next"
import useNotification from "../../../hooks/use-notification"
import FormValidator from "../../../utils/form-validator"
import Button from "../../fundamentals/button"
@@ -41,6 +42,7 @@ const OptionsModal = ({ product, open, onClose }: Props) => {
product.id
)
const { t } = useTranslation()
const { refetch } = useOptionsContext()
const {
@@ -140,7 +142,14 @@ const OptionsModal = ({ product, open, onClose }: Props) => {
})
if (errors.length === toCreate.length + toUpdate.length + toDelete.length) {
notification("Error", "Failed to update product options", "error")
notification(
t("product-variants-section-error", "Error"),
t(
"product-variants-section-failed-to-update-product-options",
"Failed to update product options"
),
"error"
)
return
}
@@ -153,7 +162,14 @@ const OptionsModal = ({ product, open, onClose }: Props) => {
}
refetch()
notification("Success", "Successfully updated product options", "success")
notification(
t("product-variants-section-success", "Success"),
t(
"product-variants-section-successfully-updated-product-options",
"Successfully updated product options"
),
"success"
)
handleClose()
})
@@ -161,13 +177,19 @@ const OptionsModal = ({ product, open, onClose }: Props) => {
<Modal open={open} handleClose={handleClose}>
<Modal.Body>
<Modal.Header handleClose={handleClose}>
<h1 className="inter-xlarge-semibold">Edit Options</h1>
<h1 className="inter-xlarge-semibold">
{t("product-variants-section-edit-options", "Edit Options")}
</h1>
</Modal.Header>
<form onSubmit={onSubmit}>
<Modal.Content>
<h2 className="inter-large-semibold mb-base">Product options</h2>
<h2 className="inter-large-semibold mb-base">
{t("product-variants-section-product-options", "Product options")}
</h2>
<div className="gap-y-small flex flex-col">
<p className="inter-small-semibold text-grey-50">Option title</p>
<p className="inter-small-semibold text-grey-50">
{t("product-variants-section-option-title", "Option title")}
</p>
<div className="gap-y-xsmall flex flex-col">
{fields.map((field, index) => {
return (
@@ -179,7 +201,10 @@ const OptionsModal = ({ product, open, onClose }: Props) => {
key={field.id}
placeholder="Color"
{...register(`options.${index}.title`, {
required: "Option title is required",
required: t(
"product-variants-section-option-title-is-required",
"Option title is required"
),
minLength:
FormValidator.minOneCharRule("Option title"),
pattern: FormValidator.whiteSpaceRule("Option title"),
@@ -205,7 +230,8 @@ const OptionsModal = ({ product, open, onClose }: Props) => {
type="button"
onClick={handleAddAnOption}
>
<PlusIcon size="20" /> Add an option
<PlusIcon size="20" />{" "}
{t("product-variants-section-add-an-option", "Add an option")}
</Button>
</Modal.Content>
<Modal.Footer>
@@ -216,7 +242,7 @@ const OptionsModal = ({ product, open, onClose }: Props) => {
type="button"
onClick={handleClose}
>
Cancel
{t("product-variants-section-cancel", "Cancel")}
</Button>
<Button
variant="primary"
@@ -225,7 +251,7 @@ const OptionsModal = ({ product, open, onClose }: Props) => {
disabled={!isDirty}
loading={isSubmitting}
>
Save and close
{t("product-variants-section-save-and-close", "Save and close")}
</Button>
</div>
</Modal.Footer>

50
packages/admin-ui/ui/src/components/organisms/product-variants-section/table.tsx
View File

@@ -2,6 +2,7 @@ import { Column, useTable } from "react-table"
import { ProductVariant } from "@medusajs/medusa"
import { useMemo, useState } from "react"
import { useTranslation } from "react-i18next"
import { useFeatureFlag } from "../../../providers/feature-flag-provider"
import BuildingsIcon from "../../fundamentals/icons/buildings-icon"
import DuplicateIcon from "../../fundamentals/icons/duplicate-icon"
@@ -22,6 +23,7 @@ type Props = {
}
export const useVariantsTableColumns = (inventoryIsEnabled = false) => {
const { t } = useTranslation()
const columns = useMemo<Column<ProductVariant>[]>(() => {
const quantityColumns = []
if (!inventoryIsEnabled) {
@@ -29,7 +31,9 @@ export const useVariantsTableColumns = (inventoryIsEnabled = false) => {
Header: () => {
return (
<div className="text-right">
<span>Inventory</span>
<span>
{t("product-variants-section-inventory", "Inventory")}
</span>
</div>
)
},
@@ -47,12 +51,12 @@ export const useVariantsTableColumns = (inventoryIsEnabled = false) => {
}
return [
{
Header: "Title",
Header: t("product-variants-section-title", "Title"),
id: "title",
accessor: "title",
},
{
Header: "SKU",
Header: t("product-variants-section-sku", "SKU"),
id: "sku",
accessor: "sku",
maxWidth: 264,
@@ -65,7 +69,7 @@ export const useVariantsTableColumns = (inventoryIsEnabled = false) => {
},
},
{
Header: "EAN",
Header: t("product-variants-section-ean", "EAN"),
id: "ean",
accessor: "ean",
maxWidth: 264,
@@ -85,6 +89,7 @@ export const useVariantsTableColumns = (inventoryIsEnabled = false) => {
}
const VariantsTable = ({ variants, actions }: Props) => {
const { t } = useTranslation()
const { isFeatureEnabled } = useFeatureFlag()
const hasInventoryService = isFeatureEnabled("inventoryService")
const columns = useVariantsTableColumns(hasInventoryService)
@@ -112,20 +117,26 @@ const VariantsTable = ({ variants, actions }: Props) => {
const inventoryManagementActions = []
if (hasInventoryService) {
inventoryManagementActions.push({
label: "Manage inventory",
label: t(
"product-variants-section-manage-inventory",
"Manage inventory"
),
icon: <BuildingsIcon size="20" />,
onClick: () => updateVariantInventory(variant),
})
}
return [
{
label: "Edit Variant",
label: t("product-variants-section-edit-variant", "Edit Variant"),
icon: <EditIcon size="20" />,
onClick: () => updateVariant(variant),
},
...inventoryManagementActions,
{
label: "Duplicate Variant",
label: t(
"product-variants-section-duplicate-variant",
"Duplicate Variant"
),
onClick: () =>
// @ts-ignore
duplicateVariant({
@@ -135,7 +146,10 @@ const VariantsTable = ({ variants, actions }: Props) => {
icon: <DuplicateIcon size="20" />,
},
{
label: "Delete Variant",
label: t(
"product-variants-section-delete-variant-label",
"Delete Variant"
),
onClick: () => setVariantToRemove(variant),
icon: <TrashIcon size="20" />,
variant: "danger",
@@ -185,11 +199,23 @@ const VariantsTable = ({ variants, actions }: Props) => {
<DeletePrompt
onDelete={async () => deleteVariant(variantToRemove.id)}
handleClose={() => setVariantToRemove(null)}
confirmText="Yes, delete"
heading="Delete variant"
text={`Are you sure you want to delete this variant? ${
confirmText={t(
"product-variants-section-yes-delete",
"Yes, delete"
)}
heading={t(
"product-variants-section-delete-variant-heading",
"Delete variant"
)}
text={`${t(
"product-variants-section-confirm-delete",
"Are you sure you want to delete this variant? "
)}${
isFeatureEnabled("inventoryService")
? " Note: Deleting the variant will also remove inventory items and levels"
? t(
"product-variants-section-note-deleting-the-variant-will-also-remove-inventory-items-and-levels",
" Note: Deleting the variant will also remove inventory items and levels"
)
: ""
}`}
successText={false}

41
packages/admin-ui/ui/src/components/organisms/reset-token-card/index.tsx
View File

@@ -1,6 +1,7 @@
import { useAdminSendResetPasswordToken } from "medusa-react"
import React, { useState } from "react"
import { useForm } from "react-hook-form"
import { Trans, useTranslation } from "react-i18next"
import useNotification from "../../../hooks/use-notification"
import { getErrorMessage } from "../../../utils/error-messages"
import FormValidator from "../../../utils/form-validator"
@@ -22,6 +23,7 @@ const emailRegex = new RegExp(
)
const ResetTokenCard: React.FC<ResetTokenCardProps> = ({ goBack }) => {
const { t } = useTranslation()
const [mailSent, setSentMail] = useState(false)
const {
register,
@@ -42,7 +44,11 @@ const ResetTokenCard: React.FC<ResetTokenCardProps> = ({ goBack }) => {
setSentMail(true)
},
onError: (error) => {
notification("Error", getErrorMessage(error), "error")
notification(
t("reset-token-card-error", "Error"),
getErrorMessage(error),
"error"
)
},
}
)
@@ -52,25 +58,30 @@ const ResetTokenCard: React.FC<ResetTokenCardProps> = ({ goBack }) => {
<form onSubmit={onSubmit}>
<div className="flex flex-col items-center">
<h1 className="inter-xlarge-semibold text-grey-90 mb-xsmall text-[20px]">
Reset your password
{t("reset-token-card-reset-your-password", "Reset your password")}
</h1>
<span className="inter-base-regular text-grey-50 mb-large text-center">
Enter your email address below, and we&apos;ll
<br />
send you instructions on how to reset
<br />
your password.
<Trans t={t} i18nKey="reset-token-card-password-reset-description">
Enter your email address below, and we'll
<br />
send you instructions on how to reset
<br />
your password.
</Trans>
</span>
{!mailSent ? (
<>
<div className="w-[280px]">
<SigninInput
placeholder="Email"
placeholder={t("reset-token-card-email", "Email")}
{...register("email", {
required: FormValidator.required("Email"),
pattern: {
value: emailRegex,
message: "This is not a valid email",
message: t(
"reset-token-card-this-is-not-a-valid-email",
"This is not a valid email"
),
},
})}
/>
@@ -83,7 +94,10 @@ const ResetTokenCard: React.FC<ResetTokenCardProps> = ({ goBack }) => {
type="submit"
loading={isLoading}
>
Send reset instructions
{t(
"reset-token-card-send-reset-instructions",
"Send reset instructions"
)}
</Button>
</>
) : (
@@ -93,7 +107,10 @@ const ResetTokenCard: React.FC<ResetTokenCardProps> = ({ goBack }) => {
</div>
<div className="gap-y-2xsmall flex flex-col">
<span className="inter-base-regular">
Successfully sent you an email
{t(
"reset-token-card-successfully-sent-you-an-email",
"Successfully sent you an email"
)}
</span>
</div>
</div>
@@ -102,7 +119,7 @@ const ResetTokenCard: React.FC<ResetTokenCardProps> = ({ goBack }) => {
className="inter-small-regular text-grey-50 mt-8 cursor-pointer"
onClick={goBack}
>
Go back to sign in
{t("reset-token-card-go-back-to-sign-in", "Go back to sign in")}
</span>
</div>
</form>

10
packages/admin-ui/ui/src/components/organisms/rma-return-product-table/index.tsx
View File

@@ -1,5 +1,6 @@
import clsx from "clsx"
import React from "react"
import { useTranslation } from "react-i18next"
import { formatAmountWithSymbol } from "../../../utils/prices"
import Button from "../../fundamentals/button"
import MinusIcon from "../../fundamentals/icons/minus-icon"
@@ -39,11 +40,16 @@ const RMAReturnProductsTable: React.FC<RMAReturnProductsTableProps> = ({
handleRemoveItem,
handleToAddQuantity,
}) => {
const { t } = useTranslation()
return (
<Table>
<Table.HeadRow className="text-grey-50 inter-small-semibold">
<Table.HeadCell>Product Details</Table.HeadCell>
<Table.HeadCell className="pr-8 text-right">Quantity</Table.HeadCell>
<Table.HeadCell>
{t("rma-return-product-table-product-details", "Product Details")}
</Table.HeadCell>
<Table.HeadCell className="pr-8 text-right">
{t("rma-return-product-table-quantity", "Quantity")}
</Table.HeadCell>
<Table.HeadCell className="text-right">
{isAdditionalItems ? "Unit Price" : "Refundable"}
</Table.HeadCell>

31
packages/admin-ui/ui/src/components/organisms/rma-select-product-table/index.tsx
View File

@@ -1,6 +1,7 @@
import { LineItem, Order } from "@medusajs/medusa"
import clsx from "clsx"
import React, { Fragment, useContext } from "react"
import { useTranslation } from "react-i18next"
import RMAReturnReasonSubModal from "../../../domain/orders/details/rma-sub-modals/return-reasons"
import Medusa from "../../../services/api"
import { isLineItemCanceled } from "../../../utils/is-line-item"
@@ -32,6 +33,7 @@ const RMASelectProductTable: React.FC<RMASelectProductTableProps> = ({
setToReturn,
isSwapOrClaim = false,
}) => {
const { t } = useTranslation()
const { push, pop } = useContext(LayeredModalContext)
const handleQuantity = (change, item) => {
@@ -112,9 +114,15 @@ const RMASelectProductTable: React.FC<RMASelectProductTableProps> = ({
<Table>
<Table.Head className="border-none">
<Table.HeadRow className="text-grey-50 inter-small-semibold">
<Table.HeadCell colSpan={2}>Product Details</Table.HeadCell>
<Table.HeadCell className="pr-8 text-right">Quantity</Table.HeadCell>
<Table.HeadCell className="text-right">Refundable</Table.HeadCell>
<Table.HeadCell colSpan={2}>
{t("rma-select-product-table-product-details", "Product Details")}
</Table.HeadCell>
<Table.HeadCell className="pr-8 text-right">
{t("rma-select-product-table-quantity", "Quantity")}
</Table.HeadCell>
<Table.HeadCell className="text-right">
{t("rma-select-product-table-refundable", "Refundable")}
</Table.HeadCell>
<Table.HeadCell></Table.HeadCell>
</Table.HeadRow>
</Table.Head>
@@ -231,11 +239,13 @@ const RMASelectProductTable: React.FC<RMASelectProductTableProps> = ({
<span className="ml-2">
{toReturn[item.id]?.images?.length > 0 && (
<>
({toReturn[item.id]?.images?.length} image{" "}
{toReturn[item.id]?.images?.length > 1
? "s"
: ""}
)
{t(
"rma-select-product-table-images-witch-count",
"{{count}}",
{
count: toReturn[item.id]?.images?.length,
}
)}
</>
)}
</span>
@@ -263,7 +273,10 @@ const RMASelectProductTable: React.FC<RMASelectProductTableProps> = ({
size="small"
className="border-grey-20 border"
>
Select Reason
{t(
"rma-select-product-table-select-reason",
"Select Reason"
)}
</Button>
</div>
</Table.Cell>

24
packages/admin-ui/ui/src/components/organisms/sidebar/index.tsx
View File

@@ -1,5 +1,6 @@
import { useAdminStore } from "medusa-react"
import React, { useState } from "react"
import { useTranslation } from "react-i18next"
import { useFeatureFlag } from "../../../providers/feature-flag-provider"
import { useRoutes } from "../../../providers/route-provider"
@@ -19,6 +20,7 @@ import UserMenu from "../../molecules/user-menu"
const ICON_SIZE = 20
const Sidebar: React.FC = () => {
const { t } = useTranslation()
const [currentlyOpen, setCurrentlyOpen] = useState(-1)
const { isFeatureEnabled } = useFeatureFlag()
@@ -50,7 +52,9 @@ const Sidebar: React.FC = () => {
</div>
</div>
<div className="my-base flex flex-col px-2">
<span className="text-grey-50 text-small font-medium">Store</span>
<span className="text-grey-50 text-small font-medium">
{t("sidebar-store", "Store")}
</span>
<span className="text-grey-90 text-medium font-medium">
{store?.name}
</span>
@@ -60,19 +64,19 @@ const Sidebar: React.FC = () => {
pageLink={"/a/orders"}
icon={<CartIcon size={ICON_SIZE} />}
triggerHandler={triggerHandler}
text={"Orders"}
text={t("sidebar-orders", "Orders")}
/>
<SidebarMenuItem
pageLink={"/a/products"}
icon={<TagIcon size={ICON_SIZE} />}
text={"Products"}
text={t("sidebar-products", "Products")}
triggerHandler={triggerHandler}
/>
{isFeatureEnabled("product_categories") && (
<SidebarMenuItem
pageLink={"/a/product-categories"}
icon={<SwatchIcon size={ICON_SIZE} />}
text={"Categories"}
text={t("sidebar-categories", "Categories")}
triggerHandler={triggerHandler}
/>
)}
@@ -80,33 +84,33 @@ const Sidebar: React.FC = () => {
pageLink={"/a/customers"}
icon={<UsersIcon size={ICON_SIZE} />}
triggerHandler={triggerHandler}
text={"Customers"}
text={t("sidebar-customers", "Customers")}
/>
{inventoryEnabled && (
<SidebarMenuItem
pageLink={"/a/inventory"}
icon={<BuildingsIcon size={ICON_SIZE} />}
triggerHandler={triggerHandler}
text={"Inventory"}
text={t("sidebar-inventory", "Inventory")}
/>
)}
<SidebarMenuItem
pageLink={"/a/discounts"}
icon={<SaleIcon size={ICON_SIZE} />}
triggerHandler={triggerHandler}
text={"Discounts"}
text={t("sidebar-discounts", "Discounts")}
/>
<SidebarMenuItem
pageLink={"/a/gift-cards"}
icon={<GiftIcon size={ICON_SIZE} />}
triggerHandler={triggerHandler}
text={"Gift Cards"}
text={t("sidebar-gift-cards", "Gift Cards")}
/>
<SidebarMenuItem
pageLink={"/a/pricing"}
icon={<CashIcon size={ICON_SIZE} />}
triggerHandler={triggerHandler}
text={"Pricing"}
text={t("sidebar-pricing", "Pricing")}
/>
{getLinks().map(({ path, label, icon }, index) => {
const cleanLink = path.replace("/a/", "")
@@ -127,7 +131,7 @@ const Sidebar: React.FC = () => {
pageLink={"/a/settings"}
icon={<GearIcon size={ICON_SIZE} />}
triggerHandler={triggerHandler}
text={"Settings"}
text={t("sidebar-settings", "Settings")}
/>
</div>
</div>

26
packages/admin-ui/ui/src/components/organisms/table-container/pagination.tsx
View File

@@ -1,3 +1,4 @@
import { useTranslation } from "react-i18next"
import { SkeletonProvider } from "../../../providers/skeleton-provider"
import Skeleton from "../../atoms/skeleton"
import ArrowLeftIcon from "../../fundamentals/icons/arrow-left-icon"
@@ -24,6 +25,7 @@ export const TablePagination = ({
hasPrev,
},
}: Props) => {
const { t } = useTranslation()
const soothedOffset = count > 0 ? offset + 1 : 0
const soothedPageCount = Math.max(1, pageCount)
@@ -35,11 +37,31 @@ export const TablePagination = ({
}
>
<Skeleton>
<div>{`${soothedOffset} - ${pageSize} of ${count} ${title}`}</div>
<div>
{t(
"table-container-soothed-offset",
"{{soothedOffset}} - {{pageSize}} of {{count}} {{title}}",
{
soothedOffset,
pageSize,
count,
title,
}
)}
</div>
</Skeleton>
<div className="flex space-x-4">
<Skeleton>
<div>{`${currentPage} of ${soothedPageCount}`}</div>
<div>
{t(
"table-container-current-page",
"{{currentPage}} of {{soothedPageCount}}",
{
currentPage,
soothedPageCount,
}
)}
</div>
</Skeleton>
<div className="flex items-center space-x-4">
<button

26
packages/admin-ui/ui/src/components/organisms/timeline/index.tsx
View File

@@ -1,6 +1,7 @@
import clsx from "clsx"
import { useAdminCreateNote, useAdminOrder } from "medusa-react"
import React, { useState } from "react"
import { useTranslation } from "react-i18next"
import RegisterClaimMenu from "../../../domain/orders/details/claim/register-claim-menu"
import ReturnMenu from "../../../domain/orders/details/returns"
@@ -55,6 +56,7 @@ type TimelineProps = {
}
const Timeline: React.FC<TimelineProps> = ({ orderId }) => {
const { t } = useTranslation()
const { orderRelations } = useOrdersExpandParam()
const { events, refetch } = useBuildTimeline(orderId)
@@ -76,17 +78,17 @@ const Timeline: React.FC<TimelineProps> = ({ orderId }) => {
const actions: ActionType[] = [
{
icon: <BackIcon size={20} />,
label: "Request Return",
label: t("timeline-request-return", "Request Return"),
onClick: () => setShowRequestReturn(true),
},
{
icon: <RefreshIcon size={20} />,
label: "Register Exchange",
label: t("timeline-register-exchange", "Register Exchange"),
onClick: () => setshowCreateSwap(true),
},
{
icon: <AlertIcon size={20} />,
label: "Register Claim",
label: t("timeline-register-claim", "Register Claim"),
onClick: openRegisterClaim,
},
]
@@ -102,8 +104,18 @@ const Timeline: React.FC<TimelineProps> = ({ orderId }) => {
value: value,
},
{
onSuccess: () => notification("Success", "Added note", "success"),
onError: (err) => notification("Error", getErrorMessage(err), "error"),
onSuccess: () =>
notification(
t("timeline-success", "Success"),
t("timeline-added-note", "Added note"),
"success"
),
onError: (err) =>
notification(
t("timeline-error", "Error"),
getErrorMessage(err),
"error"
),
}
)
}
@@ -113,7 +125,9 @@ const Timeline: React.FC<TimelineProps> = ({ orderId }) => {
<div className="rounded-rounded border-grey-20 bg-grey-0 h-full w-5/12 border">
<div className="border-grey-20 py-large px-xlarge border-b">
<div className="flex items-center justify-between">
<h3 className="inter-xlarge-semibold">Timeline</h3>
<h3 className="inter-xlarge-semibold">
{t("timeline-timeline", "Timeline")}
</h3>
<div
className={clsx({
"pointer-events-none opacity-50": !events,

1
packages/admin-ui/ui/src/components/organisms/topbar/index.tsx
View File

@@ -7,6 +7,7 @@ import NotificationBell from "../../molecules/notification-bell"
import SearchBar from "../../molecules/search-bar"
import ActivityDrawer from "../activity-drawer"
import MailDialog from "../help-dialog"
import LanguageMenu from "../../molecules/language-menu"
const Topbar: React.FC = () => {
const {

30
packages/admin-ui/ui/src/components/organisms/upload-modal/index.tsx
View File

@@ -1,6 +1,7 @@
import clsx from "clsx"
import { ReactNode, useState } from "react"
import { useHref } from "react-router-dom"
import { useTranslation } from "react-i18next"
import Tooltip from "../../atoms/tooltip"
import Button from "../../fundamentals/button"
@@ -83,16 +84,18 @@ type UploadSummaryProps = {
*/
function UploadSummary(props: UploadSummaryProps) {
const { creations, updates, type } = props
const { t } = useTranslation()
return (
<div className="flex gap-6">
<div className="text-small text-grey-90 flex items-center">
<CheckCircleIcon color="#9CA3AF" className="mr-2" />
<span className="font-semibold"> {creations || 0}&nbsp;</span> new{" "}
{type}
<span className="font-semibold"> {creations || 0}&nbsp;</span>{" "}
{t("upload-modal-new", "new")} {type}
</div>
<div className="text-small text-grey-90 flex items-center">
<WarningCircleIcon fill="#9CA3AF" className="mr-2" />
<span className="font-semibold">{updates || 0}&nbsp;</span> updates
<span className="font-semibold">{updates || 0}&nbsp;</span>{" "}
{t("upload-modal-updates", "updates")}
</div>
</div>
)
@@ -106,6 +109,7 @@ type DropAreaProps = {
* Component handles an CSV file drop.
*/
function DropArea(props: DropAreaProps) {
const { t } = useTranslation()
const [isDragOver, setIsDragOver] = useState(false)
const handleFileDrop = (e) => {
@@ -139,11 +143,11 @@ function DropArea(props: DropAreaProps) {
)}
>
<span className="text-grey-50 text-small">
Drop your file here, or
{t("upload-modal-drop-your-file-here-or", "Drop your file here, or")}
<a className="text-violet-60">
<label className="cursor-pointer" htmlFor="upload-form-file">
{" "}
click to browse.
{t("upload-modal-click-to-browse", "click to browse.")}
</label>
<input
type="file"
@@ -156,7 +160,10 @@ function DropArea(props: DropAreaProps) {
</a>
</span>
<span className="text-grey-40 text-small">
Only .csv files are supported.
{t(
"upload-modal-only-csv-files-are-supported",
"Only .csv files are supported."
)}
</span>
</div>
)
@@ -203,6 +210,7 @@ function UploadModal(props: UploadModalProps) {
type,
} = props
const [uploadFile, setUploadFile] = useState<File>()
const { t } = useTranslation()
const { name, size } = uploadFile || {}
@@ -222,7 +230,7 @@ function UploadModal(props: UploadModalProps) {
<Modal.Content>
<div className="flex justify-between">
<span className="text-grey-90 inter-large-semibold py-4 text-2xl">
Import {fileTitle}
Import {{ fileTitle }}
</span>
<button onClick={onClose} className="text-grey-50 cursor-pointer">
<CrossIcon size={20} />
@@ -230,7 +238,9 @@ function UploadModal(props: UploadModalProps) {
</div>
<div className="text-grey-90 inter-large-semibold mb-1 text-base">
Import {fileTitle}
{t("upload-modal-import-file-title", "Import {{fileTitle}}", {
fileTitle,
})}
</div>
<p className="text-grey-50 mb-4 text-base">{description1Text}</p>
@@ -293,7 +303,7 @@ function UploadModal(props: UploadModalProps) {
size="small"
onClick={onClose}
>
Cancel
{t("upload-modal-cancel", "Cancel")}
</Button>
<Button
@@ -303,7 +313,7 @@ function UploadModal(props: UploadModalProps) {
className="text-small"
onClick={onSubmit}
>
Import List
{t("upload-modal-import-list", "Import List")}
</Button>
</div>
</div>

15
packages/admin-ui/ui/src/components/templates/add-products-modal/index.tsx
View File

@@ -1,6 +1,7 @@
import { Product } from "@medusajs/medusa"
import { useAdminProducts } from "medusa-react"
import * as React from "react"
import { useTranslation } from "react-i18next"
import Button from "../../fundamentals/button"
import Modal from "../../molecules/modal"
import { SelectableTable } from "../selectable-table"
@@ -24,6 +25,7 @@ const AddProductsModal = ({
initialSelection,
onSave,
}: AddProductsModalProps) => {
const { t } = useTranslation()
/* ************* Data ************ */
const params = useQueryFilters(defaultQueryProps)
@@ -62,7 +64,9 @@ const AddProductsModal = ({
<Modal open handleClose={close}>
<Modal.Body>
<Modal.Header handleClose={close}>
<h2 className="inter-xlarge-semibold">Add Products</h2>
<h2 className="inter-xlarge-semibold">
{t("add-products-modal-add-products", "Add Products")}
</h2>
</Modal.Header>
<Modal.Content>
<div className="flex h-full min-h-[300px] w-full flex-col justify-between ">
@@ -78,7 +82,10 @@ const AddProductsModal = ({
totalCount={count}
options={{
enableSearch: true,
searchPlaceholder: "Search by name or description...",
searchPlaceholder: t(
"add-products-modal-search-by-name-or-description",
"Search by name or description..."
),
}}
{...params}
/>
@@ -91,14 +98,14 @@ const AddProductsModal = ({
className="rounded-rounded h-8 w-[128px]"
onClick={close}
>
Cancel
{t("add-products-modal-cancel", "Cancel")}
</Button>
<Button
variant="primary"
className="rounded-rounded h-8 w-[128px]"
onClick={handleSave}
>
Save
{t("add-products-modal-save", "Save")}
</Button>
</div>
</Modal.Footer>

25
packages/admin-ui/ui/src/components/templates/add-products-modal/product-table-config.tsx
View File

@@ -1,13 +1,20 @@
import { Product } from "@medusajs/medusa"
import clsx from "clsx"
import { Column, HeaderGroup, Row } from "react-table"
import { Translation } from "react-i18next"
import ImagePlaceholder from "../../fundamentals/image-placeholder"
import Table from "../../molecules/table"
import { decideStatus } from "../collection-product-table/utils"
export const columns: Column<Product>[] = [
{
Header: <div className="pl-4">Product Details</div>,
Header: (
<div className="pl-4">
<Translation>
{(t) => t("add-products-modal-product-details", "Product Details")}
</Translation>
</div>
),
accessor: "title",
Cell: ({ row: { original } }) => (
<div className="flex w-[400px] items-center pl-4">
@@ -33,7 +40,13 @@ export const columns: Column<Product>[] = [
),
},
{
Header: <div>Status</div>,
Header: (
<div>
<Translation>
{(t) => t("add-products-modal-status", "Status")}
</Translation>
</div>
),
accessor: "status",
Cell: ({ cell: { value } }) => (
<Table.Cell className="pr-base w-[10%]">
@@ -42,7 +55,13 @@ export const columns: Column<Product>[] = [
),
},
{
Header: <div className="flex items-center justify-end pr-4">Variants</div>,
Header: (
<div className="flex items-center justify-end pr-4">
<Translation>
{(t) => t("add-products-modal-variants", "Variants")}
</Translation>
</div>
),
accessor: "variants",
Cell: ({ row: { original } }) => (
<Table.Cell className="flex items-center justify-end pr-4">

54
packages/admin-ui/ui/src/components/templates/address-form.tsx
View File

@@ -1,4 +1,5 @@
import { Controller } from "react-hook-form"
import { useTranslation } from "react-i18next"
import { Option } from "../../types/shared"
import FormValidator from "../../utils/form-validator"
import { nestedForm, NestedForm } from "../../utils/nested-form"
@@ -47,11 +48,14 @@ const AddressForm = ({
control,
formState: { errors },
} = form
const { t } = useTranslation()
return (
<div>
{(type === AddressType.SHIPPING || type === AddressType.BILLING) && (
<>
<span className="inter-base-semibold">General</span>
<span className="inter-base-semibold">
{t("templates-general", "General")}
</span>
<div className="gap-large mt-4 mb-8 grid grid-cols-2">
<Input
{...register(path("first_name"), {
@@ -60,8 +64,8 @@ const AddressForm = ({
: false,
pattern: FormValidator.whiteSpaceRule("First name"),
})}
placeholder="First Name"
label="First Name"
placeholder={t("templates-first-name", "First Name")}
label={t("templates-first-name", "First Name")}
required={required}
errors={errors}
/>
@@ -72,8 +76,8 @@ const AddressForm = ({
: false,
pattern: FormValidator.whiteSpaceRule("Last name"),
})}
placeholder="Last Name"
label="Last Name"
placeholder={t("templates-last-name", "Last Name")}
label={t("templates-last-name", "Last Name")}
required={required}
errors={errors}
/>
@@ -81,14 +85,14 @@ const AddressForm = ({
{...form.register(path("company"), {
pattern: FormValidator.whiteSpaceRule("Company"),
})}
placeholder="Company"
label="Company"
placeholder={t("templates-company", "Company")}
label={t("templates-company", "Company")}
errors={errors}
/>
<Input
{...form.register(path("phone"))}
placeholder="Phone"
label="Phone"
placeholder={t("templates-phone", "Phone")}
label={t("templates-phone", "Phone")}
errors={errors}
/>
</div>
@@ -98,10 +102,10 @@ const AddressForm = ({
<span className="inter-base-semibold">
{`${
type === AddressType.BILLING
? "Billing Address"
? t("templates-billing-address", "Billing Address")
: type === AddressType.SHIPPING
? "Shipping Address"
: "Address"
? t("templates-shipping-address", "Shipping Address")
: t("templates-address", "Address")
}`}
</span>
)}
@@ -111,8 +115,8 @@ const AddressForm = ({
required: required ? FormValidator.required("Address 1") : false,
pattern: FormValidator.whiteSpaceRule("Address 1"),
})}
placeholder="Address 1"
label="Address 1"
placeholder={t("templates-address-1", "Address 1")}
label={t("templates-address-1", "Address 1")}
required={required}
errors={errors}
/>
@@ -120,8 +124,8 @@ const AddressForm = ({
{...form.register(path("address_2"), {
pattern: FormValidator.whiteSpaceRule("Address 2"),
})}
placeholder="Address 2"
label="Address 2"
placeholder={t("templates-address-2", "Address 2")}
label={t("templates-address-2", "Address 2")}
errors={errors}
/>
<Input
@@ -129,15 +133,15 @@ const AddressForm = ({
required: required ? FormValidator.required("Postal code") : false,
pattern: FormValidator.whiteSpaceRule("Postal code"),
})}
placeholder="Postal code"
label="Postal code"
placeholder={t("templates-postal-code", "Postal code")}
label={t("templates-postal-code", "Postal code")}
required={required}
autoComplete="off"
errors={errors}
/>
<Input
placeholder="City"
label="City"
placeholder={t("templates-city", "City")}
label={t("templates-city", "City")}
{...form.register(path("city"), {
required: required ? FormValidator.required("City") : false,
pattern: FormValidator.whiteSpaceRule("City"),
@@ -149,8 +153,8 @@ const AddressForm = ({
{...form.register(path("province"), {
pattern: FormValidator.whiteSpaceRule("Province"),
})}
placeholder="Province"
label="Province"
placeholder={t("templates-province", "Province")}
label={t("templates-province", "Province")}
errors={errors}
/>
<Controller
@@ -162,7 +166,7 @@ const AddressForm = ({
render={({ field: { value, onChange } }) => {
return (
<NextSelect
label="Country"
label={t("templates-country", "Country")}
required={required}
value={value}
options={countryOptions}
@@ -176,7 +180,9 @@ const AddressForm = ({
/>
</div>
<div className="mt-xlarge gap-y-base flex flex-col">
<span className="inter-base-semibold">Metadata</span>
<span className="inter-base-semibold">
{t("templates-metadata", "Metadata")}
</span>
<MetadataForm form={nestedForm(form, "metadata")} />
</div>
</div>

75
packages/admin-ui/ui/src/components/templates/collection-modal/index.tsx
View File

@@ -5,6 +5,7 @@ import {
} from "medusa-react"
import React, { useEffect } from "react"
import { useForm } from "react-hook-form"
import { useTranslation } from "react-i18next"
import useNotification from "../../../hooks/use-notification"
import { getErrorMessage } from "../../../utils/error-messages"
import { nestedForm } from "../../../utils/nested-form"
@@ -36,6 +37,7 @@ const CollectionModal: React.FC<CollectionModalProps> = ({
isEdit = false,
collection,
}) => {
const { t } = useTranslation()
const { mutate: update, isLoading: updating } = useAdminUpdateCollection(
collection?.id!
)
@@ -93,14 +95,21 @@ const CollectionModal: React.FC<CollectionModalProps> = ({
{
onSuccess: () => {
notification(
"Success",
"Successfully updated collection",
t("collection-modal-success", "Success"),
t(
"collection-modal-successfully-updated-collection",
"Successfully updated collection"
),
"success"
)
onClose()
},
onError: (error) => {
notification("Error", getErrorMessage(error), "error")
notification(
t("collection-modal-error", "Error"),
getErrorMessage(error),
"error"
)
},
}
)
@@ -114,14 +123,21 @@ const CollectionModal: React.FC<CollectionModalProps> = ({
{
onSuccess: () => {
notification(
"Success",
"Successfully created collection",
t("collection-modal-success", "Success"),
t(
"collection-modal-successfully-created-collection",
"Successfully created collection"
),
"success"
)
onClose()
},
onError: (error) => {
notification("Error", getErrorMessage(error), "error")
notification(
t("collection-modal-error", "Error"),
getErrorMessage(error),
"error"
)
},
}
)
@@ -134,37 +150,57 @@ const CollectionModal: React.FC<CollectionModalProps> = ({
<Modal.Header handleClose={onClose}>
<div>
<h1 className="inter-xlarge-semibold mb-2xsmall">
{isEdit ? "Edit Collection" : "Add Collection"}
{isEdit
? t("collection-modal-edit-collection", "Edit Collection")
: t("collection-modal-add-collection", "Add Collection")}
</h1>
<p className="inter-small-regular text-grey-50">
To create a collection, all you need is a title and a handle.
{t(
"collection-modal-description",
"To create a collection, all you need is a title and a handle."
)}
</p>
</div>
</Modal.Header>
<form onSubmit={handleSubmit(submit)}>
<Modal.Content>
<div>
<h2 className="inter-base-semibold mb-base">Details</h2>
<h2 className="inter-base-semibold mb-base">
{t("collection-modal-details", "Details")}
</h2>
<div className="gap-x-base flex items-center">
<InputField
label="Title"
label={t("collection-modal-title-label", "Title")}
required
placeholder="Sunglasses"
placeholder={t(
"collection-modal-title-placeholder",
"Sunglasses"
)}
{...register("title", { required: true })}
/>
<InputField
label="Handle"
placeholder="sunglasses"
label={t("collection-modal-handle-label", "Handle")}
placeholder={t(
"collection-modal-handle-placeholder",
"sunglasses"
)}
{...register("handle")}
prefix="/"
tooltip={
<IconTooltip content="URL Slug for the collection. Will be auto generated if left blank." />
<IconTooltip
content={t(
"collection-modal-slug-description",
"URL Slug for the collection. Will be auto generated if left blank."
)}
/>
}
/>
</div>
</div>
<div className="mt-xlarge">
<h2 className="inter-base-semibold mb-base">Metadata</h2>
<h2 className="inter-base-semibold mb-base">
{t("collection-modal-metadata", "Metadata")}
</h2>
<MetadataForm form={nestedForm(form, "metadata")} />
</div>
</Modal.Content>
@@ -176,14 +212,19 @@ const CollectionModal: React.FC<CollectionModalProps> = ({
type="button"
onClick={onClose}
>
Cancel
{t("collection-modal-cancel", "Cancel")}
</Button>
<Button
variant="primary"
size="small"
loading={isEdit ? updating : creating}
>
{`${isEdit ? "Save" : "Publish"} collection`}
{isEdit
? t("collection-modal-save-collection", "Save collection")
: t(
"collection-modal-publish-collection",
"Publish collection"
)}
</Button>
</div>
</Modal.Footer>

17
packages/admin-ui/ui/src/components/templates/collection-product-table/add-product-table.tsx
View File

@@ -1,6 +1,7 @@
import { useAdminProducts } from "medusa-react"
import React, { useEffect, useState } from "react"
import { usePagination, useRowSelect, useTable } from "react-table"
import { useTranslation } from "react-i18next"
import { useDebounce } from "../../../hooks/use-debounce"
import Button from "../../fundamentals/button"
import IndeterminateCheckbox from "../../molecules/indeterminate-checkbox"
@@ -21,6 +22,7 @@ const AddProductsTable: React.FC<AddProductsTableProps> = ({
onClose,
}) => {
const PAGE_SIZE = 10
const { t } = useTranslation()
const [query, setQuery] = useState("")
const [offset, setOffset] = useState(0)
const [numPages, setNumPages] = useState(0)
@@ -157,7 +159,9 @@ const AddProductsTable: React.FC<AddProductsTableProps> = ({
<Modal handleClose={onClose}>
<Modal.Body>
<Modal.Header handleClose={onClose}>
<h3 className="inter-xlarge-semibold">Add Products</h3>
<h3 className="inter-xlarge-semibold">
{t("collection-product-table-add-products", "Add Products")}
</h3>
</Modal.Header>
<Modal.Content>
<TableContainer
@@ -168,7 +172,7 @@ const AddProductsTable: React.FC<AddProductsTableProps> = ({
count: count!,
offset: offset,
pageSize: offset + rows.length,
title: "Products",
title: t("collection-product-table-products", "Products"),
currentPage: pageIndex + 1,
pageCount: pageCount,
nextPage: handleNext,
@@ -181,7 +185,10 @@ const AddProductsTable: React.FC<AddProductsTableProps> = ({
enableSearch
handleSearch={handleSearch}
searchValue={query}
searchPlaceholder="Search Products"
searchPlaceholder={t(
"collection-product-table-search-products",
"Search Products"
)}
{...getTableProps()}
className="flex-grow"
>
@@ -212,7 +219,7 @@ const AddProductsTable: React.FC<AddProductsTableProps> = ({
className="w-eventButton"
onClick={onClose}
>
Cancel
{t("collection-product-table-cancel", "Cancel")}
</Button>
<Button
variant="primary"
@@ -221,7 +228,7 @@ const AddProductsTable: React.FC<AddProductsTableProps> = ({
onClick={handleSubmit}
disabled={disabled}
>
Save
{t("collection-product-table-save", "Save")}
</Button>
</div>
</Modal.Footer>

17
packages/admin-ui/ui/src/components/templates/collection-product-table/index.tsx
View File

@@ -1,6 +1,7 @@
import { useAdminProducts } from "medusa-react"
import React, { useEffect, useState } from "react"
import { Column, usePagination, useRowSelect, useTable } from "react-table"
import { useTranslation } from "react-i18next"
import { useDebounce } from "../../../hooks/use-debounce"
import IndeterminateCheckbox from "../../molecules/indeterminate-checkbox"
import Table from "../../molecules/table"
@@ -17,6 +18,7 @@ const CollectionProductTable: React.FC<CollectionProductTableProps> = ({
addedProducts,
setProducts,
}) => {
const { t } = useTranslation()
const [query, setQuery] = useState("")
const [limit, setLimit] = useState(10)
const [offset, setOffset] = useState(0)
@@ -39,18 +41,18 @@ const CollectionProductTable: React.FC<CollectionProductTableProps> = ({
useEffect(() => {
setFilteringOptions([
{
title: "Sort by",
title: t("collection-product-table-sort-by", "Sort by"),
options: [
{
title: "All",
title: t("collection-product-table-all", "All"),
onClick: () => {},
},
{
title: "Newest",
title: t("collection-product-table-newest", "Newest"),
onClick: () => {},
},
{
title: "Oldest",
title: t("collection-product-table-oldest", "Oldest"),
onClick: () => {},
},
],
@@ -152,7 +154,7 @@ const CollectionProductTable: React.FC<CollectionProductTableProps> = ({
count: count!,
offset: offset,
pageSize: offset + rows.length,
title: "Products",
title: t("collection-product-table-products", "Products"),
currentPage: pageIndex + 1,
pageCount: pageCount,
nextPage: handleNext,
@@ -164,7 +166,10 @@ const CollectionProductTable: React.FC<CollectionProductTableProps> = ({
<Table
enableSearch
handleSearch={handleSearch}
searchPlaceholder="Search Products"
searchPlaceholder={t(
"collection-product-table-search-products",
"Search Products"
)}
filteringOptions={filteringOptions}
{...getTableProps()}
className="h-full"

12
packages/admin-ui/ui/src/components/templates/collection-product-table/use-sorting-options.tsx
View File

@@ -1,10 +1,12 @@
import { useEffect, useState } from "react"
import { useTranslation } from "react-i18next"
import { FilteringOptionProps } from "../../molecules/table/filtering-option"
import { SimpleProductType } from "./utils"
// TODO: Redo this with server side sorting
const useSortingOptions = (products: SimpleProductType[]) => {
const { t } = useTranslation()
const [options, setOptions] = useState<FilteringOptionProps[]>([])
const [sortedProducts, setSortedProducts] =
useState<SimpleProductType[]>(products)
@@ -42,16 +44,16 @@ const useSortingOptions = (products: SimpleProductType[]) => {
useEffect(() => {
setOptions([
{
title: "Sort by",
title: t("collection-product-table-sort-by", "Sort by"),
options: [
{
title: "All",
title: t("collection-product-table-all", "All"),
onClick: () => {
setSortedProducts(products)
},
},
{
title: "Newest",
title: t("collection-product-table-newest", "Newest"),
onClick: () => {
const sorted = products.sort(sortByNewest)
console.log(sorted)
@@ -59,7 +61,7 @@ const useSortingOptions = (products: SimpleProductType[]) => {
},
},
{
title: "Oldest",
title: t("collection-product-table-oldest", "Oldest"),
onClick: () => {
const sorted = products.sort(sortByOldest)
console.log(sorted)
@@ -67,7 +69,7 @@ const useSortingOptions = (products: SimpleProductType[]) => {
},
},
{
title: "Title",
title: t("collection-product-table-title", "Title"),
onClick: () => {
const sorted = products.sort(sortByTitle)
console.log(sorted)

48
packages/admin-ui/ui/src/components/templates/collection-product-table/utils.tsx
View File

@@ -1,3 +1,4 @@
import { Translation } from "react-i18next"
import StatusIndicator from "../../fundamentals/status-indicator"
export type SimpleProductType = {
@@ -11,13 +12,52 @@ export type SimpleProductType = {
export const decideStatus = (status: string) => {
switch (status) {
case "published":
return <StatusIndicator title="Published" variant="success" />
return (
<Translation>
{(t) => (
<StatusIndicator
title={t(
"collection-product-table-decide-status-published",
"Published"
)}
variant="success"
/>
)}
</Translation>
)
case "draft":
return <StatusIndicator title="Draft" variant="default" />
return (
<Translation>
{(t) => (
<StatusIndicator
title={t("collection-product-table-draft", "Draft")}
variant="default"
/>
)}
</Translation>
)
case "proposed":
return <StatusIndicator title="Proposed" variant="warning" />
return (
<Translation>
{(t) => (
<StatusIndicator
title={t("collection-product-table-proposed", "Proposed")}
variant="warning"
/>
)}
</Translation>
)
case "rejected":
return <StatusIndicator title="Rejected" variant="danger" />
return (
<Translation>
{(t) => (
<StatusIndicator
title={t("collection-product-table-rejected", "Rejected")}
variant="danger"
/>
)}
</Translation>
)
default:
return null
}

17
packages/admin-ui/ui/src/components/templates/collection-product-table/view-products-table.tsx
View File

@@ -1,6 +1,7 @@
import { useAdminProducts } from "medusa-react"
import React, { useEffect, useState } from "react"
import { usePagination, useTable } from "react-table"
import { useTranslation } from "react-i18next"
import { useDebounce } from "../../../hooks/use-debounce"
import Medusa from "../../../services/api"
import Button from "../../fundamentals/button"
@@ -25,6 +26,7 @@ const ViewProductsTable: React.FC<ViewProductsTableProps> = ({
const [numPages, setNumPages] = useState(0)
const [currentPage, setCurrentPage] = useState(0)
const debouncedSearchTerm = useDebounce(query, 500)
const { t } = useTranslation()
const [showDelete, setShowDelete] = useState(false)
const [idToDelete, setIdToDelete] = useState<string | undefined>(undefined)
@@ -157,7 +159,10 @@ const ViewProductsTable: React.FC<ViewProductsTableProps> = ({
<Table
enableSearch
handleSearch={handleSearch}
searchPlaceholder="Search Products"
searchPlaceholder={t(
"collection-product-table-search-products",
"Search Products"
)}
{...getTableProps()}
className="h-full"
>
@@ -183,8 +188,14 @@ const ViewProductsTable: React.FC<ViewProductsTableProps> = ({
<DeletePrompt
onDelete={async () => handleRemoveProduct()}
handleClose={() => setShowDelete(!showDelete)}
heading="Remove product from collection"
successText="Product removed from collection"
heading={t(
"collection-product-table-remove-product-from-collection",
"Remove product from collection"
)}
successText={t(
"collection-product-table-product-removed-from-collection",
"Product removed from collection"
)}
/>
)}
</>

13
packages/admin-ui/ui/src/components/templates/collections-table/use-collection-actions.tsx
View File

@@ -1,19 +1,24 @@
import { useAdminDeleteCollection } from "medusa-react"
import { useNavigate } from "react-router-dom"
import { useTranslation } from "react-i18next"
import useImperativeDialog from "../../../hooks/use-imperative-dialog"
import EditIcon from "../../fundamentals/icons/edit-icon"
import TrashIcon from "../../fundamentals/icons/trash-icon"
import { ActionType } from "../../molecules/actionables"
const useCollectionActions = (collection) => {
const { t } = useTranslation()
const navigate = useNavigate()
const dialog = useImperativeDialog()
const deleteCollection = useAdminDeleteCollection(collection?.id)
const handleDelete = async () => {
const shouldDelete = await dialog({
heading: "Delete Collection",
text: "Are you sure you want to delete this collection?",
heading: t("collections-table-delete-collection", "Delete Collection"),
text: t(
"collections-table-confirm-delete",
"Are you sure you want to delete this collection?"
),
})
if (shouldDelete) {
@@ -23,12 +28,12 @@ const useCollectionActions = (collection) => {
const getActions = (coll): ActionType[] => [
{
label: "Edit",
label: t("collections-table-edit", "Edit"),
onClick: () => navigate(`/a/collections/${coll.id}`),
icon: <EditIcon size={20} />,
},
{
label: "Delete",
label: t("collections-table-delete", "Delete"),
variant: "danger",
onClick: handleDelete,
icon: <TrashIcon size={20} />,

12
packages/admin-ui/ui/src/components/templates/collections-table/use-collection-column.tsx
View File

@@ -1,24 +1,26 @@
import moment from "moment"
import { useMemo } from "react"
import { useTranslation } from "react-i18next"
import Tooltip from "../../atoms/tooltip"
const useCollectionTableColumn = () => {
const { t } = useTranslation()
const columns = useMemo(
() => [
{
Header: "Title",
Header: t("collections-table-title", "Title"),
accessor: "title",
Cell: ({ row: { original } }) => {
return <div className="flex items-center">{original.title}</div>
},
},
{
Header: "Handle",
Header: t("collections-table-handle", "Handle"),
accessor: "handle",
Cell: ({ cell: { value } }) => <div>/{value}</div>,
},
{
Header: "Created At",
Header: t("collections-table-created-at", "Created At"),
accessor: "created_at",
Cell: ({ cell: { value } }) => (
<Tooltip content={moment(value).format("DD MMM YYYY hh:mm A")}>
@@ -27,7 +29,7 @@ const useCollectionTableColumn = () => {
),
},
{
Header: "Updated At",
Header: t("collections-table-updated-at", "Updated At"),
accessor: "updated_at",
Cell: ({ cell: { value } }) => (
<Tooltip content={moment(value).format("DD MMM YYYY hh:mm A")}>
@@ -36,7 +38,7 @@ const useCollectionTableColumn = () => {
),
},
{
Header: "Products",
Header: t("collections-table-products", "Products"),
accessor: "products",
Cell: ({ cell: { value } }) => {
return <div>{value?.length || "-"}</div>

24
packages/admin-ui/ui/src/components/templates/customer-group-table/customer-groups-table.tsx
View File

@@ -13,6 +13,7 @@ import {
useSortBy,
useTable,
} from "react-table"
import { useTranslation } from "react-i18next"
import useQueryFilters from "../../../hooks/use-query-filters"
import useSetSearchParams from "../../../hooks/use-set-search-params"
import DetailsIcon from "../../fundamentals/details-icon"
@@ -95,22 +96,34 @@ function CustomerGroupsTableRow(props: CustomerGroupsTableRowProps) {
const navigate = useNavigate()
const notification = useNotification()
const { mutate } = useAdminDeleteCustomerGroup(row.original.id)
const { t } = useTranslation()
const actions: ActionType[] = [
{
label: "Details",
label: t("customer-group-table-details", "Details"),
onClick: () => navigate(row.original.id),
icon: <DetailsIcon size={20} />,
},
{
label: "Delete",
label: t("customer-group-table-delete", "Delete"),
onClick: () => {
mutate(undefined, {
onSuccess: () => {
notification("Success", "Group deleted", "success")
notification(
t("customer-group-table-success", "Success"),
t("customer-group-table-group-deleted", "Group deleted"),
"success"
)
},
onError: () => {
notification("Error", "Failed to delete the group", "error")
notification(
t("customer-group-table-error", "Error"),
t(
"customer-group-table-failed-to-delete-the-group",
"Failed to delete the group"
),
"error"
)
},
})
},
@@ -151,6 +164,7 @@ type CustomerGroupsTableProps = ReturnType<typeof useQueryFilters> & {
function CustomerGroupsTable(props: CustomerGroupsTableProps) {
const { customerGroups, queryObject, count, paginate, setQuery, isLoading } =
props
const { t } = useTranslation()
const tableConfig: TableOptions<CustomerGroup> = {
columns: CUSTOMER_GROUPS_TABLE_COLUMNS,
@@ -209,7 +223,7 @@ function CustomerGroupsTable(props: CustomerGroupsTableProps) {
count: count,
offset: queryObject.offset,
pageSize: queryObject.offset + table.rows.length,
title: "Customer groups",
title: t("customer-group-table-customer-groups", "Customer groups"),
currentPage: table.state.pageIndex + 1,
pageCount: table.pageCount,
nextPage: handleNext,

15
packages/admin-ui/ui/src/components/templates/customer-group-table/customers-list-table.tsx
View File

@@ -8,6 +8,7 @@ import {
} from "react-table"
import { Customer } from "@medusajs/medusa"
import { useTranslation } from "react-i18next"
import { useNavigate } from "react-router-dom"
import useQueryFilters from "../../../hooks/use-query-filters"
@@ -81,10 +82,11 @@ function CustomersListTableRow(props: CustomersListTableRowProps) {
const { row, removeCustomers } = props
const navigate = useNavigate()
const { t } = useTranslation()
const actions = [
{
label: "Details",
label: t("customer-group-table-details", "Details"),
onClick: () => navigate(`/a/customers/${row.original.id}`),
icon: <DetailsIcon size={20} />,
},
@@ -94,7 +96,10 @@ function CustomersListTableRow(props: CustomersListTableRowProps) {
// icon: <MailIcon size={20} />,
// },
{
label: "Delete from the group",
label: t(
"customer-group-table-delete-from-the-group",
"Delete from the group"
),
variant: "danger",
onClick: () =>
removeCustomers({
@@ -124,6 +129,7 @@ function CustomersListTableRow(props: CustomersListTableRowProps) {
* Render a list of customers that belong to a customer group.
*/
function CustomersListTable(props: CustomersListTableProps) {
const { t } = useTranslation()
const {
customers,
removeCustomers,
@@ -186,7 +192,10 @@ function CustomersListTable(props: CustomersListTableProps) {
count: count!,
offset: queryObject.offset,
pageSize: queryObject.offset + table.rows.length,
title: "Customer Groups",
title: t(
"customer-group-table-customer-groups-title",
"Customer Groups"
),
currentPage: table.state.pageIndex + 1,
pageCount: table.pageCount,
nextPage: handleNext,

16
packages/admin-ui/ui/src/components/templates/customer-group-table/edit-customers-table.tsx
View File

@@ -1,6 +1,7 @@
import { Customer } from "@medusajs/medusa"
import { useAdminCustomerGroups, useAdminCustomers } from "medusa-react"
import { useEffect, useState } from "react"
import { useTranslation } from "react-i18next"
import {
HeaderGroup,
Row,
@@ -74,6 +75,7 @@ type EditCustomersTableProps = {
* Container for the "edit customers" table.
*/
function EditCustomersTable(props: EditCustomersTableProps) {
const { t } = useTranslation()
const { setSelectedCustomerIds, selectedCustomerIds, handleSubmit, onClose } =
props
@@ -131,10 +133,10 @@ function EditCustomersTable(props: EditCustomersTableProps) {
const filteringOptions = [
{
title: "Groups",
title: t("customer-group-table-groups", "Groups"),
options: [
{
title: "All",
title: t("customer-group-table-all", "All"),
onClick: () => setActiveGroupId(null),
},
...(customer_groups || []).map((g) => ({
@@ -176,7 +178,9 @@ function EditCustomersTable(props: EditCustomersTableProps) {
<Modal handleClose={onClose}>
<Modal.Body>
<Modal.Header handleClose={onClose}>
<h3 className="inter-xlarge-semibold">Edit Customers</h3>
<h3 className="inter-xlarge-semibold">
{t("customer-group-table-edit-customers", "Edit Customers")}
</h3>
</Modal.Header>
<Modal.Content>
@@ -188,7 +192,7 @@ function EditCustomersTable(props: EditCustomersTableProps) {
count: count!,
offset: queryObject.offset,
pageSize: queryObject.offset + table.rows.length,
title: "Customers",
title: t("customer-group-table-customers", "Customers"),
currentPage: table.state.pageIndex + 1,
pageCount: table.pageCount,
nextPage: handleNext,
@@ -228,7 +232,7 @@ function EditCustomersTable(props: EditCustomersTableProps) {
className="w-eventButton"
onClick={onClose}
>
Cancel
{t("customer-group-table-cancel", "Cancel")}
</Button>
<Button
variant="primary"
@@ -236,7 +240,7 @@ function EditCustomersTable(props: EditCustomersTableProps) {
className="w-eventButton"
onClick={handleSubmit}
>
Save
{t("customer-group-table-save", "Save")}
</Button>
</div>
</Modal.Footer>

9
packages/admin-ui/ui/src/components/templates/customer-orders-table/index.tsx
View File

@@ -2,6 +2,7 @@ import { Order } from "@medusajs/medusa"
import { useAdminOrders } from "medusa-react"
import { useState } from "react"
import { useTable, usePagination } from "react-table"
import { useTranslation } from "react-i18next"
import RefreshIcon from "../../fundamentals/icons/refresh-icon"
import Table from "../../molecules/table"
import TableContainer from "../../organisms/table-container"
@@ -15,6 +16,7 @@ type Props = {
}
const CustomerOrdersTable = ({ id }: Props) => {
const { t } = useTranslation()
const [selectedOrderForTransfer, setSelectedOrderForTransfer] =
useState<Order | null>(null)
@@ -85,7 +87,7 @@ const CustomerOrdersTable = ({ id }: Props) => {
count: count!,
offset,
pageSize: offset + rows.length,
title: "Orders",
title: t("customer-orders-table-orders", "Orders"),
currentPage: pageIndex + 1,
pageCount: pageCount,
nextPage: handleNext,
@@ -118,7 +120,10 @@ const CustomerOrdersTable = ({ id }: Props) => {
forceDropdown
actions={[
{
label: "Transfer order",
label: t(
"customer-orders-table-transfer-order",
"Transfer order"
),
icon: <RefreshIcon size={"20"} />,
onClick: () => {
setSelectedOrderForTransfer(row.original as Order)

114
packages/admin-ui/ui/src/components/templates/customer-orders-table/use-customer-orders-columns.tsx
View File

@@ -2,49 +2,113 @@ import { Order } from "@medusajs/medusa"
import moment from "moment"
import { useMemo, useRef } from "react"
import { Column } from "react-table"
import { useTranslation } from "react-i18next"
import { useObserveWidth } from "../../../hooks/use-observe-width"
import { stringDisplayPrice } from "../../../utils/prices"
import Tooltip from "../../atoms/tooltip"
import ImagePlaceholder from "../../fundamentals/image-placeholder"
import StatusIndicator from "../../fundamentals/status-indicator"
import { TFunction } from "i18next"
const decidePaymentStatus = (status: string) => {
const decidePaymentStatus = (status: string, t: TFunction) => {
switch (status) {
case "captured":
return <StatusIndicator variant="success" title={"Paid"} />
return (
<StatusIndicator
variant="success"
title={t("customer-orders-table-paid", "Paid")}
/>
)
case "awaiting":
return <StatusIndicator variant="warning" title={"Awaiting"} />
return (
<StatusIndicator
variant="warning"
title={t("customer-orders-table-awaiting", "Awaiting")}
/>
)
case "requires":
return <StatusIndicator variant="danger" title={"Requires action"} />
return (
<StatusIndicator
variant="danger"
title={t("customer-orders-table-requires-action", "Requires action")}
/>
)
default:
return <StatusIndicator variant="primary" title={"N/A"} />
return (
<StatusIndicator
variant="primary"
title={t("customer-orders-table-n-a", "N/A")}
/>
)
}
}
const decideFulfillmentStatus = (status: string) => {
const decideFulfillmentStatus = (status: string, t: TFunction) => {
switch (status) {
case "fulfilled":
return <StatusIndicator variant="success" title={"Fulfilled"} />
return (
<StatusIndicator
variant="success"
title={t("customer-orders-table-fulfilled", "Fulfilled")}
/>
)
case "shipped":
return <StatusIndicator variant="success" title={"Shipped"} />
return (
<StatusIndicator
variant="success"
title={t("customer-orders-table-shipped", "Shipped")}
/>
)
case "not_fulfilled":
return <StatusIndicator variant="default" title={"Not fulfilled"} />
return (
<StatusIndicator
variant="default"
title={t("customer-orders-table-not-fulfilled", "Not fulfilled")}
/>
)
case "partially_fulfilled":
return <StatusIndicator variant="warning" title={"Partially fulfilled"} />
return (
<StatusIndicator
variant="warning"
title={t(
"customer-orders-table-partially-fulfilled",
"Partially fulfilled"
)}
/>
)
case "partially_shipped":
return <StatusIndicator variant="warning" title={"Partially shipped"} />
return (
<StatusIndicator
variant="warning"
title={t(
"customer-orders-table-partially-shipped",
"Partially shipped"
)}
/>
)
case "requires":
return <StatusIndicator variant="danger" title={"Requires action"} />
return (
<StatusIndicator
variant="danger"
title={t("customer-orders-table-requires-action", "Requires action")}
/>
)
default:
return <StatusIndicator variant="primary" title={"N/A"} />
return (
<StatusIndicator
variant="primary"
title={t("customer-orders-table-n-a", "N/A")}
/>
)
}
}
export const useCustomerOrdersColumns = (): Column<Order>[] => {
const { t } = useTranslation()
const columns = useMemo(() => {
return [
{
Header: "Order",
Header: t("customer-orders-table-order", "Order"),
accessor: "display_id",
Cell: ({ value }) => {
return <span className="text-grey-90">#{value}</span>
@@ -95,7 +159,11 @@ export const useCustomerOrdersColumns = (): Column<Order>[] => {
</div>
{remainder > 0 && (
<span className="text-grey-40 inter-small-regular">
+ {remainder} more
{t(
"customer-orders-table-remainder-more",
"+ {{remainder}} more",
{ remainder }
)}
</span>
)}
</div>
@@ -103,28 +171,32 @@ export const useCustomerOrdersColumns = (): Column<Order>[] => {
},
},
{
Header: "Date",
Header: t("customer-orders-table-date", "Date"),
accessor: "created_at",
Cell: ({ value }) => {
return moment(value).format("DD MMM YYYY hh:mm")
},
},
{
Header: "Fulfillment",
Header: t("customer-orders-table-fulfillment", "Fulfillment"),
accessor: "fulfillment_status",
Cell: ({ value }) => {
return decideFulfillmentStatus(value)
return decideFulfillmentStatus(value, t)
},
},
{
Header: "Status",
Header: t("customer-orders-table-status", "Status"),
accessor: "payment_status",
Cell: ({ value }) => {
return decidePaymentStatus(value)
return decidePaymentStatus(value, t)
},
},
{
Header: () => <div className="text-right">Total</div>,
Header: () => (
<div className="text-right">
{t("customer-orders-table-total", "Total")}
</div>
),
accessor: "total",
Cell: ({
value,

8
packages/admin-ui/ui/src/components/templates/customer-table/index.tsx
View File

@@ -3,6 +3,7 @@ import { useAdminCustomers } from "medusa-react"
import qs from "qs"
import { useEffect, useState } from "react"
import { useNavigate } from "react-router-dom"
import { useTranslation } from "react-i18next"
import { usePagination, useTable } from "react-table"
import DetailsIcon from "../../fundamentals/details-icon"
import EditIcon from "../../fundamentals/icons/edit-icon"
@@ -19,6 +20,7 @@ const defaultQueryProps = {
const CustomerTable = () => {
const navigate = useNavigate()
const { t } = useTranslation()
const {
reset,
@@ -139,7 +141,7 @@ const CustomerTable = () => {
count: count!,
offset: queryObject.offset,
pageSize: queryObject.offset + rows.length,
title: "Customers",
title: t("customer-table-customers", "Customers"),
currentPage: pageIndex + 1,
pageCount: pageCount,
nextPage: handleNext,
@@ -174,12 +176,12 @@ const CustomerTable = () => {
color={"inherit"}
actions={[
{
label: "Edit",
label: t("customer-table-edit", "Edit"),
onClick: () => navigate(row.original.id),
icon: <EditIcon size={20} />,
},
{
label: "Details",
label: t("customer-table-details", "Details"),
onClick: () => navigate(row.original.id),
icon: <DetailsIcon size={20} />,
},

14
packages/admin-ui/ui/src/components/templates/customer-table/use-customer-columns.tsx
View File

@@ -1,18 +1,20 @@
import moment from "moment"
import { useMemo } from "react"
import { useTranslation } from "react-i18next"
import { getColor } from "../../../utils/color"
import CustomerAvatarItem from "../../molecules/customer-avatar-item"
export const useCustomerColumns = () => {
const { t } = useTranslation()
const columns = useMemo(
() => [
{
Header: "Date added",
Header: t("customer-table-date-added", "Date added"),
accessor: "created_at", // accessor is the "key" in the data
Cell: ({ cell: { value } }) => moment(value).format("DD MMM YYYY"),
},
{
Header: "Name",
Header: t("customer-table-name", "Name"),
accessor: "customer",
Cell: ({ row }) => (
<CustomerAvatarItem
@@ -22,7 +24,7 @@ export const useCustomerColumns = () => {
),
},
{
Header: "Email",
Header: t("customer-table-email", "Email"),
accessor: "email",
},
{
@@ -31,7 +33,11 @@ export const useCustomerColumns = () => {
},
{
accessor: "orders",
Header: () => <div className="text-right">Orders</div>,
Header: () => (
<div className="text-right">
{t("customer-table-orders", "Orders")}
</div>
),
Cell: ({ cell: { value } }) => (
<div className="text-right">{value?.length || 0}</div>
),

4
packages/admin-ui/ui/src/components/templates/discount-filter-dropdown/index.tsx
View File

@@ -1,5 +1,6 @@
import clsx from "clsx"
import { useEffect, useState } from "react"
import { useTranslation } from "react-i18next"
import FilterDropdownContainer from "../../../components/molecules/filter-dropdown/container"
import FilterDropdownItem from "../../../components/molecules/filter-dropdown/item"
import SaveFilterItem from "../../../components/molecules/filter-dropdown/save-field"
@@ -26,6 +27,7 @@ const DiscountFilters = ({
submitFilters,
clearFilters,
}) => {
const { t } = useTranslation()
const [tempState, setTempState] = useState(filters)
const [name, setName] = useState("")
@@ -88,7 +90,7 @@ const DiscountFilters = ({
)}
>
<div className="rounded-rounded bg-grey-5 border-grey-20 inter-small-semibold flex h-6 items-center border px-2">
Filters
{t("discount-filter-dropdown-filters", "Filters")}
<div className="text-grey-40 ml-1 flex items-center rounded">
<span className="text-violet-60 inter-small-semibold">
{numberOfFilters ? numberOfFilters : "0"}

9
packages/admin-ui/ui/src/components/templates/discount-table/index.tsx
View File

@@ -3,6 +3,7 @@ import { useAdminDiscounts } from "medusa-react"
import qs from "qs"
import React, { useEffect, useState } from "react"
import { usePagination, useTable } from "react-table"
import { useTranslation } from "react-i18next"
import { useAnalytics } from "../../../providers/analytics-provider"
import Table from "../../molecules/table"
import TableContainer from "../../organisms/table-container"
@@ -16,6 +17,7 @@ const DEFAULT_PAGE_SIZE = 15
const defaultQueryProps = {}
const DiscountTable: React.FC = () => {
const { t } = useTranslation()
const {
removeTab,
setTab,
@@ -157,7 +159,7 @@ const DiscountTable: React.FC = () => {
count: count!,
offset: queryObject.offset,
pageSize: queryObject.offset + rows.length,
title: "Discounts",
title: t("discount-table-discounts", "Discounts"),
currentPage: pageIndex + 1,
pageCount: pageCount,
nextPage: handleNext,
@@ -181,7 +183,10 @@ const DiscountTable: React.FC = () => {
}
enableSearch
handleSearch={setQuery}
searchPlaceholder="Search by code or description..."
searchPlaceholder={t(
"discount-table-search-by-code-or-description",
"Search by code or description..."
)}
searchValue={query}
{...getTableProps()}
>

17
packages/admin-ui/ui/src/components/templates/discount-table/use-copy-promotion.tsx
View File

@@ -1,10 +1,12 @@
import { useAdminCreateDiscount } from "medusa-react"
import { useNavigate } from "react-router-dom"
import { useTranslation } from "react-i18next"
import useNotification from "../../../hooks/use-notification"
import { getErrorMessage } from "../../../utils/error-messages"
import { removeFalsy } from "../../../utils/remove-nullish"
const useCopyPromotion = () => {
const { t } = useTranslation()
const navigate = useNavigate()
const notification = useNotification()
const createPromotion = useAdminCreateDiscount()
@@ -60,10 +62,21 @@ const useCopyPromotion = () => {
await createPromotion.mutate(copy, {
onSuccess: (result) => {
navigate(`/a/discounts/${result.discount.id}`)
notification("Success", "Successfully copied discount", "success")
notification(
t("discount-table-success", "Success"),
t(
"discount-table-successfully-copied-discount",
"Successfully copied discount"
),
"success"
)
},
onError: (err) => {
notification("Error", getErrorMessage(err), "error")
notification(
t("discount-table-error", "Error"),
getErrorMessage(err),
"error"
)
},
})
}

65
packages/admin-ui/ui/src/components/templates/discount-table/use-promotion-columns.tsx
View File

@@ -1,5 +1,6 @@
import { end, parse } from "iso8601-duration"
import { useMemo } from "react"
import { useTranslation } from "react-i18next"
import { formatAmountWithSymbol } from "../../../utils/prices"
import Badge from "../../fundamentals/badge"
import StatusDot from "../../fundamentals/status-indicator"
@@ -34,19 +35,44 @@ const getPromotionStatus = (promotion) => {
return PromotionStatus.DISABLED
}
const getPromotionStatusDot = (promotion) => {
const getPromotionStatusDot = (promotion, t) => {
const status = getPromotionStatus(promotion)
switch (status) {
case PromotionStatus.SCHEDULED:
return <StatusDot title="Scheduled" variant="warning" />
return (
<StatusDot
title={t("discount-table-scheduled", "Scheduled")}
variant="warning"
/>
)
case PromotionStatus.EXPIRED:
return <StatusDot title="Expired" variant="danger" />
return (
<StatusDot
title={t("discount-table-expired", "Expired")}
variant="danger"
/>
)
case PromotionStatus.ACTIVE:
return <StatusDot title="Active" variant="success" />
return (
<StatusDot
title={t("discount-table-active", "Active")}
variant="success"
/>
)
case PromotionStatus.DISABLED:
return <StatusDot title="Disabled" variant="default" />
return (
<StatusDot
title={t("discount-table-disabled", "Disabled")}
variant="default"
/>
)
default:
return <StatusDot title="Disabled" variant="default" />
return (
<StatusDot
title={t("discount-table-disabled", "Disabled")}
variant="default"
/>
)
}
}
@@ -60,7 +86,7 @@ const getCurrencySymbol = (promotion) => {
return ""
}
const getPromotionAmount = (promotion) => {
const getPromotionAmount = (promotion, t) => {
switch (promotion.rule.type) {
case "fixed":
if (!promotion.regions?.length) {
@@ -73,17 +99,18 @@ const getPromotionAmount = (promotion) => {
case "percentage":
return `${promotion.rule.value}%`
case "free_shipping":
return "Free Shipping"
return t("discount-table-free-shipping", "Free Shipping")
default:
return ""
}
}
export const usePromotionTableColumns = () => {
const { t } = useTranslation()
const columns = useMemo(
() => [
{
Header: <div className="pl-2">Code</div>,
Header: <div className="pl-2">{t("discount-table-code", "Code")}</div>,
accessor: "code",
Cell: ({ cell: { value } }) => (
<div className="overflow-hidden">
@@ -94,16 +121,20 @@ export const usePromotionTableColumns = () => {
),
},
{
Header: "Description",
Header: t("discount-table-description", "Description"),
accessor: "rule.description",
Cell: ({ cell: { value } }) => value,
},
{
Header: <div className="text-right">Amount</div>,
Header: (
<div className="text-right">
{t("discount-table-amount", "Amount")}
</div>
),
id: "amount",
Cell: ({ row: { original } }) => {
return (
<div className="text-right">{getPromotionAmount(original)}</div>
<div className="text-right">{getPromotionAmount(original, t)}</div>
)
},
},
@@ -115,14 +146,18 @@ export const usePromotionTableColumns = () => {
),
},
{
Header: "Status",
Header: t("discount-table-status", "Status"),
accessor: "ends_at",
Cell: ({ row: { original } }) => (
<div>{getPromotionStatusDot(original)}</div>
<div>{getPromotionStatusDot(original, t)}</div>
),
},
{
Header: () => <div className="text-right">Redemptions</div>,
Header: () => (
<div className="text-right">
{t("discount-table-redemptions", "Redemptions")}
</div>
),
accessor: "usage_count",
Cell: ({ row: { original } }) => {
return (

37
packages/admin-ui/ui/src/components/templates/discount-table/use-promotion-row-actions.tsx
View File

@@ -1,3 +1,4 @@
import { useTranslation } from "react-i18next"
import { useAdminDeleteDiscount, useAdminUpdateDiscount } from "medusa-react"
import useImperativeDialog from "../../../hooks/use-imperative-dialog"
import useNotification from "../../../hooks/use-notification"
@@ -11,6 +12,7 @@ import useCopyPromotion from "./use-copy-promotion"
import { useNavigate } from "react-router-dom"
const usePromotionActions = (promotion) => {
const { t } = useTranslation()
const navigate = useNavigate()
const notification = useNotification()
const dialog = useImperativeDialog()
@@ -22,8 +24,11 @@ const usePromotionActions = (promotion) => {
const handleDelete = async () => {
const shouldDelete = await dialog({
heading: "Delete Discount",
text: "Are you sure you want to delete this Discount?",
heading: t("discount-table-delete-discount", "Delete Discount"),
text: t(
"discount-table-confirm-delete",
"Are you sure you want to delete this Discount?"
),
})
if (shouldDelete) {
@@ -39,7 +44,9 @@ const usePromotionActions = (promotion) => {
onClick: () => navigate(`/a/discounts/${promotion.id}`),
},
{
label: promotion.is_disabled ? "Publish" : "Unpublish",
label: promotion.is_disabled
? t("discount-table-publish", "Publish")
: t("discount-table-unpublish", "Unpublish"),
icon: promotion.is_disabled ? (
<PublishIcon size={20} />
) : (
@@ -53,26 +60,36 @@ const usePromotionActions = (promotion) => {
{
onSuccess: () => {
notification(
"Success",
`Successfully ${
promotion.is_disabled ? "published" : "unpublished"
} discount`,
t("discount-table-success", "Success"),
promotion.is_disabled
? t(
"discount-table-successfully-published-discount",
"Successfully published discount"
)
: t(
"discount-table-successfully-unpublished-discount",
"Successfully unpublished discount"
),
"success"
)
},
onError: (err) =>
notification("Error", getErrorMessage(err), "error"),
notification(
t("discount-table-error", "Error"),
getErrorMessage(err),
"error"
),
}
)
},
},
{
label: "Duplicate",
label: t("discount-table-duplicate", "Duplicate"),
icon: <DuplicateIcon size={20} />,
onClick: () => copyPromotion(promotion),
},
{
label: "Delete",
label: t("discount-table-delete", "Delete"),
icon: <TrashIcon size={20} />,
variant: "danger",
onClick: handleDelete,

4
packages/admin-ui/ui/src/components/templates/draft-order-table/index.tsx
View File

@@ -2,6 +2,7 @@ import { useAdminDraftOrders } from "medusa-react"
import { Fragment, useEffect, useState } from "react"
import { useLocation } from "react-router-dom"
import { usePagination, useTable } from "react-table"
import { useTranslation } from "react-i18next"
import Table from "../../molecules/table"
import TableContainer from "../../organisms/table-container"
import useDraftOrderTableColumns from "./use-draft-order-column"
@@ -11,6 +12,7 @@ const DEFAULT_PAGE_SIZE = 15
const DraftOrderTable = () => {
const location = useLocation()
const { t } = useTranslation()
const {
reset,
@@ -107,7 +109,7 @@ const DraftOrderTable = () => {
count: count!,
offset: queryObject.offset,
pageSize: queryObject.offset + rows.length,
title: "Draft Orders",
title: t("draft-order-table-draft-orders", "Draft Orders"),
currentPage: pageIndex + 1,
pageCount: pageCount,
nextPage: handleNext,

26
packages/admin-ui/ui/src/components/templates/draft-order-table/use-draft-order-column.tsx
View File

@@ -1,24 +1,36 @@
import moment from "moment"
import { useMemo } from "react"
import { useTranslation } from "react-i18next"
import { getColor } from "../../../utils/color"
import StatusDot from "../../fundamentals/status-indicator"
import CustomerAvatarItem from "../../molecules/customer-avatar-item"
import Table from "../../molecules/table"
const useDraftOrderTableColumns = () => {
const { t } = useTranslation()
const decideStatus = (status) => {
switch (status) {
case "completed":
return <StatusDot variant="success" title={"Completed"} />
return (
<StatusDot
variant="success"
title={t("draft-order-table-completed", "Completed")}
/>
)
default:
return <StatusDot variant="primary" title={"Open"} />
return (
<StatusDot
variant="primary"
title={t("draft-order-table-open", "Open")}
/>
)
}
}
const columns = useMemo(
() => [
{
Header: "Draft",
Header: t("draft-order-table-draft", "Draft"),
accessor: "display_id",
Cell: ({ cell: { value, getCellProps } }) => (
<Table.Cell
@@ -28,7 +40,7 @@ const useDraftOrderTableColumns = () => {
),
},
{
Header: "Order",
Header: t("draft-order-table-order", "Order"),
accessor: "order",
Cell: ({ cell: { value, getCellProps } }) => {
return (
@@ -39,7 +51,7 @@ const useDraftOrderTableColumns = () => {
},
},
{
Header: "Date added",
Header: t("draft-order-table-date-added", "Date added"),
accessor: "created_at",
Cell: ({ cell: { value, getCellProps } }) => (
<Table.Cell {...getCellProps()}>
@@ -48,7 +60,7 @@ const useDraftOrderTableColumns = () => {
),
},
{
Header: "Customer",
Header: t("draft-order-table-customer", "Customer"),
accessor: "cart",
Cell: ({ row, cell: { value, getCellProps } }) => (
<Table.Cell {...getCellProps()}>
@@ -64,7 +76,7 @@ const useDraftOrderTableColumns = () => {
),
},
{
Header: "Status",
Header: t("draft-order-table-status", "Status"),
accessor: "status",
Cell: ({ cell: { value, getCellProps } }) => (
<Table.Cell {...getCellProps()} className="pr-2">

33
packages/admin-ui/ui/src/components/templates/gift-card-filter-dropdown/index.tsx
View File

@@ -1,10 +1,12 @@
import clsx from "clsx"
import { useEffect, useState } from "react"
import { useTranslation } from "react-i18next"
import FilterDropdownContainer from "../../../components/molecules/filter-dropdown/container"
import FilterDropdownItem from "../../../components/molecules/filter-dropdown/item"
import SaveFilterItem from "../../../components/molecules/filter-dropdown/save-field"
import TabFilter from "../../../components/molecules/filter-tab"
import PlusIcon from "../../fundamentals/icons/plus-icon"
import { TFunction } from "i18next"
const statusFilters = [
"completed",
@@ -34,12 +36,12 @@ const fulfillmentFilters = [
"canceled",
]
const dateFilters = [
"is in the last",
"is older than",
"is after",
"is before",
"is equal to",
const dateFilters = (t: TFunction) => [
t("gift-card-filter-dropdown-is-in-the-last", "is in the last"),
t("gift-card-filter-dropdown-is-older-than", "is older than"),
t("gift-card-filter-dropdown-is-after", "is after"),
t("gift-card-filter-dropdown-is-before", "is before"),
t("gift-card-filter-dropdown-is-equal-to", "is equal to"),
]
const OrderFilters = ({
@@ -52,6 +54,7 @@ const OrderFilters = ({
submitFilters,
clearFilters,
}) => {
const { t } = useTranslation()
const [tempState, setTempState] = useState(filters)
const [name, setName] = useState("")
@@ -114,7 +117,7 @@ const OrderFilters = ({
)}
>
<div className="rounded-rounded bg-grey-5 border-grey-20 inter-small-semibold flex h-6 items-center border px-2">
Filters
{t("gift-card-filter-dropdown-filters", "Filters")}
<div className="text-grey-40 ml-1 flex items-center rounded">
<span className="text-violet-60 inter-small-semibold">
{numberOfFilters ? numberOfFilters : "0"}
@@ -128,29 +131,35 @@ const OrderFilters = ({
}
>
<FilterDropdownItem
filterTitle="Status"
filterTitle={t("gift-card-filter-dropdown-status", "Status")}
options={statusFilters}
filters={tempState.status.filter}
open={tempState.status.open}
setFilter={(val) => setSingleFilter("status", val)}
/>
<FilterDropdownItem
filterTitle="Payment Status"
filterTitle={t(
"gift-card-filter-dropdown-payment-status",
"Payment Status"
)}
options={paymentFilters}
filters={tempState.payment.filter}
open={tempState.payment.open}
setFilter={(val) => setSingleFilter("payment", val)}
/>
<FilterDropdownItem
filterTitle="Fulfillment Status"
filterTitle={t(
"gift-card-filter-dropdown-fulfillment-status",
"Fulfillment Status"
)}
options={fulfillmentFilters}
filters={tempState.fulfillment.filter}
open={tempState.fulfillment.open}
setFilter={(val) => setSingleFilter("fulfillment", val)}
/>
<FilterDropdownItem
filterTitle="Date"
options={dateFilters}
filterTitle={t("gift-card-filter-dropdown-date", "Date")}
options={dateFilters(t)}
filters={tempState.date.filter}
open={tempState.date.open}
setFilter={(val) => setSingleFilter("date", val)}

4
packages/admin-ui/ui/src/components/templates/gift-card-table/index.tsx
View File

@@ -5,6 +5,7 @@ import qs from "qs"
import { useEffect, useState } from "react"
import { useLocation } from "react-router-dom"
import { usePagination, useTable } from "react-table"
import { useTranslation } from "react-i18next"
import Spinner from "../../atoms/spinner"
import Table from "../../molecules/table"
import TableContainer from "../../organisms/table-container"
@@ -17,6 +18,7 @@ const defaultQueryProps = {}
const GiftCardTable = () => {
const location = useLocation()
const { t } = useTranslation()
const {
reset,
@@ -130,7 +132,7 @@ const GiftCardTable = () => {
count: count!,
offset: queryObject.offset,
pageSize: queryObject.offset + rows.length,
title: "Gift cards",
title: t("gift-card-table-gift-cards", "Gift cards"),
currentPage: pageIndex + 1,
pageCount: pageCount,
nextPage: handleNext,

24
packages/admin-ui/ui/src/components/templates/gift-card-table/use-gift-card-column.tsx
View File

@@ -1,15 +1,17 @@
import moment from "moment"
import { useMemo } from "react"
import { useTranslation } from "react-i18next"
import { formatAmountWithSymbol } from "../../../utils/prices"
import StatusIndicator from "../../fundamentals/status-indicator"
import IconTooltip from "../../molecules/icon-tooltip"
import Table from "../../molecules/table"
const useGiftCardTableColums = () => {
const { t } = useTranslation()
const columns = useMemo(
() => [
{
Header: <div className="pl-2">Code</div>,
Header: <div className="pl-2">{t("gift-card-table-code", "Code")}</div>,
accessor: "code",
Cell: ({ cell: { value }, index }) => (
<Table.Cell
@@ -21,7 +23,7 @@ const useGiftCardTableColums = () => {
),
},
{
Header: "Order",
Header: t("gift-card-table-order", "Order"),
accessor: "order",
Cell: ({ cell: { value }, index }) => (
<Table.Cell
@@ -37,7 +39,7 @@ const useGiftCardTableColums = () => {
),
},
{
Header: "Original Amount",
Header: t("gift-card-table-original-amount", "Original Amount"),
accessor: "value",
Cell: ({ row, cell: { value }, index }) => (
<Table.Cell key={index}>
@@ -56,7 +58,7 @@ const useGiftCardTableColums = () => {
),
},
{
Header: "Balance",
Header: t("gift-card-table-balance", "Balance"),
accessor: "balance",
Cell: ({ row, cell: { value }, index }) => (
<Table.Cell key={index}>
@@ -69,11 +71,19 @@ const useGiftCardTableColums = () => {
) : (
<div className="flex items-center space-x-2">
<span>N / A</span>
<IconTooltip content={"Region has been deleted"} />
<IconTooltip
content={t(
"gift-card-table-region-has-been-deleted",
"Region has been deleted"
)}
/>
</div>
)
) : (
<StatusIndicator title="None" variant="danger" />
<StatusIndicator
title={t("gift-card-table-none", "None")}
variant="danger"
/>
)}
</Table.Cell>
),
@@ -81,7 +91,7 @@ const useGiftCardTableColums = () => {
{
Header: () => (
<div className="rounded-rounded flex w-full justify-end pr-2">
Created
{t("gift-card-table-created", "Created")}
</div>
),
accessor: "created_at",

13
packages/admin-ui/ui/src/components/templates/image-table/index.tsx
View File

@@ -1,6 +1,7 @@
import { useMemo } from "react"
import { Controller } from "react-hook-form"
import { Column, useTable } from "react-table"
import { useTranslation } from "react-i18next"
import { FormImage } from "../../../types/shared"
import { NestedForm } from "../../../utils/nested-form"
import Button from "../../fundamentals/button"
@@ -18,6 +19,7 @@ type ImageTableProps = {
}
const ImageTable = ({ data, form, onDelete }: ImageTableProps) => {
const { t } = useTranslation()
const { control, register, path } = form
const columns = useMemo<
@@ -46,7 +48,7 @@ const ImageTable = ({ data, form, onDelete }: ImageTableProps) => {
},
},
{
Header: () => <span>File name</span>,
Header: () => <span>{t("image-table-file-name", "File name")}</span>,
accessor: "nativeFile",
Cell: ({ cell }) => {
return (
@@ -72,8 +74,13 @@ const ImageTable = ({ data, form, onDelete }: ImageTableProps) => {
{
Header: () => (
<div className="flex items-center justify-center gap-x-[6px]">
<span>Thumbnail</span>
<IconTooltip content="Select which image you want to use as the thumbnail for this product" />
<span>{t("image-table-thumbnail", "Thumbnail")}</span>
<IconTooltip
content={t(
"image-table-select-thumbnail-image-for-product",
"Select which image you want to use as the thumbnail for this product"
)}
/>
</div>
),
id: "thumbnail",

28
packages/admin-ui/ui/src/components/templates/inventory-table/index.tsx
View File

@@ -13,6 +13,7 @@ import {
useAdminVariant,
} from "medusa-react"
import { useLocation, useNavigate } from "react-router-dom"
import { useTranslation } from "react-i18next"
import Button from "../../fundamentals/button"
import ImagePlaceholder from "../../fundamentals/image-placeholder"
@@ -84,6 +85,7 @@ const InventoryTable: React.FC<InventoryTableProps> = () => {
const { store } = useAdminStore()
const location = useLocation()
const { t } = useTranslation()
const { stock_locations, isLoading: locationsLoading } =
useAdminStockLocations()
@@ -217,7 +219,7 @@ const InventoryTable: React.FC<InventoryTableProps> = () => {
count: count || 0,
offset: offs,
pageSize: offs + rows.length,
title: "Inventory Items",
title: t("inventory-table-inventory-items", "Inventory Items"),
currentPage: pageIndex + 1,
pageCount: pageCount,
nextPage: handleNext,
@@ -300,6 +302,7 @@ const InventoryRow = ({
const inventory = row.original
const navigate = useNavigate()
const { t } = useTranslation()
const {
state: isShowingAdjustAvailabilityModal,
@@ -312,7 +315,10 @@ const InventoryRow = ({
const actions = [
{
label: "Adjust Availability",
label: t(
"inventory-table-actions-adjust-availability",
"Adjust Availability"
),
onClick: showAdjustAvailabilityModal,
},
]
@@ -320,7 +326,7 @@ const InventoryRow = ({
if (productId) {
return [
{
label: "View Product",
label: t("inventory-table-view-product", "View Product"),
onClick: () => navigate(`/a/products/${productId}`),
},
...actions,
@@ -370,6 +376,7 @@ const AdjustAvailabilityModal = ({
const inventoryVariantId = inventory.variants?.[0]?.id
const locationLevel = inventory.location_levels?.[0]
const { t } = useTranslation()
const { variant, isLoading } = useAdminVariant(inventoryVariantId || "")
const {
mutate: updateLocationLevelForInventoryItem,
@@ -396,8 +403,11 @@ const AdjustAvailabilityModal = ({
{
onSuccess: () => {
notification(
"Success",
"Inventory item updated successfully",
t("inventory-table-success", "Success"),
t(
"inventory-table-inventory-item-updated-successfully",
"Inventory item updated successfully"
),
"success"
)
handleClose()
@@ -412,7 +422,9 @@ const AdjustAvailabilityModal = ({
<Modal handleClose={handleClose}>
<Modal.Body>
<Modal.Header handleClose={handleClose}>
<h1 className="inter-large-semibold">Adjust availability</h1>
<h1 className="inter-large-semibold">
{t("inventory-table-adjust-availability", "Adjust availability")}
</h1>
</Modal.Header>
<Modal.Content>
{isLoading ? (
@@ -468,7 +480,7 @@ const AdjustAvailabilityModal = ({
className="border"
onClick={handleClose}
>
Cancel
{t("inventory-table-cancel", "Cancel")}
</Button>
<Button
size="small"
@@ -477,7 +489,7 @@ const AdjustAvailabilityModal = ({
loading={isSubmitting}
onClick={onSubmit}
>
Save and close
{t("inventory-table-save-and-close", "Save and close")}
</Button>
</div>
</Modal.Footer>

12
packages/admin-ui/ui/src/components/templates/inventory-table/use-inventory-column.tsx
View File

@@ -6,16 +6,18 @@ import { InventoryLevelDTO } from "@medusajs/types"
import Tooltip from "../../atoms/tooltip"
import { useMemo } from "react"
import { useNavigate } from "react-router-dom"
import { useTranslation } from "react-i18next"
const useInventoryTableColumn = ({
location_id,
}: {
location_id: string
}): [Column<DecoratedInventoryItemDTO>[]] => {
const { t } = useTranslation()
const columns = useMemo(
() => [
{
Header: "Item",
Header: t("inventory-table-item", "Item"),
accessor: "title",
Cell: ({ row: { original } }) => {
return (
@@ -36,18 +38,18 @@ const useInventoryTableColumn = ({
},
},
{
Header: "Variant",
Header: t("inventory-table-variant", "Variant"),
Cell: ({ row: { original } }) => {
return <div>{original?.variants[0]?.title || "-"}</div>
},
},
{
Header: "SKU",
Header: t("inventory-table-sku", "SKU"),
accessor: "sku",
Cell: ({ cell: { value } }) => value,
},
{
Header: "Reserved",
Header: t("inventory-table-reserved", "Reserved"),
accessor: "reserved_quantity",
Cell: ({ row: { original } }) => {
const navigate = useNavigate()
@@ -85,7 +87,7 @@ const useInventoryTableColumn = ({
},
},
{
Header: "In stock",
Header: t("inventory-table-in-stock", "In stock"),
accessor: "stocked_quantity",
Cell: ({ row: { original } }) => {
return (

26
packages/admin-ui/ui/src/components/templates/order-filter-dropdown/index.tsx
View File

@@ -1,12 +1,12 @@
import clsx from "clsx"
import { useAdminRegions, useAdminSalesChannels } from "medusa-react"
import { useEffect, useState } from "react"
import { useTranslation } from "react-i18next"
import FilterDropdownContainer from "../../../components/molecules/filter-dropdown/container"
import FilterDropdownItem from "../../../components/molecules/filter-dropdown/item"
import SaveFilterItem from "../../../components/molecules/filter-dropdown/save-field"
import TabFilter from "../../../components/molecules/filter-tab"
import PlusIcon from "../../fundamentals/icons/plus-icon"
import FeatureToggle from "../../fundamentals/feature-toggle"
import { useFeatureFlag } from "../../../providers/feature-flag-provider"
const REGION_PAGE_SIZE = 10
@@ -58,6 +58,7 @@ const OrderFilters = ({
submitFilters,
clearFilters,
}) => {
const { t } = useTranslation()
const [tempState, setTempState] = useState(filters)
const [name, setName] = useState("")
@@ -154,7 +155,7 @@ const OrderFilters = ({
)}
>
<div className="rounded-rounded bg-grey-5 border-grey-20 inter-small-semibold flex h-6 items-center border px-2">
Filters
{t("order-filter-dropdown-filters", "Filters")}
<div className="text-grey-40 ml-1 flex items-center rounded">
<span className="text-violet-60 inter-small-semibold">
{numberOfFilters ? numberOfFilters : "0"}
@@ -168,28 +169,34 @@ const OrderFilters = ({
}
>
<FilterDropdownItem
filterTitle="Status"
filterTitle={t("order-filter-dropdown-status", "Status")}
options={statusFilters}
filters={tempState.status.filter}
open={tempState.status.open}
setFilter={(val) => setSingleFilter("status", val)}
/>
<FilterDropdownItem
filterTitle="Payment Status"
filterTitle={t(
"order-filter-dropdown-payment-status",
"Payment Status"
)}
options={paymentFilters}
filters={tempState.payment.filter}
open={tempState.payment.open}
setFilter={(val) => setSingleFilter("payment", val)}
/>
<FilterDropdownItem
filterTitle="Fulfillment Status"
filterTitle={t(
"order-filter-dropdown-fulfillment-status",
"Fulfillment Status"
)}
options={fulfillmentFilters}
filters={tempState.fulfillment.filter}
open={tempState.fulfillment.open}
setFilter={(val) => setSingleFilter("fulfillment", val)}
/>
<FilterDropdownItem
filterTitle="Regions"
filterTitle={t("order-filter-dropdown-regions", "Regions")}
options={
regions?.map((region) => ({
value: region.id,
@@ -209,7 +216,10 @@ const OrderFilters = ({
/>
{isSalesChannelsEnabled && (
<FilterDropdownItem
filterTitle="Sales Channel"
filterTitle={t(
"order-filter-dropdown-sales-channel",
"Sales Channel"
)}
options={
sales_channels?.map((salesChannel) => ({
value: salesChannel.id,
@@ -223,7 +233,7 @@ const OrderFilters = ({
/>
)}
<FilterDropdownItem
filterTitle="Date"
filterTitle={t("order-filter-dropdown-date", "Date")}
options={dateFilters}
filters={tempState.date.filter}
open={tempState.date.open}

47
packages/admin-ui/ui/src/components/templates/order-table/use-order-column.tsx
View File

@@ -1,6 +1,7 @@
import moment from "moment"
import { useMemo } from "react"
import ReactCountryFlag from "react-country-flag"
import { useTranslation } from "react-i18next"
import { getColor } from "../../../utils/color"
import { isoAlpha2Countries } from "../../../utils/countries"
import { formatAmountWithSymbol } from "../../../utils/prices"
@@ -9,32 +10,52 @@ import StatusDot from "../../fundamentals/status-indicator"
import CustomerAvatarItem from "../../molecules/customer-avatar-item"
const useOrderTableColums = () => {
const { t } = useTranslation()
const decideStatus = (status) => {
switch (status) {
case "captured":
return <StatusDot variant="success" title={"Paid"} />
return (
<StatusDot variant="success" title={t("order-table-paid", "Paid")} />
)
case "awaiting":
return <StatusDot variant="default" title={"Awaiting"} />
return (
<StatusDot
variant="default"
title={t("order-table-awaiting", "Awaiting")}
/>
)
case "requires_action":
return <StatusDot variant="danger" title={"Requires action"} />
return (
<StatusDot
variant="danger"
title={t("order-table-requires-action", "Requires action")}
/>
)
case "canceled":
return <StatusDot variant="warning" title={"Canceled"} />
return (
<StatusDot
variant="warning"
title={t("order-table-canceled", "Canceled")}
/>
)
default:
return <StatusDot variant="primary" title={"N/A"} />
return (
<StatusDot variant="primary" title={t("order-table-n-a", "N/A")} />
)
}
}
const columns = useMemo(
() => [
{
Header: <div className="pl-2">Order</div>,
Header: <div className="pl-2">{t("order-table-order", "Order")}</div>,
accessor: "display_id",
Cell: ({ cell: { value } }) => (
<p className="text-grey-90 group-hover:text-violet-60 min-w-[100px] pl-2">{`#${value}`}</p>
),
},
{
Header: "Date added",
Header: t("order-table-date-added", "Date added"),
accessor: "created_at",
Cell: ({ cell: { value } }) => (
<div>
@@ -45,7 +66,7 @@ const useOrderTableColums = () => {
),
},
{
Header: "Customer",
Header: t("order-table-customer", "Customer"),
accessor: "customer",
Cell: ({ row, cell: { value } }) => (
<div>
@@ -64,22 +85,24 @@ const useOrderTableColums = () => {
),
},
{
Header: "Fulfillment",
Header: t("order-table-fulfillment", "Fulfillment"),
accessor: "fulfillment_status",
Cell: ({ cell: { value } }) => value,
},
{
Header: "Payment status",
Header: t("order-table-payment-status", "Payment status"),
accessor: "payment_status",
Cell: ({ cell: { value } }) => decideStatus(value),
},
{
Header: "Sales Channel",
Header: t("order-table-sales-channel", "Sales Channel"),
accessor: "sales_channel",
Cell: ({ cell: { value } }) => value?.name ?? "N/A",
},
{
Header: () => <div className="text-right">Total</div>,
Header: () => (
<div className="text-right">{t("order-table-total", "Total")}</div>
),
accessor: "total",
Cell: ({ row, cell: { value } }) => (
<div className="text-right">

8
packages/admin-ui/ui/src/components/templates/order-table/use-order-filters.ts
View File

@@ -1,6 +1,7 @@
import { omit } from "lodash"
import qs from "qs"
import { useMemo, useReducer, useState } from "react"
import { useTranslation } from "react-i18next"
import { relativeDateFormatToTimestamp } from "../../../utils/time"
type OrderDateFilter = null | {
@@ -156,6 +157,8 @@ export const useOrderFilters = (
existing?: string,
defaultFilters: OrderDefaultFilters | null = null
) => {
const { t } = useTranslation()
if (existing && existing[0] === "?") {
existing = existing.substring(1)
}
@@ -365,11 +368,11 @@ export const useOrderFilters = (
const availableTabs = useMemo(() => {
return [
{
label: "Complete",
label: t("order-table-filters-complete", "Complete"),
value: "complete",
},
{
label: "Incomplete",
label: t("order-table-filters-incomplete", "Incomplete"),
value: "incomplete",
},
...tabs,
@@ -423,7 +426,6 @@ export const useOrderFilters = (
const clean = omit(repObj, ["limit", "offset"])
const repString = qs.stringify(clean, { skipNulls: true })
const storedString = localStorage.getItem("orders::filters")
let existing: null | object = null

8
packages/admin-ui/ui/src/components/templates/price-list-table/price-list-filters.tsx
View File

@@ -1,5 +1,6 @@
import clsx from "clsx"
import { useEffect, useMemo, useState } from "react"
import { useTranslation } from "react-i18next"
import PlusIcon from "../../../components/fundamentals/icons/plus-icon"
import FilterDropdownContainer from "../../../components/molecules/filter-dropdown/container"
import FilterDropdownItem from "../../../components/molecules/filter-dropdown/item"
@@ -19,6 +20,7 @@ const PriceListsFilter = ({
onRemoveTab,
onSaveTab,
}) => {
const { t } = useTranslation()
const [tempState, setTempState] = useState(filters)
const [name, setName] = useState("")
@@ -82,7 +84,7 @@ const PriceListsFilter = ({
)}
>
<div className="rounded-rounded bg-grey-5 border-grey-20 inter-small-semibold flex h-6 items-center border px-2">
Filters
{t("price-list-table-filters", "Filters")}
<div className="text-grey-40 ml-1 flex items-center rounded">
<span className="text-violet-60 inter-small-semibold">
{numberOfFilters ? numberOfFilters : "0"}
@@ -96,14 +98,14 @@ const PriceListsFilter = ({
}
>
<FilterDropdownItem
filterTitle="Status"
filterTitle={t("price-list-table-status", "Status")}
options={statusFilters}
filters={tempState.status.filter}
open={tempState.status.open}
setFilter={(v) => setSingleFilter("status", v)}
/>
<FilterDropdownItem
filterTitle="Type"
filterTitle={t("price-list-table-type", "Type")}
options={typeFilters}
filters={tempState.type.filter}
open={tempState.type.open}

4
packages/admin-ui/ui/src/components/templates/price-list-table/price-list-table.tsx
View File

@@ -11,6 +11,7 @@ import {
UseSortByColumnProps,
useTable,
} from "react-table"
import { useTranslation } from "react-i18next"
import { useDebounce } from "../../../hooks/use-debounce"
import Table, { TableProps } from "../../molecules/table"
import TableContainer from "../../organisms/table-container"
@@ -121,6 +122,7 @@ export function PriceListTable(props: PriceListTableProps) {
autoResetPage: false,
}
const { t } = useTranslation()
const table = useTable(tableConfig, useSortBy, usePagination, useRowSelect)
// ********* HANDLERS *********
@@ -164,7 +166,7 @@ export function PriceListTable(props: PriceListTableProps) {
count: count!,
offset: queryObject.offset,
pageSize: queryObject.offset + table.rows.length,
title: "Price Lists",
title: t("price-list-table-price-lists", "Price Lists"),
currentPage: table.state.pageIndex + 1,
pageCount: table.pageCount,
nextPage: handleNext,

17
packages/admin-ui/ui/src/components/templates/price-list-table/use-copy-price-list.tsx
View File

@@ -1,5 +1,6 @@
import { useAdminCreatePriceList } from "medusa-react"
import { useNavigate } from "react-router-dom"
import { useTranslation } from "react-i18next"
import useNotification from "../../../hooks/use-notification"
import { getErrorMessage } from "../../../utils/error-messages"
@@ -7,6 +8,7 @@ const useCopyPriceList = () => {
const navigate = useNavigate()
const notification = useNotification()
const createPriceList = useAdminCreatePriceList()
const { t } = useTranslation()
const handleCopyPriceList = async (priceList) => {
const copy: any = {
@@ -44,9 +46,20 @@ const useCopyPriceList = () => {
try {
const data = await createPriceList.mutateAsync(copy)
navigate(`/a/pricing/${data.price_list.id}`)
notification("Success", "Successfully copied price list", "success")
notification(
t("price-list-table-success", "Success"),
t(
"price-list-table-successfully-copied-price-list",
"Successfully copied price list"
),
"success"
)
} catch (err) {
notification("Error", getErrorMessage(err), "error")
notification(
t("price-list-table-error", "Error"),
getErrorMessage(err),
"error"
)
}
}

43
packages/admin-ui/ui/src/components/templates/price-list-table/use-price-list-actions.tsx
View File

@@ -1,4 +1,5 @@
import { useAdminDeletePriceList, useAdminUpdatePriceList } from "medusa-react"
import { useTranslation } from "react-i18next"
import useImperativeDialog from "../../../hooks/use-imperative-dialog"
import useNotification from "../../../hooks/use-notification"
import { getErrorMessage } from "../../../utils/error-messages"
@@ -9,6 +10,7 @@ import { isActive } from "./utils"
import PublishIcon from "../../fundamentals/icons/publish-icon"
const usePriceListActions = (priceList) => {
const { t } = useTranslation()
const dialog = useImperativeDialog()
const notification = useNotification()
const updatePrice = useAdminUpdatePriceList(priceList?.id)
@@ -16,19 +18,30 @@ const usePriceListActions = (priceList) => {
const onDelete = async () => {
const shouldDelete = await dialog({
heading: "Delete Price List",
text: "Are you sure you want to delete this price list?",
heading: t("price-list-table-delete-price-list", "Delete Price List"),
text: t(
"price-list-table-confirm-delete",
"Are you sure you want to delete this price list?"
),
})
if (shouldDelete) {
deletePrice.mutate(undefined, {
onSuccess: () => {
notification(
"Success",
"Successfully deleted the price list",
t("price-list-table-success", "Success"),
t(
"price-list-table-successfully-deleted-the-price-list",
"Successfully deleted the price list"
),
"success"
)
},
onError: (err) => notification("Error", getErrorMessage(err), "error"),
onError: (err) =>
notification(
t("price-list-table-error", "Error"),
getErrorMessage(err),
"error"
),
})
}
}
@@ -41,10 +54,16 @@ const usePriceListActions = (priceList) => {
{
onSuccess: () => {
notification(
"Success",
`Successfully ${
isActive(priceList) ? "unpublished" : "published"
} price list`,
t("price-list-table-success", "Success"),
isActive(priceList)
? t(
"price-list-table-successfully-unpublished-price-list",
"Successfully unpublished price list"
)
: t(
"price-list-table-successfully-published-price-list",
"Successfully published price list"
),
"success"
)
},
@@ -54,7 +73,9 @@ const usePriceListActions = (priceList) => {
const getActions = (): ActionType[] => [
{
label: isActive(priceList) ? "Unpublish" : "Publish",
label: isActive(priceList)
? t("price-list-table-unpublish", "Unpublish")
: t("price-list-table-publish", "Publish"),
onClick: onUpdate,
icon: isActive(priceList) ? (
<UnpublishIcon size={20} />
@@ -63,7 +84,7 @@ const usePriceListActions = (priceList) => {
),
},
{
label: "Delete",
label: t("price-list-table-delete", "Delete"),
onClick: onDelete,
icon: <TrashIcon size={20} />,
variant: "danger",

19
packages/admin-ui/ui/src/components/templates/price-list-table/use-price-list-columns.tsx
View File

@@ -2,16 +2,18 @@ import { PriceList } from "@medusajs/medusa"
import { isArray } from "lodash"
import { useMemo } from "react"
import { Column } from "react-table"
import { useTranslation } from "react-i18next"
import Actionables from "../../molecules/actionables"
import Table from "../../molecules/table"
import usePriceListActions from "./use-price-list-actions"
import { formatPriceListGroups, getPriceListStatus } from "./utils"
export const usePriceListTableColumns = () => {
const { t } = useTranslation()
const columns = useMemo<Column<PriceList>[]>(
() => [
{
Header: "Name",
Header: t("price-list-table-name", "Name"),
accessor: "name",
Cell: ({ cell: { value } }) => (
<Table.Cell>
@@ -20,19 +22,19 @@ export const usePriceListTableColumns = () => {
),
},
{
Header: "Description",
Header: t("price-list-table-description", "Description"),
accessor: "description",
Cell: ({ cell: { value } }) => <Table.Cell>{value}</Table.Cell>,
},
{
Header: "Status",
Header: t("price-list-table-status", "Status"),
accessor: "status",
Cell: ({ row: { original } }) => (
<Table.Cell>{getPriceListStatus(original)}</Table.Cell>
),
},
{
Header: "Groups",
Header: t("price-list-table-groups", "Groups"),
accessor: "customer_groups",
Cell: ({ cell: { value } }) => {
const groups: string[] = isArray(value)
@@ -42,7 +44,14 @@ export const usePriceListTableColumns = () => {
return (
<Table.Cell>
{group}
{other && <span className="text-grey-40"> + {other} more</span>}
{other && (
<span className="text-grey-40">
{" "}
{t("price-list-table-other-more", "+ {{other}} more", {
other,
})}
</span>
)}
</Table.Cell>
)
},

20
packages/admin-ui/ui/src/components/templates/price-overrides/index.tsx
View File

@@ -1,6 +1,7 @@
import { MoneyAmount, ProductVariant } from "@medusajs/medusa"
import React from "react"
import { Control, Controller, useForm, useWatch } from "react-hook-form"
import { useTranslation } from "react-i18next"
import Checkbox, { CheckboxProps } from "../../atoms/checkbox"
import Button from "../../fundamentals/button"
import Modal from "../../molecules/modal"
@@ -35,6 +36,7 @@ const PriceOverrides = ({
defaultVariant,
isEdit = false,
}: PriceOverridesType) => {
const { t } = useTranslation()
const [mode, setMode] = React.useState(MODES.SELECTED_ONLY)
const {
handleSubmit,
@@ -92,11 +94,17 @@ const PriceOverrides = ({
>
<RadioGroup.SimpleItem
value={MODES.SELECTED_ONLY}
label="Apply overrides on selected variants"
label={t(
"price-overrides-apply-overrides-on-selected-variants",
"Apply overrides on selected variants"
)}
/>
<RadioGroup.SimpleItem
value={MODES.APPLY_ALL}
label="Apply on all variants"
label={t(
"price-overrides-apply-on-all-variants",
"Apply on all variants"
)}
/>
</RadioGroup.Root>
)}
@@ -120,7 +128,9 @@ const PriceOverrides = ({
</div>
)}
<div className="pt-8">
<h6 className="inter-base-semibold">Prices</h6>
<h6 className="inter-base-semibold">
{t("price-overrides-prices", "Prices")}
</h6>
<div className="pt-4">
{prices.map((price, idx) => (
<Controller
@@ -154,7 +164,7 @@ const PriceOverrides = ({
size="large"
onClick={onClose}
>
Cancel
{t("price-overrides-cancel", "Cancel")}
</Button>
<Button
size="large"
@@ -163,7 +173,7 @@ const PriceOverrides = ({
onClick={onClick}
loading={isSubmitting}
>
Save and close
{t("price-overrides-save-and-close", "Save and close")}
</Button>
</div>
</Modal.Footer>

4
packages/admin-ui/ui/src/components/templates/price-overrides/price-amount.tsx
View File

@@ -1,3 +1,4 @@
import { useTranslation } from "react-i18next"
import useToggleState from "../../../hooks/use-toggle-state"
import { currencies } from "../../../utils/currencies"
import Button from "../../fundamentals/button"
@@ -6,6 +7,7 @@ import EyeOffIcon from "../../fundamentals/icons/eye-off-icon"
import MedusaPriceInput from "../../organisms/medusa-price-input"
const PriceAmount = ({ value, onChange }) => {
const { t } = useTranslation()
const { state: showRegions, toggle } = useToggleState()
const currencyName = currencies[value.currency_code?.toUpperCase()]?.name
@@ -28,7 +30,7 @@ const PriceAmount = ({ value, onChange }) => {
>
<div className="flex items-center gap-2">
{showRegions ? <EyeOffIcon size={20} /> : <EyeIcon size={20} />}
<span>Show regions</span>
<span>{t("price-overrides-show-regions", "Show regions")}</span>
</div>
</Button>
) : null}

4
packages/admin-ui/ui/src/components/templates/product-table/index.tsx
View File

@@ -4,6 +4,7 @@ import qs from "qs"
import React, { useEffect, useState } from "react"
import { useLocation } from "react-router-dom"
import { usePagination, useTable } from "react-table"
import { useTranslation } from "react-i18next"
import ProductsFilter from "../../../domain/products/filter-dropdown"
import { useAnalytics } from "../../../providers/analytics-provider"
import { useFeatureFlag } from "../../../providers/feature-flag-provider"
@@ -26,6 +27,7 @@ const defaultQueryProps = {
const ProductTable = () => {
const location = useLocation()
const { t } = useTranslation()
const { isFeatureEnabled } = useFeatureFlag()
const { trackNumberOfProducts } = useAnalytics()
@@ -185,7 +187,7 @@ const ProductTable = () => {
count: count!,
offset: offs,
pageSize: offs + rows.length,
title: "Products",
title: t("product-table-products", "Products"),
currentPage: pageIndex + 1,
pageCount: pageCount,
nextPage: handleNext,

19
packages/admin-ui/ui/src/components/templates/product-table/use-copy-product.ts
View File

@@ -2,6 +2,7 @@ import { AdminPostProductsReq, Product } from "@medusajs/medusa"
import { omit } from "lodash"
import { useAdminCreateProduct } from "medusa-react"
import { useNavigate } from "react-router-dom"
import { useTranslation } from "react-i18next"
import useNotification from "../../../hooks/use-notification"
import { ProductStatus } from "../../../types/shared"
import { getErrorMessage } from "../../../utils/error-messages"
@@ -37,6 +38,7 @@ const useCopyProduct = () => {
const navigate = useNavigate()
const notification = useNotification()
const { mutate } = useAdminCreateProduct()
const { t } = useTranslation()
const handleCopyProduct = (product: Product) => {
const {
@@ -103,7 +105,7 @@ const useCopyProduct = () => {
"product",
"product_id",
"variant_rank",
"purchasable"
"purchasable",
])
const variantBase = Object.entries(rest).reduce((acc, [key, value]) => {
@@ -181,10 +183,21 @@ const useCopyProduct = () => {
mutate(base as AdminPostProductsReq, {
onSuccess: ({ product: copiedProduct }) => {
navigate(`/a/products/${copiedProduct.id}`)
notification("Success", "Created a new product", "success")
notification(
t("product-table-copy-success", "Success"),
t(
"product-table-copy-created-a-new-product",
"Created a new product"
),
"success"
)
},
onError: (error) => {
notification("Error", getErrorMessage(error), "error")
notification(
t("product-table-copy-error", "Error"),
getErrorMessage(error),
"error"
)
},
})
}

45
packages/admin-ui/ui/src/components/templates/product-table/use-product-actions.tsx
View File

@@ -1,6 +1,7 @@
import { Product } from "@medusajs/medusa"
import { useAdminDeleteProduct, useAdminUpdateProduct } from "medusa-react"
import { useNavigate } from "react-router-dom"
import { useTranslation } from "react-i18next"
import useImperativeDialog from "../../../hooks/use-imperative-dialog"
import useNotification from "../../../hooks/use-notification"
import { getErrorMessage } from "../../../utils/error-messages"
@@ -13,6 +14,7 @@ import { ActionType } from "../../molecules/actionables"
import useCopyProduct from "./use-copy-product"
const useProductActions = (product: Product) => {
const { t } = useTranslation()
const navigate = useNavigate()
const notification = useNotification()
const dialog = useImperativeDialog()
@@ -22,8 +24,11 @@ const useProductActions = (product: Product) => {
const handleDelete = async () => {
const shouldDelete = await dialog({
heading: "Delete Product",
text: "Are you sure you want to delete this product?",
heading: t("product-table-delete-product", "Delete Product"),
text: t(
"product-table-confirm-delete",
"Are you sure you want to delete this product?"
),
})
if (shouldDelete) {
@@ -33,14 +38,20 @@ const useProductActions = (product: Product) => {
const getActions = (): ActionType[] => [
{
label: "Edit",
label: t("product-table-edit", "Edit"),
onClick: () => navigate(`/a/products/${product.id}`),
icon: <EditIcon size={20} />,
},
{
label: product.status === "published" ? "Unpublish" : "Publish",
label:
product.status === "published"
? t("product-table-unpublish", "Unpublish")
: t("product-table-publish", "Publish"),
onClick: () => {
const newStatus = product.status === "published" ? "draft" : "published"
const newStatus =
product.status === "published"
? t("product-table-draft", "draft")
: t("product-table-published", "published")
updateProduct.mutate(
{
status: newStatus,
@@ -48,15 +59,25 @@ const useProductActions = (product: Product) => {
{
onSuccess: () => {
notification(
"Success",
`Successfully ${
product.status === "published" ? "unpublished" : "published"
} product`,
t("product-table-success", "Success"),
product.status === "published"
? t(
"product-table-successfully-unpublished-product",
"Successfully unpublished product"
)
: t(
"product-table-successfully-published-product",
"Successfully published product"
),
"success"
)
},
onError: (err) =>
notification("Error", getErrorMessage(err), "error"),
notification(
t("product-table-error", "Error"),
getErrorMessage(err),
"error"
),
}
)
},
@@ -68,12 +89,12 @@ const useProductActions = (product: Product) => {
),
},
{
label: "Duplicate",
label: t("product-table-duplicate", "Duplicate"),
onClick: () => copyProduct(product),
icon: <DuplicateIcon size={20} />,
},
{
label: "Delete",
label: t("product-table-delete", "Delete"),
variant: "danger",
onClick: handleDelete,
icon: <TrashIcon size={20} />,

48
packages/admin-ui/ui/src/components/templates/product-table/use-product-column.tsx
View File

@@ -1,6 +1,7 @@
import clsx from "clsx"
import { useAdminStore } from "medusa-react"
import { useMemo } from "react"
import { useTranslation } from "react-i18next"
import { defaultChannelsSorter } from "../../../utils/sales-channel-compare-operator"
import DelimitedList from "../../molecules/delimited-list"
import ListIcon from "../../fundamentals/icons/list-icon"
@@ -9,16 +10,38 @@ import ImagePlaceholder from "../../fundamentals/image-placeholder"
import StatusIndicator from "../../fundamentals/status-indicator"
const useProductTableColumn = ({ setTileView, setListView, showList }) => {
const { t } = useTranslation()
const getProductStatus = (status) => {
switch (status) {
case "proposed":
return <StatusIndicator title={"Proposed"} variant={"warning"} />
return (
<StatusIndicator
title={t("product-table-proposed", "Proposed")}
variant={"warning"}
/>
)
case "published":
return <StatusIndicator title={"Published"} variant={"success"} />
return (
<StatusIndicator
title={t("product-table-published-title", "Published")}
variant={"success"}
/>
)
case "rejected":
return <StatusIndicator title={"Rejected"} variant={"danger"} />
return (
<StatusIndicator
title={t("product-table-rejected", "Rejected")}
variant={"danger"}
/>
)
case "draft":
return <StatusIndicator title={"Draft"} variant={"default"} />
return (
<StatusIndicator
title={t("product-table-draft-title", "Draft")}
variant={"default"}
/>
)
default:
return <StatusIndicator title={status} variant={"default"} />
}
@@ -37,7 +60,7 @@ const useProductTableColumn = ({ setTileView, setListView, showList }) => {
const columns = useMemo(
() => [
{
Header: "Name",
Header: t("product-table-name", "Name"),
accessor: "title",
Cell: ({ row: { original } }) => {
return (
@@ -58,30 +81,33 @@ const useProductTableColumn = ({ setTileView, setListView, showList }) => {
},
},
{
Header: "Collection",
Header: t("product-table-collection", "Collection"),
accessor: "collection", // accessor is the "key" in the data
Cell: ({ cell: { value } }) => {
return <div>{value?.title || "-"}</div>
},
},
{
Header: "Status",
Header: t("product-table-status", "Status"),
accessor: "status",
Cell: ({ cell: { value } }) => getProductStatus(value),
},
{
Header: "Availability",
Header: t("product-table-availability", "Availability"),
accessor: "sales_channels",
Cell: ({ cell: { value } }) => getProductSalesChannels(value),
},
{
Header: "Inventory",
Header: t("product-table-inventory", "Inventory"),
accessor: "variants",
Cell: ({ cell: { value } }) => (
<div>
{value.reduce((acc, next) => acc + next.inventory_quantity, 0)}
{" in stock for "}
{value.length} variant(s)
{t(
"product-table-inventory-in-stock-count",
" in stock for {{count}} variant(s)",
{ count: value.length }
)}
</div>
),
},

49
packages/admin-ui/ui/src/components/templates/reservations-table/components/reservation-form/index.tsx
View File

@@ -1,6 +1,7 @@
import Button from "../../../../fundamentals/button"
import { Controller } from "react-hook-form"
import { DecoratedInventoryItemDTO } from "@medusajs/medusa"
import { useTranslation } from "react-i18next"
import InputField from "../../../../molecules/input"
import ItemSearch from "../../../../molecules/item-search"
import LocationDropdown from "../../../../molecules/location-dropdown"
@@ -19,6 +20,7 @@ type Props = {
}
const ReservationForm: React.FC<Props> = ({ form }) => {
const { t } = useTranslation()
const { register, path, watch, control, setValue } = form
const locationId = watch(path("location"))
@@ -36,8 +38,15 @@ const ReservationForm: React.FC<Props> = ({ form }) => {
<div className="flex w-full flex-col gap-6">
<div className="grid w-full grid-cols-2 items-center">
<div>
<p className="inter-base-semibold mb-1">Location</p>
<p className="text-grey-50">Choose where you wish to reserve from.</p>
<p className="inter-base-semibold mb-1">
{t("reservation-form-location", "Location")}
</p>
<p className="text-grey-50">
{t(
"reservation-form-choose-where-you-wish-to-reserve-from",
"Choose where you wish to reserve from."
)}
</p>
</div>
<Controller
control={control}
@@ -57,9 +66,14 @@ const ReservationForm: React.FC<Props> = ({ form }) => {
</div>
<div className="grid w-full grid-cols-2 items-center">
<div>
<p className="inter-base-semibold mb-1">Item to reserve</p>
<p className="inter-base-semibold mb-1">
{t("reservation-form-item-to-reserve", "Item to reserve")}
</p>
<p className="text-grey-50">
Select the item that you wish to reserve.
{t(
"reservation-form-select-the-item-that-you-wish-to-reserve",
"Select the item that you wish to reserve."
)}
</p>
</div>
<Controller
@@ -87,20 +101,24 @@ const ReservationForm: React.FC<Props> = ({ form }) => {
[&>*:nth-child(even)]:pr-4 [&>*:nth-child(even)]:text-right
[&>*:nth-child(-n+2)]:border-t`}
>
<div className="rounded-tl-rounded">Item</div>
<div className="rounded-tl-rounded">
{t("reservation-form-item", "Item")}
</div>
<div className="rounded-tr-rounded">
{selectedItem!.title ?? "N/A"}
</div>
<div>SKU</div>
<div>{selectedItem.sku ?? "N/A"}</div>
<div>In stock</div>
<div>{t("reservation-form-in-stock", "In stock")}</div>
<div>{locationLevel?.stocked_quantity}</div>
<div>Available</div>
<div>{t("reservation-form-available", "Available")}</div>
<div>
{locationLevel?.stocked_quantity -
locationLevel?.reserved_quantity}
</div>
<div className="rounded-bl-rounded">Reserve</div>
<div className="rounded-bl-rounded">
{t("reservation-form-reserve", "Reserve")}
</div>
<div className="bg-grey-0 rounded-br-rounded text-grey-80 flex items-center">
<input
className="remove-number-spinner inter-base-regular w-full shrink border-none bg-transparent text-right font-normal outline-none outline-0"
@@ -124,7 +142,7 @@ const ReservationForm: React.FC<Props> = ({ form }) => {
type="button"
onClick={() => setValue(path("item"), undefined)}
>
Remove item
{t("reservation-form-remove-item", "Remove item")}
</Button>
</div>
</div>
@@ -132,12 +150,19 @@ const ReservationForm: React.FC<Props> = ({ form }) => {
</div>
<div className="border-grey border-grey-20 grid w-full grid-cols-2 items-center border-t py-6">
<div>
<p className="inter-base-semibold mb-1">Description</p>
<p className="text-grey-50">What type of reservation is this?</p>
<p className="inter-base-semibold mb-1">
{t("reservation-form-description", "Description")}
</p>
<p className="text-grey-50">
{t(
"reservation-form-what-type-of-reservation-is-this",
"What type of reservation is this?"
)}
</p>
</div>
<InputField
{...register(path("description"))}
placeholder="Description"
placeholder={t("reservation-form-description", "Description")}
/>
</div>
</div>

24
packages/admin-ui/ui/src/components/templates/reservations-table/index.tsx
View File

@@ -9,6 +9,7 @@ import {
useAdminStockLocations,
useAdminStore,
} from "medusa-react"
import { useTranslation } from "react-i18next"
import BuildingsIcon from "../../fundamentals/icons/buildings-icon"
import Button from "../../fundamentals/button"
@@ -137,6 +138,7 @@ const LocationDropdown = ({
}
const ReservationsTable: React.FC<ReservationsTableProps> = () => {
const { t } = useTranslation()
const { store } = useAdminStore()
const {
state: createReservationState,
@@ -277,7 +279,7 @@ const ReservationsTable: React.FC<ReservationsTableProps> = () => {
count: count || 0,
offset: offs,
pageSize: offs + rows.length,
title: "Reservations",
title: t("reservations-table-reservations", "Reservations"),
currentPage: pageIndex + 1,
pageCount: pageCount,
nextPage: handleNext,
@@ -367,6 +369,7 @@ const ReservationRow = ({
} & TableRowProps) => {
const inventory = row.original
const { t } = useTranslation()
const { mutate: deleteReservation } = useAdminDeleteReservation(inventory.id)
const [showEditReservation, setShowEditReservation] =
@@ -376,12 +379,12 @@ const ReservationRow = ({
const getRowActionables = () => {
const actions = [
{
label: "Edit",
label: t("reservations-table-edit", "Edit"),
onClick: () => setShowEditReservation(row.original),
icon: <EditIcon size={20} />,
},
{
label: "Delete",
label: t("reservations-table-delete", "Delete"),
variant: "danger",
icon: <TrashIcon size={20} />,
onClick: () => setShowDeleteReservation(true),
@@ -416,9 +419,18 @@ const ReservationRow = ({
)}
{showDeleteReservation && (
<DeletePrompt
text={"Are you sure you want to remove this reservation?"}
heading={"Remove reservation"}
successText={"Reservation has been removed"}
text={t(
"reservations-table-confirm-delete",
"Are you sure you want to remove this reservation?"
)}
heading={t(
"reservations-table-remove-reservation",
"Remove reservation"
)}
successText={t(
"reservations-table-reservation-has-been-removed",
"Reservation has been removed"
)}
onDelete={async () => await deleteReservation(undefined)}
handleClose={() => setShowDeleteReservation(false)}
/>

Some files were not shown because too many files have changed in this diff Show More