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

fix(admin-ui): Lint all UI files (#3459)

Browse Source
This commit is contained in:
Kasper Fabricius Kristensen
2023-03-13 14:02:20 +01:00
committed by GitHub
parent 55febef7f1
commit ad7d7fcd51
432 changed files with 1593 additions and 1767 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/admin-ui/ui/src/domain/settings/currencies/components/currency-tax-setting.tsx
+5 -5
View File
@@ -53,19 +53,19 @@ const CurrencyTaxSetting = ({ currency, isDefault }: Props) => {
return (
<form>
<div className="flex items-center justify-between inter-base-regular">
<div className="flex items-center gap-x-base">
<div className="flex items-center justify-center bg-grey-10 rounded-rounded w-xlarge h-xlarge">
<div className="inter-base-regular flex items-center justify-between">
<div className="gap-x-base flex items-center">
<div className="bg-grey-10 rounded-rounded w-xlarge h-xlarge flex items-center justify-center">
<CoinsIcon size={20} className="text-grey-50" />
</div>
<div className="flex items-center gap-x-xsmall">
<div className="gap-x-xsmall flex items-center">
<p className="inter-base-semibold text-grey-90">
{currency.code.toUpperCase()}
</p>
<p className="text-grey-50 inter-small-regular">{currency.name}</p>
</div>
{isDefault && (
<div className="bg-grey-10 rounded-rounded py-[2px] px-xsmall">
<div className="bg-grey-10 rounded-rounded px-xsmall py-[2px]">
<p className="inter-small-semibold text-grey-50">Default</p>
</div>
)}
packages/admin-ui/ui/src/domain/settings/currencies/components/default-store-currency/default-currency-selector.tsx
+5 -6
View File
@@ -1,6 +1,6 @@
import { Store } from "@medusajs/medusa"
import { useAdminUpdateStore } from "medusa-react"
import React, { useEffect, useMemo } from "react"
import { useEffect, useMemo } from "react"
import { Controller, useForm } from "react-hook-form"
import { NextSelect } from "../../../../../components/molecules/select/next-select"
import useNotification from "../../../../../hooks/use-notification"
@@ -16,11 +16,10 @@ type DefaultStoreCurrencyFormType = {
}
const DefaultCurrencySelector = ({ store }: Props) => {
const { reset, control, handleSubmit } = useForm<
DefaultStoreCurrencyFormType
>({
defaultValues: getDefaultValue(store),
})
const { reset, control, handleSubmit } =
useForm<DefaultStoreCurrencyFormType>({
defaultValues: getDefaultValue(store),
})
const { mutate } = useAdminUpdateStore()
const notification = useNotification()
packages/admin-ui/ui/src/domain/settings/currencies/components/default-store-currency/index.tsx
+1 -2
View File
@@ -1,5 +1,4 @@
import { Store } from "@medusajs/medusa"
import React from "react"
import DefaultCurrencySelector from "./default-currency-selector"
type Props = {
@@ -8,7 +7,7 @@ type Props = {
const DefaultStoreCurrency = ({ store }: Props) => {
return (
<div className="flex flex-col gap-y-large">
<div className="gap-y-large flex flex-col">
<div>
<h3 className="inter-large-semibold mb-2xsmall">
Default store currency
packages/admin-ui/ui/src/domain/settings/currencies/components/store-currencies/add-currencies-screen.tsx
+2 -2
View File
@@ -1,6 +1,6 @@
import { Currency } from "@medusajs/medusa"
import { useAdminCurrencies, useAdminUpdateStore } from "medusa-react"
import React, { useContext, useEffect, useState } from "react"
import React, { useContext, useState } from "react"
import { usePagination, useRowSelect, useSortBy, useTable } from "react-table"
import Button from "../../../../../components/fundamentals/button"
import Modal from "../../../../../components/molecules/modal"
@@ -95,7 +95,7 @@ const AddCurrenciesScreen = () => {
/>
</Modal.Content>
<Modal.Footer>
<div className="w-full gap-x-xsmall flex items-center justify-end">
<div className="gap-x-xsmall flex w-full items-center justify-end">
<Button variant="secondary" size="small" onClick={pop}>
Cancel
</Button>
packages/admin-ui/ui/src/domain/settings/currencies/components/store-currencies/current-currencies-screen.tsx
+10 -10
View File
@@ -1,7 +1,7 @@
import { Currency } from "@medusajs/medusa"
import clsx from "clsx"
import { useAdminUpdateStore } from "medusa-react"
import React, { useMemo, useState } from "react"
import { useMemo, useState } from "react"
import { usePagination, useRowSelect, useSortBy, useTable } from "react-table"
import Button from "../../../../../components/fundamentals/button"
import PlusIcon from "../../../../../components/fundamentals/icons/plus-icon"
@@ -101,7 +101,7 @@ const CurrentCurrenciesScreen = () => {
/>
</Modal.Content>
<Modal.Footer>
<div className="w-full justify-end flex items-center">
<div className="flex w-full items-center justify-end">
<Button variant="primary" size="small" onClick={onClose}>
Close
</Button>
@@ -132,18 +132,18 @@ const TableActions = ({
}
return (
<div className="flex space-x-xsmall h-[34px] overflow-hidden">
<div className="space-x-xsmall flex h-[34px] overflow-hidden">
<div className={clsx("transition-all duration-200", classes)}>
<div className="divide-x flex items-center h-[34px] mb-2">
<span className="mr-3 inter-small-regular text-grey-50">
<div className="mb-2 flex h-[34px] items-center divide-x">
<span className="inter-small-regular text-grey-50 mr-3">
{numberOfSelectedRows} selected
</span>
<div className="flex space-x-xsmall pl-3">
<div className="space-x-xsmall flex pl-3">
<Button
onClick={onDeselect}
size="small"
variant="ghost"
className="border border-grey-20"
className="border-grey-20 border"
>
Deselect
</Button>
@@ -151,17 +151,17 @@ const TableActions = ({
onClick={onRemove}
size="small"
variant="ghost"
className="border border-grey-20 text-rose-50"
className="border-grey-20 border text-rose-50"
>
Remove
</Button>
</div>
</div>
<div className="flex justify-end h-[34px]">
<div className="flex h-[34px] justify-end">
<Button
size="small"
variant="ghost"
className="border border-grey-20"
className="border-grey-20 border"
onClick={() => push(screen)}
>
<PlusIcon size={20} /> Add Currencies
packages/admin-ui/ui/src/domain/settings/currencies/components/store-currencies/edit-currencies-modal.tsx
+3 -4
View File
@@ -1,5 +1,5 @@
import { Store } from "@medusajs/medusa"
import React, { createContext, useContext } from "react"
import { createContext, useContext } from "react"
import LayeredModal, {
LayeredModalContext,
} from "../../../../../components/molecules/modal/layered-modal"
@@ -16,9 +16,8 @@ type EditCurrenciesModalContextType = {
store: Store
}
const EditCurrenciesModalContext = createContext<EditCurrenciesModalContextType | null>(
null
)
const EditCurrenciesModalContext =
createContext<EditCurrenciesModalContextType | null>(null)
const EditCurrenciesModal = ({ store, open, onClose }: Props) => {
const context = useContext(LayeredModalContext)
packages/admin-ui/ui/src/domain/settings/currencies/components/store-currencies/index.tsx
-1
View File
@@ -1,5 +1,4 @@
import { Store } from "@medusajs/medusa"
import React from "react"
import Button from "../../../../../components/fundamentals/button"
import useToggleState from "../../../../../hooks/use-toggle-state"
import EditCurrenciesModal from "./edit-currencies-modal"
packages/admin-ui/ui/src/domain/settings/currencies/components/store-currencies/use-currency-table-columns.tsx
+3 -3
View File
@@ -1,5 +1,5 @@
import { Currency } from "@medusajs/medusa"
import React, { useMemo } from "react"
import { useMemo } from "react"
import { Column } from "react-table"
import SortingIcon from "../../../../../components/fundamentals/icons/sorting-icon"
import IndeterminateCheckbox from "../../../../../components/molecules/indeterminate-checkbox"
@@ -29,7 +29,7 @@ export const useCurrencyColumns = (): Column<Currency>[] => {
},
{
Header: ({ column: { isSorted, isSortedDesc } }) => (
<div className="flex items-center gap-x-2xsmall">
<div className="gap-x-2xsmall flex items-center">
<span>Name</span>
<SortingIcon
className="text-grey-40"
@@ -42,7 +42,7 @@ export const useCurrencyColumns = (): Column<Currency>[] => {
accessor: "name",
Cell: ({ row, value }) => {
return (
<div className="flex items-center gap-x-xsmall inter-small-regular">
<div className="gap-x-xsmall inter-small-regular flex items-center">
<span className="inter-small-semibold">
{row.original.code.toUpperCase()}
</span>
packages/admin-ui/ui/src/domain/settings/details.tsx
+1 -1
View File
@@ -1,6 +1,6 @@
import { Store } from "@medusajs/medusa"
import { useAdminStore, useAdminUpdateStore } from "medusa-react"
import React, { useEffect } from "react"
import { useEffect } from "react"
import { useForm } from "react-hook-form"
import BreadCrumb from "../../components/molecules/breadcrumb"
import Input from "../../components/molecules/input"
packages/admin-ui/ui/src/domain/settings/personal-information/edit-user-information/edit-user-information-modal.tsx
+5 -5
View File
@@ -1,6 +1,6 @@
import { User } from "@medusajs/medusa"
import { useAdminGetSession, useAdminUpdateUser } from "medusa-react"
import React, { useEffect } from "react"
import { useEffect } from "react"
import { useForm } from "react-hook-form"
import Button from "../../../../components/fundamentals/button"
import InputField from "../../../../components/molecules/input"
@@ -63,8 +63,8 @@ const EditUserInformationModal = ({ user, open, onClose }: Props) => {
</Modal.Header>
<Modal.Body>
<Modal.Content>
<div className="flex flex-col gap-y-base">
<div className="grid grid-cols-2 gap-x-base">
<div className="gap-y-base flex flex-col">
<div className="gap-x-base grid grid-cols-2">
<InputField
{...register("first_name")}
errors={errors}
@@ -78,8 +78,8 @@ const EditUserInformationModal = ({ user, open, onClose }: Props) => {
</div>
</div>
</Modal.Content>
<Modal.Footer className="border-t border-grey-20 pt-base">
<div className="flex items-center justify-end gap-x-xsmall w-full">
<Modal.Footer className="border-grey-20 pt-base border-t">
<div className="gap-x-xsmall flex w-full items-center justify-end">
<Button variant="secondary" size="small" onClick={onClose}>
Cancel
</Button>
packages/admin-ui/ui/src/domain/settings/personal-information/edit-user-information/index.tsx
+6 -6
View File
@@ -1,5 +1,5 @@
import { User } from "@medusajs/medusa"
import React, { useMemo } from "react"
import { useMemo } from "react"
import Avatar from "../../../../components/atoms/avatar"
import Button from "../../../../components/fundamentals/button"
import useToggleState from "../../../../hooks/use-toggle-state"
@@ -21,10 +21,10 @@ const EditUserInformation = ({ user }: Props) => {
return (
<>
<div className="flex items-center justify-between">
<div className="flex items-center gap-x-base">
<div className="w-18 aspect-square rounded-full border border-grey-20 flex items-center justify-center box-border">
<div className="gap-x-base flex items-center">
<div className="w-18 border-grey-20 box-border flex aspect-square items-center justify-center rounded-full border">
{user ? (
<div className="w-16 aspect-square">
<div className="aspect-square w-16">
<Avatar
user={{ ...user }}
color="bg-teal-40"
@@ -32,11 +32,11 @@ const EditUserInformation = ({ user }: Props) => {
/>
</div>
) : (
<div className="w-16 aspect-square animate-pulse bg-teal-40 rounded-full" />
<div className="bg-teal-40 aspect-square w-16 animate-pulse rounded-full" />
)}
</div>
<div className="flex flex-col">
{!!name ? (
{name ? (
<>
<p className="inter-base-semibold">{name}</p>
<p className="inter-base-regular text-grey-50">{user?.email}</p>
packages/admin-ui/ui/src/domain/settings/personal-information/usage-insights/index.tsx
+3 -4
View File
@@ -1,5 +1,4 @@
import { User } from "@medusajs/medusa"
import React from "react"
import Badge from "../../../../components/fundamentals/badge"
import Button from "../../../../components/fundamentals/button"
import useToggleState from "../../../../hooks/use-toggle-state"
@@ -17,11 +16,11 @@ const UsageInsights = ({ user }: Props) => {
return (
<>
<div className="flex items-center justify-between">
<div className="flex flex-col gap-y-2xsmall">
<div className="flex items-center gap-x-xsmall">
<div className="gap-y-2xsmall flex flex-col">
<div className="gap-x-xsmall flex items-center">
<h2 className="inter-base-semibold">Usage insights</h2>
{isLoading ? (
<div className="badge bg-grey-10 animate-pulse w-16 h-large" />
<div className="badge bg-grey-10 h-large w-16 animate-pulse" />
) : !analytics_config || analytics_config?.opt_out ? (
<Badge variant="disabled">Disabled</Badge>
) : (
packages/admin-ui/ui/src/domain/settings/personal-information/usage-insights/usage-insights-modal.tsx
+3 -3
View File
@@ -1,5 +1,5 @@
import { AnalyticsConfig } from "@medusajs/medusa"
import React, { useEffect } from "react"
import { useEffect } from "react"
import { useForm } from "react-hook-form"
import Button from "../../../../components/fundamentals/button"
import Modal from "../../../../components/molecules/modal"
@@ -64,8 +64,8 @@ const UsageInsightsModal = ({ config, open, onClose }: Props) => {
<Modal.Content>
<AnalyticsConfigForm form={nestedForm(form)} />
</Modal.Content>
<Modal.Footer className="border-t border-grey-20 pt-base">
<div className="flex items-center justify-end gap-x-xsmall w-full">
<Modal.Footer className="border-grey-20 pt-base border-t">
<div className="gap-x-xsmall flex w-full items-center justify-end">
<Button variant="secondary" size="small" onClick={onClose}>
Cancel
</Button>
packages/admin-ui/ui/src/domain/settings/regions/components/region-form/region-details-form.tsx
+2 -2
View File
@@ -33,7 +33,7 @@ const RegionDetailsForm = ({ form, isCreate = false }: Props) => {
return (
<div>
<div className="grid grid-cols-2 gap-large">
<div className="gap-large grid grid-cols-2">
<InputField
label="Title"
placeholder="Europe"
@@ -114,7 +114,7 @@ const RegionDetailsForm = ({ form, isCreate = false }: Props) => {
</div>
<FeatureToggle featureFlag="tax_inclusive_pricing">
<div className="mt-xlarge flex items-start justify-between">
<div className="flex flex-col gap-y-2xsmall">
<div className="gap-y-2xsmall flex flex-col">
<h3 className="inter-base-semibold">Tax inclusive prices</h3>
<p className="inter-base-regular text-grey-50">
When enabled region prices will be tax inclusive.
packages/admin-ui/ui/src/domain/settings/regions/components/region-form/region-providers-form.tsx
+1 -2
View File
@@ -1,4 +1,3 @@
import React from "react"
import { Controller } from "react-hook-form"
import { NextSelect } from "../../../../../components/molecules/select/next-select"
import { Option } from "../../../../../types/shared"
@@ -23,7 +22,7 @@ const RegionProvidersForm = ({ form }: Props) => {
const { fulfillmentProviderOptions, paymentProviderOptions } = useStoreData()
return (
<div className="grid grid-cols-2 gap-large">
<div className="gap-large grid grid-cols-2">
<Controller
control={control}
name={path("payment_providers")}
packages/admin-ui/ui/src/domain/settings/regions/components/shipping-option-card/edit-modal.tsx
+3 -3
View File
@@ -1,6 +1,6 @@
import { ShippingOption } from "@medusajs/medusa"
import { useAdminUpdateShippingOption } from "medusa-react"
import React, { useEffect } from "react"
import { useEffect } from "react"
import { useForm } from "react-hook-form"
import Button from "../../../../../components/fundamentals/button"
import Modal from "../../../../../components/molecules/modal"
@@ -75,7 +75,7 @@ const EditModal = ({ open, onClose, option }: Props) => {
{option.data.id} via {option.provider_id}
</p>
</div>
<div className="w-full h-px bg-grey-20 my-xlarge" />
<div className="bg-grey-20 my-xlarge h-px w-full" />
<ShippingOptionForm
form={form}
region={option.region}
@@ -83,7 +83,7 @@ const EditModal = ({ open, onClose, option }: Props) => {
/>
</Modal.Content>
<Modal.Footer>
<div className="flex items-center gap-x-xsmall justify-end w-full">
<div className="gap-x-xsmall flex w-full items-center justify-end">
<Button variant="secondary" size="small" onClick={closeAndReset}>
Cancel
</Button>
packages/admin-ui/ui/src/domain/settings/regions/components/shipping-option-card/index.tsx
+5 -6
View File
@@ -1,7 +1,6 @@
import { ShippingOption } from "@medusajs/medusa"
import clsx from "clsx"
import { useAdminDeleteShippingOption } from "medusa-react"
import React from "react"
import EditIcon from "../../../../../components/fundamentals/icons/edit-icon"
import FastDeliveryIcon from "../../../../../components/fundamentals/icons/fast-delivery-icon"
import TrashIcon from "../../../../../components/fundamentals/icons/trash-icon"
@@ -40,9 +39,9 @@ const ShippingOptionCard = ({ option }: Props) => {
return (
<>
<div className="bg-grey-0 rounded-rounded border border-grey-20 p-base flex items-center justify-between">
<div className="flex items-center gap-x-base">
<div className="bg-grey-10 p-2.5 rounded-rounded flex items-center justify-center h-10 w-10">
<div className="bg-grey-0 rounded-rounded border-grey-20 p-base flex items-center justify-between border">
<div className="gap-x-base flex items-center">
<div className="bg-grey-10 rounded-rounded flex h-10 w-10 items-center justify-center p-2.5">
<FastDeliveryIcon size={20} className="text-grey-50" />
</div>
<div>
@@ -75,9 +74,9 @@ const ShippingOptionCard = ({ option }: Props) => {
</div>
</div>
</div>
<div className="flex items-center gap-x-base">
<div className="gap-x-base flex items-center">
<div
className={clsx("py-0.5 px-xsmall rounded-rounded", {
className={clsx("px-xsmall rounded-rounded py-0.5", {
"bg-grey-10 text-grey-50": option.admin_only,
"bg-emerald-10 text-emerald-50": !option.admin_only,
})}
packages/admin-ui/ui/src/domain/settings/regions/components/shipping-option-form/index.tsx
+6 -6
View File
@@ -48,7 +48,7 @@ const ShippingOptionForm = ({ form, region, isEdit = false }: Props) => {
return (
<div>
<div>
<div className="flex flex-col gap-y-2xsmall">
<div className="gap-y-2xsmall flex flex-col">
<div className="flex items-center justify-between">
<h3 className="inter-base-semibold mb-2xsmall">Visible in store</h3>
<Controller
@@ -64,10 +64,10 @@ const ShippingOptionForm = ({ form, region, isEdit = false }: Props) => {
</p>
</div>
</div>
<div className="h-px w-full bg-grey-20 my-xlarge" />
<div className="bg-grey-20 my-xlarge h-px w-full" />
<div>
<h3 className="inter-base-semibold mb-base">Details</h3>
<div className="grid grid-cols-2 gap-large">
<div className="gap-large grid grid-cols-2">
<InputField
label="Title"
required
@@ -78,7 +78,7 @@ const ShippingOptionForm = ({ form, region, isEdit = false }: Props) => {
})}
errors={errors}
/>
<div className="flex items-center gap-large">
<div className="gap-large flex items-center">
<Controller
control={control}
name="price_type"
@@ -178,10 +178,10 @@ const ShippingOptionForm = ({ form, region, isEdit = false }: Props) => {
)}
</div>
</div>
<div className="h-px w-full bg-grey-20 my-xlarge" />
<div className="bg-grey-20 my-xlarge h-px w-full" />
<div>
<h3 className="inter-base-semibold mb-base">Requirements</h3>
<div className="grid grid-cols-2 gap-large">
<div className="gap-large grid grid-cols-2">
<Controller
control={control}
name="requirements.min_subtotal.amount"
packages/admin-ui/ui/src/domain/settings/regions/edit/general-section/index.tsx
+7 -7
View File
@@ -68,11 +68,11 @@ const GeneralSection = ({ region }: Props) => {
},
]}
>
<div className="flex flex-col gap-y-xsmall mt-large">
<div className="gap-y-xsmall mt-large flex flex-col">
<h2 className="inter-large-semibold">Details</h2>
<div className="flex flex-col gap-y-xsmall">
<div className="gap-y-xsmall flex flex-col">
<RegionDetail title={"Currency"}>
<div className="flex items-center gap-x-xsmall">
<div className="gap-x-xsmall flex items-center">
<span className="inter-base-semibold text-grey-90">
{region.currency_code.toUpperCase()}
</span>
@@ -84,7 +84,7 @@ const GeneralSection = ({ region }: Props) => {
<RegionDetail title={"Countries"}>
<div>
{region.countries && region.countries.length ? (
<div className="flex items-center gap-x-xsmall">
<div className="gap-x-xsmall flex items-center">
<p>
{region.countries
.slice(0, 4)
@@ -116,7 +116,7 @@ const GeneralSection = ({ region }: Props) => {
<RegionDetail title={"Payment providers"}>
<div>
{region.payment_providers && region.payment_providers.length ? (
<div className="flex items-center gap-x-xsmall">
<div className="gap-x-xsmall flex items-center">
<p>
{region.payment_providers
.slice(0, 4)
@@ -152,7 +152,7 @@ const GeneralSection = ({ region }: Props) => {
<RegionDetail title={"Fulfillment providers"}>
<div>
{region.payment_providers && region.payment_providers.length ? (
<div className="flex items-center gap-x-xsmall">
<div className="gap-x-xsmall flex items-center">
<p>
{region.fulfillment_providers
.slice(0, 4)
@@ -200,7 +200,7 @@ type DetailProps = {
const RegionDetail = ({ title, children }: DetailProps) => {
return (
<div className="flex items-center justify-between inter-base-regular text-grey-50">
<div className="inter-base-regular text-grey-50 flex items-center justify-between">
<p>{title}</p>
{children}
</div>
packages/admin-ui/ui/src/domain/settings/regions/edit/index.tsx
+3 -4
View File
@@ -1,5 +1,4 @@
import { useAdminRegion } from "medusa-react"
import React from "react"
import Spinner from "../../../../components/atoms/spinner"
import GeneralSection from "./general-section"
import ReturnShippingOptions from "./return-shipping-options"
@@ -16,7 +15,7 @@ const EditRegion = ({ id }: Props) => {
if (isLoading) {
return (
<div className="h-full w-full flex items-center justify-center">
<div className="flex h-full w-full items-center justify-center">
<Spinner variant="secondary" />
</div>
)
@@ -24,7 +23,7 @@ const EditRegion = ({ id }: Props) => {
if (isError) {
return (
<div className="bg-grey-0 rounded-rounded border border-grey-20 flex flex-col gap-y-xsmall items-center justify-center w-full h-full text-center ">
<div className="bg-grey-0 rounded-rounded border-grey-20 gap-y-xsmall flex h-full w-full flex-col items-center justify-center border text-center ">
<h1 className="inter-large-semibold">Something went wrong...</h1>
<p className="inter-base-regular text-grey-50">
We can't find a region with that ID, use the menu to the left to
@@ -39,7 +38,7 @@ const EditRegion = ({ id }: Props) => {
}
return (
<div className="flex flex-col gap-y-xsmall">
<div className="gap-y-xsmall flex flex-col">
<GeneralSection region={region} />
<ShippingOptions region={region} />
<ReturnShippingOptions region={region} />
packages/admin-ui/ui/src/domain/settings/regions/edit/return-shipping-options/create-return-shipping-option.modal.tsx
+1 -2
View File
@@ -1,6 +1,5 @@
import { Region } from "@medusajs/medusa"
import { useAdminCreateShippingOption } from "medusa-react"
import React from "react"
import { useForm } from "react-hook-form"
import Button from "../../../../../components/fundamentals/button"
import Modal from "../../../../../components/molecules/modal"
@@ -76,7 +75,7 @@ const CreateReturnShippingOptionModal = ({ open, onClose, region }: Props) => {
<ShippingOptionForm form={form} region={region} />
</Modal.Content>
<Modal.Footer>
<div className="w-full flex items-center gap-x-xsmall justify-end">
<div className="gap-x-xsmall flex w-full items-center justify-end">
<Button
variant="secondary"
size="small"
packages/admin-ui/ui/src/domain/settings/regions/edit/return-shipping-options/index.tsx
+2 -3
View File
@@ -1,6 +1,5 @@
import { Region } from "@medusajs/medusa"
import { useAdminShippingOptions } from "medusa-react"
import React from "react"
import Section from "../../../../../components/organisms/section"
import useToggleState from "../../../../../hooks/use-toggle-state"
import ShippingOptionCard from "../../components/shipping-option-card"
@@ -29,11 +28,11 @@ const ReturnShippingOptions = ({ region }: Props) => {
},
]}
>
<div className="flex flex-col gap-y-large">
<div className="gap-y-large flex flex-col">
<p className="inter-base-regular text-grey-50">
Enter specifics about available regional return shipment methods.
</p>
<div className="flex flex-col gap-y-small">
<div className="gap-y-small flex flex-col">
{returnShippingOptions?.map((option) => {
return <ShippingOptionCard option={option} key={option.id} />
})}
packages/admin-ui/ui/src/domain/settings/regions/edit/shipping-options/create-shipping-option-modal.tsx
+1 -2
View File
@@ -1,6 +1,5 @@
import { Region } from "@medusajs/medusa"
import { useAdminCreateShippingOption } from "medusa-react"
import React from "react"
import { useForm } from "react-hook-form"
import Button from "../../../../../components/fundamentals/button"
import Modal from "../../../../../components/molecules/modal"
@@ -76,7 +75,7 @@ const CreateShippingOptionModal = ({ open, onClose, region }: Props) => {
<ShippingOptionForm form={form} region={region} />
</Modal.Content>
<Modal.Footer>
<div className="w-full flex items-center gap-x-xsmall justify-end">
<div className="gap-x-xsmall flex w-full items-center justify-end">
<Button
variant="secondary"
size="small"
packages/admin-ui/ui/src/domain/settings/regions/edit/shipping-options/index.tsx
+2 -3
View File
@@ -1,6 +1,5 @@
import { Region } from "@medusajs/medusa"
import { useAdminShippingOptions } from "medusa-react"
import React from "react"
import Section from "../../../../../components/organisms/section"
import useToggleState from "../../../../../hooks/use-toggle-state"
import ShippingOptionCard from "../../components/shipping-option-card"
@@ -29,11 +28,11 @@ const ShippingOptions = ({ region }: Props) => {
},
]}
>
<div className="flex flex-col gap-y-large">
<div className="gap-y-large flex flex-col">
<p className="inter-base-regular text-grey-50">
Enter specifics about available regional shipment methods.
</p>
<div className="flex flex-col gap-y-small">
<div className="gap-y-small flex flex-col">
{shippingOptions?.map((option) => {
return <ShippingOptionCard option={option} key={option.id} />
})}
packages/admin-ui/ui/src/domain/settings/regions/index.tsx
+3 -3
View File
@@ -8,10 +8,10 @@ const Regions = () => {
const regId: string | undefined = params["*"]
return (
<div className="flex flex-col gap-y-xsmall h-full">
<div className="gap-y-xsmall flex h-full flex-col">
<BackButton label="Back to Settings" path="/a/settings" />
<div className="grid grid-cols-1 medium:grid-cols-3 gap-xsmall pb-xlarge">
<div className="w-full h-full">
<div className="medium:grid-cols-3 gap-xsmall pb-xlarge grid grid-cols-1">
<div className="h-full w-full">
<RegionOverview id={regId} />
</div>
<div className="col-span-2">
packages/admin-ui/ui/src/domain/settings/regions/region-overview/region-card.tsx
+1 -2
View File
@@ -1,5 +1,4 @@
import { Region } from "@medusajs/medusa"
import React from "react"
import RadioGroup from "../../../../components/organisms/radio-group"
import fulfillmentProvidersMapper from "../../../../utils/fulfillment-providers.mapper"
import paymentProvidersMapper from "../../../../utils/payment-providers-mapper"
@@ -19,7 +18,7 @@ const RegionCard = ({ region }: Props) => {
: undefined
}
>
<div className="flex flex-col gap-y-2xsmall inter-small-regular text-grey-50">
<div className="gap-y-2xsmall inter-small-regular text-grey-50 flex flex-col">
<p>
Payment providers:{" "}
<span className="truncate">
packages/admin-ui/ui/src/domain/settings/return-reasons/create-reason-modal.tsx
+4 -5
View File
@@ -1,6 +1,5 @@
import { ReturnReason } from "@medusajs/medusa"
import { useAdminCreateReturnReason } from "medusa-react"
import React from "react"
import { useForm } from "react-hook-form"
import Button from "../../../components/fundamentals/button"
import Input from "../../../components/molecules/input"
@@ -69,7 +68,7 @@ const CreateReturnReasonModal = ({
</Modal.Header>
<form onSubmit={handleSubmit(onCreate)}>
<Modal.Content>
<div className="grid grid-cols-2 gap-large mb-large">
<div className="gap-large mb-large grid grid-cols-2">
<Input
{...register("value", {
required: "Value is required",
@@ -103,10 +102,10 @@ const CreateReturnReasonModal = ({
/>
</Modal.Content>
<Modal.Footer>
<div className="flex w-full h-8 justify-end">
<div className="flex h-8 w-full justify-end">
<Button
variant="ghost"
className="mr-2 w-32 text-small justify-center"
className="text-small mr-2 w-32 justify-center"
size="large"
onClick={handleClose}
type="button"
@@ -117,7 +116,7 @@ const CreateReturnReasonModal = ({
loading={isLoading}
disabled={isLoading}
size="large"
className="w-32 text-small justify-center"
className="text-small w-32 justify-center"
variant="primary"
>
Create
packages/admin-ui/ui/src/domain/settings/return-reasons/detail.tsx
+3 -4
View File
@@ -3,7 +3,7 @@ import {
useAdminDeleteReturnReason,
useAdminUpdateReturnReason,
} from "medusa-react"
import React, { useEffect } from "react"
import { useEffect } from "react"
import { useForm } from "react-hook-form"
import DuplicateIcon from "../../../components/fundamentals/icons/duplicate-icon"
import TrashIcon from "../../../components/fundamentals/icons/trash-icon"
@@ -35,9 +35,8 @@ const ReturnReasonDetail = ({ reason }: ReturnReasonDetailsProps) => {
open: handleOpenPrompt,
close: handleClosePrompt,
} = useToggleState()
const { register, reset, handleSubmit } = useForm<
ReturnReasonDetailsFormData
>()
const { register, reset, handleSubmit } =
useForm<ReturnReasonDetailsFormData>()
const notification = useNotification()
const { mutate: deleteRR } = useAdminDeleteReturnReason(reason?.id)
const { mutate: update } = useAdminUpdateReturnReason(reason?.id)
packages/admin-ui/ui/src/domain/settings/return-reasons/index.tsx
+1 -1
View File
@@ -1,5 +1,5 @@
import { useAdminReturnReasons } from "medusa-react"
import React, { useState } from "react"
import { useState } from "react"
import Spinner from "../../../components/atoms/spinner"
import PlusIcon from "../../../components/fundamentals/icons/plus-icon"
import BreadCrumb from "../../../components/molecules/breadcrumb"
packages/admin-ui/ui/src/domain/settings/taxes/details.tsx
+1 -1
View File
@@ -113,7 +113,7 @@ const TaxDetails = ({ id }) => {
))}
</Table.Head>
{regionIsLoading || taxRatesLoading ? (
<div className="flex w-full h-full absolute items-center justify-center mt-10">
<div className="absolute mt-10 flex h-full w-full items-center justify-center">
<div className="">
<Spinner size={"large"} variant={"secondary"} />
</div>
packages/admin-ui/ui/src/domain/settings/taxes/edit-form.tsx
+5 -5
View File
@@ -1,6 +1,6 @@
import { AdminPostTaxRatesTaxRateReq, TaxRate } from "@medusajs/medusa"
import { useAdminUpdateRegion, useAdminUpdateTaxRate } from "medusa-react"
import React, { useEffect, useState } from "react"
import { useEffect, useState } from "react"
import { useForm } from "react-hook-form"
import Button from "../../../components/fundamentals/button"
import PlusIcon from "../../../components/fundamentals/icons/plus-icon"
@@ -124,7 +124,7 @@ const EditTaxRate = ({
{(product_types.length > 0 ||
products.length > 0 ||
shipping_options.length > 0) && (
<div className="flex flex-col gap-base">
<div className="gap-base flex flex-col">
{products.length > 0 && (
<TaxRuleItem
onDelete={() =>
@@ -224,7 +224,7 @@ const EditTaxRate = ({
)
)
}}
className="w-full mt-base"
className="mt-base w-full"
size="medium"
variant="secondary"
>
@@ -234,7 +234,7 @@ const EditTaxRate = ({
</div>
</Modal.Content>
<Modal.Footer>
<div className="flex items-center justify-end w-full">
<div className="flex w-full items-center justify-end">
<Button
type="button"
onClick={onDismiss}
@@ -325,7 +325,7 @@ export const SimpleEditForm = ({ onDismiss, taxRate }: SimpleEditFormProps) => {
<EditTaxRateDetails form={nestedForm(form, "details")} lockName />
</Modal.Content>
<Modal.Footer>
<div className="flex items-center justify-end w-full">
<div className="flex w-full items-center justify-end">
<Button
type="button"
onClick={onDismiss}
packages/admin-ui/ui/src/domain/settings/taxes/edit-tax-rate-details.tsx
+3 -4
View File
@@ -1,4 +1,3 @@
import React from "react"
import LockIcon from "../../../components/fundamentals/icons/lock-icon"
import Input from "../../../components/molecules/input"
import FormValidator from "../../../utils/form-validator"
@@ -39,7 +38,7 @@ export const EditTaxRateDetails = ({
required: !lockName ? FormValidator.required("Name") : undefined,
})}
required={!lockName}
className="mb-base min-w-[335px] w-full"
className="mb-base w-full min-w-[335px]"
errors={errors}
/>
<Input
@@ -58,7 +57,7 @@ export const EditTaxRateDetails = ({
valueAsNumber: true,
})}
required
className="mb-base min-w-[335px] w-full"
className="mb-base w-full min-w-[335px]"
errors={errors}
/>
<Input
@@ -68,7 +67,7 @@ export const EditTaxRateDetails = ({
required: FormValidator.required("Tax Code"),
})}
required
className="mb-base min-w-[335px] w-full"
className="mb-base w-full min-w-[335px]"
errors={errors}
/>
</div>
packages/admin-ui/ui/src/domain/settings/taxes/edit.tsx
+1 -1
View File
@@ -1,5 +1,5 @@
import { useAdminTaxRate } from "medusa-react"
import React, { useContext } from "react"
import { useContext } from "react"
import Spinner from "../../../components/atoms/spinner"
import Modal from "../../../components/molecules/modal"
import LayeredModal, {
packages/admin-ui/ui/src/domain/settings/taxes/index.tsx
+1 -1
View File
@@ -45,7 +45,7 @@ const Taxes = () => {
]}
>
{isLoading || !regions ? (
<div className="flex-grow h-full flex items-center justify-center">
<div className="flex h-full flex-grow items-center justify-center">
<Spinner size="large" variant="secondary" />
</div>
) : (
packages/admin-ui/ui/src/domain/settings/taxes/new.tsx
+4 -4
View File
@@ -1,5 +1,5 @@
import { useAdminCreateTaxRate } from "medusa-react"
import React, { useContext } from "react"
import { useContext } from "react"
import { useForm } from "react-hook-form"
import Button from "../../../components/fundamentals/button"
import PlusIcon from "../../../components/fundamentals/icons/plus-icon"
@@ -108,7 +108,7 @@ const NewTaxRate = ({ regionId, onDismiss }: NewTaxRateProps) => {
{(product_types.length > 0 ||
products.length > 0 ||
shipping_options.length > 0) && (
<div className="flex flex-col gap-base">
<div className="gap-base flex flex-col">
{products.length > 0 && (
<TaxRuleItem
onDelete={() =>
@@ -210,7 +210,7 @@ const NewTaxRate = ({ regionId, onDismiss }: NewTaxRateProps) => {
)
)
}}
className="w-full mt-base"
className="mt-base w-full"
size="medium"
variant="secondary"
>
@@ -220,7 +220,7 @@ const NewTaxRate = ({ regionId, onDismiss }: NewTaxRateProps) => {
</div>
</Modal.Content>
<Modal.Footer>
<div className="flex items-center justify-end w-full">
<div className="flex w-full items-center justify-end">
<Button
type="button"
onClick={onDismiss}
packages/admin-ui/ui/src/domain/settings/taxes/product-selector.tsx
+2 -2
View File
@@ -38,11 +38,11 @@ export const ProductSelector = ({ items, onChange }) => {
Cell: ({ row: { original } }) => {
return (
<div className="flex items-center">
<div className="h-[40px] w-[30px] my-1.5 flex items-center mr-4 rounded-sm overflow-hidden">
<div className="my-1.5 mr-4 flex h-[40px] w-[30px] items-center overflow-hidden rounded-sm">
{original.thumbnail ? (
<img
src={original.thumbnail}
className="h-full object-cover rounded-soft"
className="rounded-soft h-full object-cover"
/>
) : (
<ImagePlaceholder />
packages/admin-ui/ui/src/domain/settings/taxes/product-type-selector.tsx
+1 -1
View File
@@ -1,4 +1,4 @@
import React, { useMemo, useState } from "react"
import { useMemo, useState } from "react"
import { useAdminProductTypes } from "medusa-react"
import { SelectableTable } from "./selectable-table"
packages/admin-ui/ui/src/domain/settings/taxes/region-form.tsx
+7 -9
View File
@@ -1,6 +1,6 @@
import { Region } from "@medusajs/medusa"
import { useAdminStoreTaxProviders, useAdminUpdateRegion } from "medusa-react"
import React, { useEffect, useMemo } from "react"
import { useEffect, useMemo } from "react"
import { Controller, useForm } from "react-hook-form"
import Checkbox from "../../../components/atoms/checkbox"
import Button from "../../../components/fundamentals/button"
@@ -58,10 +58,8 @@ export const RegionTaxForm = ({ region }: RegionTaxFormProps) => {
})
}, [region])
const {
isLoading: isProvidersLoading,
tax_providers,
} = useAdminStoreTaxProviders()
const { isLoading: isProvidersLoading, tax_providers } =
useAdminStoreTaxProviders()
const updateRegion = useAdminUpdateRegion(region.id)
@@ -108,8 +106,8 @@ export const RegionTaxForm = ({ region }: RegionTaxFormProps) => {
}
return (
<form className="flex flex-col flex-1" onSubmit={handleSubmit(onSubmit)}>
<div className="flex flex-col gap-base flex-1">
<form className="flex flex-1 flex-col" onSubmit={handleSubmit(onSubmit)}>
<div className="gap-base flex flex-1 flex-col">
<Controller
name="tax_provider_id"
control={control}
@@ -125,7 +123,7 @@ export const RegionTaxForm = ({ region }: RegionTaxFormProps) => {
/>
)}
/>
<div className="flex item-center gap-x-1.5">
<div className="item-center flex gap-x-1.5">
<Checkbox
className="inter-base-regular"
{...register("automatic_taxes")}
@@ -137,7 +135,7 @@ export const RegionTaxForm = ({ region }: RegionTaxFormProps) => {
}
/>
</div>
<div className="flex item-center gap-x-1.5">
<div className="item-center flex gap-x-1.5">
<Checkbox
className="inter-base-regular"
{...register("gift_cards_taxable")}
packages/admin-ui/ui/src/domain/settings/taxes/shipping-option-selector.tsx
+1 -1
View File
@@ -1,4 +1,4 @@
import React, { useMemo, useState } from "react"
import { useMemo, useState } from "react"
import { useAdminShippingOptions } from "medusa-react"
import { SelectableTable } from "./selectable-table"
packages/admin-ui/ui/src/domain/settings/taxes/tax-rule-item.tsx
+2 -5
View File
@@ -1,5 +1,3 @@
import React from "react"
import Actionables from "../../../components/molecules/actionables"
import EditIcon from "../../../components/fundamentals/icons/edit-icon"
import TrashIcon from "../../../components/fundamentals/icons/trash-icon"
@@ -7,10 +5,10 @@ import Badge from "../../../components/fundamentals/badge"
export const TaxRuleItem = ({ onEdit, onDelete, index, name, description }) => {
return (
<div className="p-base border rounded-rounded flex gap-base items-center">
<div className="p-base rounded-rounded gap-base flex items-center border">
<div>
<Badge
className="inter-base-semibold flex justify-center items-center w-[40px] h-[40px]"
className="inter-base-semibold flex h-[40px] w-[40px] items-center justify-center"
variant="default"
>
§{index}
@@ -41,4 +39,3 @@ export const TaxRuleItem = ({ onEdit, onDelete, index, name, description }) => {
</div>
)
}
packages/admin-ui/ui/src/domain/settings/taxes/tax-rule-selector.tsx
+2 -2
View File
@@ -75,7 +75,7 @@ const TaxRuleSelector: React.FC<TaxRuleSelectorProps> = ({
<>
<div className="inter-base-semibold mb-large">Type</div>
<RadioGroup.Root
className="flex gap-base"
className="gap-base flex"
value={selectedType}
onValueChange={handleTypeChange}
>
@@ -122,7 +122,7 @@ const TaxRuleSelector: React.FC<TaxRuleSelectorProps> = ({
</div>
</Modal.Content>
<Modal.Footer>
<div className="flex w-full justify-end gap-x-xsmall">
<div className="gap-x-xsmall flex w-full justify-end">
<Button
variant="ghost"
size="small"
packages/admin-ui/ui/src/domain/settings/taxes/use-tax-rate-columns.tsx
+1 -1
View File
@@ -14,7 +14,7 @@ const useTaxRateColumns = () => {
return (
<div className="text-grey-90 group-hover:text-violet-60 pl-2">
{row.original.type === "region" ? (
<div className="flex gap-x-xsmall text-grey-40 items-center">
<div className="gap-x-xsmall text-grey-40 flex items-center">
<LockIcon size={"12"} /> {value}
</div>
) : (
packages/admin-ui/ui/src/domain/settings/users/index.tsx
+2 -2
View File
@@ -44,8 +44,8 @@ const Users: React.FC = () => {
]
return (
<div className="flex flex-col h-full">
<div className="w-full flex flex-col grow">
<div className="flex h-full flex-col">
<div className="flex w-full grow flex-col">
<BreadCrumb
previousRoute="/a/settings"
previousBreadcrumb="Settings"