refactor: ♻️ replace material-ui with macaw-ui; remove all views
This commit is contained in:
Adrian Pilarczyk
parent
ca4306162f
commit
0b54a01cbf
30 changed files with 55 additions and 2153 deletions
|
|
@ -17,13 +17,9 @@
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@hookform/resolvers": "^2.9.10",
|
"@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/app-sdk": "0.39.1",
|
||||||
"@saleor/apps-shared": "workspace:*",
|
"@saleor/apps-shared": "workspace:*",
|
||||||
"@saleor/apps-ui": "workspace:*",
|
"@saleor/macaw-ui": "^0.8.0-pre.72",
|
||||||
"@saleor/macaw-ui": "^0.7.2",
|
|
||||||
"@sentry/nextjs": "^7.45.0",
|
"@sentry/nextjs": "^7.45.0",
|
||||||
"@tanstack/react-query": "^4.19.1",
|
"@tanstack/react-query": "^4.19.1",
|
||||||
"@trpc/client": "^10.9.0",
|
"@trpc/client": "^10.9.0",
|
||||||
|
|
@ -64,9 +60,9 @@
|
||||||
"@testing-library/react": "^13.4.0",
|
"@testing-library/react": "^13.4.0",
|
||||||
"@testing-library/react-hooks": "^8.0.1",
|
"@testing-library/react-hooks": "^8.0.1",
|
||||||
"@types/node": "^18.8.1",
|
"@types/node": "^18.8.1",
|
||||||
"@types/react": "^18.0.21",
|
"@types/react": "~18.0.38",
|
||||||
"@types/react-dom": "^18.0.6",
|
"@types/react-dom": "^18.0.6",
|
||||||
"@vitejs/plugin-react": "^3.1.0",
|
"@vitejs/plugin-react": "^4.0.0",
|
||||||
"eslint": "8.25.0",
|
"eslint": "8.25.0",
|
||||||
"eslint-config-next": "12.3.1",
|
"eslint-config-next": "12.3.1",
|
||||||
"eslint-config-prettier": "^8.5.0",
|
"eslint-config-prettier": "^8.5.0",
|
||||||
|
|
|
||||||
|
|
@ -1,8 +0,0 @@
|
||||||
import React, { PropsWithChildren } from "react";
|
|
||||||
import dynamic from "next/dynamic";
|
|
||||||
|
|
||||||
const Wrapper = (props: PropsWithChildren<{}>) => <React.Fragment>{props.children}</React.Fragment>;
|
|
||||||
|
|
||||||
export const NoSSRWrapper = dynamic(() => Promise.resolve(Wrapper), {
|
|
||||||
ssr: false,
|
|
||||||
});
|
|
||||||
|
|
@ -1,28 +1,25 @@
|
||||||
import { useAppBridge } from "@saleor/app-sdk/app-bridge";
|
import { useAppBridge } from "@saleor/app-sdk/app-bridge";
|
||||||
import { useTheme } from "@saleor/macaw-ui";
|
import { useTheme } from "@saleor/macaw-ui/next";
|
||||||
import { memo, useEffect } from "react";
|
import { useEffect } from "react";
|
||||||
|
|
||||||
/**
|
// todo move to shared
|
||||||
* Macaw-ui stores its theme mode in memory and local storage. To synchronize App with Dashboard,
|
export function ThemeSynchronizer() {
|
||||||
* Macaw must be informed about this change from AppBridge.
|
|
||||||
*
|
|
||||||
* If you are not using Macaw, you can remove this.
|
|
||||||
*/
|
|
||||||
function _ThemeSynchronizer() {
|
|
||||||
const { appBridgeState } = useAppBridge();
|
const { appBridgeState } = useAppBridge();
|
||||||
const { setTheme, themeType } = useTheme();
|
const { setTheme } = useTheme();
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (!setTheme || !appBridgeState?.theme) {
|
if (!setTheme || !appBridgeState?.theme) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (themeType !== appBridgeState?.theme) {
|
if (appBridgeState.theme === "light") {
|
||||||
setTheme(appBridgeState.theme);
|
setTheme("defaultLight");
|
||||||
}
|
}
|
||||||
}, [appBridgeState?.theme, setTheme, themeType]);
|
|
||||||
|
if (appBridgeState.theme === "dark") {
|
||||||
|
setTheme("defaultDark");
|
||||||
|
}
|
||||||
|
}, [appBridgeState?.theme, setTheme]);
|
||||||
|
|
||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
|
|
||||||
export const ThemeSynchronizer = memo(_ThemeSynchronizer);
|
|
||||||
|
|
|
||||||
|
|
@ -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<typeof schema>;
|
|
||||||
|
|
||||||
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<FormValues>({
|
|
||||||
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 (
|
|
||||||
<>
|
|
||||||
<form autoComplete="off" onSubmit={handleSubmit(onSubmit)}>
|
|
||||||
<Grid container spacing={2}>
|
|
||||||
<Grid item xs={12}>
|
|
||||||
<Controller
|
|
||||||
name="name"
|
|
||||||
control={control}
|
|
||||||
defaultValue={defaultValues.name}
|
|
||||||
render={({ field }) => (
|
|
||||||
<TextField
|
|
||||||
required
|
|
||||||
type="text"
|
|
||||||
{...field}
|
|
||||||
label="Instance name"
|
|
||||||
{...textFieldProps}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
{formState.errors.name && (
|
|
||||||
<FormHelperText error>{formState.errors.name.message}</FormHelperText>
|
|
||||||
)}
|
|
||||||
</Grid>
|
|
||||||
<Grid item xs={12}>
|
|
||||||
<InputLabel>
|
|
||||||
Sandbox
|
|
||||||
<Controller
|
|
||||||
name={"isSandbox"}
|
|
||||||
control={control}
|
|
||||||
defaultValue={defaultValues.isSandbox}
|
|
||||||
render={({ field }) => (
|
|
||||||
<Switch
|
|
||||||
{...field}
|
|
||||||
checked={field.value}
|
|
||||||
onChange={(e) => field.onChange(e.target.checked)}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
</InputLabel>
|
|
||||||
<FormHelperText>
|
|
||||||
Toggling between{" "}
|
|
||||||
<AppLink
|
|
||||||
href={
|
|
||||||
"https://developer.avalara.com/erp-integration-guide/sales-tax-badge/authentication-in-avatax/sandbox-vs-production/"
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<q>Production</q> and <q>Sandbox</q>
|
|
||||||
</AppLink>{" "}
|
|
||||||
environments.{" "}
|
|
||||||
</FormHelperText>
|
|
||||||
</Grid>
|
|
||||||
<Grid item xs={12}>
|
|
||||||
<InputLabel>
|
|
||||||
Autocommit
|
|
||||||
<Controller
|
|
||||||
name={"isAutocommit"}
|
|
||||||
control={control}
|
|
||||||
defaultValue={defaultValues.isAutocommit}
|
|
||||||
render={({ field }) => (
|
|
||||||
<Switch
|
|
||||||
{...field}
|
|
||||||
checked={field.value}
|
|
||||||
onChange={(e) => field.onChange(e.target.checked)}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
</InputLabel>
|
|
||||||
<FormHelperText>
|
|
||||||
If enabled, the order will be automatically{" "}
|
|
||||||
<AppLink
|
|
||||||
href={
|
|
||||||
"https://developer.avalara.com/communications/dev-guide_rest_v2/commit-uncommit/"
|
|
||||||
}
|
|
||||||
>
|
|
||||||
committed to Avalara.
|
|
||||||
</AppLink>{" "}
|
|
||||||
</FormHelperText>
|
|
||||||
</Grid>
|
|
||||||
<Grid item xs={12}>
|
|
||||||
<Controller
|
|
||||||
name="username"
|
|
||||||
control={control}
|
|
||||||
defaultValue=""
|
|
||||||
render={({ field }) => (
|
|
||||||
<TextField required type="text" {...field} label="Username" {...textFieldProps} />
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
{formState.errors.username && (
|
|
||||||
<FormHelperText error>{formState.errors.username.message}</FormHelperText>
|
|
||||||
)}
|
|
||||||
</Grid>
|
|
||||||
<Grid item xs={12}>
|
|
||||||
<Controller
|
|
||||||
name="password"
|
|
||||||
control={control}
|
|
||||||
defaultValue={defaultValues.password}
|
|
||||||
render={({ field }) => (
|
|
||||||
<TextField required label="Password" {...field} {...textFieldProps} />
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
|
|
||||||
{formState.errors.password && (
|
|
||||||
<FormHelperText error>{formState.errors.password.message}</FormHelperText>
|
|
||||||
)}
|
|
||||||
</Grid>
|
|
||||||
<Grid item xs={12}>
|
|
||||||
<Controller
|
|
||||||
name="companyCode"
|
|
||||||
control={control}
|
|
||||||
defaultValue={defaultValues.companyCode}
|
|
||||||
render={({ field }) => (
|
|
||||||
<TextField type="text" {...field} label="Company code" {...textFieldProps} />
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
<FormHelperText>
|
|
||||||
{"When not provided, the default company will be used. "}
|
|
||||||
<AppLink href="https://developer.avalara.com/erp-integration-guide/sales-tax-badge/transactions/simple-transactions/company-codes/">
|
|
||||||
Read more
|
|
||||||
</AppLink>{" "}
|
|
||||||
about company codes.
|
|
||||||
</FormHelperText>
|
|
||||||
{formState.errors.companyCode && (
|
|
||||||
<FormHelperText error>{formState.errors.companyCode.message}</FormHelperText>
|
|
||||||
)}
|
|
||||||
</Grid>
|
|
||||||
<Grid item xs={12}>
|
|
||||||
<Controller
|
|
||||||
name="shippingTaxCode"
|
|
||||||
control={control}
|
|
||||||
defaultValue={defaultValues.shippingTaxCode}
|
|
||||||
render={({ field }) => (
|
|
||||||
<TextField type="text" {...field} label="Shipping tax code" {...textFieldProps} />
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
<FormHelperText>
|
|
||||||
{"Tax code that for the shipping line sent to Avatax. "}
|
|
||||||
<AppLink href="https://taxcode.avatax.avalara.com">
|
|
||||||
Must match Avatax tax codes format.
|
|
||||||
</AppLink>
|
|
||||||
</FormHelperText>
|
|
||||||
{formState.errors.shippingTaxCode && (
|
|
||||||
<FormHelperText error>{formState.errors.shippingTaxCode.message}</FormHelperText>
|
|
||||||
)}
|
|
||||||
</Grid>
|
|
||||||
</Grid>
|
|
||||||
<br />
|
|
||||||
<div className={styles.reverseRow}>
|
|
||||||
<Button startIcon={<Save />} type="submit" variant="primary">
|
|
||||||
{isLoading ? "Saving..." : "Save"}
|
|
||||||
</Button>
|
|
||||||
{instanceId && (
|
|
||||||
<Button onClick={deleteProvider} startIcon={<Delete />}>
|
|
||||||
Delete
|
|
||||||
</Button>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
{/* <DeleteProviderDialog
|
|
||||||
isOpen={isWarningDialogOpen}
|
|
||||||
onClose={closeWarningDialog}
|
|
||||||
onCancel={closeWarningDialog}
|
|
||||||
onConfirm={deleteProvider}
|
|
||||||
/> */}
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
@ -1,10 +0,0 @@
|
||||||
import { AvataxConfigurationForm } from "./avatax-configuration-form";
|
|
||||||
|
|
||||||
export const AvataxConfiguration = () => {
|
|
||||||
return (
|
|
||||||
<section>
|
|
||||||
<h2>Avatax configuration</h2>
|
|
||||||
<AvataxConfigurationForm />
|
|
||||||
</section>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
@ -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<ChannelTaxProviderFormValues>({
|
|
||||||
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 (
|
|
||||||
<div>
|
|
||||||
<form onSubmit={handleSubmit(onSubmit)}>
|
|
||||||
<Grid container spacing={4}>
|
|
||||||
<Grid item xs={12}>
|
|
||||||
<InputLabel>
|
|
||||||
Channel tax provider
|
|
||||||
<Controller
|
|
||||||
name={"providerInstanceId"}
|
|
||||||
control={control}
|
|
||||||
defaultValue={""}
|
|
||||||
render={({ field }) => (
|
|
||||||
<Select fullWidth {...field}>
|
|
||||||
{providerInstances.map(({ config, id, provider }) => (
|
|
||||||
<MenuItem value={id} key={id}>
|
|
||||||
<div className={styles.menuItem}>
|
|
||||||
<Typography variant="body1">{config.name}</Typography>
|
|
||||||
<ProviderIcon size={"medium"} provider={provider} />
|
|
||||||
</div>
|
|
||||||
</MenuItem>
|
|
||||||
))}
|
|
||||||
</Select>
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
</InputLabel>
|
|
||||||
</Grid>
|
|
||||||
<Grid item xs={12}>
|
|
||||||
<FormGroup>
|
|
||||||
<Typography variant="h4">Ship from address</Typography>
|
|
||||||
<FormHelperText className={styles.helperText}>
|
|
||||||
The taxes will be calculated based on the address.
|
|
||||||
</FormHelperText>
|
|
||||||
|
|
||||||
<Grid container spacing={2}>
|
|
||||||
<Grid item xs={8}>
|
|
||||||
<Controller
|
|
||||||
name="address.country"
|
|
||||||
control={control}
|
|
||||||
render={({ field }) => <CountrySelect {...field} />}
|
|
||||||
/>
|
|
||||||
</Grid>
|
|
||||||
<Grid item xs={4}>
|
|
||||||
<Controller
|
|
||||||
name="address.zip"
|
|
||||||
control={control}
|
|
||||||
defaultValue=""
|
|
||||||
render={({ field }) => <TextField {...field} label="Zip" {...textFieldProps} />}
|
|
||||||
/>
|
|
||||||
</Grid>
|
|
||||||
<Grid item xs={6}>
|
|
||||||
<Controller
|
|
||||||
name="address.state"
|
|
||||||
control={control}
|
|
||||||
defaultValue=""
|
|
||||||
render={({ field }) => (
|
|
||||||
<TextField {...field} label="State" {...textFieldProps} />
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
</Grid>
|
|
||||||
<Grid item xs={6}>
|
|
||||||
<Controller
|
|
||||||
name="address.city"
|
|
||||||
control={control}
|
|
||||||
defaultValue=""
|
|
||||||
render={({ field }) => (
|
|
||||||
<TextField {...field} label="City" {...textFieldProps} />
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
</Grid>
|
|
||||||
<Grid item xs={12}>
|
|
||||||
<Controller
|
|
||||||
name="address.street"
|
|
||||||
control={control}
|
|
||||||
defaultValue=""
|
|
||||||
render={({ field }) => (
|
|
||||||
<TextField {...field} label="Street" {...textFieldProps} />
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
</Grid>
|
|
||||||
</Grid>
|
|
||||||
</FormGroup>
|
|
||||||
</Grid>
|
|
||||||
</Grid>
|
|
||||||
<br />
|
|
||||||
<div className={styles.reverseRow}>
|
|
||||||
<Button variant="primary" startIcon={<Save />} type="submit">
|
|
||||||
{isLoading ? "Saving..." : "Save"}
|
|
||||||
</Button>{" "}
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
@ -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 (
|
|
||||||
<AppPaper>
|
|
||||||
<div>
|
|
||||||
<span className={styles.centerWithGap}>
|
|
||||||
<Typography component={"h3"} variant="h3">
|
|
||||||
{title}
|
|
||||||
</Typography>
|
|
||||||
<Warning />
|
|
||||||
</span>
|
|
||||||
<br />
|
|
||||||
{children}
|
|
||||||
</div>
|
|
||||||
</AppPaper>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
const NoChannelPlaceholder = () => {
|
|
||||||
const { redirect } = useAppRedirect();
|
|
||||||
|
|
||||||
return (
|
|
||||||
<NoDataPlaceholder title={"Channels not found"}>
|
|
||||||
<Typography variant="body1">
|
|
||||||
For a channel to appear on this list, you need to configure it on the{" "}
|
|
||||||
<AppLink href="/taxes/channels">Tax Configuration</AppLink> page.
|
|
||||||
</Typography>
|
|
||||||
<br />
|
|
||||||
<Typography variant="body1">
|
|
||||||
By default, each channel will use <q>flat rates</q> 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 <b>Use tax app</b>.
|
|
||||||
</Typography>
|
|
||||||
<br />
|
|
||||||
<Button onClick={() => redirect("/taxes/channels")}>Go to Tax Configuration</Button>
|
|
||||||
</NoDataPlaceholder>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
const NoProviderPlaceholder = () => {
|
|
||||||
const styles = useStyles();
|
|
||||||
const { setActiveTab } = useActiveTab();
|
|
||||||
const { setInstanceId } = useInstanceId();
|
|
||||||
|
|
||||||
return (
|
|
||||||
<NoDataPlaceholder title={"Tax providers not found"}>
|
|
||||||
<Typography variant="body1">
|
|
||||||
You need to set up at least one tax provider before you can configure a channel.
|
|
||||||
</Typography>
|
|
||||||
<br />
|
|
||||||
<Typography>
|
|
||||||
We currently support the following tax providers:
|
|
||||||
<ul>
|
|
||||||
{Object.entries(providerConfig).map(([provider, { label }]) => (
|
|
||||||
<Typography variant="body1" component={"li"} key={label}>
|
|
||||||
<span className={styles.centerWithGap}>
|
|
||||||
{label}
|
|
||||||
<ProviderIcon size={"medium"} provider={provider as TaxProviderName} />
|
|
||||||
</span>
|
|
||||||
</Typography>
|
|
||||||
))}
|
|
||||||
</ul>
|
|
||||||
</Typography>
|
|
||||||
<Button
|
|
||||||
onClick={() => {
|
|
||||||
setActiveTab("providers");
|
|
||||||
setInstanceId(null);
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Configure a tax provider
|
|
||||||
</Button>
|
|
||||||
</NoDataPlaceholder>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
const ChannelTaxProviderSkeleton = () => {
|
|
||||||
return (
|
|
||||||
<AppPaper>
|
|
||||||
<Grid container spacing={2}>
|
|
||||||
<Grid item xs={12}>
|
|
||||||
<Skeleton variant="rect" width={"35%"} height={10} />
|
|
||||||
</Grid>
|
|
||||||
<Grid item xs={12}>
|
|
||||||
<Skeleton variant="rect" width={"100%"} height={30} />
|
|
||||||
</Grid>
|
|
||||||
<br />
|
|
||||||
<Grid item xs={12}>
|
|
||||||
<Skeleton variant="rect" width={"35%"} height={10} />
|
|
||||||
</Grid>
|
|
||||||
<Grid item xs={8}>
|
|
||||||
<Skeleton variant="rect" width={"100%"} height={50} />
|
|
||||||
</Grid>
|
|
||||||
<Grid item xs={4}>
|
|
||||||
<Skeleton variant="rect" width={"100%"} height={50} />
|
|
||||||
</Grid>
|
|
||||||
<Grid item xs={6}>
|
|
||||||
<Skeleton variant="rect" width={"100%"} height={50} />
|
|
||||||
</Grid>
|
|
||||||
<Grid item xs={6}>
|
|
||||||
<Skeleton variant="rect" width={"100%"} height={50} />
|
|
||||||
</Grid>
|
|
||||||
<Grid item xs={12}>
|
|
||||||
<Skeleton variant="rect" width={"100%"} height={50} />
|
|
||||||
</Grid>
|
|
||||||
</Grid>
|
|
||||||
</AppPaper>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
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 <ChannelTaxProviderSkeleton />;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!channelSlug) {
|
|
||||||
return <NoChannelPlaceholder />;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!providers?.data?.length) {
|
|
||||||
return <NoProviderPlaceholder />;
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<AppPaper>
|
|
||||||
<ChannelTaxProviderForm />
|
|
||||||
</AppPaper>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
@ -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 (
|
|
||||||
<OffsettedList gridTemplate={["1fr", "1fr"]}>
|
|
||||||
<OffsettedListHeader>
|
|
||||||
<OffsettedListItem className={styles.headerItem}>
|
|
||||||
<OffsettedListItemCell>Channel name</OffsettedListItemCell>
|
|
||||||
</OffsettedListItem>
|
|
||||||
</OffsettedListHeader>
|
|
||||||
<OffsettedListBody>
|
|
||||||
{channels.map((c) => {
|
|
||||||
return (
|
|
||||||
<OffsettedListItem
|
|
||||||
className={clsx(styles.listItem, {
|
|
||||||
[styles.listItemActive]: c.slug === activeChannelSlug,
|
|
||||||
})}
|
|
||||||
key={c.slug}
|
|
||||||
onClick={() => {
|
|
||||||
onChannelClick(c.slug);
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<OffsettedListItemCell>{c.name}</OffsettedListItemCell>
|
|
||||||
</OffsettedListItem>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</OffsettedListBody>
|
|
||||||
</OffsettedList>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
@ -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 (
|
|
||||||
<AppPaper>
|
|
||||||
<Grid container spacing={2}>
|
|
||||||
<Grid item xs={12}>
|
|
||||||
<Skeleton variant="rect" width={"45%"} height={10} />
|
|
||||||
</Grid>
|
|
||||||
<Grid item xs={12}>
|
|
||||||
<Skeleton variant="rect" width={"100%"} height={30} />
|
|
||||||
</Grid>
|
|
||||||
</Grid>
|
|
||||||
</AppPaper>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
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 <ChannelsSkeleton />;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (channels.error) {
|
|
||||||
return <div>Error. No channel available</div>;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (channels.data?.length === 0) {
|
|
||||||
// empty space for grid
|
|
||||||
return <div></div>;
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<AppPaper>
|
|
||||||
<ChannelsList
|
|
||||||
channels={channels.data ?? []}
|
|
||||||
activeChannelSlug={channelSlug}
|
|
||||||
onChannelClick={(nextSlug) => setChannelSlug(nextSlug)}
|
|
||||||
/>
|
|
||||||
</AppPaper>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
@ -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<TaxProviderName, React.ComponentType> = {
|
|
||||||
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<TaxProviderName>("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 (
|
|
||||||
<AppPaper>
|
|
||||||
{!instanceId && (
|
|
||||||
<Grid container spacing={2}>
|
|
||||||
<Grid item xs={12}>
|
|
||||||
<div className={styles.gridItem}>
|
|
||||||
<Typography component="h3" variant="h3">
|
|
||||||
Please select one of the providers:
|
|
||||||
</Typography>
|
|
||||||
</div>
|
|
||||||
</Grid>
|
|
||||||
<Grid item xs={12}>
|
|
||||||
<RadioGroup
|
|
||||||
value={provider ?? ""}
|
|
||||||
onChange={(e) => setProvider(e.target.value as TaxProviderName)}
|
|
||||||
>
|
|
||||||
<Grid container justifyContent="center">
|
|
||||||
{Object.entries(providerConfig).map(([name, config]) => (
|
|
||||||
<Grid className={styles.gridItem} item xs={6} key={name}>
|
|
||||||
<FormControlLabel
|
|
||||||
className={
|
|
||||||
provider === name
|
|
||||||
? `${styles.radioLabelActive} ${styles.radioLabel}`
|
|
||||||
: styles.radioLabel
|
|
||||||
}
|
|
||||||
control={<Radio style={{ display: "none" }} name="provider" value={name} />}
|
|
||||||
label={
|
|
||||||
<div className={styles.iconWithLabel}>
|
|
||||||
<ProviderIcon size={"xlarge"} provider={name as TaxProviderName} />
|
|
||||||
<Typography variant="body1">{config.label}</Typography>
|
|
||||||
</div>
|
|
||||||
}
|
|
||||||
labelPlacement="top"
|
|
||||||
aria-label={config.label}
|
|
||||||
/>
|
|
||||||
</Grid>
|
|
||||||
))}
|
|
||||||
</Grid>
|
|
||||||
</RadioGroup>
|
|
||||||
</Grid>
|
|
||||||
</Grid>
|
|
||||||
)}
|
|
||||||
<SelectedConfigurationForm />
|
|
||||||
</AppPaper>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
@ -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 (
|
|
||||||
<Dialog open={p.isOpen} onClose={p.onClose}>
|
|
||||||
<DialogTitle>Delete provider instance?</DialogTitle>
|
|
||||||
<DialogContent>
|
|
||||||
<DialogContentText>
|
|
||||||
Are you sure you want to delete this provider instance? This action cannot be undone.
|
|
||||||
</DialogContentText>
|
|
||||||
</DialogContent>
|
|
||||||
<DialogActions>
|
|
||||||
<div className={styles.actions}>
|
|
||||||
<Button onClick={p.onCancel}>Cancel</Button>
|
|
||||||
<Button variant="primary" onClick={p.onConfirm}>
|
|
||||||
Confirm
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</DialogActions>
|
|
||||||
</Dialog>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
@ -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<Size, number> = {
|
|
||||||
small: 16,
|
|
||||||
medium: 24,
|
|
||||||
large: 32,
|
|
||||||
xlarge: 48,
|
|
||||||
};
|
|
||||||
|
|
||||||
type ProviderIconProps = {
|
|
||||||
provider: TaxProviderName;
|
|
||||||
size?: Size;
|
|
||||||
} & Omit<ImageProps, "src" | "height" | "width" | "alt">;
|
|
||||||
|
|
||||||
export const ProviderIcon = ({ provider, size = "medium", ...props }: ProviderIconProps) => {
|
|
||||||
const { icon, label } = providerConfig[provider];
|
|
||||||
const matchedSize = sizes[size];
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Image src={icon} alt={`${label} icon`} width={matchedSize} height={matchedSize} {...props} />
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
@ -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 (
|
|
||||||
<AppPaper>
|
|
||||||
<OffsettedList gridTemplate={["1fr", "1fr"]}>
|
|
||||||
<OffsettedListHeader>
|
|
||||||
<OffsettedListItem className={styles.headerItem}>
|
|
||||||
<OffsettedListItemCell>Tax provider list</OffsettedListItemCell>
|
|
||||||
</OffsettedListItem>
|
|
||||||
</OffsettedListHeader>
|
|
||||||
<OffsettedListBody>
|
|
||||||
{instances.map((instance) => (
|
|
||||||
<OffsettedListItem
|
|
||||||
onClick={() => setInstanceId(instance.id)}
|
|
||||||
className={clsx(styles.listItem, instance.id === instanceId && styles.listItemActive)}
|
|
||||||
key={instance.id}
|
|
||||||
>
|
|
||||||
<OffsettedListItemCell className={styles.cell}>
|
|
||||||
{instance.config.name}
|
|
||||||
<ProviderIcon size="medium" provider={instance.provider} />
|
|
||||||
</OffsettedListItemCell>
|
|
||||||
</OffsettedListItem>
|
|
||||||
))}
|
|
||||||
</OffsettedListBody>
|
|
||||||
</OffsettedList>
|
|
||||||
</AppPaper>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
@ -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 (
|
|
||||||
<AppPaper>
|
|
||||||
<Grid container spacing={2}>
|
|
||||||
<Grid item xs={12}>
|
|
||||||
<Skeleton variant="rect" width={"45%"} height={10} />
|
|
||||||
</Grid>
|
|
||||||
<Grid item xs={12}>
|
|
||||||
<Skeleton variant="rect" width={"100%"} height={30} />
|
|
||||||
</Grid>
|
|
||||||
<Grid item xs={12}>
|
|
||||||
<Skeleton variant="rect" width={"100%"} height={30} />
|
|
||||||
</Grid>
|
|
||||||
</Grid>
|
|
||||||
</AppPaper>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export const ProvidersInstances = () => {
|
|
||||||
const styles = useStyles();
|
|
||||||
const providers = trpcClient.providersConfiguration.getAll.useQuery();
|
|
||||||
const { setInstanceId } = useInstanceId();
|
|
||||||
|
|
||||||
if (providers?.isFetching) {
|
|
||||||
return <ProvidersSkeleton />;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (providers.error) {
|
|
||||||
return <div>Error. No provider available</div>;
|
|
||||||
}
|
|
||||||
|
|
||||||
const isAnyProvider = providers.data?.length !== 0;
|
|
||||||
|
|
||||||
if (!isAnyProvider) {
|
|
||||||
return <div></div>;
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Grid container spacing={2}>
|
|
||||||
<Grid item xs={12}>
|
|
||||||
<TaxProvidersInstancesList />
|
|
||||||
</Grid>
|
|
||||||
<Grid item xs={12}>
|
|
||||||
<Button
|
|
||||||
variant="secondary"
|
|
||||||
startIcon={<Add />}
|
|
||||||
className={styles.button}
|
|
||||||
fullWidth
|
|
||||||
onClick={() => setInstanceId(null)}
|
|
||||||
>
|
|
||||||
Add provider
|
|
||||||
</Button>
|
|
||||||
</Grid>
|
|
||||||
</Grid>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
@ -1,5 +1,4 @@
|
||||||
import { atom, useAtom } from "jotai";
|
import { atom, useAtom } from "jotai";
|
||||||
import { AppTab } from "../../pages/configuration";
|
|
||||||
|
|
||||||
const channelSlugAtom = atom("");
|
const channelSlugAtom = atom("");
|
||||||
|
|
||||||
|
|
@ -16,11 +15,3 @@ export const useInstanceId = () => {
|
||||||
|
|
||||||
return { instanceId, setInstanceId };
|
return { instanceId, setInstanceId };
|
||||||
};
|
};
|
||||||
|
|
||||||
const activeTabAtom = atom<AppTab>("channels");
|
|
||||||
|
|
||||||
export const useActiveTab = () => {
|
|
||||||
const [activeTab, setActiveTab] = useAtom(activeTabAtom);
|
|
||||||
|
|
||||||
return { activeTab, setActiveTab };
|
|
||||||
};
|
|
||||||
|
|
|
||||||
|
|
@ -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<typeof schema>;
|
|
||||||
|
|
||||||
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<FormValues>({
|
|
||||||
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 (
|
|
||||||
<>
|
|
||||||
<form onSubmit={handleSubmit(onSubmit)}>
|
|
||||||
<Grid container spacing={2}>
|
|
||||||
<Grid item xs={12}>
|
|
||||||
<Controller
|
|
||||||
name="name"
|
|
||||||
control={control}
|
|
||||||
defaultValue={defaultValues.name}
|
|
||||||
render={({ field }) => (
|
|
||||||
<TextField
|
|
||||||
required
|
|
||||||
type="text"
|
|
||||||
{...field}
|
|
||||||
label="Instance name"
|
|
||||||
{...textFieldProps}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
{formState.errors.name && (
|
|
||||||
<FormHelperText error>{formState.errors.name.message}</FormHelperText>
|
|
||||||
)}
|
|
||||||
</Grid>
|
|
||||||
<Grid item xs={12}>
|
|
||||||
<Controller
|
|
||||||
name="apiKey"
|
|
||||||
control={control}
|
|
||||||
defaultValue={defaultValues.apiKey}
|
|
||||||
render={({ field }) => (
|
|
||||||
<TextField required label="API Key" {...field} {...textFieldProps} />
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
{formState.errors?.apiKey && (
|
|
||||||
<FormHelperText error>{formState.errors?.apiKey.message}</FormHelperText>
|
|
||||||
)}
|
|
||||||
</Grid>
|
|
||||||
<Grid item xs={12}>
|
|
||||||
<InputLabel>
|
|
||||||
Sandbox
|
|
||||||
<Controller
|
|
||||||
name={"isSandbox"}
|
|
||||||
control={control}
|
|
||||||
defaultValue={defaultValues.isSandbox}
|
|
||||||
render={({ field }) => (
|
|
||||||
<Switch
|
|
||||||
{...field}
|
|
||||||
checked={field.value}
|
|
||||||
onChange={(e) => field.onChange(e.target.checked)}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
</InputLabel>
|
|
||||||
</Grid>
|
|
||||||
</Grid>
|
|
||||||
<br />
|
|
||||||
<div className={styles.reverseRow}>
|
|
||||||
<Button startIcon={<Save />} type="submit" variant="primary">
|
|
||||||
{isLoading ? "Saving..." : "Save"}
|
|
||||||
</Button>
|
|
||||||
{instanceId && (
|
|
||||||
<Button onClick={deleteProvider} startIcon={<Delete />}>
|
|
||||||
{isDeleteLoading ? "Deleting..." : "Delete"}
|
|
||||||
</Button>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
{/* // todo: bring back to life once Dashboard allows to summon dialog */}
|
|
||||||
{/* <DeleteProviderDialog
|
|
||||||
isOpen={isWarningDialogOpen}
|
|
||||||
onClose={closeWarningDialog}
|
|
||||||
onCancel={closeWarningDialog}
|
|
||||||
onConfirm={deleteProvider}
|
|
||||||
/> */}
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
@ -1,10 +0,0 @@
|
||||||
import { TaxJarConfigurationForm } from "./taxjar-configuration-form";
|
|
||||||
|
|
||||||
export const TaxJarConfiguration = () => {
|
|
||||||
return (
|
|
||||||
<section>
|
|
||||||
<h2>TaxJar configuration</h2>
|
|
||||||
<TaxJarConfigurationForm />
|
|
||||||
</section>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
@ -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 <div className={styles.root}>{children}</div>;
|
|
||||||
};
|
|
||||||
|
|
@ -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 <div className={styles.root}>{children}</div>;
|
|
||||||
};
|
|
||||||
|
|
@ -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 (
|
|
||||||
<AppContainer>
|
|
||||||
<AppGrid>{children}</AppGrid>
|
|
||||||
</AppContainer>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
@ -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 (
|
|
||||||
<Link target={"_blank"} href={href} rel="noreferrer" onClick={() => redirect(href)}>
|
|
||||||
{children}
|
|
||||||
</Link>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
@ -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 (
|
|
||||||
<Paper elevation={0} className={styles.root}>
|
|
||||||
{children}
|
|
||||||
</Paper>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
@ -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 (
|
|
||||||
<Link className={styles.button} component="button" onClick={() => setActiveTab(to)}>
|
|
||||||
{children}
|
|
||||||
</Link>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
@ -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" },
|
|
||||||
];
|
|
||||||
|
|
@ -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<ChannelConfig, "address.country">;
|
|
||||||
|
|
||||||
// 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 (
|
|
||||||
<Autocomplete
|
|
||||||
classes={{
|
|
||||||
inputRoot: styles.root,
|
|
||||||
clearIndicator: styles.clearIndicator,
|
|
||||||
}}
|
|
||||||
options={countries}
|
|
||||||
onChange={(_, data) => onChange(data ? data.code : null)}
|
|
||||||
value={
|
|
||||||
countries.find((country) => {
|
|
||||||
return value === country.code;
|
|
||||||
}) ?? null
|
|
||||||
}
|
|
||||||
getOptionLabel={(option) => option.label}
|
|
||||||
renderInput={(params) => (
|
|
||||||
<TextField
|
|
||||||
{...params}
|
|
||||||
inputRef={ref}
|
|
||||||
placeholder={"Country"}
|
|
||||||
inputProps={{
|
|
||||||
...params.inputProps,
|
|
||||||
autoComplete: "new-password", // disable autocomplete and autofill
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
});
|
|
||||||
|
|
@ -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 (
|
|
||||||
<AppPaper>
|
|
||||||
<div className={styles.root}>
|
|
||||||
<Typography variant="h4">Use external service for tax calculation</Typography>
|
|
||||||
<Typography variant="body1">
|
|
||||||
<ol className={styles.list}>
|
|
||||||
<li>
|
|
||||||
Go to <AppLink href="/taxes/channels">Tax Configuration</AppLink>. Make sure you chose{" "}
|
|
||||||
<q>Use tax app</q> as the method of tax calculation for your channel.
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
In the Tax App, go to the <AppTabNavButton to="providers">Providers</AppTabNavButton>{" "}
|
|
||||||
tab to add an instance of your provider. Click <q>Add provider</q>, and select the tax
|
|
||||||
provider you want to use. Fill in the configuration form and hit <q>Save</q>.
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
Go to the <AppTabNavButton to="channels">Channels</AppTabNavButton> tab. Select a
|
|
||||||
channel. In the <q>Channel tax provider</q> field, select the created instance. Fill
|
|
||||||
in the rest of the form, and hit <q>Save</q>.
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
Saleor will now use the channel's configured tax provider for order & checkout tax
|
|
||||||
calculations.
|
|
||||||
</li>
|
|
||||||
</ol>
|
|
||||||
</Typography>
|
|
||||||
</div>
|
|
||||||
</AppPaper>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
@ -1,27 +1,16 @@
|
||||||
import "../styles/globals.css";
|
import "../styles/globals.css";
|
||||||
|
import "@saleor/macaw-ui/next/style";
|
||||||
import { Theme } from "@material-ui/core/styles";
|
|
||||||
import { AppBridge, AppBridgeProvider } from "@saleor/app-sdk/app-bridge";
|
import { AppBridge, AppBridgeProvider } from "@saleor/app-sdk/app-bridge";
|
||||||
import { RoutePropagator } from "@saleor/app-sdk/app-bridge/next";
|
import { RoutePropagator } from "@saleor/app-sdk/app-bridge/next";
|
||||||
import {
|
import { ThemeProvider } from "@saleor/macaw-ui/next";
|
||||||
dark,
|
|
||||||
light,
|
import { AppProps } from "next/app";
|
||||||
SaleorThemeColors,
|
import { useEffect } from "react";
|
||||||
ThemeProvider as MacawUIThemeProvider,
|
|
||||||
} from "@saleor/macaw-ui";
|
|
||||||
import React, { PropsWithChildren, useEffect } from "react";
|
|
||||||
import { AppProps } from "next/app";
|
|
||||||
|
|
||||||
import { GraphQLProvider } from "../providers/GraphQLProvider";
|
|
||||||
import { ThemeSynchronizer } from "../lib/theme-synchronizer";
|
import { ThemeSynchronizer } from "../lib/theme-synchronizer";
|
||||||
import { trpcClient } from "../modules/trpc/trpc-client";
|
import { trpcClient } from "../modules/trpc/trpc-client";
|
||||||
import { NoSSRWrapper } from "../lib/no-ssr-wrapper";
|
import { GraphQLProvider } from "../providers/GraphQLProvider";
|
||||||
|
import { NoSSRWrapper } from "@saleor/apps-shared";
|
||||||
const themeOverrides: Partial<Theme> = {
|
|
||||||
/**
|
|
||||||
* You can override MacawUI theme here
|
|
||||||
*/
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Ensure instance is a singleton.
|
* Ensure instance is a singleton.
|
||||||
|
|
@ -29,36 +18,6 @@ const themeOverrides: Partial<Theme> = {
|
||||||
*/
|
*/
|
||||||
export const appBridgeInstance = typeof window !== "undefined" ? new AppBridge() : undefined;
|
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<Theme>; ssr: boolean; palettes: PalettesOverride }>
|
|
||||||
>;
|
|
||||||
|
|
||||||
function NextApp({ Component, pageProps }: AppProps) {
|
function NextApp({ Component, pageProps }: AppProps) {
|
||||||
/**
|
/**
|
||||||
* Configure JSS (used by MacawUI) for SSR. If Macaw is not used, can be removed.
|
* Configure JSS (used by MacawUI) for SSR. If Macaw is not used, can be removed.
|
||||||
|
|
@ -75,7 +34,7 @@ function NextApp({ Component, pageProps }: AppProps) {
|
||||||
<NoSSRWrapper>
|
<NoSSRWrapper>
|
||||||
<AppBridgeProvider appBridgeInstance={appBridgeInstance}>
|
<AppBridgeProvider appBridgeInstance={appBridgeInstance}>
|
||||||
<GraphQLProvider>
|
<GraphQLProvider>
|
||||||
<ThemeProvider palettes={palettes} overrides={themeOverrides} ssr>
|
<ThemeProvider>
|
||||||
<ThemeSynchronizer />
|
<ThemeSynchronizer />
|
||||||
<RoutePropagator />
|
<RoutePropagator />
|
||||||
<Component {...pageProps} />
|
<Component {...pageProps} />
|
||||||
|
|
|
||||||
|
|
@ -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 (
|
|
||||||
<>
|
|
||||||
<Channels />
|
|
||||||
<ChannelTaxProvider />
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
const ProvidersTab = () => {
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<ProvidersInstances />
|
|
||||||
<Configuration />
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
const tabs = {
|
|
||||||
channels: {
|
|
||||||
component: <ChannelTab />,
|
|
||||||
label: "Channels",
|
|
||||||
},
|
|
||||||
providers: {
|
|
||||||
component: <ProvidersTab />,
|
|
||||||
label: "Providers",
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
export type AppTab = keyof typeof tabs;
|
|
||||||
|
|
||||||
const ConfigurationPage = () => {
|
const ConfigurationPage = () => {
|
||||||
const styles = useStyles();
|
return <main>Configuration</main>;
|
||||||
const { activeTab, setActiveTab } = useActiveTab();
|
|
||||||
|
|
||||||
return (
|
|
||||||
<main>
|
|
||||||
<AppContainer>
|
|
||||||
<div className={styles.tabs}>
|
|
||||||
<PageTabs value={activeTab} onChange={(value) => setActiveTab(value as AppTab)}>
|
|
||||||
{Object.entries(tabs).map(([key, config]) => (
|
|
||||||
<PageTab key={key} value={key} label={config.label} />
|
|
||||||
))}
|
|
||||||
</PageTabs>
|
|
||||||
</div>
|
|
||||||
</AppContainer>
|
|
||||||
<AppLayout>
|
|
||||||
{tabs[activeTab].component}
|
|
||||||
<Instructions />
|
|
||||||
</AppLayout>
|
|
||||||
</main>
|
|
||||||
);
|
|
||||||
};
|
};
|
||||||
|
|
||||||
export default ConfigurationPage;
|
export default ConfigurationPage;
|
||||||
|
|
|
||||||
|
|
@ -3,7 +3,6 @@ import { useAppBridge } from "@saleor/app-sdk/app-bridge";
|
||||||
import { useEffect } from "react";
|
import { useEffect } from "react";
|
||||||
import { useIsMounted } from "usehooks-ts";
|
import { useIsMounted } from "usehooks-ts";
|
||||||
import { useRouter } from "next/router";
|
import { useRouter } from "next/router";
|
||||||
import { LinearProgress } from "@material-ui/core";
|
|
||||||
import { isInIframe } from "@saleor/apps-shared";
|
import { isInIframe } from "@saleor/apps-shared";
|
||||||
|
|
||||||
const IndexPage: NextPage = () => {
|
const IndexPage: NextPage = () => {
|
||||||
|
|
@ -18,7 +17,7 @@ const IndexPage: NextPage = () => {
|
||||||
}, [isMounted, appBridgeState?.ready, replace]);
|
}, [isMounted, appBridgeState?.ready, replace]);
|
||||||
|
|
||||||
if (isInIframe()) {
|
if (isInIframe()) {
|
||||||
return <LinearProgress />;
|
return <span>Loading...</span>;
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
|
|
||||||
|
|
@ -1508,27 +1508,15 @@ importers:
|
||||||
'@hookform/resolvers':
|
'@hookform/resolvers':
|
||||||
specifier: ^2.9.10
|
specifier: ^2.9.10
|
||||||
version: 2.9.11(react-hook-form@7.43.1)
|
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':
|
'@saleor/app-sdk':
|
||||||
specifier: 0.39.1
|
specifier: 0.39.1
|
||||||
version: 0.39.1(next@13.3.0)(react-dom@18.2.0)(react@18.2.0)
|
version: 0.39.1(next@13.3.0)(react-dom@18.2.0)(react@18.2.0)
|
||||||
'@saleor/apps-shared':
|
'@saleor/apps-shared':
|
||||||
specifier: workspace:*
|
specifier: workspace:*
|
||||||
version: link:../../packages/shared
|
version: link:../../packages/shared
|
||||||
'@saleor/apps-ui':
|
|
||||||
specifier: workspace:*
|
|
||||||
version: link:../../packages/ui
|
|
||||||
'@saleor/macaw-ui':
|
'@saleor/macaw-ui':
|
||||||
specifier: ^0.7.2
|
specifier: ^0.8.0-pre.72
|
||||||
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)
|
version: 0.8.0-pre.84(@types/react@18.0.38)(react-dom@18.2.0)(react@18.2.0)
|
||||||
'@sentry/nextjs':
|
'@sentry/nextjs':
|
||||||
specifier: ^7.45.0
|
specifier: ^7.45.0
|
||||||
version: 7.45.0(next@13.3.0)(react@18.2.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)
|
version: 13.4.0(react-dom@18.2.0)(react@18.2.0)
|
||||||
'@testing-library/react-hooks':
|
'@testing-library/react-hooks':
|
||||||
specifier: ^8.0.1
|
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':
|
'@types/node':
|
||||||
specifier: ^18.8.1
|
specifier: ^18.8.1
|
||||||
version: 18.13.0
|
version: 18.13.0
|
||||||
'@types/react':
|
'@types/react':
|
||||||
specifier: ^18.0.21
|
specifier: ~18.0.38
|
||||||
version: 18.0.27
|
version: 18.0.38
|
||||||
'@types/react-dom':
|
'@types/react-dom':
|
||||||
specifier: ^18.0.6
|
specifier: ^18.0.6
|
||||||
version: 18.0.10
|
version: 18.0.10
|
||||||
'@vitejs/plugin-react':
|
'@vitejs/plugin-react':
|
||||||
specifier: ^3.1.0
|
specifier: ^4.0.0
|
||||||
version: 3.1.0(vite@4.3.6)
|
version: 4.0.0(vite@4.3.6)
|
||||||
eslint:
|
eslint:
|
||||||
specifier: 8.25.0
|
specifier: 8.25.0
|
||||||
version: 8.25.0
|
version: 8.25.0
|
||||||
|
|
@ -9677,6 +9665,29 @@ packages:
|
||||||
react-error-boundary: 3.1.4(react@18.2.0)
|
react-error-boundary: 3.1.4(react@18.2.0)
|
||||||
dev: true
|
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):
|
/@testing-library/react@13.4.0(react-dom@18.2.0)(react@18.2.0):
|
||||||
resolution: {integrity: sha512-sXOGON+WNTh3MLE9rve97ftaZukN3oNf2KjDy7YTx6hcTO2uuLHuCGynMDhFwGw/jYf4OJ2Qk0i4i79qMNNkyw==}
|
resolution: {integrity: sha512-sXOGON+WNTh3MLE9rve97ftaZukN3oNf2KjDy7YTx6hcTO2uuLHuCGynMDhFwGw/jYf4OJ2Qk0i4i79qMNNkyw==}
|
||||||
engines: {node: '>=12'}
|
engines: {node: '>=12'}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue