Merge pull request #125 from vtex-apps/fix/QUICKORDER-26

[QUICKORDER-26] Filter out sellers unavailable in orderForm's sales channel, Add error message when query for SKU info fails in ReviewBlock

CHANGELOG.md

@@ -7,6 +7,14 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
+### Fixed
+
+- Fixed checkout simulation error by filtering out sellers unavailable in orderForm's sales channel
+
+### Added
+
+- Added error message when query for SKU info fails in ReviewBlock
+
 ## [3.9.2] - 2022-06-27
 
 ### Added

messages/ar.json

@@ -35,6 +35,7 @@
   "store/quickorder.available": "متاحة",
   "store/quickorder.back": "عودة",
   "store/quickorder.cannotBeDelivered": "لا يمكن تسليمه",
+  "store/quickorder.cannotGetSkuInfo": "تعذر الحصول على معلومات وحدة SKU",
   "store/quickorder.category.addButton": "إضافة عناصر إلى العربة",
   "store/quickorder.category.loading": "جاري التحميل...",
   "store/quickorder.category.noneSelection": "أدخل بعض الكمية على العناصر",

messages/context.json

@@ -35,6 +35,7 @@
   "store/quickorder.available": "store/quickorder.available",
   "store/quickorder.back": "store/quickorder.back",
   "store/quickorder.cannotBeDelivered": "store/quickorder.cannotBeDelivered",
+  "store/quickorder.cannotGetSkuInfo": "store/quickorder.cannotGetSkuInfo",
   "store/quickorder.category.addButton": "store/quickorder.category.addButton",
   "store/quickorder.category.loading": "store/quickorder.category.loading",
   "store/quickorder.category.noneSelection": "store/quickorder.category.noneSelection",

messages/en.json

@@ -35,6 +35,7 @@
   "store/quickorder.available": "Available",
   "store/quickorder.back": "Back",
   "store/quickorder.cannotBeDelivered": "Cannot be delivered",
+  "store/quickorder.cannotGetSkuInfo": "Could not get SKU information",
   "store/quickorder.category.addButton": "Add items to Cart",
   "store/quickorder.category.loading": "Loading...",
   "store/quickorder.category.noneSelection": "Enter some quantity on the items",

messages/es.json

@@ -35,6 +35,7 @@
   "store/quickorder.available": "Disponible",
   "store/quickorder.back": "Atrás",
   "store/quickorder.cannotBeDelivered": "No se puede entregar",
+  "store/quickorder.cannotGetSkuInfo": "No se pudo obtener la información de SKU",
   "store/quickorder.category.addButton": "Agregar ítems al carrito",
   "store/quickorder.category.loading": "Cargando...",
   "store/quickorder.category.noneSelection": "Ingresa una cantidad en los ítems",

messages/ko.json

@@ -35,6 +35,7 @@
   "store/quickorder.available": "주문 가능",
   "store/quickorder.back": "뒤",
   "store/quickorder.cannotBeDelivered": "배송 불가",
+  "store/quickorder.cannotGetSkuInfo": "SKU 정보를 가져올 수 없습니다",
   "store/quickorder.category.addButton": "장바구니가 비어있습니다",
   "store/quickorder.category.loading": "로딩 중...",
   "store/quickorder.category.noneSelection": "주문 수량을 입력해주세요",

messages/pt.json

@@ -35,6 +35,7 @@
   "store/quickorder.available": "Disponível",
   "store/quickorder.back": "Voltar",
   "store/quickorder.cannotBeDelivered": "Não pode ser entregue",
+  "store/quickorder.cannotGetSkuInfo": "Não foi possível obter informações do SKU",
   "store/quickorder.category.addButton": "Adicionar itens ao carrinho",
   "store/quickorder.category.loading": "Carregando...",
   "store/quickorder.category.noneSelection": "Informe alguma quantidade nos items desejados",

messages/ro.json

@@ -35,6 +35,7 @@
   "store/quickorder.available": "Disponibil",
   "store/quickorder.back": "Inapoi",
   "store/quickorder.cannotBeDelivered": "Nu poate fi livrat",
+  "store/quickorder.cannotGetSkuInfo": "Nu s-au primit informațiile SKU",
   "store/quickorder.category.addButton": "Adauga articole in carucior",
   "store/quickorder.category.loading": "Se incarca...",
   "store/quickorder.category.noneSelection": "Introduceti cantitati",

node/clients/search.ts

