attending feedback

WPMedia · Jul 25, 2024 · 00ee42e · 00ee42e
1 parent 661736a
commit 00ee42e
Show file tree

Hide file tree

Showing 31 changed files with 716 additions and 353 deletions.
diff --git a/.storybook/themes/news.scss b/.storybook/themes/news.scss
@@ -257,6 +257,68 @@
 					"padding-inline-start": var(--global-spacing-4),
 					"padding-inline-end": var(--global-spacing-4)
 				),
+				"account-management-social-signon-edit": (
+					"align-items": center,
+					"border-color": var(--border-color),
+					"border-radius": var(--border-radius),
+					"border-style": var(--global-border-style-1),
+					"border-width": var(--global-border-width-1),
+					"display": flex,
+					"justify-content": space-between,
+					"margin-block-end": var(--global-spacing-2),
+					"padding-block-start": var(--global-spacing-4),
+					"padding-block-end": var(--global-spacing-4),
+					"padding-inline-start": var(--global-spacing-4),
+					"padding-inline-end": var(--global-spacing-4),
+					"min-width": 280px
+				),
+				"account-management-social-signon-identity": (
+					"display": "flex",
+					"components": (
+						"icon": (
+							"margin-inline-end": var(--global-spacing-2)
+						)
+					)
+				),
+				"account-management-social-signon-button-connect": (
+					"background-color": var(--global-black)
+				),
+				"account-management-social-signon-button-disconnect": (
+					"color": var(--global-black),
+					"border-color": var(--global-black)
+				),
+				"account-management-social-signon-button-connected": (
+					"position": absolute,
+					"transform": translatey(175%),
+					"background": var(--global-white),
+					"font-size": var(--global-font-size-3),
+					"padding-inline-end": var(--global-spacing-1),
+					"color": var(--global-green-5),
+					"components": (
+						"icon": (
+							"margin-inline-start": var(--global-spacing-1),
+							"margin-inline-end": var(--global-spacing-1),
+							"fill": var(--global-green-5),
+							"block-size": var(--global-spacing-4),
+							"inline-size": var(--global-spacing-4)
+						)
+					)
+				),
+				"account-management-social-signon-identities-error": (
+					"font-family": "var(--font-family-primary)",
+					"margin-block-end": "var(--global-spacing-4)",
+					"components": (
+						"paragraph": (
+							"background-color": "var(--status-color-danger-subtle)",
+							"color": "var(--status-color-danger)",
+							"padding-block-end": "var(--global-spacing-1)",
+							"padding-block-start": "var(--global-spacing-1)",
+							"padding-inline-start": "var(--global-spacing-2)",
+							"padding-inline-end": "var(--global-spacing-2)"
+						)
+					)
+					"desktop": ()
+				),
 				"ads-block": (
 					"components": (
 						"paragraph": (
@@ -3580,6 +3642,60 @@
 						)
 					)
 				),
