@W-16889880 - Complete Social Login Integration: Connect Backend API to UI

e2e/scripts/pageHelpers.js

@@ -91,6 +91,34 @@ export const navigateToPDPDesktop = async ({page}) => {
     await productTile.click();
 }
 
+/**
+ * Navigates to the `Cotton Turtleneck Sweater` PDP (Product Detail Page) on Desktop 
+ * with the black variant selected.
+ * 
+ * @param {Object} options.page - Object that represents a tab/window in the browser provided by playwright
+ */
+export const navigateToPDPDesktopSocial = async ({page, productName, productColor, productPrice}) => {
+    await page.goto(config.RETAIL_APP_HOME);
+
+    await page.getByRole("link", { name: "Womens" }).hover();
+    const topsNav = await page.getByRole("link", { name: "Tops", exact: true });
+    await expect(topsNav).toBeVisible();
+
+    await topsNav.click();
+
+    // PLP
+    const productTile = page.getByRole("link", {
+      name: RegExp(productName, 'i'),
+    });
+    // selecting swatch
+    const productTileImg = productTile.locator("img");
+    await productTileImg.waitFor({state: 'visible'})
+    await expect(productTile.getByText(RegExp(`From \\${productPrice}`, 'i'))).toBeVisible();
+
+    await productTile.getByLabel(RegExp(productColor, 'i'), { exact: true }).hover();
+    await productTile.click();
+}
+
 /**
  * Adds the `Cotton Turtleneck Sweater` product to the cart with the variant:
  * Color: Black
@@ -254,6 +282,43 @@ export const loginShopper = async ({page, userCredentials}) => {
     }
 }
 
+/**
+ * Attempts to log in a shopper with provided user credentials.
+ * 
+ * @param {Object} options.page - Object that represents a tab/window in the browser provided by playwright
+ * @return {Boolean} - denotes whether or not login was successful
+ */
+export const socialLoginShopper = async ({page}) => {
+    try {
+        await page.goto(config.RETAIL_APP_HOME + "/login");
+
+        await page.getByRole("button", { name: /Google/i }).click();
+        await expect(page.getByText(/Sign in with Google/i)).toBeVisible({ timeout: 10000 });
+        await page.waitForSelector('input[type="email"]');
+
+        // Fill in the email input
+        await page.fill('input[type="email"]', '[email protected]');
+        await page.click('#identifierNext');
+
+        await page.waitForLoadState();
+
+        // Fill in the password input
+        await page.fill('input[type="password"]', 'hpv_pek-JZK_xkz0wzf');
+        await page.click('#passwordNext');
+        await page.waitForLoadState();
+
+        await expect(page.getByRole("heading", { name: /Account Details/i })).toBeVisible({timeout: 20000})
+        await expect(page.getByText(/[email protected]/i)).toBeVisible()
+
+        // Password card should be hidden for social login user
+        await expect(page.getByRole("heading", { name: /Password/i })).toBeHidden()
+
+        return true;
+    } catch {
+        return false;
+    }
+}
+
 /**
  * Search for products by query string that takes you to the PLP
  * 

e2e/tests/desktop/registered-shopper.spec.js

@@ -14,6 +14,8 @@ const {
   validateWishlist,
   loginShopper,
   navigateToPDPDesktop,
+  navigateToPDPDesktopSocial,
+  socialLoginShopper,
 } = require("../../scripts/pageHelpers");
 const {
   generateUserCredentials,
@@ -165,3 +167,44 @@ test("Registered shopper can add item to wishlist", async ({ page }) => {
   // wishlist
   await validateWishlist({page})
 });
+
+/**
+ * Test that social login persists a user's shopping cart
+ */
+test("Registered shopper logged in through social retains persisted cart", async ({ page }) => {
+  navigateToPDPDesktopSocial({page, productName: "Floral Ruffle Top", productColor: "Cardinal Red Multi", productPrice: "£35.19"});
+
+  // Add to Cart
+  await expect(
+    page.getByRole("heading", { name: /Floral Ruffle Top/i })
+  ).toBeVisible({timeout: 15000});
+  await page.getByRole("radio", { name: "L", exact: true }).click();
+
+  await page.locator("button[data-testid='quantity-increment']").click();
+
+  // Selected Size and Color texts are broken into multiple elements on the page.
+  // So we need to look at the page URL to verify selected variants
+  const updatedPageURL = await page.url();
+  const params = updatedPageURL.split("?")[1];
+  expect(params).toMatch(/size=9LG/i);
+  expect(params).toMatch(/color=JJ9DFXX/i);
+  await page.getByRole("button", { name: /Add to Cart/i }).click();
+
+  const addedToCartModal = page.getByText(/2 items added to cart/i);
+
+  await addedToCartModal.waitFor();
+
+  await page.getByLabel("Close").click();
+
+  // Social Login
+  const isLoggedIn = await socialLoginShopper({
+    page
+  })
+
+  // Check Items in Cart
+  await page.getByLabel(/My cart/i).click();
+  await page.waitForLoadState();
+  await expect(
+    page.getByRole("link", { name: /Floral Ruffle Top/i })
+  ).toBeVisible();
+})