@@ -57,6 +57,14 @@ export class Search extends JanusClient {
     const resultStr: any = {}
 
     if (res.status === 200) {
+      const orderForm = await this.getOrderForm(orderFormId)
+      const { salesChannel } = orderForm
+
+      // filter out sellers that aren't available in current sales channel
+      this.sellersList = this.sellersList?.filter(seller => {
+        return seller.availableSalesChannels.includes(Number(salesChannel))
+      })
+
       const refs = Object.getOwnPropertyNames(res.data)
 
       refs.forEach(id => {
@@ -76,8 +84,6 @@ export class Search extends JanusClient {
         result = await Promise.all(promises)
       }
 
-      const orderForm = await this.getOrderForm(orderFormId)
-
       // update refIdSellerMap to include list of sellers by SKU
       result.forEach((item: any) => {
         refIdSellerMap[item.refid] = item.sellers
@@ -91,6 +97,8 @@ export class Search extends JanusClient {
         refIdSellerMap
       )
 
+      if (!items.length) return items
+
       const resItems = items.reduce((acc: any, item: any) => {
         const sellerInfo = {
           seller: item.seller,
@@ -202,12 +210,17 @@ export class Search extends JanusClient {
       },
     })
 
+    const sellersIds = new Set(this.sellersList?.map(seller => seller.id))
+
     return res.data?.SkuSellers
       ? {
           sku: skuId,
           refid,
           sellers: res.data.SkuSellers.filter((item: any) => {
-            return item.IsActive === true
+            // check if SKU seller is available in sellers list
+            const inSellersList = sellersIds.has(item.SellerId)
+
+            return item.IsActive === true && inSellersList
           }).map(({ SellerId }: any) => {
             return {
               id: SellerId,
@@ -235,10 +248,17 @@ export class Search extends JanusClient {
         .filter((item: any) => {
           return item.isActive === true
         })
-        .map(({ id, name }: any) => {
+        .map(({ id, name, availableSalesChannels }: any) => {
+          const availableSalesChannelsIds = availableSalesChannels.map(
+            (sc: { id: number }) => {
+              return sc.id
+            }
+          )
+
           return {
             id,
             name,
+            availableSalesChannels: availableSalesChannelsIds,
           }
         })
     }

node/tests/setupTests.ts

@@ -169,6 +169,14 @@ jest.mock('@vtex/api', () => {
         FulfillmentSellerId: '',
         SellerType: 1,
         IsBetterScope: false,
+        availableSalesChannels: [
+          {
+            id: 2,
+          },
+          {
+            id: 4,
+          },
+        ],
       },
     ],
   })

react/TextAreaBlock.tsx

@@ -317,6 +317,7 @@ const TextAreaBlock: FunctionComponent<
               hiddenColumns={hiddenColumns ?? []}
               onReviewItems={onReviewItems}
               onRefidLoading={onRefidLoading}
+              backList={backList}
             />
             <div
               className={`mb4 mt4 flex justify-between ${handles.buttonsBlock}`}

react/UploadBlock.tsx

@@ -446,6 +446,7 @@ const UploadBlock: FunctionComponent<
               hiddenColumns={hiddenColumns ?? []}
               onReviewItems={onReviewItems}
               onRefidLoading={onRefidLoading}
+              backList={backList}
             />
             <div
               className={`mb4 mt4 flex justify-between ${handles.buttonsBlock}`}

react/components/ReviewBlock.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 /* eslint-disable vtex/prefer-early-return */
 import type { FunctionComponent } from 'react'
-import React, { useState, useEffect } from 'react'
+import React, { useState, useEffect, useContext } from 'react'
 import {
   Table,
   Input,
@@ -10,6 +10,7 @@ import {
   IconInfo,
   Tooltip,
   Dropdown,
+  ToastContext,
 } from 'vtex.styleguide'
 import type { WrappedComponentProps } from 'react-intl'
 import { injectIntl, defineMessages } from 'react-intl'
@@ -128,6 +129,9 @@ const messages = defineMessages({
   ORD031: {
     id: 'store/quickorder.ORD031',
   },
+  cannotGetSkuInfo: {
+    id: 'store/quickorder.cannotGetSkuInfo',
+  },
 })
 
 let orderFormId = ''
@@ -137,9 +141,11 @@ const ReviewBlock: FunctionComponent<WrappedComponentProps & any> = ({
   hiddenColumns,
   reviewedItems,
   onRefidLoading,
+  backList,
   intl,
 }: any) => {
   const client = useApolloClient()
+  const { showToast } = useContext(ToastContext)
 
   const { data: orderFormData } = useQuery<{
     orderForm
@@ -337,10 +343,18 @@ const ReviewBlock: FunctionComponent<WrappedComponentProps & any> = ({
       variables: { refids, orderFormId, refIdSellerMap },
     }
 
-    const { data } = await client.query(query)
+    try {
+      const { data } = await client.query(query)
+
+      validateRefids(data, reviewed)
+      onRefidLoading(false)
+    } catch (err) {
+      showToast({
+        message: intl.formatMessage(messages.cannotGetSkuInfo),
+      })
 
-    validateRefids(data, reviewed)
-    onRefidLoading(false)
+      backList()
+    }
   }
 
   const convertRefIds = (items: any) => {
@@ -370,7 +384,7 @@ const ReviewBlock: FunctionComponent<WrappedComponentProps & any> = ({
 
   useEffect(() => {
     checkValidatedItems()
-  })
+  }, [reviewItems])
 
   const removeLine = (i: number) => {
     const items: [any] = reviewItems