Fix channel creation transaction flow settings

.changeset/old-pianos-hope.md

@@ -0,0 +1,5 @@
+---
+"saleor-dashboard": patch
+---
+
+Flow settings in channel creation will now persist after channel is created

playwright/tests/channels.spec.ts

@@ -3,7 +3,7 @@ import { ChannelPage } from "@pages/channelsPage";
 import { ConfigurationPage } from "@pages/configurationPage";
 import { expect, test } from "@playwright/test";
 
-test.use({ storageState: "./playwright/.auth/admin.json" });
+test.use({ storageState: "./playwright/.auth/admin.json", locale: "en" });
 let configurationPage: ConfigurationPage;
 let channelPage: ChannelPage;
 
@@ -25,6 +25,34 @@ test("TC: SALEOR_97 Create basic channel @e2e @channels", async () => {
   await channelPage.expectSuccessBanner();
 });
 
+test("TC: SALEOR_208 Create channel with all settings @e2e @channels", async () => {
+  const slugName = new Date().toISOString();
+  await configurationPage.gotoConfigurationView();
+  await configurationPage.openChannels();
+  await channelPage.clickCreateChannelButton();
+  await channelPage.typeChannelName();
+  await channelPage.typeSlugName(slugName);
+  await channelPage.selectCurrency("AFN - Afghanistan");
+  await channelPage.selectCountry("Afghanistan");
+  await channelPage.clickTransactionFlowCheckbox();
+  // Checking before save because checkboxes used to not work properly
+  await expect(channelPage.transactionFlowCheckbox).toBeChecked();
+  await channelPage.clickAllowUnpaidOrdersCheckbox();
+  await expect(channelPage.allowUnpaidOrdersCheckbox).toBeChecked();
+  await channelPage.clickAuthorizeInsteadOfChargingCheckbox();
+  await expect(channelPage.authorizeInsteadOfChargingCheckbox).toBeChecked();
+  await channelPage.clickSaveButton();
+  await channelPage.expectSuccessBanner();
+
+  // Checking again after save because state wasn't saved properly
+  await channelPage.page.waitForURL(
+    (url: URL) => !url.pathname.includes("add"),
+  );
+  await expect(channelPage.transactionFlowCheckbox).toBeChecked();
+  await expect(channelPage.authorizeInsteadOfChargingCheckbox).toBeChecked();
+  await expect(channelPage.allowUnpaidOrdersCheckbox).toBeChecked();
+});
+
 test("TC: SALEOR_98 Edit channel - transaction flow, allow unpaid, authorize, prio high stock @e2e @channels", async () => {
   await channelPage.gotoChannelDetails(CHANNELS.channelToBeEditedSettings.id);
   await channelPage.clickTransactionFlowCheckbox();

src/channels/components/ChannelForm/AllowUnpaidOrders.tsx

@@ -10,12 +10,14 @@ interface AllowUnpaidOrdersProps {
   onChange: FormChange;
   isChecked: boolean;
   hasError: boolean;
+  disabled?: boolean;
 }
 
 export const AllowUnpaidOrders = ({
   onChange,
   isChecked,
   hasError,
+  disabled,
 }: AllowUnpaidOrdersProps) => (
   <Box paddingX={6}>
     <Checkbox
@@ -26,6 +28,7 @@ export const AllowUnpaidOrders = ({
       onCheckedChange={value =>
         onChange({ target: { name: "allowUnpaidOrders", value } })
       }
+      disabled={disabled}
     >
       <Text>
         <FormattedMessage {...messages.allowUnpaidOrdersLabel} />

src/channels/components/ChannelForm/ChannelForm.tsx

@@ -210,17 +210,19 @@ export const ChannelForm: React.FC<ChannelFormProps> = ({
           />
         </Box>
         <MarkAsPaid
-          isDiabled={disabled}
           isChecked={
             data.markAsPaidStrategy === MarkAsPaidStrategyEnum.TRANSACTION_FLOW
           }
           onCheckedChange={onMarkAsPaidStrategyChange}
+          hasError={!!formErrors.markAsPaidStrategy}
+          disabled={disabled}
         />
         <Box />
         <AllowUnpaidOrders
           onChange={onChange}
           isChecked={data.allowUnpaidOrders}
           hasError={!!formErrors.allowUnpaidOrders}
+          disabled={disabled}
         />
         <Box />
         <DefaultTransactionFlowStrategy
@@ -230,6 +232,7 @@ export const ChannelForm: React.FC<ChannelFormProps> = ({
             TransactionFlowStrategyEnum.AUTHORIZATION
           }
           hasError={!!formErrors.defaultTransactionFlowStrategy}
+          disabled={disabled}
         />
       </Box>
     </>

src/channels/components/ChannelForm/DefaultTransactionFlowStrategy.tsx

@@ -11,12 +11,14 @@ interface AllowUnpaidOrdersProps {
   onChange: FormChange;
   isChecked: boolean;
   hasError: boolean;
+  disabled?: boolean;
 }
 
 export const DefaultTransactionFlowStrategy = ({
   onChange,
   isChecked,
   hasError,
+  disabled,
 }: AllowUnpaidOrdersProps) => (
   <Box paddingX={6}>
     <Checkbox
@@ -27,6 +29,7 @@ export const DefaultTransactionFlowStrategy = ({
       onCheckedChange={value =>
         onChange({ target: { name: "defaultTransactionFlowStrategy", value } })
       }
+      disabled={disabled}
     >
       <Text>
         <FormattedMessage {...messages.defaultTransactionFlowStrategyLabel} />

src/channels/components/ChannelForm/MarkAsPaid.tsx

@@ -7,21 +7,24 @@ import { FormattedMessage } from "react-intl";
 import { messages } from "./messages";
 
 interface MarkAsPaidProps {
-  isDiabled: boolean;
+  hasError: boolean;
   isChecked: boolean;
   onCheckedChange: () => void;
+  disabled?: boolean;
 }
 
 export const MarkAsPaid = ({
-  isDiabled,
+  hasError,
   isChecked,
   onCheckedChange,
+  disabled,
 }: MarkAsPaidProps) => (
   <Box paddingX={6} marginTop={4}>
     <Checkbox
       data-test-id="order-settings-mark-as-paid"
-      disabled={isDiabled}
+      error={hasError}
       checked={isChecked}
+      disabled={disabled}
       onCheckedChange={onCheckedChange}
       name="markAsPaidStrategy"
     >

src/channels/pages/ChannelDetailsPage/ChannelDetailsPage.tsx

@@ -208,16 +208,30 @@ const ChannelDetailsPage = function <TErrors extends ChannelErrorFragment[]>({
         );
         const reorderWarehouse = createWarehouseReorderHandler(data, set);
         const handleMarkAsPaidStrategyChange = () => {
+          if (!data.markAsPaidStrategy) {
+            set({
+              markAsPaidStrategy: MarkAsPaidStrategyEnum.TRANSACTION_FLOW,
+            });
+            return;
+          }
+
           set({
             markAsPaidStrategy:
-              // Swap enum values
               data.markAsPaidStrategy === MarkAsPaidStrategyEnum.PAYMENT_FLOW
                 ? MarkAsPaidStrategyEnum.TRANSACTION_FLOW
                 : MarkAsPaidStrategyEnum.PAYMENT_FLOW,
           });
         };
 
         const handleTransactionFlowStrategyChange = () => {
+          if (!data.defaultTransactionFlowStrategy) {
+            set({
+              defaultTransactionFlowStrategy:
+                TransactionFlowStrategyEnum.AUTHORIZATION,
+            });
+            return;
+          }
+
           set({
             defaultTransactionFlowStrategy:
               data.defaultTransactionFlowStrategy ===

src/channels/views/ChannelCreate/ChannelCreate.tsx

@@ -66,28 +66,32 @@ export const ChannelCreateView = () => {
   });
 
   const handleSubmit = async ({
-    shippingZonesIdsToAdd,
-    warehousesIdsToAdd,
-    warehousesToDisplay,
-    currencyCode,
     allocationStrategy,
-    name,
-    slug,
+    allowUnpaidOrders,
+    currencyCode,
     defaultCountry,
-    markAsPaidStrategy,
+    defaultTransactionFlowStrategy,
     deleteExpiredOrdersAfter,
-    allowUnpaidOrders,
+    markAsPaidStrategy,
+    name,
+    shippingZonesIdsToAdd,
+    slug,
+    warehousesIdsToAdd,
+    warehousesToDisplay,
   }: FormData) => {
     const input: ChannelCreateInput = {
-      defaultCountry,
       name,
       slug,
+      defaultCountry,
       currencyCode: currencyCode.toUpperCase(),
       addShippingZones: shippingZonesIdsToAdd,
       addWarehouses: warehousesIdsToAdd,
       stockSettings: {
         allocationStrategy,
       },
+      paymentSettings: {
+        defaultTransactionFlowStrategy,
+      },
       orderSettings: {
         markAsPaidStrategy,
         deleteExpiredOrdersAfter,

src/channels/views/ChannelDetails/ChannelDetails.tsx

@@ -106,19 +106,19 @@ export const ChannelDetails: React.FC<ChannelDetailsProps> = ({
     });
 
   const handleSubmit = async ({
+    allocationStrategy,
+    allowUnpaidOrders,
+    defaultCountry,
+    defaultTransactionFlowStrategy,
+    deleteExpiredOrdersAfter,
+    markAsPaidStrategy,
     name,
-    slug,
-    shippingZonesIdsToRemove,
     shippingZonesIdsToAdd,
-    warehousesIdsToRemove,
+    shippingZonesIdsToRemove,
+    slug,
     warehousesIdsToAdd,
+    warehousesIdsToRemove,
     warehousesToDisplay,
-    defaultCountry,
-    allocationStrategy,
-    markAsPaidStrategy,
-    deleteExpiredOrdersAfter,
-    allowUnpaidOrders,
-    defaultTransactionFlowStrategy,
   }: FormData) => {
     const updateChannelMutation = updateChannel({
       variables: {