From 97b589e944eb1f50c057242ccf695cb2a6edfc9f Mon Sep 17 00:00:00 2001 From: Ben Chypak Date: Thu, 9 Mar 2023 11:38:39 -0800 Subject: [PATCH 1/6] Update merge logic --- .../app/commerce-api/hooks/useCustomer.js | 12 ++++++++++++ .../app/commerce-api/hooks/useShopper.js | 11 +++++++++-- 2 files changed, 21 insertions(+), 2 deletions(-) diff --git a/packages/template-retail-react-app/app/commerce-api/hooks/useCustomer.js b/packages/template-retail-react-app/app/commerce-api/hooks/useCustomer.js index 4404d86260..f5203763ac 100644 --- a/packages/template-retail-react-app/app/commerce-api/hooks/useCustomer.js +++ b/packages/template-retail-react-app/app/commerce-api/hooks/useCustomer.js @@ -10,6 +10,8 @@ import {useCommerceAPI, CustomerContext} from '../contexts' const AuthTypes = Object.freeze({GUEST: 'guest', REGISTERED: 'registered'}) +const REGISTRATION_GRACE_PERIOD = 2 * 1000 // 2 seconds in milliseconds + export default function useCustomer() { const api = useCommerceAPI() const {customer, setCustomer} = useContext(CustomerContext) @@ -39,6 +41,16 @@ export default function useCustomer() { return customer?.authType === AuthTypes.GUEST }, + /** + * Returns if this customer is newly registered. + */ + get isNewlyRegistered() { + if (!customer || customer.authType !== 'registered') return false + const lastLoginTimeDate = new Date(Date.parse(customer.lastLoginTime)) + const creationDate = new Date(Date.parse(customer.creationDate)) + return lastLoginTimeDate - creationDate < REGISTRATION_GRACE_PERIOD + }, + /** Returns the customer's saved addresses with the 'preferred' address in the first index */ get addresses() { if (!customer?.addresses) { diff --git a/packages/template-retail-react-app/app/commerce-api/hooks/useShopper.js b/packages/template-retail-react-app/app/commerce-api/hooks/useShopper.js index 2bee91a771..b972ccef11 100644 --- a/packages/template-retail-react-app/app/commerce-api/hooks/useShopper.js +++ b/packages/template-retail-react-app/app/commerce-api/hooks/useShopper.js @@ -58,9 +58,16 @@ const useShopper = (opts = {}) => { } }, [customer.authType, basket.loaded]) - // Call merge basket whenever user type changes from guest to registered + // Call merge basket. useEffect(() => { - if (customer.authType === 'registered') { + // Only call merge when there are items in the guest basket and you are + // a returning customer. + const shouldMerge = + customer.authType === 'registered' && + !customer.isNewlyRegistered && + basket.itemCount > 0 + + if (shouldMerge) { basket.mergeBasket() } }, [customer.authType]) From 56b61c31a407deebc2d151352caff93828b5f8f6 Mon Sep 17 00:00:00 2001 From: Ben Chypak Date: Thu, 9 Mar 2023 11:54:12 -0800 Subject: [PATCH 2/6] Update CHANGELOG.md --- packages/template-retail-react-app/CHANGELOG.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/template-retail-react-app/CHANGELOG.md b/packages/template-retail-react-app/CHANGELOG.md index b0c6e67541..afcbab3e98 100644 --- a/packages/template-retail-react-app/CHANGELOG.md +++ b/packages/template-retail-react-app/CHANGELOG.md @@ -1,3 +1,6 @@ +## v2.8.0-dev (Mar 03, 2023) +- Make `mergeBasket` conditional more robust [#1048](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/1048) + ## v2.7.0 (Mar 03, 2023) - Add Page Designer ImageTile component [#967](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/967) - Add Page Designer ImageWithText component [#991](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/991) From d2c11a02914d25205636c56906e8152223763c0f Mon Sep 17 00:00:00 2001 From: Ben Chypak Date: Thu, 9 Mar 2023 12:42:48 -0800 Subject: [PATCH 3/6] Lint --- .../app/commerce-api/hooks/useShopper.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/template-retail-react-app/app/commerce-api/hooks/useShopper.js b/packages/template-retail-react-app/app/commerce-api/hooks/useShopper.js index b972ccef11..709d131349 100644 --- a/packages/template-retail-react-app/app/commerce-api/hooks/useShopper.js +++ b/packages/template-retail-react-app/app/commerce-api/hooks/useShopper.js @@ -62,9 +62,9 @@ const useShopper = (opts = {}) => { useEffect(() => { // Only call merge when there are items in the guest basket and you are // a returning customer. - const shouldMerge = - customer.authType === 'registered' && - !customer.isNewlyRegistered && + const shouldMerge = + customer.authType === 'registered' && + !customer.isNewlyRegistered && basket.itemCount > 0 if (shouldMerge) { From 57958a82dec8f3e33e61aec890405bdf2e1b2c68 Mon Sep 17 00:00:00 2001 From: Ben Chypak Date: Fri, 10 Mar 2023 12:46:29 -0800 Subject: [PATCH 4/6] PR feedback --- .../app/commerce-api/hooks/useCustomer.js | 6 +++--- .../app/commerce-api/hooks/useShopper.js | 7 ++++++- 2 files changed, 9 insertions(+), 4 deletions(-) diff --git a/packages/template-retail-react-app/app/commerce-api/hooks/useCustomer.js b/packages/template-retail-react-app/app/commerce-api/hooks/useCustomer.js index f5203763ac..360b8aa46a 100644 --- a/packages/template-retail-react-app/app/commerce-api/hooks/useCustomer.js +++ b/packages/template-retail-react-app/app/commerce-api/hooks/useCustomer.js @@ -46,9 +46,9 @@ export default function useCustomer() { */ get isNewlyRegistered() { if (!customer || customer.authType !== 'registered') return false - const lastLoginTimeDate = new Date(Date.parse(customer.lastLoginTime)) - const creationDate = new Date(Date.parse(customer.creationDate)) - return lastLoginTimeDate - creationDate < REGISTRATION_GRACE_PERIOD + const lastLoginTimeStamp = Date.parse(customer.lastLoginTime) + const creationTimeStamp = Date.parse(customer.creationDate) + return lastLoginTimeStamp - creationTimeStamp < REGISTRATION_GRACE_PERIOD }, /** Returns the customer's saved addresses with the 'preferred' address in the first index */ diff --git a/packages/template-retail-react-app/app/commerce-api/hooks/useShopper.js b/packages/template-retail-react-app/app/commerce-api/hooks/useShopper.js index 709d131349..a1a8f09fb7 100644 --- a/packages/template-retail-react-app/app/commerce-api/hooks/useShopper.js +++ b/packages/template-retail-react-app/app/commerce-api/hooks/useShopper.js @@ -4,7 +4,7 @@ * SPDX-License-Identifier: BSD-3-Clause * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause */ -import {useEffect} from 'react' +import {useEffect, useRef} from 'react' import useBasket from './useBasket' import useCustomer from './useCustomer' @@ -17,6 +17,7 @@ const useShopper = (opts = {}) => { const {currency} = opts const customer = useCustomer() const basket = useBasket({currency}) + const prevAuthType = useRef() // Create or restore the user session upon mounting useEffect(() => { @@ -64,12 +65,16 @@ const useShopper = (opts = {}) => { // a returning customer. const shouldMerge = customer.authType === 'registered' && + prevAuthType.current === 'guest' && !customer.isNewlyRegistered && basket.itemCount > 0 if (shouldMerge) { basket.mergeBasket() } + + // Update the current `authType` value. + prevAuthType.current = customer.authType }, [customer.authType]) useEffect(() => { From d6c475f8680e1eca79982999e3ffc7d8f782f7d3 Mon Sep 17 00:00:00 2001 From: Ben Chypak Date: Fri, 10 Mar 2023 13:00:23 -0800 Subject: [PATCH 5/6] Rename isNewlyRegisters to isNew for simplicity --- .../app/commerce-api/hooks/useCustomer.js | 10 +++++++--- .../app/commerce-api/hooks/useShopper.js | 2 +- 2 files changed, 8 insertions(+), 4 deletions(-) diff --git a/packages/template-retail-react-app/app/commerce-api/hooks/useCustomer.js b/packages/template-retail-react-app/app/commerce-api/hooks/useCustomer.js index 360b8aa46a..f012b291f6 100644 --- a/packages/template-retail-react-app/app/commerce-api/hooks/useCustomer.js +++ b/packages/template-retail-react-app/app/commerce-api/hooks/useCustomer.js @@ -10,7 +10,11 @@ import {useCommerceAPI, CustomerContext} from '../contexts' const AuthTypes = Object.freeze({GUEST: 'guest', REGISTERED: 'registered'}) -const REGISTRATION_GRACE_PERIOD = 2 * 1000 // 2 seconds in milliseconds +// This value represents the max age in milliseconds a customer can be before they are +// no longer considered a "new" customer. +// E.g. If a customers creation date is older than 2 seconds it will no longer be considered +// a new customer. +const NEW_CUSTOMER_MAX_AGE = 2 * 1000 // 2 seconds in milliseconds export default function useCustomer() { const api = useCommerceAPI() @@ -44,11 +48,11 @@ export default function useCustomer() { /** * Returns if this customer is newly registered. */ - get isNewlyRegistered() { + get isNew() { if (!customer || customer.authType !== 'registered') return false const lastLoginTimeStamp = Date.parse(customer.lastLoginTime) const creationTimeStamp = Date.parse(customer.creationDate) - return lastLoginTimeStamp - creationTimeStamp < REGISTRATION_GRACE_PERIOD + return lastLoginTimeStamp - creationTimeStamp < NEW_CUSTOMER_MAX_AGE }, /** Returns the customer's saved addresses with the 'preferred' address in the first index */ diff --git a/packages/template-retail-react-app/app/commerce-api/hooks/useShopper.js b/packages/template-retail-react-app/app/commerce-api/hooks/useShopper.js index a1a8f09fb7..7cafb76857 100644 --- a/packages/template-retail-react-app/app/commerce-api/hooks/useShopper.js +++ b/packages/template-retail-react-app/app/commerce-api/hooks/useShopper.js @@ -66,7 +66,7 @@ const useShopper = (opts = {}) => { const shouldMerge = customer.authType === 'registered' && prevAuthType.current === 'guest' && - !customer.isNewlyRegistered && + !customer.isNew && basket.itemCount > 0 if (shouldMerge) { From f6e73f48b024e957271480b28074cef8ea95eb3d Mon Sep 17 00:00:00 2001 From: Ben Chypak Date: Fri, 10 Mar 2023 13:35:57 -0800 Subject: [PATCH 6/6] Lint --- .../app/commerce-api/hooks/useCustomer.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/template-retail-react-app/app/commerce-api/hooks/useCustomer.js b/packages/template-retail-react-app/app/commerce-api/hooks/useCustomer.js index f012b291f6..ac016a0757 100644 --- a/packages/template-retail-react-app/app/commerce-api/hooks/useCustomer.js +++ b/packages/template-retail-react-app/app/commerce-api/hooks/useCustomer.js @@ -11,7 +11,7 @@ import {useCommerceAPI, CustomerContext} from '../contexts' const AuthTypes = Object.freeze({GUEST: 'guest', REGISTERED: 'registered'}) // This value represents the max age in milliseconds a customer can be before they are -// no longer considered a "new" customer. +// no longer considered a "new" customer. // E.g. If a customers creation date is older than 2 seconds it will no longer be considered // a new customer. const NEW_CUSTOMER_MAX_AGE = 2 * 1000 // 2 seconds in milliseconds