Merge pull request #172 from vtex-apps/feature/pii

Feature/pii

docs/README.md

@@ -288,6 +288,12 @@ To apply CSS customizations to this and other blocks, follow the instructions in
 | `wishlistIconContainer` |
 | `emptyMessage`          |
 
+## PII Compliance
+
+This app can be used in a Personal Identifiable Information (PII) compliant account. In this case, shopperId is the Profile ID.
+
+**Note**: If you are changing type of the account from regular to PII, you must replace the email values with profile ID values in the WishList data entity!
+
 <!-- DOCS-IGNORE:start -->
 
 ## Contributors ✨

react/AddProductBtn.tsx

@@ -6,7 +6,7 @@ import React, {
   useEffect,
   SyntheticEvent,
 } from 'react'
-import { useMutation, useLazyQuery } from 'react-apollo'
+import { useMutation, useLazyQuery, useQuery } from 'react-apollo'
 import { defineMessages, useIntl } from 'react-intl'
 import { ProductContext } from 'vtex.product-context'
 import { Button, ToastContext } from 'vtex.styleguide'
@@ -18,6 +18,7 @@ import { getSession } from './modules/session'
 import storageFactory from './utils/storage'
 import checkItem from './queries/checkItem.gql'
 import addToList from './queries/addToList.gql'
+import profile from './queries/profile.gql'
 import removeFromList from './queries/removeFromList.gql'
 import styles from './styles.css'
 
@@ -152,10 +153,13 @@ const AddBtn: FC<AddBtnProps> = ({ toastURL = '/account/#wishlist' }) => {
   const { navigate, history, route, account } = useRuntime()
   const { push } = usePixel()
   const handles = useCssHandles(CSS_HANDLES)
-  const { showToast } = useContext(ToastContext)
+  const { showToast } = useContext(ToastContext) as any
   const { selectedItem, product } = useContext(ProductContext) as any
   const sessionResponse: any = useSessionResponse()
   const [handleCheck, { data, loading, called }] = useLazyQuery(checkItem)
+  const { data: profileData } = useQuery(profile, {
+    ssr: false
+  })
 
   const [productId] = String(product?.productId).split('-')
   const sku = product?.sku?.itemId
@@ -215,7 +219,8 @@ const AddBtn: FC<AddBtnProps> = ({ toastURL = '/account/#wishlist' }) => {
   if (sessionResponse) {
     isAuthenticated =
       sessionResponse?.namespaces?.profile?.isAuthenticated?.value === 'true'
-    shopperId = sessionResponse?.namespaces?.profile?.email?.value ?? null
+
+    shopperId = !profileData?.profile?.pii? sessionResponse?.namespaces?.profile?.email?.value : sessionResponse?.namespaces?.profile?.id?.value?? null
 
     localStore.setItem(
       'wishlist_isAuthenticated',
@@ -353,7 +358,8 @@ const AddBtn: FC<AddBtnProps> = ({ toastURL = '/account/#wishlist' }) => {
   }
 
   if (
-    data?.checkList?.inList !== true &&
+    data?.checkList &&
+    data.checkList.inList !== true &&
     productCheck[productId] === undefined &&
     wishListed.find(
       (item: any) => item.productId === productId && item.sku === sku

react/ProductSummaryWishlist.tsx

@@ -1,5 +1,5 @@
 import React, { useMemo, useState, useEffect, FC } from 'react'
-import { useLazyQuery } from 'react-apollo'
+import { useLazyQuery, useQuery } from 'react-apollo'
 // @ts-expect-error - useTreePath is a private API
 import { ExtensionPoint, useRuntime, useTreePath } from 'vtex.render-runtime'
 import { useListContext, ListContextProvider } from 'vtex.list-context'
@@ -14,6 +14,7 @@ import productsQuery from './queries/productById.gql'
 import ViewLists from './queries/viewLists.gql'
 import { getSession } from './modules/session'
 import storageFactory from './utils/storage'
+import profile from './queries/profile.gql'
 
 const localStore = storageFactory(() => sessionStorage)
 
@@ -73,11 +74,20 @@ const ProductSummaryList: FC<ProductSummaryProps> = ({
       fetchPolicy: 'network-only',
     }
   )
+  const { data: profileData } = useQuery(profile, {
+    ssr: false
+  })
 
   if (sessionResponse) {
     isAuthenticated =
       sessionResponse?.namespaces?.profile?.isAuthenticated?.value === 'true'
-    shopperId = sessionResponse?.namespaces?.profile?.email?.value ?? null
+
+    if (profileData) {
+      shopperId = profileData.profile.pii? sessionResponse?.namespaces?.profile?.id?.value : sessionResponse?.namespaces?.profile?.email?.value
+    }
+    else {
+      shopperId = null
+    }
 
     localStore.setItem(
       'wishlist_isAuthenticated',

react/WishlistAdmin.tsx

@@ -26,15 +26,15 @@ const WishlistAdmin: FC<any> = ({ intl }) => {
   const { loading } = state
 
   const downloadWishlist = (allWishlists: any) => {
-    const header = ['Email', 'Product ID', 'SKU', 'Title']
+    const header = ['Shopper ID', 'Product ID', 'SKU', 'Title']
     const data: any = []
 
     for (const shopper of allWishlists) {
       const wishlists = shopper.listItemsWrapper
       for (const wishlist of wishlists) {
         for (const wishlistItem of wishlist.listItems) {
           const shopperData = {
-            Email: shopper.email,
+            'Shopper ID': shopper.email,
             'Product ID': wishlistItem.productId,
             SKU: wishlistItem.sku,
             Title: wishlistItem.title,
@@ -108,7 +108,6 @@ const WishlistAdmin: FC<any> = ({ intl }) => {
 
   const GetAllWishlists = async () => {
     setState({ ...state, loading: true })
-    console.log(loading)
 
     if (!queryLoading) {
       const parsedData = data?.exportList
@@ -152,7 +151,6 @@ const WishlistAdmin: FC<any> = ({ intl }) => {
                 options={options}
                 value={selected1}
                 onChange={(event: any) => {
-                  console.log(event.target.value)
                   setSelected1(event.target.value)
                   setTimeout(()=>{refetch()},500)
 

react/queries/profile.gql

@@ -0,0 +1,5 @@
+query Profile {
+  profile @context(provider: "vtex.store-graphql") {
+    pii
+  }
+}