Fix gift cards tags multiselect (#5105)

* Fix gift card tags multiselect handler * Add changeset * Rename prop * Add tests * Fix test
saleor · Aug 10, 2024 · 047a4ff · 047a4ff
1 parent 6d79edb
commit 047a4ff
Show file tree

Hide file tree

Showing 7 changed files with 21 additions and 7 deletions.
diff --git a/.changeset/gold-parents-study.md b/.changeset/gold-parents-study.md
@@ -0,0 +1,5 @@
+---
+"saleor-dashboard": patch
+---
+
+You can now add and remove tags for gift cards without any application crash
diff --git a/playwright/pages/giftCardsPage.ts b/playwright/pages/giftCardsPage.ts
@@ -41,6 +41,8 @@ export class GiftCardsPage extends BasePage {
     readonly exportGiftCardsBanner = page.getByText(
       "We are currently exporting your gift card codes. As soon as your file is available it will be sent to your email address",
     ),
+    readonly tagsInput = page.getByTestId("gift-card-tag-select-field"),
+    readonly tagsInputOptions = page.locator('[data-test-id*="select-option"]'),
   ) {
     super(page);
     this.page = page;
@@ -95,6 +97,11 @@ export class GiftCardsPage extends BasePage {
     await this.showMoreMenuButton.click();
   }
 
+  async addTag() {
+    await this.tagsInput.click();
+    await this.tagsInputOptions.first().click();
+  }
+
   async gotoGiftCardsListView() {
     await this.waitForNetworkIdleAfterAction(async () => {
       await this.page.goto(URL_LIST.giftCards);

diff --git a/playwright/tests/giftCards.spec.ts b/playwright/tests/giftCards.spec.ts
@@ -85,6 +85,8 @@ test("TC: SALEOR_109 Activate gift card @e2e @gift", async () => {
 });
 test("TC: SALEOR_110 Edit gift card @e2e @gift", async () => {
   await giftCardsPage.gotoExistingGiftCardView(GIFT_CARDS.giftCardToBeEdited.id);
+  await giftCardsPage.addTag();
+  await giftCardsPage.addTag();
   await giftCardsPage.clickCardExpiresCheckbox();
   await giftCardsPage.metadataSeoPage.expandAndAddAllMetadata();
   await giftCardsPage.clickSaveButton();

diff --git a/src/giftCards/GiftCardBulkCreateDialog/GiftCardBulkCreateDialogForm.tsx b/src/giftCards/GiftCardBulkCreateDialog/GiftCardBulkCreateDialogForm.tsx
@@ -107,7 +107,7 @@ const GiftCardBulkCreateDialogForm: React.FC<GiftCardBulkCreateDialogFormProps>
         error={formErrors?.tags}
         name="tags"
         values={tags}
-        toggleChange={change}
+        onChange={change}
       />
 
       <Divider />

diff --git a/src/giftCards/GiftCardCreateDialog/GiftCardCreateDialogForm.tsx b/src/giftCards/GiftCardCreateDialog/GiftCardCreateDialogForm.tsx
@@ -134,7 +134,7 @@ const GiftCardCreateDialogForm: React.FC<GiftCardCreateDialogFormProps> = ({
     <>
       <GiftCardCreateMoneyInput {...commonFormProps} set={set} />
 
-      <GiftCardTagInput error={formErrors?.tags} name="tags" values={tags} toggleChange={change} />
+      <GiftCardTagInput error={formErrors?.tags} name="tags" values={tags} onChange={change} />
 
       <GiftCardSendToCustomer
         selectedChannelSlug={channelSlug}

diff --git a/src/giftCards/GiftCardUpdate/GiftCardUpdateDetailsCard/GiftCardUpdateDetailsCard.tsx b/src/giftCards/GiftCardUpdate/GiftCardUpdateDetailsCard/GiftCardUpdateDetailsCard.tsx
@@ -20,7 +20,7 @@ const GiftCardUpdateDetailsCard: React.FC = () => {
   const { loading, giftCard } = useGiftCardDetails();
   const { openSetBalanceDialog } = useGiftCardUpdateDialogs();
   const {
-    toggleValue,
+    toggleValues,
     data: { tags },
     formErrors,
   } = useGiftCardUpdateForm();
@@ -52,7 +52,7 @@ const GiftCardUpdateDetailsCard: React.FC = () => {
               error={formErrors?.tags}
               name="tags"
               values={tags}
-              toggleChange={toggleValue}
+              onChange={toggleValues}
             />
             <CardSpacer />
             <GiftCardUpdateExpirySelect />

diff --git a/src/giftCards/components/GiftCardTagInput/GiftCardTagInput.tsx b/src/giftCards/components/GiftCardTagInput/GiftCardTagInput.tsx
@@ -16,15 +16,15 @@ import { giftCardTagInputMessages as messages } from "./messages";
 
 interface GiftCardTagInputProps {
   name: string;
-  toggleChange: FormChange;
+  onChange: FormChange;
   values: Option[];
   error: GiftCardBulkCreateFormError;
   optional?: boolean;
   loading?: boolean;
 }
 
 const GiftCardTagInput: React.FC<GiftCardTagInputProps> = ({
-  toggleChange,
+  onChange,
   name,
   values,
   error,
@@ -63,7 +63,7 @@ const GiftCardTagInput: React.FC<GiftCardTagInputProps> = ({
         }}
         value={values}
         options={choices}
-        onChange={toggleChange}
+        onChange={onChange}
         fetchOptions={search}
       />
     </Box>