From b53c907cefdf180c734cc978f59cf88642d86f8a Mon Sep 17 00:00:00 2001
From: Victor Almeida <victor.vhaa@hotmail.com>
Date: Mon, 4 Sep 2023 14:32:27 -0300
Subject: [PATCH 1/4] Add timeout to batch modal update response

---
 .../components/DetailsPage/BatchModal.tsx     | 42 +++++++++++--------
 1 file changed, 24 insertions(+), 18 deletions(-)

diff --git a/apps/vtex-my-subscriptions-3/react/components/DetailsPage/BatchModal.tsx b/apps/vtex-my-subscriptions-3/react/components/DetailsPage/BatchModal.tsx
index ec47c180..729a5d27 100644
--- a/apps/vtex-my-subscriptions-3/react/components/DetailsPage/BatchModal.tsx
+++ b/apps/vtex-my-subscriptions-3/react/components/DetailsPage/BatchModal.tsx
@@ -175,24 +175,30 @@ class BatchModal extends Component<Props, State> {
     }
 
     promises?.then(() => {
-      const displayError = this.state.completed.length !== selectedIds.length
-
-      if (!displayError) {
-        showToast({ message: intl.formatMessage(messages.success) })
-        onClose()
-      } else {
-        this.setState((finalState) => {
-          finalState.completed.map((id) => delete finalState.selectionItems[id])
-
-          return {
-            selectionItems: finalState.selectionItems,
-            loading: false,
-            // If some subscription isn't on the finalState
-            // it means that some error has ocurred
-            displayError,
-          }
-        })
-      }
+      // timeout added due to state not update instantaneously
+      setTimeout(() => {
+        // filter only unique completed ids
+        const uniqueCompletedIds = this.state.completed.filter((completed, index) => this.state.completed.indexOf(completed) === index);
+
+        const displayError = uniqueCompletedIds.length !== selectedIds.length
+
+        if (!displayError) {
+          showToast({ message: intl.formatMessage(messages.success) })
+          onClose()
+        } else {
+          this.setState((finalState) => {
+            finalState.completed.map((id) => delete finalState.selectionItems[id])
+
+            return {
+              selectionItems: finalState.selectionItems,
+              loading: false,
+              // If some subscription isn't on the finalState
+              // it means that some error has ocurred
+              displayError,
+            }
+          })
+        }
+      }, 100)
     })
   }
 

From 075e966e8d29955f555136ffb0ccc37f4689c9ac Mon Sep 17 00:00:00 2001
From: Victor Almeida <victor.vhaa@hotmail.com>
Date: Thu, 14 Sep 2023 18:50:03 -0300
Subject: [PATCH 2/4] Add productName to not display only sku name

---
 .../react/components/AddItemModal/Modal.tsx                    | 3 ++-
 .../react/components/AddItemModal/search.d.ts                  | 1 +
 .../react/components/AddItemModal/search.gql                   | 1 +
 3 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/apps/vtex-my-subscriptions-3/react/components/AddItemModal/Modal.tsx b/apps/vtex-my-subscriptions-3/react/components/AddItemModal/Modal.tsx
