87 lines
3.3 KiB
TypeScript
87 lines
3.3 KiB
TypeScript
import { useAppBridge, withAuthorization } from "@saleor/app-sdk/app-bridge";
|
|
import { Box, Text } from "@saleor/macaw-ui/next";
|
|
import { AppLayout, AppLayoutRow } from "@/modules/ui/templates/AppLayout";
|
|
import { trpcClient } from "@/modules/trpc/trpc-client";
|
|
import { getErrorHandler } from "@/modules/trpc/utils";
|
|
import { useFetchChannelsQuery } from "generated/graphql";
|
|
import { StripeConfigurationsList } from "@/modules/ui/organisms/StripeConfigurationList/StripeConfigurationList";
|
|
import { ChannelToConfigurationList } from "@/modules/ui/organisms/ChannelToConfigurationList/ChannelToConfigurationList";
|
|
import { Skeleton } from "@/modules/ui/atoms/Skeleton/Skeleton";
|
|
|
|
function ListConfigurationPage() {
|
|
const { appBridge } = useAppBridge();
|
|
const [allConfigurations, channelMappings] = trpcClient.useQueries((t) => [
|
|
t.paymentAppConfigurationRouter.paymentConfig.getAll(undefined, {
|
|
onError: getErrorHandler({
|
|
appBridge,
|
|
actionId: "list-all-configurations",
|
|
message: "Error while fetching the list of configurations",
|
|
title: "API Error",
|
|
}),
|
|
}),
|
|
t.paymentAppConfigurationRouter.mapping.getAll(undefined, {
|
|
onError: getErrorHandler({
|
|
appBridge,
|
|
actionId: "channel-mappings-get-all",
|
|
message: "Error while fetching the channel mappings",
|
|
title: "API Error",
|
|
}),
|
|
}),
|
|
]);
|
|
|
|
const [channels] = useFetchChannelsQuery();
|
|
|
|
const hasAnyConfigs = allConfigurations.data && allConfigurations.data.length > 0;
|
|
const hasAnyMappings = Object.values(channelMappings.data || {}).filter(Boolean).length > 0;
|
|
|
|
return (
|
|
<AppLayout title="Stripe">
|
|
<AppLayoutRow
|
|
title="Stripe Configurations"
|
|
description="Create Stripe configurations that can be later assigned to Saleor channels."
|
|
disabled={channelMappings.isLoading}
|
|
>
|
|
{allConfigurations.isLoading ? (
|
|
<Skeleton height={40} />
|
|
) : (
|
|
<StripeConfigurationsList configurations={allConfigurations.data || []} />
|
|
)}
|
|
</AppLayoutRow>
|
|
<AppLayoutRow
|
|
disabled={!hasAnyConfigs || channelMappings.isLoading}
|
|
title="Saleor channel mappings"
|
|
description={
|
|
<Box>
|
|
<Text as="p" variant="body" size="medium">
|
|
Assign Stripe configurations to Saleor channels.
|
|
</Text>
|
|
{!channelMappings.isLoading && !hasAnyMappings && (
|
|
<Box marginTop={6}>
|
|
<Text as="p" variant="body" size="medium" color="textCriticalDefault">
|
|
No channels have configurations assigned.
|
|
</Text>
|
|
<Text as="p" variant="body" size="medium" color="textCriticalDefault">
|
|
This means payments are not processed by Stripe.
|
|
</Text>
|
|
</Box>
|
|
)}
|
|
</Box>
|
|
}
|
|
>
|
|
{channelMappings.isLoading ? (
|
|
<Skeleton height={40} />
|
|
) : (
|
|
<ChannelToConfigurationList
|
|
disabled={!hasAnyConfigs || channelMappings.isLoading}
|
|
configurations={allConfigurations.data || []}
|
|
channelMappings={channelMappings.data || {}}
|
|
channels={channels.data?.channels || []}
|
|
/>
|
|
)}
|
|
</AppLayoutRow>
|
|
</AppLayout>
|
|
);
|
|
}
|
|
|
|
export default withAuthorization()(ListConfigurationPage);
|