diff --git a/.storybook/themes/news.scss b/.storybook/themes/news.scss
index d98df953e..571324744 100644
--- 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
index a3029933b..2dc559d97 100644
--- 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
index 67278faeb..159eb2e5f 100644
--- 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
index edd2955ef..74ea13def 100644
--- 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", () => {
,
);
- // 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(
+
+ null} redirectURL="#" customButtons={true} />
+ ,
+ );
+
+ 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(
+
+ null} redirectURL="#" customButtons={true} />
+ ,
+ );
+
+ expect(screen.getByTestId('facebook-btn')).toBeInTheDocument();
+ expect(screen.queryByTestId('google-sign-in-button')).not.toBeInTheDocument();
+ });
+
it("renders", () => {
useIdentity.mockImplementation(() => ({
isInitialized: true,
diff --git a/blocks/identity-block/features/account-management/_children/SocialSignOnEditableContainer.jsx b/blocks/identity-block/features/account-management/_children/SocialSignOnEditableContainer.jsx
index 4b9e41300..e88f20313 100644
--- a/blocks/identity-block/features/account-management/_children/SocialSignOnEditableContainer.jsx
+++ b/blocks/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 (
@@ -62,7 +63,7 @@ function SocialSignOnEditableFieldContainer({
className={`${blockClassName}__social-signOn-button-connect`}
size="medium"
variant="primary"
- onClick={() => onConnectIdentity(type)}
+ onClick={() => onConnectIdentity()}
>
{connectText}