packages/commerce-sdk-react/src/auth/index.ts

@@ -92,6 +92,7 @@ type AuthDataKeys =
     | typeof DNT_COOKIE_NAME
     | typeof DWSID_COOKIE_NAME
     | 'code_verifier'
+    | 'uido'
 
 type AuthDataMap = Record<
     AuthDataKeys,
@@ -191,6 +192,10 @@ const DATA_MAP: AuthDataMap = {
     code_verifier: {
         storageType: 'local',
         key: 'code_verifier'
+    },
+    uido: {
+        storageType: 'local',
+        key: 'uido'
     }
 }
 
@@ -574,11 +579,13 @@ class Auth {
             responseValue,
             defaultValue
         )
+        const {uido} = this.parseSlasJWT(res.access_token)
         const expiresDate = this.convertSecondsToDate(refreshTokenTTLValue)
         this.set('refresh_token_expires_in', refreshTokenTTLValue.toString())
         this.set(refreshTokenKey, res.refresh_token, {
             expires: expiresDate
         })
+        this.set('uido', uido)
     }
 
     async refreshAccessToken() {
@@ -1030,7 +1037,7 @@ class Auth {
      *
      */
     async authorizeIDP(parameters: AuthorizeIDPParams) {
-        const redirectURI = this.redirectURI
+        const redirectURI = parameters.redirectURI || this.redirectURI
         const usid = this.get('usid')
         const {url, codeVerifier} = await helpers.authorizeIDP(
             this.client,
@@ -1056,7 +1063,7 @@ class Auth {
     async loginIDPUser(parameters: LoginIDPUserParams) {
         const codeVerifier = this.get('code_verifier')
         const code = parameters.code
-        const usid = parameters.usid
+        const usid = parameters.usid || this.get('usid')
         const redirectURI = parameters.redirectURI || this.redirectURI
 
         const token = await helpers.loginIDPUser(
@@ -1139,6 +1146,7 @@ class Auth {
         // ISB format
         // 'uido:ecom::upn:Guest||xxxEmailxxx::uidn:FirstName LastName::gcid:xxxGuestCustomerIdxxx::rcid:xxxRegisteredCustomerIdxxx::chid:xxxSiteIdxxx',
         const isbParts = isb.split('::')
+        const uido = isbParts[0].split('uido:')[1]
         const isGuest = isbParts[1] === 'upn:Guest'
         const customerId = isGuest
             ? isbParts[3].replace('gcid:', '')
@@ -1159,7 +1167,8 @@ class Auth {
             dnt,
             loginId,
             isAgent,
-            agentId
+            agentId,
+            uido
         }
     }
 }

packages/commerce-sdk-react/src/hooks/useCustomerType.ts

@@ -15,6 +15,7 @@ type useCustomerType = {
     customerType: CustomerType
     isGuest: boolean
     isRegistered: boolean
+    uido: string | null
 }
 
 /**
@@ -50,10 +51,16 @@ const useCustomerType = (): useCustomerType => {
         customerType = null
     }
 
+    const uido: string | null = onClient
+        ? // eslint-disable-next-line react-hooks/rules-of-hooks
+          useLocalStorage(`uido_${config.siteId}`)
+        : auth.get('uido')
+
     return {
         customerType,
         isGuest,
-        isRegistered
+        isRegistered,
+        uido
     }
 }
 

packages/template-retail-react-app/app/components/forms/profile-fields.jsx

@@ -6,15 +6,21 @@
  */
 import React from 'react'
 import PropTypes from 'prop-types'
+import {FormattedMessage, defineMessage, useIntl} from 'react-intl'
 import {SimpleGrid, Stack} from '@salesforce/retail-react-app/app/components/shared/ui'
 import useProfileFields from '@salesforce/retail-react-app/app/components/forms/useProfileFields'
 import Field from '@salesforce/retail-react-app/app/components/field'
 
 const ProfileFields = ({form, prefix = ''}) => {
     const fields = useProfileFields({form, prefix})
+    const intl = useIntl()
+    const formTitleAriaLabel = defineMessage({
+        defaultMessage: 'Profile Form',
+        id: 'profile_fields.label.profile_form'
+    })
 
     return (
-        <Stack spacing={5}>
+        <Stack spacing={5} aria-label={intl.formatMessage(formTitleAriaLabel)}>
             <SimpleGrid columns={[1, 1, 1, 2]} spacing={5}>
                 <Field {...fields.firstName} />
                 <Field {...fields.lastName} />

packages/template-retail-react-app/app/components/login/index.jsx

@@ -22,7 +22,8 @@ const LoginForm = ({
     form,
     isPasswordlessEnabled = false,
     isSocialEnabled = false,
-    idps = []
+    idps = [],
+    setLoginType
 }) => {
     return (
         <Fragment>
@@ -56,6 +57,7 @@ const LoginForm = ({
                             handlePasswordlessLoginClick={handlePasswordlessLoginClick}
                             isSocialEnabled={isSocialEnabled}
                             idps={idps}
+                            setLoginType={setLoginType}
                         />
                     ) : (
                         <StandardLogin
@@ -94,7 +96,8 @@ LoginForm.propTypes = {
     form: PropTypes.object,
     isPasswordlessEnabled: PropTypes.bool,
     isSocialEnabled: PropTypes.bool,
-    idps: PropTypes.arrayOf(PropTypes.string)
+    idps: PropTypes.arrayOf(PropTypes.string),
+    setLoginType: PropTypes.func
 }
 
 export default LoginForm

packages/template-retail-react-app/app/components/passwordless-login/index.jsx

@@ -18,11 +18,13 @@ const PasswordlessLogin = ({
     handleForgotPasswordClick,
     handlePasswordlessLoginClick,
     isSocialEnabled = false,
-    idps = []
+    idps = [],
+    setLoginType
 }) => {
     const [showPasswordView, setShowPasswordView] = useState(false)
 
     const handlePasswordButton = async (e) => {
+        setLoginType('password')
         const isValid = await form.trigger()
         // Manually trigger the browser native form validations
         const domForm = e.target.closest('form')
@@ -95,7 +97,8 @@ PasswordlessLogin.propTypes = {
     handlePasswordlessLoginClick: PropTypes.func,
     isSocialEnabled: PropTypes.bool,
     idps: PropTypes.arrayOf(PropTypes.string),
-    hideEmail: PropTypes.bool
+    hideEmail: PropTypes.bool,
+    setLoginType: PropTypes.func
 }
 
 export default PasswordlessLogin

packages/template-retail-react-app/app/components/social-login/index.jsx

@@ -10,6 +10,10 @@ import PropTypes from 'prop-types'
 import {defineMessage, useIntl} from 'react-intl'
 import {Button} from '@salesforce/retail-react-app/app/components/shared/ui'
 import logger from '@salesforce/retail-react-app/app/utils/logger-instance'
+import {useAuthHelper, AuthHelpers} from '@salesforce/commerce-sdk-react'
+import {getConfig} from '@salesforce/pwa-kit-runtime/utils/ssr-config'
+import {useAppOrigin} from '@salesforce/retail-react-app/app/hooks/use-app-origin'
+import {setSessionJSONItem, buildRedirectURI} from '@salesforce/retail-react-app/app/utils/utils'
 
 // Icons
 import {AppleIcon, GoogleIcon} from '@salesforce/retail-react-app/app/components/icons'
@@ -38,6 +42,12 @@ const IDP_CONFIG = {
  */
 const SocialLogin = ({idps}) => {
     const {formatMessage} = useIntl()
+    const authorizeIDP = useAuthHelper(AuthHelpers.AuthorizeIDP)
+
+    // Build redirectURI from config values
+    const appOrigin = useAppOrigin()
+    const redirectPath = getConfig().app.login.social?.redirectURI || ''
+    const redirectURI = buildRedirectURI(appOrigin, redirectPath)
 
     const isIdpValid = (name) => {
         return name in IDP_CONFIG && IDP_CONFIG[name.toLowerCase()]
@@ -64,17 +74,20 @@ const SocialLogin = ({idps}) => {
                         const config = IDP_CONFIG[name.toLowerCase()]
                         const Icon = config?.icon
                         const message = formatMessage(config?.message)
-
                         return (
                             config && (
                                 <Button
-                                    onClick={() => {
-                                        alert(message)
+                                    onClick={async () => {
+                                        // Save the path where the user logged in
+                                        setSessionJSONItem('returnToPage', window.location.pathname)
+                                        await authorizeIDP.mutateAsync({
+                                            hint: name,
+                                            redirectURI: redirectURI
+                                        })
                                     }}
                                     borderColor="gray.500"
                                     color="blue.600"
                                     variant="outline"
-                                    key={`${name}-button`}
                                 >
                                     <Icon sx={{marginRight: 2}} />
                                     {message}
@@ -88,7 +101,8 @@ const SocialLogin = ({idps}) => {
 }
 
 SocialLogin.propTypes = {
-    idps: PropTypes.arrayOf(PropTypes.string)
+    idps: PropTypes.arrayOf(PropTypes.string),
+    redirectURI: PropTypes.string
 }
 
 export default SocialLogin

packages/template-retail-react-app/app/components/toggle-card/index.jsx

@@ -28,6 +28,7 @@ export const ToggleCard = ({
     title,
     editing,
     disabled,
+    disableEdit,
     onEdit,
     editLabel,
     isLoading,
@@ -63,7 +64,7 @@ export const ToggleCard = ({
                         >
                             {title}
                         </Heading>
-                        {!editing && !disabled && onEdit && (
+                        {!editing && !disabled && onEdit && !disableEdit && (
                             <Button
                                 variant="link"
                                 size="sm"
@@ -105,6 +106,7 @@ ToggleCard.propTypes = {
     editing: PropTypes.bool,
     isLoading: PropTypes.bool,
     disabled: PropTypes.bool,
+    disableEdit: PropTypes.bool,
     onEdit: PropTypes.func,
     children: PropTypes.any
 }