diff --git a/apps/taxes/package.json b/apps/taxes/package.json index f1ce391..fde2fe2 100644 --- a/apps/taxes/package.json +++ b/apps/taxes/package.json @@ -17,13 +17,9 @@ }, "dependencies": { "@hookform/resolvers": "^2.9.10", - "@material-ui/core": "^4.12.4", - "@material-ui/icons": "^4.11.3", - "@material-ui/lab": "4.0.0-alpha.61", "@saleor/app-sdk": "0.39.1", "@saleor/apps-shared": "workspace:*", - "@saleor/apps-ui": "workspace:*", - "@saleor/macaw-ui": "^0.7.2", + "@saleor/macaw-ui": "^0.8.0-pre.72", "@sentry/nextjs": "^7.45.0", "@tanstack/react-query": "^4.19.1", "@trpc/client": "^10.9.0", @@ -64,9 +60,9 @@ "@testing-library/react": "^13.4.0", "@testing-library/react-hooks": "^8.0.1", "@types/node": "^18.8.1", - "@types/react": "^18.0.21", + "@types/react": "~18.0.38", "@types/react-dom": "^18.0.6", - "@vitejs/plugin-react": "^3.1.0", + "@vitejs/plugin-react": "^4.0.0", "eslint": "8.25.0", "eslint-config-next": "12.3.1", "eslint-config-prettier": "^8.5.0", diff --git a/apps/taxes/src/lib/no-ssr-wrapper.tsx b/apps/taxes/src/lib/no-ssr-wrapper.tsx deleted file mode 100644 index 4917e33..0000000 --- a/apps/taxes/src/lib/no-ssr-wrapper.tsx +++ /dev/null @@ -1,8 +0,0 @@ -import React, { PropsWithChildren } from "react"; -import dynamic from "next/dynamic"; - -const Wrapper = (props: PropsWithChildren<{}>) => {props.children}; - -export const NoSSRWrapper = dynamic(() => Promise.resolve(Wrapper), { - ssr: false, -}); diff --git a/apps/taxes/src/lib/theme-synchronizer.tsx b/apps/taxes/src/lib/theme-synchronizer.tsx index 02b3b61..3386f49 100644 --- a/apps/taxes/src/lib/theme-synchronizer.tsx +++ b/apps/taxes/src/lib/theme-synchronizer.tsx @@ -1,28 +1,25 @@ import { useAppBridge } from "@saleor/app-sdk/app-bridge"; -import { useTheme } from "@saleor/macaw-ui"; -import { memo, useEffect } from "react"; +import { useTheme } from "@saleor/macaw-ui/next"; +import { useEffect } from "react"; -/** - * Macaw-ui stores its theme mode in memory and local storage. To synchronize App with Dashboard, - * Macaw must be informed about this change from AppBridge. - * - * If you are not using Macaw, you can remove this. - */ -function _ThemeSynchronizer() { +// todo move to shared +export function ThemeSynchronizer() { const { appBridgeState } = useAppBridge(); - const { setTheme, themeType } = useTheme(); + const { setTheme } = useTheme(); useEffect(() => { if (!setTheme || !appBridgeState?.theme) { return; } - if (themeType !== appBridgeState?.theme) { - setTheme(appBridgeState.theme); + if (appBridgeState.theme === "light") { + setTheme("defaultLight"); } - }, [appBridgeState?.theme, setTheme, themeType]); + + if (appBridgeState.theme === "dark") { + setTheme("defaultDark"); + } + }, [appBridgeState?.theme, setTheme]); return null; } - -export const ThemeSynchronizer = memo(_ThemeSynchronizer); diff --git a/apps/taxes/src/modules/avatax/ui/avatax-configuration-form.tsx b/apps/taxes/src/modules/avatax/ui/avatax-configuration-form.tsx deleted file mode 100644 index 26fe017..0000000 --- a/apps/taxes/src/modules/avatax/ui/avatax-configuration-form.tsx +++ /dev/null @@ -1,318 +0,0 @@ -import { zodResolver } from "@hookform/resolvers/zod"; -import { - FormHelperText, - Grid, - InputLabel, - Switch, - TextField, - TextFieldProps, -} from "@material-ui/core"; -import { Delete, Save } from "@material-ui/icons"; -import { Button, makeStyles } from "@saleor/macaw-ui"; -import React from "react"; -import { Controller, useForm } from "react-hook-form"; -import { z } from "zod"; -import { useInstanceId } from "../../taxes/tax-context"; -import { trpcClient } from "../../trpc/trpc-client"; -import { AppLink } from "../../ui/app-link"; -import { avataxConfigSchema } from "../avatax-config"; -import { useDashboardNotification } from "@saleor/apps-shared"; - -const useStyles = makeStyles((theme) => ({ - reverseRow: { - display: "flex", - flexDirection: "row-reverse", - gap: theme.spacing(1), - }, -})); - -const schema = avataxConfigSchema; - -type FormValues = z.infer; - -const defaultValues: FormValues = { - companyCode: "", - isAutocommit: false, - isSandbox: false, - password: "", - username: "", - name: "", - shippingTaxCode: "", -}; - -export const AvataxConfigurationForm = () => { - const { notifySuccess, notifyError } = useDashboardNotification(); - const [isWarningDialogOpen, setIsWarningDialogOpen] = React.useState(false); - const styles = useStyles(); - const { handleSubmit, reset, control, formState } = useForm({ - resolver: zodResolver(schema), - defaultValues, - }); - const { instanceId, setInstanceId } = useInstanceId(); - const { refetch: refetchChannelConfigurationData } = - trpcClient.channelsConfiguration.fetch.useQuery(undefined, { - onError(error) { - notifyError("Error", error.message); - }, - }); - const { refetch: refetchProvidersConfigurationData } = - trpcClient.providersConfiguration.getAll.useQuery(); - const { data: instance } = trpcClient.avataxConfiguration.get.useQuery( - { id: instanceId ?? "" }, - { - enabled: !!instanceId, - onError(error) { - notifyError("Error", error.message); - }, - } - ); - - const resetInstanceId = () => { - setInstanceId(null); - }; - - React.useEffect(() => { - if (instance) { - const { config } = instance; - - reset(config); - } else { - reset(defaultValues); - } - }, [instance, reset]); - - const { mutate: createMutation, isLoading: isCreateLoading } = - trpcClient.avataxConfiguration.post.useMutation({ - onSuccess({ id }) { - setInstanceId(id); - refetchProvidersConfigurationData(); - notifySuccess("Success", "Saved app configuration"); - }, - onError(error) { - notifyError("Error", error.message); - }, - }); - - const { mutate: updateMutation, isLoading: isUpdateLoading } = - trpcClient.avataxConfiguration.patch.useMutation({ - onSuccess() { - refetchProvidersConfigurationData(); - notifySuccess("Success", "Updated Avalara configuration"); - }, - onError(error) { - notifyError("Error", error.message); - }, - }); - - const { mutate: deleteMutation } = trpcClient.avataxConfiguration.delete.useMutation({ - onSuccess() { - resetInstanceId(); - refetchProvidersConfigurationData(); - refetchChannelConfigurationData(); - notifySuccess("Success", "Removed Avatax instance"); - }, - onError(error) { - notifyError("Error", error.message); - }, - }); - - const textFieldProps: TextFieldProps = { - fullWidth: true, - }; - - const onSubmit = (value: FormValues) => { - if (instanceId) { - updateMutation({ - id: instanceId, - value, - }); - } else { - createMutation({ - value, - }); - } - }; - - const closeWarningDialog = () => { - setIsWarningDialogOpen(false); - }; - - const openWarningDialog = () => { - setIsWarningDialogOpen(true); - }; - - const deleteProvider = () => { - closeWarningDialog(); - if (instanceId) { - deleteMutation({ id: instanceId }); - } - }; - - const isLoading = isCreateLoading || isUpdateLoading; - - return ( - <> -
- - - ( - - )} - /> - {formState.errors.name && ( - {formState.errors.name.message} - )} - - - - Sandbox - ( - field.onChange(e.target.checked)} - /> - )} - /> - - - Toggling between{" "} - - Production and Sandbox - {" "} - environments.{" "} - - - - - Autocommit - ( - field.onChange(e.target.checked)} - /> - )} - /> - - - If enabled, the order will be automatically{" "} - - committed to Avalara. - {" "} - - - - ( - - )} - /> - {formState.errors.username && ( - {formState.errors.username.message} - )} - - - ( - - )} - /> - - {formState.errors.password && ( - {formState.errors.password.message} - )} - - - ( - - )} - /> - - {"When not provided, the default company will be used. "} - - Read more - {" "} - about company codes. - - {formState.errors.companyCode && ( - {formState.errors.companyCode.message} - )} - - - ( - - )} - /> - - {"Tax code that for the shipping line sent to Avatax. "} - - Must match Avatax tax codes format. - - - {formState.errors.shippingTaxCode && ( - {formState.errors.shippingTaxCode.message} - )} - - -
-
- - {instanceId && ( - - )} -
-
- {/* */} - - ); -}; diff --git a/apps/taxes/src/modules/avatax/ui/avatax-configuration.tsx b/apps/taxes/src/modules/avatax/ui/avatax-configuration.tsx deleted file mode 100644 index f4467dc..0000000 --- a/apps/taxes/src/modules/avatax/ui/avatax-configuration.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import { AvataxConfigurationForm } from "./avatax-configuration-form"; - -export const AvataxConfiguration = () => { - return ( -
-

Avatax configuration

- -
- ); -}; diff --git a/apps/taxes/src/modules/channels/ui/channel-tax-provider-form.tsx b/apps/taxes/src/modules/channels/ui/channel-tax-provider-form.tsx deleted file mode 100644 index 8910945..0000000 --- a/apps/taxes/src/modules/channels/ui/channel-tax-provider-form.tsx +++ /dev/null @@ -1,218 +0,0 @@ -import { zodResolver } from "@hookform/resolvers/zod"; -import { - FormGroup, - FormHelperText, - Grid, - InputLabel, - MenuItem, - Select, - TextField, - TextFieldProps, - Typography, -} from "@material-ui/core"; -import { Save } from "@material-ui/icons"; -import { Button, makeStyles } from "@saleor/macaw-ui"; - -import { useDashboardNotification } from "@saleor/apps-shared"; -import React from "react"; -import { Controller, useForm } from "react-hook-form"; -import { - ChannelConfig, - channelSchema, - defaultChannelConfig, -} from "../../channels-configuration/channels-config"; -import { ProvidersConfig } from "../../providers-configuration/providers-config"; -import { ProviderIcon } from "../../providers-configuration/ui/provider-icon"; -import { useChannelSlug } from "../../taxes/tax-context"; -import { trpcClient } from "../../trpc/trpc-client"; -import { CountrySelect } from "../../ui/country-select/country-select"; - -type ChannelTaxProviderFormValues = ChannelConfig; - -const useStyles = makeStyles((theme) => ({ - reverseRow: { - display: "flex", - flexDirection: "row-reverse", - }, - menuItem: { - display: "flex", - gap: theme.spacing(1), - alignItems: "center", - }, - helperText: { - marginTop: 0, - marginBottom: theme.spacing(1), - }, -})); - -const getDefaultFormValues = ( - channel: ChannelConfig | undefined, - providers: ProvidersConfig -): ChannelTaxProviderFormValues => { - if (channel && channel.providerInstanceId !== "") { - return { - ...defaultChannelConfig, - ...channel, - }; - } - - const isOnlyOneInstance = providers.length === 1; - - if (isOnlyOneInstance) { - return { - ...defaultChannelConfig, - providerInstanceId: providers[0].id, - }; - } - - return defaultChannelConfig; -}; - -export const ChannelTaxProviderForm = () => { - const styles = useStyles(); - const { control, reset, handleSubmit } = useForm({ - resolver: zodResolver(channelSchema), - }); - const { notifyError, notifySuccess } = useDashboardNotification(); - - const { channelSlug } = useChannelSlug(); - - const { data: channelConfigurationData, refetch: refetchChannelConfigurationData } = - trpcClient.channelsConfiguration.fetch.useQuery(undefined, { - onError(error) { - notifyError("Error", error.message); - }, - }); - - const { data: providerInstances = [] } = trpcClient.providersConfiguration.getAll.useQuery( - undefined, - { - onError(error) { - notifyError("Error", error.message); - }, - } - ); - const channelConfig = channelConfigurationData?.[channelSlug]; - - const { mutate, isLoading } = trpcClient.channelsConfiguration.upsert.useMutation({ - onSuccess() { - refetchChannelConfigurationData(); - notifySuccess("Success", `Saved configuration of channel: ${channelSlug}`); - }, - onError(error) { - notifyError("Error", error.message); - }, - }); - - React.useEffect(() => { - const defaultValues = getDefaultFormValues(channelConfig, providerInstances); - - reset(defaultValues); - }, [channelConfig, providerInstances, reset]); - - const textFieldProps: TextFieldProps = { - fullWidth: true, - }; - - const onSubmit = (values: ChannelTaxProviderFormValues) => { - mutate({ - channelSlug, - config: { - ...values, - }, - }); - }; - - return ( -
-
- - - - Channel tax provider - ( - - )} - /> - - - - - Ship from address - - The taxes will be calculated based on the address. - - - - - } - /> - - - } - /> - - - ( - - )} - /> - - - ( - - )} - /> - - - ( - - )} - /> - - - - - -
-
- {" "} -
-
-
- ); -}; diff --git a/apps/taxes/src/modules/channels/ui/channel-tax-provider.tsx b/apps/taxes/src/modules/channels/ui/channel-tax-provider.tsx deleted file mode 100644 index 8005f58..0000000 --- a/apps/taxes/src/modules/channels/ui/channel-tax-provider.tsx +++ /dev/null @@ -1,160 +0,0 @@ -import { Grid, Typography } from "@material-ui/core"; -import { Warning } from "@material-ui/icons"; -import { Skeleton } from "@material-ui/lab"; -import { Button, makeStyles } from "@saleor/macaw-ui"; -import { PropsWithChildren } from "react"; -import { useAppRedirect } from "../../../lib/app/redirect"; -import { ProviderIcon } from "../../providers-configuration/ui/provider-icon"; -import { providerConfig, TaxProviderName } from "../../taxes/provider-config"; -import { useActiveTab, useChannelSlug, useInstanceId } from "../../taxes/tax-context"; -import { trpcClient } from "../../trpc/trpc-client"; -import { AppLink } from "../../ui/app-link"; -import { AppPaper } from "../../ui/app-paper"; -import { ChannelTaxProviderForm } from "./channel-tax-provider-form"; - -const useStyles = makeStyles((theme) => ({ - centerWithGap: { - display: "flex", - alignItems: "center", - gap: theme.spacing(1), - }, -})); - -const NoDataPlaceholder = ({ - title, - children, -}: PropsWithChildren<{ - title: string; -}>) => { - const styles = useStyles(); - - return ( - -
- - - {title} - - - -
- {children} -
- - ); -}; - -const NoChannelPlaceholder = () => { - const { redirect } = useAppRedirect(); - - return ( - - - For a channel to appear on this list, you need to configure it on the{" "} - Tax Configuration page. - -
- - By default, each channel will use flat rates as the tax calculation method. If you - want a channel to calculate taxes using the Tax App, you need to change the tax calculation - method to Use tax app. - -
- - - ); -}; - -const NoProviderPlaceholder = () => { - const styles = useStyles(); - const { setActiveTab } = useActiveTab(); - const { setInstanceId } = useInstanceId(); - - return ( - - - You need to set up at least one tax provider before you can configure a channel. - -
- - We currently support the following tax providers: -
    - {Object.entries(providerConfig).map(([provider, { label }]) => ( - - - {label} - - - - ))} -
- - - - ); -}; - -const ChannelTaxProviderSkeleton = () => { - return ( - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - ); -}; - -export const ChannelTaxProvider = () => { - const { channelSlug } = useChannelSlug(); - const channels = trpcClient.channels.fetch.useQuery(undefined, {}); - const providers = trpcClient.providersConfiguration.getAll.useQuery(); - - if (channels?.isFetching || providers?.isFetching) { - return ; - } - - if (!channelSlug) { - return ; - } - - if (!providers?.data?.length) { - return ; - } - - return ( - - - - ); -}; diff --git a/apps/taxes/src/modules/channels/ui/channels-list.tsx b/apps/taxes/src/modules/channels/ui/channels-list.tsx deleted file mode 100644 index a02c5b3..0000000 --- a/apps/taxes/src/modules/channels/ui/channels-list.tsx +++ /dev/null @@ -1,70 +0,0 @@ -import { makeStyles } from "@saleor/macaw-ui"; -import { - OffsettedList, - OffsettedListBody, - OffsettedListHeader, - OffsettedListItem, - OffsettedListItemCell, -} from "@saleor/macaw-ui"; -import clsx from "clsx"; -import { ChannelFragment } from "../../../../generated/graphql"; - -const useStyles = makeStyles((theme) => { - return { - headerItem: { - height: "auto !important", - display: "grid", - gridTemplateColumns: "1fr", - }, - listItem: { - cursor: "pointer", - height: "auto !important", - display: "grid", - gridTemplateColumns: "1fr", - }, - listItemActive: { - border: `2px solid ${theme.palette.primary.main}`, - }, - cellSlug: { - fontFamily: "monospace", - opacity: 0.8, - }, - }; -}); - -type Props = { - channels: ChannelFragment[]; - activeChannelSlug: string; - onChannelClick(channelSlug: string): void; -}; - -export const ChannelsList = ({ channels, activeChannelSlug, onChannelClick }: Props) => { - const styles = useStyles(); - - return ( - - - - Channel name - - - - {channels.map((c) => { - return ( - { - onChannelClick(c.slug); - }} - > - {c.name} - - ); - })} - - - ); -}; diff --git a/apps/taxes/src/modules/channels/ui/channels.tsx b/apps/taxes/src/modules/channels/ui/channels.tsx deleted file mode 100644 index 24850da..0000000 --- a/apps/taxes/src/modules/channels/ui/channels.tsx +++ /dev/null @@ -1,56 +0,0 @@ -import { Grid } from "@material-ui/core"; -import { Skeleton } from "@material-ui/lab"; -import { useChannelSlug } from "../../taxes/tax-context"; -import { trpcClient } from "../../trpc/trpc-client"; -import { AppPaper } from "../../ui/app-paper"; -import { ChannelsList } from "./channels-list"; - -const ChannelsSkeleton = () => { - return ( - - - - - - - - - - - ); -}; - -export const Channels = () => { - const { channelSlug, setChannelSlug } = useChannelSlug(); - - const channels = trpcClient.channels.fetch.useQuery(undefined, { - onSuccess: (result) => { - if (result?.[0]) { - setChannelSlug(result?.[0].slug); - } - }, - }); - - if (channels?.isFetching) { - return ; - } - - if (channels.error) { - return
Error. No channel available
; - } - - if (channels.data?.length === 0) { - // empty space for grid - return
; - } - - return ( - - setChannelSlug(nextSlug)} - /> - - ); -}; diff --git a/apps/taxes/src/modules/providers-configuration/ui/configuration.tsx b/apps/taxes/src/modules/providers-configuration/ui/configuration.tsx deleted file mode 100644 index 6b7f721..0000000 --- a/apps/taxes/src/modules/providers-configuration/ui/configuration.tsx +++ /dev/null @@ -1,105 +0,0 @@ -import { FormControlLabel, Grid, Radio, RadioGroup, Typography } from "@material-ui/core"; -import { makeStyles } from "@saleor/macaw-ui"; -import React from "react"; -import { AvataxConfiguration } from "../../avatax/ui/avatax-configuration"; -import { providerConfig, TaxProviderName } from "../../taxes/provider-config"; -import { TaxJarConfiguration } from "../../taxjar/ui/taxjar-configuration"; -import { useInstanceId } from "../../taxes/tax-context"; -import { trpcClient } from "../../trpc/trpc-client"; -import { AppPaper } from "../../ui/app-paper"; -import { ProviderIcon } from "./provider-icon"; - -const providersConfigurationComponent: Record = { - taxjar: TaxJarConfiguration, - avatax: AvataxConfiguration, -}; - -const useStyles = makeStyles((theme) => ({ - radioLabel: { - width: "100%", - padding: theme.spacing(1), - border: `1px solid ${theme.palette.divider}`, - "&:hover": { - backgroundColor: - theme.palette.type === "dark" ? theme.palette.primary.dark : theme.palette.grey[50], - }, - }, - gridItem: { - display: "flex", - justifyContent: "center", - }, - radioLabelActive: { - backgroundColor: - theme.palette.type === "dark" ? theme.palette.primary.dark : theme.palette.grey[50], - }, - iconWithLabel: { - display: "flex", - alignItems: "center", - flexDirection: "column", - gap: theme.spacing(1), - }, -})); - -export const Configuration = () => { - const [provider, setProvider] = React.useState("taxjar"); - const { instanceId } = useInstanceId(); - const { data: providersConfigurationData } = trpcClient.providersConfiguration.getAll.useQuery(); - const styles = useStyles(); - - React.useEffect(() => { - const instance = providersConfigurationData?.find((instance) => instance.id === instanceId); - - setProvider(instance?.provider ?? "taxjar"); - }, [instanceId, providersConfigurationData]); - - const SelectedConfigurationForm = React.useMemo( - () => (provider ? providersConfigurationComponent[provider] : () => null), - [provider] - ); - - return ( - - {!instanceId && ( - - -
- - Please select one of the providers: - -
- - - setProvider(e.target.value as TaxProviderName)} - > - - {Object.entries(providerConfig).map(([name, config]) => ( - - } - label={ -
- - {config.label} -
- } - labelPlacement="top" - aria-label={config.label} - /> - - ))} - - - - - )} - - - ); -}; diff --git a/apps/taxes/src/modules/providers-configuration/ui/delete-provider-dialog.tsx b/apps/taxes/src/modules/providers-configuration/ui/delete-provider-dialog.tsx deleted file mode 100644 index 247c70b..0000000 --- a/apps/taxes/src/modules/providers-configuration/ui/delete-provider-dialog.tsx +++ /dev/null @@ -1,45 +0,0 @@ -import { - Dialog, - DialogTitle, - DialogContent, - DialogContentText, - DialogActions, -} from "@material-ui/core"; -import { Button, makeStyles } from "@saleor/macaw-ui"; - -type DeleteProviderDialogProps = { - isOpen: boolean; - onClose: () => void; - onCancel: () => void; - onConfirm: () => void; -}; - -const useStyles = makeStyles((theme) => ({ - actions: { - display: "flex", - gap: theme.spacing(1), - }, -})); - -export const DeleteProviderDialog = (p: DeleteProviderDialogProps) => { - const styles = useStyles(); - - return ( - - Delete provider instance? - - - Are you sure you want to delete this provider instance? This action cannot be undone. - - - -
- - -
- - - ); -}; diff --git a/apps/taxes/src/modules/providers-configuration/ui/provider-icon.tsx b/apps/taxes/src/modules/providers-configuration/ui/provider-icon.tsx deleted file mode 100644 index d62d127..0000000 --- a/apps/taxes/src/modules/providers-configuration/ui/provider-icon.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import Image, { ImageProps } from "next/image"; -import { providerConfig, TaxProviderName } from "../../taxes/provider-config"; - -type Size = "small" | "medium" | "large" | "xlarge"; - -const sizes: Record = { - small: 16, - medium: 24, - large: 32, - xlarge: 48, -}; - -type ProviderIconProps = { - provider: TaxProviderName; - size?: Size; -} & Omit; - -export const ProviderIcon = ({ provider, size = "medium", ...props }: ProviderIconProps) => { - const { icon, label } = providerConfig[provider]; - const matchedSize = sizes[size]; - - return ( - {`${label} - ); -}; diff --git a/apps/taxes/src/modules/providers-configuration/ui/providers-instances-list.tsx b/apps/taxes/src/modules/providers-configuration/ui/providers-instances-list.tsx deleted file mode 100644 index f53dc4e..0000000 --- a/apps/taxes/src/modules/providers-configuration/ui/providers-instances-list.tsx +++ /dev/null @@ -1,70 +0,0 @@ -import { - makeStyles, - OffsettedList, - OffsettedListBody, - OffsettedListHeader, - OffsettedListItem, - OffsettedListItemCell, -} from "@saleor/macaw-ui"; -import clsx from "clsx"; -import { useInstanceId } from "../../taxes/tax-context"; -import { trpcClient } from "../../trpc/trpc-client"; -import { AppPaper } from "../../ui/app-paper"; -import { ProviderIcon } from "./provider-icon"; - -const useStyles = makeStyles((theme) => { - return { - headerItem: { - height: "auto !important", - display: "grid", - gridTemplateColumns: "1fr", - }, - listItem: { - cursor: "pointer", - height: "auto !important", - display: "grid", - gridTemplateColumns: "1fr", - }, - listItemActive: { - border: `2px solid ${theme.palette.primary.main}`, - }, - cell: { - display: "flex", - alignItems: "center", - gap: theme.spacing(1), - }, - }; -}); - -export const TaxProvidersInstancesList = () => { - const styles = useStyles(); - const { instanceId, setInstanceId } = useInstanceId(); - const { data: providersConfigurationData } = trpcClient.providersConfiguration.getAll.useQuery(); - const instances = providersConfigurationData ?? []; - - return ( - - - - - Tax provider list - - - - {instances.map((instance) => ( - setInstanceId(instance.id)} - className={clsx(styles.listItem, instance.id === instanceId && styles.listItemActive)} - key={instance.id} - > - - {instance.config.name} - - - - ))} - - - - ); -}; diff --git a/apps/taxes/src/modules/providers-configuration/ui/providers-instances.tsx b/apps/taxes/src/modules/providers-configuration/ui/providers-instances.tsx deleted file mode 100644 index 5918e38..0000000 --- a/apps/taxes/src/modules/providers-configuration/ui/providers-instances.tsx +++ /dev/null @@ -1,74 +0,0 @@ -import { Grid } from "@material-ui/core"; -import { Add } from "@material-ui/icons"; -import { Skeleton } from "@material-ui/lab"; -import { Button, makeStyles } from "@saleor/macaw-ui"; -import { useInstanceId } from "../../taxes/tax-context"; -import { trpcClient } from "../../trpc/trpc-client"; -import { AppPaper } from "../../ui/app-paper"; -import { TaxProvidersInstancesList } from "./providers-instances-list"; - -const useStyles = makeStyles((theme) => { - return { - button: { - padding: theme.spacing(1, 2), - justifyContent: "flex-start", - }, - }; -}); - -const ProvidersSkeleton = () => { - return ( - - - - - - - - - - - - - - ); -}; - -export const ProvidersInstances = () => { - const styles = useStyles(); - const providers = trpcClient.providersConfiguration.getAll.useQuery(); - const { setInstanceId } = useInstanceId(); - - if (providers?.isFetching) { - return ; - } - - if (providers.error) { - return
Error. No provider available
; - } - - const isAnyProvider = providers.data?.length !== 0; - - if (!isAnyProvider) { - return
; - } - - return ( - - - - - - - - - ); -}; diff --git a/apps/taxes/src/modules/taxes/tax-context.ts b/apps/taxes/src/modules/taxes/tax-context.ts index a635eb8..88d205f 100644 --- a/apps/taxes/src/modules/taxes/tax-context.ts +++ b/apps/taxes/src/modules/taxes/tax-context.ts @@ -1,5 +1,4 @@ import { atom, useAtom } from "jotai"; -import { AppTab } from "../../pages/configuration"; const channelSlugAtom = atom(""); @@ -16,11 +15,3 @@ export const useInstanceId = () => { return { instanceId, setInstanceId }; }; - -const activeTabAtom = atom("channels"); - -export const useActiveTab = () => { - const [activeTab, setActiveTab] = useAtom(activeTabAtom); - - return { activeTab, setActiveTab }; -}; diff --git a/apps/taxes/src/modules/taxjar/ui/taxjar-configuration-form.tsx b/apps/taxes/src/modules/taxjar/ui/taxjar-configuration-form.tsx deleted file mode 100644 index b078d20..0000000 --- a/apps/taxes/src/modules/taxjar/ui/taxjar-configuration-form.tsx +++ /dev/null @@ -1,230 +0,0 @@ -import { zodResolver } from "@hookform/resolvers/zod"; -import { - FormHelperText, - Grid, - InputLabel, - Switch, - TextField, - TextFieldProps, -} from "@material-ui/core"; -import { Delete, Save } from "@material-ui/icons"; -import { Button, makeStyles } from "@saleor/macaw-ui"; -import React from "react"; -import { Controller, useForm } from "react-hook-form"; -import { z } from "zod"; -import { useInstanceId } from "../../taxes/tax-context"; -import { trpcClient } from "../../trpc/trpc-client"; -import { taxJarConfigSchema } from "../taxjar-config"; -import { useDashboardNotification } from "@saleor/apps-shared"; - -const useStyles = makeStyles((theme) => ({ - reverseRow: { - display: "flex", - flexDirection: "row-reverse", - gap: theme.spacing(1), - }, -})); - -const schema = taxJarConfigSchema; - -type FormValues = z.infer; - -const defaultValues: FormValues = { - name: "", - apiKey: "", - isSandbox: false, -}; - -export const TaxJarConfigurationForm = () => { - const [isWarningDialogOpen, setIsWarningDialogOpen] = React.useState(false); - const styles = useStyles(); - const { instanceId, setInstanceId } = useInstanceId(); - const { handleSubmit, reset, control, formState } = useForm({ - resolver: zodResolver(schema), - defaultValues, - }); - const { notifySuccess, notifyError } = useDashboardNotification(); - - const resetInstanceId = () => { - setInstanceId(null); - }; - - const { refetch: refetchChannelConfigurationData } = - trpcClient.channelsConfiguration.fetch.useQuery(undefined, { - onError(error) { - notifyError("Error", error.message); - }, - }); - - const { refetch: refetchProvidersConfigurationData } = - trpcClient.providersConfiguration.getAll.useQuery(); - const { data: instance } = trpcClient.taxJarConfiguration.get.useQuery( - { id: instanceId ?? "" }, - { - enabled: !!instanceId, - onError(error) { - notifyError("Error", error.message); - }, - } - ); - - const { mutate: createMutation, isLoading: isCreateLoading } = - trpcClient.taxJarConfiguration.post.useMutation({ - onSuccess({ id }) { - setInstanceId(id); - refetchProvidersConfigurationData(); - refetchChannelConfigurationData(); - - notifySuccess("Success", "Saved TaxJar configuration"); - }, - onError(error) { - notifyError("Error", error.message); - }, - }); - - const { mutate: updateMutation, isLoading: isUpdateLoading } = - trpcClient.taxJarConfiguration.patch.useMutation({ - onSuccess() { - refetchProvidersConfigurationData(); - refetchChannelConfigurationData(); - notifySuccess("Success", "Updated TaxJar configuration"); - }, - onError(error) { - notifyError("Error", error.message); - }, - }); - - const { mutate: deleteMutation, isLoading: isDeleteLoading } = - trpcClient.taxJarConfiguration.delete.useMutation({ - onSuccess() { - resetInstanceId(); - refetchProvidersConfigurationData(); - refetchChannelConfigurationData(); - - notifySuccess("Success", "Removed TaxJar instance"); - }, - onError(error) { - notifyError("Error", error.message); - }, - }); - - React.useEffect(() => { - if (instance) { - const { config } = instance; - - reset(config); - } else { - reset({ ...defaultValues }); - } - }, [instance, instanceId, reset]); - - const textFieldProps: TextFieldProps = { - fullWidth: true, - }; - - const onSubmit = (value: FormValues) => { - if (instanceId) { - updateMutation({ - id: instanceId, - value, - }); - } else { - createMutation({ - value, - }); - } - }; - - const closeWarningDialog = () => { - setIsWarningDialogOpen(false); - }; - - const openWarningDialog = () => { - setIsWarningDialogOpen(true); - }; - - const deleteProvider = () => { - closeWarningDialog(); - if (instanceId) { - deleteMutation({ id: instanceId }); - } - }; - - const isLoading = isCreateLoading || isUpdateLoading; - - return ( - <> -
- - - ( - - )} - /> - {formState.errors.name && ( - {formState.errors.name.message} - )} - - - ( - - )} - /> - {formState.errors?.apiKey && ( - {formState.errors?.apiKey.message} - )} - - - - Sandbox - ( - field.onChange(e.target.checked)} - /> - )} - /> - - - -
-
- - {instanceId && ( - - )} -
-
- {/* // todo: bring back to life once Dashboard allows to summon dialog */} - {/* */} - - ); -}; diff --git a/apps/taxes/src/modules/taxjar/ui/taxjar-configuration.tsx b/apps/taxes/src/modules/taxjar/ui/taxjar-configuration.tsx deleted file mode 100644 index 09fd303..0000000 --- a/apps/taxes/src/modules/taxjar/ui/taxjar-configuration.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import { TaxJarConfigurationForm } from "./taxjar-configuration-form"; - -export const TaxJarConfiguration = () => { - return ( -
-

TaxJar configuration

- -
- ); -}; diff --git a/apps/taxes/src/modules/ui/app-container.tsx b/apps/taxes/src/modules/ui/app-container.tsx deleted file mode 100644 index ff29804..0000000 --- a/apps/taxes/src/modules/ui/app-container.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import { makeStyles } from "@saleor/macaw-ui"; - -export const useStyles = makeStyles({ - root: { - maxWidth: 1180, - margin: "0 auto", - }, -}); - -export const AppContainer = ({ children }: { children: React.ReactNode }) => { - const styles = useStyles(); - - return
{children}
; -}; diff --git a/apps/taxes/src/modules/ui/app-grid.tsx b/apps/taxes/src/modules/ui/app-grid.tsx deleted file mode 100644 index fd3efdd..0000000 --- a/apps/taxes/src/modules/ui/app-grid.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import { makeStyles } from "@saleor/macaw-ui"; -import { PropsWithChildren } from "react"; - -export const useStyles = makeStyles({ - root: { - display: "grid", - gridTemplateColumns: "280px auto 280px", - alignItems: "start", - gap: 32, - }, -}); - -export type Props = PropsWithChildren<{}>; - -export const AppGrid = ({ children }: Props) => { - const styles = useStyles(); - - return
{children}
; -}; diff --git a/apps/taxes/src/modules/ui/app-layout.tsx b/apps/taxes/src/modules/ui/app-layout.tsx deleted file mode 100644 index 9c618b2..0000000 --- a/apps/taxes/src/modules/ui/app-layout.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import React from "react"; -import { AppContainer } from "./app-container"; -import { AppGrid } from "./app-grid"; - -export const AppLayout = ({ children }: { children: React.ReactNode }) => { - return ( - - {children} - - ); -}; diff --git a/apps/taxes/src/modules/ui/app-link.tsx b/apps/taxes/src/modules/ui/app-link.tsx deleted file mode 100644 index f42c101..0000000 --- a/apps/taxes/src/modules/ui/app-link.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import { Link } from "@material-ui/core"; -import { PropsWithChildren } from "react"; -import { useAppRedirect } from "../../lib/app/redirect"; - -export const AppLink = ({ children, href }: PropsWithChildren<{ href: string }>) => { - const { redirect } = useAppRedirect(); - - return ( - redirect(href)}> - {children} - - ); -}; diff --git a/apps/taxes/src/modules/ui/app-paper.tsx b/apps/taxes/src/modules/ui/app-paper.tsx deleted file mode 100644 index 6b58ca9..0000000 --- a/apps/taxes/src/modules/ui/app-paper.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import { Paper } from "@material-ui/core"; -import { makeStyles } from "@saleor/macaw-ui"; -import React from "react"; - -const useStyles = makeStyles({ - root: { - padding: "16px", - }, -}); - -export const AppPaper = ({ children }: { children: React.ReactNode }) => { - const styles = useStyles(); - - return ( - - {children} - - ); -}; diff --git a/apps/taxes/src/modules/ui/app-tab-nav-button.tsx b/apps/taxes/src/modules/ui/app-tab-nav-button.tsx deleted file mode 100644 index 8c5eff3..0000000 --- a/apps/taxes/src/modules/ui/app-tab-nav-button.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import { Link, makeStyles } from "@material-ui/core"; -import { PropsWithChildren } from "react"; -import { AppTab } from "../../pages/configuration"; -import { useActiveTab } from "../taxes/tax-context"; - -const useStyles = makeStyles((theme) => ({ - button: { - fontSize: "inherit", - fontFamily: "inherit", - verticalAlign: "unset", - }, -})); - -export const AppTabNavButton = ({ children, to }: PropsWithChildren<{ to: AppTab }>) => { - const styles = useStyles(); - const { setActiveTab } = useActiveTab(); - - return ( - setActiveTab(to)}> - {children} - - ); -}; diff --git a/apps/taxes/src/modules/ui/country-select/countries.ts b/apps/taxes/src/modules/ui/country-select/countries.ts deleted file mode 100644 index cae7a53..0000000 --- a/apps/taxes/src/modules/ui/country-select/countries.ts +++ /dev/null @@ -1,382 +0,0 @@ -type CountryType = { - code: string; - label: string; -}; - -// From https://bitbucket.org/atlassian/atlaskit-mk-2/raw/4ad0e56649c3e6c973e226b7efaeb28cb240ccb0/packages/core/select/src/data/countries.js -export const countries: CountryType[] = [ - { code: "AD", label: "Andorra" }, - { - code: "AE", - label: "United Arab Emirates", - }, - { code: "AF", label: "Afghanistan" }, - { - code: "AG", - label: "Antigua and Barbuda", - }, - { code: "AI", label: "Anguilla" }, - { code: "AL", label: "Albania" }, - { code: "AM", label: "Armenia" }, - { code: "AO", label: "Angola" }, - { code: "AQ", label: "Antarctica" }, - { code: "AR", label: "Argentina" }, - { code: "AS", label: "American Samoa" }, - { code: "AT", label: "Austria" }, - { - code: "AU", - label: "Australia", - }, - { code: "AW", label: "Aruba" }, - { code: "AX", label: "Alland Islands" }, - { code: "AZ", label: "Azerbaijan" }, - { - code: "BA", - label: "Bosnia and Herzegovina", - }, - { code: "BB", label: "Barbados" }, - { code: "BD", label: "Bangladesh" }, - { code: "BE", label: "Belgium" }, - { code: "BF", label: "Burkina Faso" }, - { code: "BG", label: "Bulgaria" }, - { code: "BH", label: "Bahrain" }, - { code: "BI", label: "Burundi" }, - { code: "BJ", label: "Benin" }, - { code: "BL", label: "Saint Barthelemy" }, - { code: "BM", label: "Bermuda" }, - { code: "BN", label: "Brunei Darussalam" }, - { code: "BO", label: "Bolivia" }, - { code: "BR", label: "Brazil" }, - { code: "BS", label: "Bahamas" }, - { code: "BT", label: "Bhutan" }, - { code: "BV", label: "Bouvet Island" }, - { code: "BW", label: "Botswana" }, - { code: "BY", label: "Belarus" }, - { code: "BZ", label: "Belize" }, - { - code: "CA", - label: "Canada", - }, - { - code: "CC", - label: "Cocos (Keeling) Islands", - }, - { - code: "CD", - label: "Congo, Democratic Republic of the", - }, - { - code: "CF", - label: "Central African Republic", - }, - { - code: "CG", - label: "Congo, Republic of the", - }, - { code: "CH", label: "Switzerland" }, - { code: "CI", label: "Cote d'Ivoire" }, - { code: "CK", label: "Cook Islands" }, - { code: "CL", label: "Chile" }, - { code: "CM", label: "Cameroon" }, - { code: "CN", label: "China" }, - { code: "CO", label: "Colombia" }, - { code: "CR", label: "Costa Rica" }, - { code: "CU", label: "Cuba" }, - { code: "CV", label: "Cape Verde" }, - { code: "CW", label: "Curacao" }, - { code: "CX", label: "Christmas Island" }, - { code: "CY", label: "Cyprus" }, - { code: "CZ", label: "Czech Republic" }, - { - code: "DE", - label: "Germany", - }, - { code: "DJ", label: "Djibouti" }, - { code: "DK", label: "Denmark" }, - { code: "DM", label: "Dominica" }, - { - code: "DO", - label: "Dominican Republic", - }, - { code: "DZ", label: "Algeria" }, - { code: "EC", label: "Ecuador" }, - { code: "EE", label: "Estonia" }, - { code: "EG", label: "Egypt" }, - { code: "EH", label: "Western Sahara" }, - { code: "ER", label: "Eritrea" }, - { code: "ES", label: "Spain" }, - { code: "ET", label: "Ethiopia" }, - { code: "FI", label: "Finland" }, - { code: "FJ", label: "Fiji" }, - { - code: "FK", - label: "Falkland Islands (Malvinas)", - }, - { - code: "FM", - label: "Micronesia, Federated States of", - }, - { code: "FO", label: "Faroe Islands" }, - { - code: "FR", - label: "France", - }, - { code: "GA", label: "Gabon" }, - { code: "GB", label: "United Kingdom" }, - { code: "GD", label: "Grenada" }, - { code: "GE", label: "Georgia" }, - { code: "GF", label: "French Guiana" }, - { code: "GG", label: "Guernsey" }, - { code: "GH", label: "Ghana" }, - { code: "GI", label: "Gibraltar" }, - { code: "GL", label: "Greenland" }, - { code: "GM", label: "Gambia" }, - { code: "GN", label: "Guinea" }, - { code: "GP", label: "Guadeloupe" }, - { code: "GQ", label: "Equatorial Guinea" }, - { code: "GR", label: "Greece" }, - { - code: "GS", - label: "South Georgia and the South Sandwich Islands", - }, - { code: "GT", label: "Guatemala" }, - { code: "GU", label: "Guam" }, - { code: "GW", label: "Guinea-Bissau" }, - { code: "GY", label: "Guyana" }, - { code: "HK", label: "Hong Kong" }, - { - code: "HM", - label: "Heard Island and McDonald Islands", - }, - { code: "HN", label: "Honduras" }, - { code: "HR", label: "Croatia" }, - { code: "HT", label: "Haiti" }, - { code: "HU", label: "Hungary" }, - { code: "ID", label: "Indonesia" }, - { code: "IE", label: "Ireland" }, - { code: "IL", label: "Israel" }, - { code: "IM", label: "Isle of Man" }, - { code: "IN", label: "India" }, - { - code: "IO", - label: "British Indian Ocean Territory", - }, - { code: "IQ", label: "Iraq" }, - { - code: "IR", - label: "Iran, Islamic Republic of", - }, - { code: "IS", label: "Iceland" }, - { code: "IT", label: "Italy" }, - { code: "JE", label: "Jersey" }, - { code: "JM", label: "Jamaica" }, - { code: "JO", label: "Jordan" }, - { - code: "JP", - label: "Japan", - }, - { code: "KE", label: "Kenya" }, - { code: "KG", label: "Kyrgyzstan" }, - { code: "KH", label: "Cambodia" }, - { code: "KI", label: "Kiribati" }, - { code: "KM", label: "Comoros" }, - { - code: "KN", - label: "Saint Kitts and Nevis", - }, - { - code: "KP", - label: "Korea, Democratic People's Republic of", - }, - { code: "KR", label: "Korea, Republic of" }, - { code: "KW", label: "Kuwait" }, - { code: "KY", label: "Cayman Islands" }, - { code: "KZ", label: "Kazakhstan" }, - { - code: "LA", - label: "Lao People's Democratic Republic", - }, - { code: "LB", label: "Lebanon" }, - { code: "LC", label: "Saint Lucia" }, - { code: "LI", label: "Liechtenstein" }, - { code: "LK", label: "Sri Lanka" }, - { code: "LR", label: "Liberia" }, - { code: "LS", label: "Lesotho" }, - { code: "LT", label: "Lithuania" }, - { code: "LU", label: "Luxembourg" }, - { code: "LV", label: "Latvia" }, - { code: "LY", label: "Libya" }, - { code: "MA", label: "Morocco" }, - { code: "MC", label: "Monaco" }, - { - code: "MD", - label: "Moldova, Republic of", - }, - { code: "ME", label: "Montenegro" }, - { - code: "MF", - label: "Saint Martin (French part)", - }, - { code: "MG", label: "Madagascar" }, - { code: "MH", label: "Marshall Islands" }, - { - code: "MK", - label: "Macedonia, the Former Yugoslav Republic of", - }, - { code: "ML", label: "Mali" }, - { code: "MM", label: "Myanmar" }, - { code: "MN", label: "Mongolia" }, - { code: "MO", label: "Macao" }, - { - code: "MP", - label: "Northern Mariana Islands", - }, - { code: "MQ", label: "Martinique" }, - { code: "MR", label: "Mauritania" }, - { code: "MS", label: "Montserrat" }, - { code: "MT", label: "Malta" }, - { code: "MU", label: "Mauritius" }, - { code: "MV", label: "Maldives" }, - { code: "MW", label: "Malawi" }, - { code: "MX", label: "Mexico" }, - { code: "MY", label: "Malaysia" }, - { code: "MZ", label: "Mozambique" }, - { code: "NA", label: "Namibia" }, - { code: "NC", label: "New Caledonia" }, - { code: "NE", label: "Niger" }, - { code: "NF", label: "Norfolk Island" }, - { code: "NG", label: "Nigeria" }, - { code: "NI", label: "Nicaragua" }, - { code: "NL", label: "Netherlands" }, - { code: "NO", label: "Norway" }, - { code: "NP", label: "Nepal" }, - { code: "NR", label: "Nauru" }, - { code: "NU", label: "Niue" }, - { code: "NZ", label: "New Zealand" }, - { code: "OM", label: "Oman" }, - { code: "PA", label: "Panama" }, - { code: "PE", label: "Peru" }, - { code: "PF", label: "French Polynesia" }, - { code: "PG", label: "Papua New Guinea" }, - { code: "PH", label: "Philippines" }, - { code: "PK", label: "Pakistan" }, - { code: "PL", label: "Poland" }, - { - code: "PM", - label: "Saint Pierre and Miquelon", - }, - { code: "PN", label: "Pitcairn" }, - { code: "PR", label: "Puerto Rico" }, - { - code: "PS", - label: "Palestine, State of", - }, - { code: "PT", label: "Portugal" }, - { code: "PW", label: "Palau" }, - { code: "PY", label: "Paraguay" }, - { code: "QA", label: "Qatar" }, - { code: "RE", label: "Reunion" }, - { code: "RO", label: "Romania" }, - { code: "RS", label: "Serbia" }, - { code: "RU", label: "Russian Federation" }, - { code: "RW", label: "Rwanda" }, - { code: "SA", label: "Saudi Arabia" }, - { code: "SB", label: "Solomon Islands" }, - { code: "SC", label: "Seychelles" }, - { code: "SD", label: "Sudan" }, - { code: "SE", label: "Sweden" }, - { code: "SG", label: "Singapore" }, - { code: "SH", label: "Saint Helena" }, - { code: "SI", label: "Slovenia" }, - { - code: "SJ", - label: "Svalbard and Jan Mayen", - }, - { code: "SK", label: "Slovakia" }, - { code: "SL", label: "Sierra Leone" }, - { code: "SM", label: "San Marino" }, - { code: "SN", label: "Senegal" }, - { code: "SO", label: "Somalia" }, - { code: "SR", label: "Suriname" }, - { code: "SS", label: "South Sudan" }, - { - code: "ST", - label: "Sao Tome and Principe", - }, - { code: "SV", label: "El Salvador" }, - { - code: "SX", - label: "Sint Maarten (Dutch part)", - }, - { - code: "SY", - label: "Syrian Arab Republic", - }, - { code: "SZ", label: "Swaziland" }, - { - code: "TC", - label: "Turks and Caicos Islands", - }, - { code: "TD", label: "Chad" }, - { - code: "TF", - label: "French Southern Territories", - }, - { code: "TG", label: "Togo" }, - { code: "TH", label: "Thailand" }, - { code: "TJ", label: "Tajikistan" }, - { code: "TK", label: "Tokelau" }, - { code: "TL", label: "Timor-Leste" }, - { code: "TM", label: "Turkmenistan" }, - { code: "TN", label: "Tunisia" }, - { code: "TO", label: "Tonga" }, - { code: "TR", label: "Turkey" }, - { - code: "TT", - label: "Trinidad and Tobago", - }, - { code: "TV", label: "Tuvalu" }, - { - code: "TW", - label: "Taiwan, Province of China", - }, - { - code: "TZ", - label: "United Republic of Tanzania", - }, - { code: "UA", label: "Ukraine" }, - { code: "UG", label: "Uganda" }, - { - code: "US", - label: "United States", - }, - { code: "UY", label: "Uruguay" }, - { code: "UZ", label: "Uzbekistan" }, - { - code: "VA", - label: "Holy See (Vatican City State)", - }, - { - code: "VC", - label: "Saint Vincent and the Grenadines", - }, - { code: "VE", label: "Venezuela" }, - { - code: "VG", - label: "British Virgin Islands", - }, - { - code: "VI", - label: "US Virgin Islands", - }, - { code: "VN", label: "Vietnam" }, - { code: "VU", label: "Vanuatu" }, - { code: "WF", label: "Wallis and Futuna" }, - { code: "WS", label: "Samoa" }, - { code: "XK", label: "Kosovo" }, - { code: "YE", label: "Yemen" }, - { code: "YT", label: "Mayotte" }, - { code: "ZA", label: "South Africa" }, - { code: "ZM", label: "Zambia" }, - { code: "ZW", label: "Zimbabwe" }, -]; diff --git a/apps/taxes/src/modules/ui/country-select/country-select.tsx b/apps/taxes/src/modules/ui/country-select/country-select.tsx deleted file mode 100644 index 10e3243..0000000 --- a/apps/taxes/src/modules/ui/country-select/country-select.tsx +++ /dev/null @@ -1,53 +0,0 @@ -import { TextField } from "@material-ui/core"; -import { Autocomplete } from "@material-ui/lab"; -import { makeStyles } from "@saleor/macaw-ui"; -import { ControllerRenderProps } from "react-hook-form"; -import { ChannelConfig } from "../../channels-configuration/channels-config"; -import { countries } from "./countries"; -import React from "react"; - -type CountrySelectProps = ControllerRenderProps; - -// TODO: replace with macaw-ui component -const useStyles = makeStyles({ - root: { - padding: "7px 9px !important", - }, - clearIndicator: { - marginRight: 2, - }, -}); - -// eslint-disable-next-line react/display-name -export const CountrySelect = React.forwardRef((p: CountrySelectProps, ref) => { - const styles = useStyles(); - const { onChange, value } = p; - - return ( - onChange(data ? data.code : null)} - value={ - countries.find((country) => { - return value === country.code; - }) ?? null - } - getOptionLabel={(option) => option.label} - renderInput={(params) => ( - - )} - /> - ); -}); diff --git a/apps/taxes/src/modules/ui/instructions.tsx b/apps/taxes/src/modules/ui/instructions.tsx deleted file mode 100644 index 112f7ed..0000000 --- a/apps/taxes/src/modules/ui/instructions.tsx +++ /dev/null @@ -1,52 +0,0 @@ -import { Typography } from "@material-ui/core"; -import { makeStyles } from "@saleor/macaw-ui"; -import { AppLink } from "./app-link"; -import { AppPaper } from "./app-paper"; -import { AppTabNavButton } from "./app-tab-nav-button"; - -const useStyles = makeStyles((theme) => ({ - root: { - display: "flex", - flexDirection: "column", - gap: "16px", - }, - list: { - paddingLeft: "16px", - margin: 0, - color: "inherit", - }, -})); - -export const Instructions = () => { - const styles = useStyles(); - - return ( - -
- Use external service for tax calculation - -
    -
  1. - Go to Tax Configuration. Make sure you chose{" "} - Use tax app as the method of tax calculation for your channel. -
    2. -
  2. - In the Tax App, go to the Providers{" "} - tab to add an instance of your provider. Click Add provider, and select the tax - provider you want to use. Fill in the configuration form and hit Save. -
    3. -
  3. - Go to the Channels tab. Select a - channel. In the Channel tax provider field, select the created instance. Fill - in the rest of the form, and hit Save. -
    4. -
  4. - Saleor will now use the channel's configured tax provider for order & checkout tax - calculations. -
    5. -
- -
- - ); -}; diff --git a/apps/taxes/src/pages/_app.tsx b/apps/taxes/src/pages/_app.tsx index 00dd7bf..0923b2a 100644 --- a/apps/taxes/src/pages/_app.tsx +++ b/apps/taxes/src/pages/_app.tsx @@ -1,27 +1,16 @@ import "../styles/globals.css"; - -import { Theme } from "@material-ui/core/styles"; +import "@saleor/macaw-ui/next/style"; import { AppBridge, AppBridgeProvider } from "@saleor/app-sdk/app-bridge"; import { RoutePropagator } from "@saleor/app-sdk/app-bridge/next"; -import { - dark, - light, - SaleorThemeColors, - ThemeProvider as MacawUIThemeProvider, -} from "@saleor/macaw-ui"; -import React, { PropsWithChildren, useEffect } from "react"; -import { AppProps } from "next/app"; +import { ThemeProvider } from "@saleor/macaw-ui/next"; + +import { AppProps } from "next/app"; +import { useEffect } from "react"; -import { GraphQLProvider } from "../providers/GraphQLProvider"; import { ThemeSynchronizer } from "../lib/theme-synchronizer"; import { trpcClient } from "../modules/trpc/trpc-client"; -import { NoSSRWrapper } from "../lib/no-ssr-wrapper"; - -const themeOverrides: Partial = { - /** - * You can override MacawUI theme here - */ -}; +import { GraphQLProvider } from "../providers/GraphQLProvider"; +import { NoSSRWrapper } from "@saleor/apps-shared"; /** * Ensure instance is a singleton. @@ -29,36 +18,6 @@ const themeOverrides: Partial = { */ export const appBridgeInstance = typeof window !== "undefined" ? new AppBridge() : undefined; -type PalettesOverride = Record<"light" | "dark", SaleorThemeColors>; - -/** - * Temporary override of colors, to match new dashboard palette. - * Long term this will be replaced with Macaw UI 2.x with up to date design tokens - */ -const palettes: PalettesOverride = { - light: { - ...light, - background: { - default: "#fff", - paper: "#fff", - }, - }, - dark: { - ...dark, - background: { - default: "hsla(211, 42%, 14%, 1)", - paper: "hsla(211, 42%, 14%, 1)", - }, - }, -}; - -/** - * That's a hack required by Macaw-UI incompatibility with React@18 - */ -const ThemeProvider = MacawUIThemeProvider as React.FC< - PropsWithChildren<{ overrides?: Partial; ssr: boolean; palettes: PalettesOverride }> ->; - function NextApp({ Component, pageProps }: AppProps) { /** * Configure JSS (used by MacawUI) for SSR. If Macaw is not used, can be removed. @@ -75,7 +34,7 @@ function NextApp({ Component, pageProps }: AppProps) { - + diff --git a/apps/taxes/src/pages/configuration.tsx b/apps/taxes/src/pages/configuration.tsx index 69e0022..2fe636e 100644 --- a/apps/taxes/src/pages/configuration.tsx +++ b/apps/taxes/src/pages/configuration.tsx @@ -1,71 +1,5 @@ -import { makeStyles, PageTab, PageTabs } from "@saleor/macaw-ui"; -import { ChannelTaxProvider } from "../modules/channels/ui/channel-tax-provider"; -import { Channels } from "../modules/channels/ui/channels"; -import { Configuration } from "../modules/providers-configuration/ui/configuration"; -import { ProvidersInstances } from "../modules/providers-configuration/ui/providers-instances"; -import { useActiveTab } from "../modules/taxes/tax-context"; -import { AppContainer } from "../modules/ui/app-container"; -import { AppLayout } from "../modules/ui/app-layout"; -import { Instructions } from "../modules/ui/instructions"; - -const useStyles = makeStyles({ - tabs: { - margin: "16px 0", - }, -}); - -const ChannelTab = () => { - return ( - <> - - - - ); -}; - -const ProvidersTab = () => { - return ( - <> - - - - ); -}; - -const tabs = { - channels: { - component: , - label: "Channels", - }, - providers: { - component: , - label: "Providers", - }, -}; - -export type AppTab = keyof typeof tabs; - const ConfigurationPage = () => { - const styles = useStyles(); - const { activeTab, setActiveTab } = useActiveTab(); - - return ( -
- -
- setActiveTab(value as AppTab)}> - {Object.entries(tabs).map(([key, config]) => ( - - ))} - -
- - - {tabs[activeTab].component} - - -
- ); + return
Configuration
; }; export default ConfigurationPage; diff --git a/apps/taxes/src/pages/index.tsx b/apps/taxes/src/pages/index.tsx index 30d1d4c..ee9aae0 100644 --- a/apps/taxes/src/pages/index.tsx +++ b/apps/taxes/src/pages/index.tsx @@ -3,7 +3,6 @@ import { useAppBridge } from "@saleor/app-sdk/app-bridge"; import { useEffect } from "react"; import { useIsMounted } from "usehooks-ts"; import { useRouter } from "next/router"; -import { LinearProgress } from "@material-ui/core"; import { isInIframe } from "@saleor/apps-shared"; const IndexPage: NextPage = () => { @@ -18,7 +17,7 @@ const IndexPage: NextPage = () => { }, [isMounted, appBridgeState?.ready, replace]); if (isInIframe()) { - return ; + return Loading...; } return ( diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index e2edfbc..bd535a9 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1508,27 +1508,15 @@ importers: '@hookform/resolvers': specifier: ^2.9.10 version: 2.9.11(react-hook-form@7.43.1) - '@material-ui/core': - specifier: ^4.12.4 - version: 4.12.4(@types/react@18.0.27)(react-dom@18.2.0)(react@18.2.0) - '@material-ui/icons': - specifier: ^4.11.3 - version: 4.11.3(@material-ui/core@4.12.4)(@types/react@18.0.27)(react-dom@18.2.0)(react@18.2.0) - '@material-ui/lab': - specifier: 4.0.0-alpha.61 - version: 4.0.0-alpha.61(@material-ui/core@4.12.4)(@types/react@18.0.27)(react-dom@18.2.0)(react@18.2.0) '@saleor/app-sdk': specifier: 0.39.1 version: 0.39.1(next@13.3.0)(react-dom@18.2.0)(react@18.2.0) '@saleor/apps-shared': specifier: workspace:* version: link:../../packages/shared - '@saleor/apps-ui': - specifier: workspace:* - version: link:../../packages/ui '@saleor/macaw-ui': - specifier: ^0.7.2 - version: 0.7.2(@material-ui/core@4.12.4)(@material-ui/icons@4.11.3)(@material-ui/lab@4.0.0-alpha.61)(@types/react@18.0.27)(react-dom@18.2.0)(react-helmet@6.1.0)(react@18.2.0) + specifier: ^0.8.0-pre.72 + version: 0.8.0-pre.84(@types/react@18.0.38)(react-dom@18.2.0)(react@18.2.0) '@sentry/nextjs': specifier: ^7.45.0 version: 7.45.0(next@13.3.0)(react@18.2.0) @@ -1640,19 +1628,19 @@ importers: version: 13.4.0(react-dom@18.2.0)(react@18.2.0) '@testing-library/react-hooks': specifier: ^8.0.1 - version: 8.0.1(@types/react@18.0.27)(react-dom@18.2.0)(react@18.2.0) + version: 8.0.1(@types/react@18.0.38)(react-dom@18.2.0)(react@18.2.0) '@types/node': specifier: ^18.8.1 version: 18.13.0 '@types/react': - specifier: ^18.0.21 - version: 18.0.27 + specifier: ~18.0.38 + version: 18.0.38 '@types/react-dom': specifier: ^18.0.6 version: 18.0.10 '@vitejs/plugin-react': - specifier: ^3.1.0 - version: 3.1.0(vite@4.3.6) + specifier: ^4.0.0 + version: 4.0.0(vite@4.3.6) eslint: specifier: 8.25.0 version: 8.25.0 @@ -9677,6 +9665,29 @@ packages: react-error-boundary: 3.1.4(react@18.2.0) dev: true + /@testing-library/react-hooks@8.0.1(@types/react@18.0.38)(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-Aqhl2IVmLt8IovEVarNDFuJDVWVvhnr9/GCU6UUnrYXwgDFF9h2L2o2P9KBni1AST5sT6riAyoukFLyjQUgD/g==} + engines: {node: '>=12'} + peerDependencies: + '@types/react': ^16.9.0 || ^17.0.0 + react: ^16.9.0 || ^17.0.0 + react-dom: ^16.9.0 || ^17.0.0 + react-test-renderer: ^16.9.0 || ^17.0.0 + peerDependenciesMeta: + '@types/react': + optional: true + react-dom: + optional: true + react-test-renderer: + optional: true + dependencies: + '@babel/runtime': 7.20.13 + '@types/react': 18.0.38 + react: 18.2.0 + react-dom: 18.2.0(react@18.2.0) + react-error-boundary: 3.1.4(react@18.2.0) + dev: true + /@testing-library/react@13.4.0(react-dom@18.2.0)(react@18.2.0): resolution: {integrity: sha512-sXOGON+WNTh3MLE9rve97ftaZukN3oNf2KjDy7YTx6hcTO2uuLHuCGynMDhFwGw/jYf4OJ2Qk0i4i79qMNNkyw==} engines: {node: '>=12'}