fixing issues

WPMedia · Jul 26, 2024 · 7566236 · 7566236
1 parent 00ee42e
commit 7566236
Show file tree

Hide file tree

Showing 5 changed files with 77 additions and 23 deletions.
diff --git a/.storybook/themes/news.scss b/.storybook/themes/news.scss
@@ -273,7 +273,7 @@
 					"min-width": 280px
 				),
 				"account-management-social-signon-identity": (
-					"display": "flex",
+					"display": flex,
 					"components": (
 						"icon": (
 							"margin-inline-end": var(--global-spacing-2)
@@ -305,19 +305,18 @@
 					)
 				),
 				"account-management-social-signon-identities-error": (
-					"font-family": "var(--font-family-primary)",
-					"margin-block-end": "var(--global-spacing-4)",
+					"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)"
+							"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": (
@@ -3644,7 +3643,6 @@
 				),
 				"social-sign-on-button-container-apple-custom": (
 					"inline-size": 100%
-					"desktop": ()
 				)
 				"social-sign-on-button-container-facebook": (
 					"justify-content": center,
@@ -3663,13 +3661,12 @@
 					"inline-size": 100%,
 					"components": (
 						"button-secondary-reverse-hover": (
-							color": "var(--text-color)
+							"color": var(--text-color)
 						),
 						"icon": (
 							"fill": #4285F4
 						)
 					)
-					"desktop": ()
 				),
 				"social-sign-on-button-container-google": (
 					"justify-content": 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
@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import React from "react";
 
 import { Button, Icon, usePhrases } from "@wpmedia/arc-themes-components";
 

diff --git a/blocks/identity-block/components/social-sign-on/_children/GoogleSignIn.jsx b/blocks/identity-block/components/social-sign-on/_children/GoogleSignIn.jsx
@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import React from "react";
 
 import { Button, Icon, usePhrases } from "@wpmedia/arc-themes-components";
 

diff --git a/blocks/identity-block/components/social-sign-on/index.test.jsx b/blocks/identity-block/components/social-sign-on/index.test.jsx
@@ -33,12 +33,13 @@ describe("Identity Social Login Component", () => {
 				<SocialSignOn />
 			</GoogleSignInProvider>,
 		);
-		// don't render any facebook stuff, only show wrapper
-		const genericElements = screen.getAllByRole("generic");
-		expect(genericElements.length).toBe(1);
+		// don't render any button
+		expect(screen.queryByTestId('fb-login-button')).not.toBeInTheDocument();
+		expect(screen.queryByTestId('google-sign-in-button')).not.toBeInTheDocument(); 
+		expect(screen.queryByTestId('apple-btn')).not.toBeInTheDocument();
 	});
 
-	it("renders only Google button", () => {
+	it("renders only Google (default) button", () => {
 		useIdentity.mockImplementation(() => ({
 			isInitialized: true,
 			isLoggedIn: () => false,
@@ -69,7 +70,38 @@ describe("Identity Social Login Component", () => {
 		expect(screen.queryByTestId('fb-login-button')).not.toBeInTheDocument();
 	});
 
-	it("renders only Facebook button", () => {
+	it("renders only Google (custom) button", () => {
+		useIdentity.mockImplementation(() => ({
+			isInitialized: true,
+			isLoggedIn: () => false,
+			Identity: {
+				configOptions: {
+					googleClientId: true,
+					facebookAppId: false,
+				},
+				initFacebookLogin: () => {},
+				initializeFacebook: () => {},
+			},
+		}));
+		usePhrases.mockImplementation(() => ({
+			t: jest
+				.fn()
+				.mockReturnValue(
+					"Sign-in prompt was suppressed by the user or dismissed. Please try again later or use another sign-in method.",
+				),
+		}));
+
+		render(
+			<GoogleSignInProvider>
+				<SocialSignOn onError={() => null} redirectURL="#" customButtons={true} />
+			</GoogleSignInProvider>,
+		);
+
+		expect(screen.getByTestId('custom-google-signin-btn')).toBeInTheDocument();
+		expect(screen.queryByTestId('fb-login-button')).not.toBeInTheDocument();
+	});
+
+	it("renders only Facebook (default) button", () => {
 		useIdentity.mockImplementation(() => ({
 			isInitialized: true,
 			isLoggedIn: () => false,
@@ -93,6 +125,30 @@ describe("Identity Social Login Component", () => {
 		expect(screen.queryByTestId('google-sign-in-button')).not.toBeInTheDocument();
 	});
 
+	it("renders only Facebook (custom) button", () => {
+		useIdentity.mockImplementation(() => ({
+			isInitialized: true,
+			isLoggedIn: () => false,
+			Identity: {
+				configOptions: {
+					googleClientId: false,
+					facebookAppId: true,
+				},
+				initFacebookLogin: () => {},
+				initializeFacebook: () => {},
+			},
+		}));
+
+		render(
+			<GoogleSignInProvider>
+				<SocialSignOn onError={() => null} redirectURL="#" customButtons={true} />
+			</GoogleSignInProvider>,
+		);
+
+		expect(screen.getByTestId('facebook-btn')).toBeInTheDocument();
+		expect(screen.queryByTestId('google-sign-in-button')).not.toBeInTheDocument();
+	});
+
 	it("renders", () => {
 		useIdentity.mockImplementation(() => ({
 			isInitialized: true,

diff --git a/...ks/identity-block/features/account-management/_children/SocialSignOnEditableContainer.jsx b/...ks/identity-block/features/account-management/_children/SocialSignOnEditableContainer.jsx
@@ -18,11 +18,12 @@ function SocialSignOnEditableFieldContainer({
 	const connectText = phrases.t("identity-block.connect-identity");
 	const disconnectText = phrases.t("identity-block.disconnect-account");
 
-	const onConnectIdentity = useCallback((type) => {
+	const onConnectIdentity = useCallback(() => {
 		switch (type) {
 			case "Google":
 				window.google.accounts.id.prompt((notification) => {
 					if (notification.isNotDisplayed() || notification.isSkippedMoment()) {
+						// eslint-disable-next-line
 						alert(googleNotification);
 						document.cookie = "g_state=;path=/;expires=Thu, 01 Jan 1970 00:00:01 GMT";
 						window.google.accounts.id.prompt();
@@ -38,7 +39,7 @@ function SocialSignOnEditableFieldContainer({
 			default:
 				break;
 		}
-	}, [googleNotification, Identity]);
+	}, [googleNotification, Identity, type]);
 
 	return (
 		<div className={`${blockClassName}__social-signOn-edit`}>
@@ -62,7 +63,7 @@ function SocialSignOnEditableFieldContainer({
 					className={`${blockClassName}__social-signOn-button-connect`}
 					size="medium"
 					variant="primary"
-					onClick={() => onConnectIdentity(type)}
+					onClick={() => onConnectIdentity()}
 				>
 					{connectText}
 				</Button>