+				"social-sign-on-button-container-apple-custom": (
+					"inline-size": 100%
+					"desktop": ()
+				)
+				"social-sign-on-button-container-facebook": (
+					"justify-content": center,
+					"border-block-start-width": 1px,
+					"border-block-end-width": 1px,
+					"border-inline-start-width": 1px,
+					"border-inline-end-width": 1px,
+					"border-block-start-color": var(--border-color),
+					"border-block-end-color": var(--border-color),
+					"border-inline-start-color": var(--border-color),
+					"border-inline-end-color": var(--border-color),
+					"border-radius": var(--global-spacing-1),
+					"color": var(--text-color),
+					"font-weight": var(--global-font-weight-7),
+					"font-family": var(--font-family-primary),
+					"inline-size": 100%,
+					"components": (
+						"button-secondary-reverse-hover": (
+							color": "var(--text-color)
+						),
+						"icon": (
+							"fill": #4285F4
+						)
+					)
+					"desktop": ()
+				),
+				"social-sign-on-button-container-google": (
+					"justify-content": center,
+					"border-block-start-width": 1px,
+					"border-block-end-width": 1px,
+					"border-inline-start-width": 1px,
+					"border-inline-end-width": 1px,
+					"border-block-start-color": var(--border-color),
+					"border-block-end-color": var(--border-color),
+					"border-inline-start-color": var(--border-color),
+					"border-inline-end-color": var(--border-color),
+					"border-radius": var(--global-spacing-1),
+					"color": var(--text-color),
+					"font-weight": var(--global-font-weight-7),
+					"font-family": var(--font-family-primary),
+					"inline-size": 100%,
+					"components": (
+						"button-secondary-reverse-hover": (
+							"color": var(--text-color)
+						),
+						"icon": (
+							"fill": #4285F4
+						)
+					)
+				"desktop": ()
+				),
 				"social-sign-on-dividerWithText": (
 					"display": flex,
 					"align-items": center,

diff --git a/blocks/identity-block/components/social-sign-on/_children/FacebookSignIn.jsx b/blocks/identity-block/components/social-sign-on/_children/FacebookSignIn.jsx
@@ -10,21 +10,14 @@ function FacebookSignIn({ customButtons, socialSignOnIn, className }) {
 	const phrases = usePhrases();
 	const facebookTextType = socialSignOnIn === SIGN_UP ? "continue_with" : "login_with";
 
-	useEffect(() => {
-		if (customButtons) {
-			document
-				.getElementById("facebook-btn")
-				.addEventListener("click", () => window.onFacebookSignOn());
-		}
-	}, [customButtons]);
-
 	if (customButtons) {
 		return (
 			<Button
 				id="facebook-btn"
 				variant="secondary-reverse"
 				iconLeft={FacebookIcon}
 				className={`${className}__Facebook`}
+				onClick={() => window?.onFacebookSignOn()}
 			>
 				{socialSignOnIn !== SIGN_UP ? (
 					<span>{phrases.t("identity-block.social-signOn-facebook-login")}</span>

diff --git a/blocks/identity-block/components/social-sign-on/_children/GoogleSignIn.jsx b/blocks/identity-block/components/social-sign-on/_children/GoogleSignIn.jsx
@@ -10,31 +10,26 @@ function GoogleSignIn({ customButtons, socialSignOnIn, className }) {
 	const phrases = usePhrases();
 	const googleNotification = phrases.t("identity-block.social-google-one-tap-notification");
 
-	useEffect(() => {
-		if (customButtons) {
-			document.getElementById("custom-google-signin-btn").addEventListener("click", () =>
-				window.google.accounts.id.prompt((notification) => {
-					if (notification.isSkippedMoment()) {
-						// https://developers.google.com/identity/gsi/web/reference/js-reference
-						// https://developers.google.com/identity/gsi/web/guides/features#exponential_cooldown
-						// eslint-disable-next-line
-						alert(googleNotification);
-						// Remove cookie works in Safari
-						document.cookie = `g_state=;path=/;expires=Thu, 01 Jan 1970 00:00:01 GMT`;
-						window.google.accounts.id.prompt();
-					}
-				}),
-			);
-		}
-	}, [customButtons, googleNotification]);
-
 	if (customButtons) {
 		return (
 			<Button
 				id="custom-google-signin-btn"
 				variant="secondary-reverse"
 				iconLeft={GoogleIcon}
 				className={`${className}__Google`}
+				onClick={() =>
+					window.google.accounts.id.prompt((notification) => {
+						if (notification.isSkippedMoment()) {
+							// https://developers.google.com/identity/gsi/web/reference/js-reference
+							// https://developers.google.com/identity/gsi/web/guides/features#exponential_cooldown
+							// eslint-disable-next-line
+							alert(googleNotification);
+							// Remove cookie works in Safari
+							document.cookie = `g_state=;path=/;expires=Thu, 01 Jan 1970 00:00:01 GMT`;
+							window.google.accounts.id.prompt();
+						}
+					})
+				}
 			>
 				{socialSignOnIn !== SIGN_UP ? (
 					<span>{phrases.t("identity-block.social-signOn-google-login")}</span>

diff --git a/blocks/identity-block/components/social-sign-on/utils/useSocialSignIn.js b/blocks/identity-block/components/social-sign-on/utils/useSocialSignIn.js
@@ -38,8 +38,7 @@ function useSocialSignIn(
 				} else if (fromSocialSignOnBlock) {
 					Identity.isLoggedIn().then((isLoggedIn) => {
 						if (isLoggedIn) {
-							const validatedURL = validateURL(redirectURL);
-							window.location = validatedURL;
+							window.location = validateURL(redirectURL);
 						}
 					});
 				}
@@ -135,20 +134,21 @@ function useSocialSignIn(
 
 	useEffect(() => {
 		const checkIsLoggedIn = () => {
-			setTimeout(() => {
+			const timeout = setTimeout(() => {
 				Identity.isLoggedIn().then((isLoggedIn) => {
 					if (isLoggedIn) {
-						const validatedURL = validateURL(redirectURL);
-						window.location = validatedURL;
+						window.location = validateURL(redirectURL);
 					}
 				});
 			}, 1500);
+  			return () => clearTimeout(timeout)
 		};
 
 		const setIdentityUpdated = () => {
-			setTimeout(() => {
+			const timeout = setTimeout(() => {
 				setUpdateIdentities((prev) => !prev);
 			}, 1500);
+			return () => clearTimeout(timeout)
 		};
 
 		if (customButtons && isFBInitialized && !isFBEventSubscribed && window?.FB?.Event) {
@@ -174,6 +174,11 @@ function useSocialSignIn(
 		redirectURL,
 	]);
 
+
+
+
+
+
 	return {
 		// if facebook and google setup with subs,
 		// then they will have a truthy value here

diff --git a/...ks/identity-block/features/account-management/_children/SocialSignOnEditableContainer.jsx b/...ks/identity-block/features/account-management/_children/SocialSignOnEditableContainer.jsx
@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import React, { useCallback } from "react";
 
 import { Button, usePhrases, Icon, useIdentity } from "@wpmedia/arc-themes-components";
 
@@ -14,50 +14,31 @@ function SocialSignOnEditableFieldContainer({
 
 	const googleNotification = phrases.t("identity-block.social-google-one-tap-notification");
 
-	const connectedText = phrases.t("identity-block.connected-identity");
+	const connectedText = phrases.t("identity-block.connect-account");
 	const connectText = phrases.t("identity-block.connect-identity");
 	const disconnectText = phrases.t("identity-block.disconnect-account");
 
-	useEffect(() => {
-		if (type === "Google" && !isConnected) {
-			const attachEventListener = () =>
-				document.getElementById("custom-Google-signin-btn").addEventListener("click", () =>
-					window.google.accounts.id.prompt((notification) => {
-						if (notification.isNotDisplayed() || notification.isSkippedMoment()) {
-							// https://developers.google.com/identity/gsi/web/reference/js-reference
-							// https://developers.google.com/identity/gsi/web/guides/features#exponential_cooldown
-							// eslint-disable-next-line
-							alert(googleNotification);
-							// Remove cookie works in Safari
-							document.cookie =  `g_state=;path=/;expires=Thu, 01 Jan 1970 00:00:01 GMT`;
-							window.google.accounts.id.prompt();
-						}
-					}),
-				);
-			setTimeout(() => attachEventListener(), 0);
-		}
-	}, [type, isConnected, googleNotification]);
-
-	useEffect(() => {
-		if (type === "Facebook" && !isConnected) {
-			const attachEventListener = () =>
-				document.getElementById("custom-Facebook-signin-btn").addEventListener("click", () => {
-					window.onFacebookSignOn();
+	const onConnectIdentity = useCallback((type) => {
+		switch (type) {
+			case "Google":
+				window.google.accounts.id.prompt((notification) => {
+					if (notification.isNotDisplayed() || notification.isSkippedMoment()) {
+						alert(googleNotification);
+						document.cookie = "g_state=;path=/;expires=Thu, 01 Jan 1970 00:00:01 GMT";
+						window.google.accounts.id.prompt();
+					}
 				});
-			setTimeout(() => attachEventListener(), 0);
-		}
-	}, [type, isConnected]);
-
-	useEffect(() => {
-		if (type === "Apple" && !isConnected) {
-			const attachEventListener = () => {
-				document
-					.getElementById("custom-Apple-signin-btn")
-					.addEventListener("click", () => Identity.initAppleSignOn());
-			};
-			setTimeout(() => attachEventListener(), 0);
+				break;
+			case "Facebook":
+				window.onFacebookSignOn();
+				break;
+			case "Apple":
+				Identity.initAppleSignOn();
+				break;
+			default:
+				break;
 		}
-	}, [type, isConnected, Identity]);
+	}, [googleNotification, Identity]);
 
 	return (
 		<div className={`${blockClassName}__social-signOn-edit`}>
@@ -81,6 +62,7 @@ function SocialSignOnEditableFieldContainer({
 					className={`${blockClassName}__social-signOn-button-connect`}
 					size="medium"
 					variant="primary"
+					onClick={() => onConnectIdentity(type)}
 				>
 					{connectText}
 				</Button>