index aa5d49ae..88d74170 100644
--- a/apps/vtex-my-subscriptions-3/react/components/AddItemModal/Modal.tsx
+++ b/apps/vtex-my-subscriptions-3/react/components/AddItemModal/Modal.tsx
@@ -72,6 +72,7 @@ const AddItemModal: FunctionComponent<Props> = ({
   targetPlan,
 }) => {
   let state: State
+  console.log(`products`, products)
   if (loading) {
     state = 'loading'
   } else if (products && products?.length > 0) {
@@ -119,7 +120,7 @@ const AddItemModal: FunctionComponent<Props> = ({
                 <div key={sku.skuId} className={`${handles.productItemWrapper} mb8`}>
                   <Item
                     id={sku.skuId}
-                    name={sku.name}
+                    name={product.productName === sku.name ? sku.name : `${product.productName} ${sku.name}`}
                     price={sku.price}
                     currency={currency}
                     imageUrl={sku.imageUrl}
diff --git a/apps/vtex-my-subscriptions-3/react/components/AddItemModal/search.d.ts b/apps/vtex-my-subscriptions-3/react/components/AddItemModal/search.d.ts
index 2b93df57..a180a8ba 100644
--- a/apps/vtex-my-subscriptions-3/react/components/AddItemModal/search.d.ts
+++ b/apps/vtex-my-subscriptions-3/react/components/AddItemModal/search.d.ts
@@ -9,6 +9,7 @@ declare module '*/search.gql' {
     plans: string[]
   }
   export interface SearchProduct {
+    productName: string
     unitMultiplier: number
     measurementUnit: string
     brand: string
diff --git a/apps/vtex-my-subscriptions-3/react/components/AddItemModal/search.gql b/apps/vtex-my-subscriptions-3/react/components/AddItemModal/search.gql
index e2d23ed0..ac9f5222 100644
--- a/apps/vtex-my-subscriptions-3/react/components/AddItemModal/search.gql
+++ b/apps/vtex-my-subscriptions-3/react/components/AddItemModal/search.gql
@@ -11,6 +11,7 @@ query SearchSubscribableProducts(
   ) @context(provider: "vtex.subscriptions-graphql") {
     list {
       ... on SearchProduct {
+        productName
         unitMultiplier
         measurementUnit
         brand

From 8ff6f18ce7e7ccb94a4c5df5cf089be7a38d4888 Mon Sep 17 00:00:00 2001
From: v-hansen <vitor.hansen@vtex.com.br>
Date: Tue, 19 Sep 2023 16:54:20 -0700
Subject: [PATCH 3/4] add break line in product name + sku name

---
 apps/vtex-my-subscriptions-3/manifest.json                    | 4 +++-
 .../react/components/AddItemModal/Modal.tsx                   | 2 +-
 .../react/components/DetailsPage/Products/Listing.tsx         | 2 +-
 .../vtex-my-subscriptions-3/react/components/SkuThumbnail.tsx | 2 +-
 4 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/apps/vtex-my-subscriptions-3/manifest.json b/apps/vtex-my-subscriptions-3/manifest.json
index 0c614c0c..e30c731f 100644
--- a/apps/vtex-my-subscriptions-3/manifest.json
+++ b/apps/vtex-my-subscriptions-3/manifest.json
@@ -11,7 +11,9 @@
     "store": "0.x"
   },
   "mustUpdateAt": "2019-04-02",
-  "registries": ["smartcheckout"],
+  "registries": [
+    "smartcheckout"
+  ],
   "scripts": {
     "postreleasy": "vtex publish --verbose"
   },
diff --git a/apps/vtex-my-subscriptions-3/react/components/AddItemModal/Modal.tsx b/apps/vtex-my-subscriptions-3/react/components/AddItemModal/Modal.tsx
index 88d74170..cd358e76 100644
--- a/apps/vtex-my-subscriptions-3/react/components/AddItemModal/Modal.tsx
+++ b/apps/vtex-my-subscriptions-3/react/components/AddItemModal/Modal.tsx
@@ -120,7 +120,7 @@ const AddItemModal: FunctionComponent<Props> = ({
                 <div key={sku.skuId} className={`${handles.productItemWrapper} mb8`}>
                   <Item
                     id={sku.skuId}
-                    name={product.productName === sku.name ? sku.name : `${product.productName} ${sku.name}`}
+                    name={product.productName === sku.name ? sku.name : `${product.productName}\n${sku.name}`}
                     price={sku.price}
                     currency={currency}
                     imageUrl={sku.imageUrl}
diff --git a/apps/vtex-my-subscriptions-3/react/components/DetailsPage/Products/Listing.tsx b/apps/vtex-my-subscriptions-3/react/components/DetailsPage/Products/Listing.tsx
index e628b5f4..11429286 100644
--- a/apps/vtex-my-subscriptions-3/react/components/DetailsPage/Products/Listing.tsx
+++ b/apps/vtex-my-subscriptions-3/react/components/DetailsPage/Products/Listing.tsx
@@ -60,7 +60,7 @@ const ProductsListing: FunctionComponent<Props> = ({
       >
         <ProductListItem
           isEditing={isEditing}
-          name={product.sku.productName}
+          name={product.sku.productName === product.sku.name ? product.sku.name : `${product.sku.productName}\n${product.sku.name}`}
           quantity={product.quantity}
           imageUrl={product.sku.imageUrl ?? undefined}
           measurementUnit={product.sku.measurementUnit}
diff --git a/apps/vtex-my-subscriptions-3/react/components/SkuThumbnail.tsx b/apps/vtex-my-subscriptions-3/react/components/SkuThumbnail.tsx
index 1c40f69d..ca38e111 100644
--- a/apps/vtex-my-subscriptions-3/react/components/SkuThumbnail.tsx
+++ b/apps/vtex-my-subscriptions-3/react/components/SkuThumbnail.tsx
@@ -33,7 +33,7 @@ const SkuThumbnail: FunctionComponent<Props> = ({
       <div className="w-100 flex flex-column flex-row-ns justify-between pl4">
         <div className="w-40-ns w-100 mb0-ns mb2 pr4">
           <div className="c-muted-1 fw5 ttu f7 mb2">{brandName}</div>
-          <div className="mb4 fw5">{name}</div>
+          <div className="mb4 fw5">{name.split('\n').map( (it, i) => <div key={'x'+i}>{it}</div> )}</div>
           <div className="t-small c-muted-1">
             {`${unitMultiplier} ${measurementUnit}`}
           </div>

From 8e5b3f23f778f43f5c65c9866b825170f21ac49d Mon Sep 17 00:00:00 2001
From: Vitor Hansen <64436563+v-hansen@users.noreply.github.com>
Date: Tue, 19 Sep 2023 20:54:51 -0300
Subject: [PATCH 4/4] Update
 apps/vtex-my-subscriptions-3/react/components/AddItemModal/Modal.tsx

Co-authored-by: Wagner Lemos Duarte <wagner.duarte@vtex.com.br>
---
 .../react/components/AddItemModal/Modal.tsx                      | 1 -
 1 file changed, 1 deletion(-)

diff --git a/apps/vtex-my-subscriptions-3/react/components/AddItemModal/Modal.tsx b/apps/vtex-my-subscriptions-3/react/components/AddItemModal/Modal.tsx
index cd358e76..3d6dff2b 100644
--- a/apps/vtex-my-subscriptions-3/react/components/AddItemModal/Modal.tsx
+++ b/apps/vtex-my-subscriptions-3/react/components/AddItemModal/Modal.tsx
@@ -72,7 +72,6 @@ const AddItemModal: FunctionComponent<Props> = ({
   targetPlan,
 }) => {
   let state: State
-  console.log(`products`, products)
   if (loading) {
     state = 'loading'
   } else if (products && products?.length > 0) {