diff --git a/.storybook/themes/news.scss b/.storybook/themes/news.scss index 00db92611b..a9a4708847 100644 --- a/.storybook/themes/news.scss +++ b/.storybook/themes/news.scss @@ -257,6 +257,67 @@ "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) + ) + ) + ), "ads-block": ( "components": ( "paragraph": ( @@ -3580,6 +3641,57 @@ ) ) ), + "social-sign-on-button-container-apple-custom": ( + "inline-size": 100% + ), + "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 + ) + ) + ), + "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 + ) + ) + ), "social-sign-on-dividerWithText": ( "display": flex, "align-items": center, diff --git a/blocks/identity-block/_index.scss b/blocks/identity-block/_index.scss index b91d45630b..e3471531c6 100644 --- a/blocks/identity-block/_index.scss +++ b/blocks/identity-block/_index.scss @@ -21,6 +21,36 @@ @include scss.block-properties("account-management-social-edit"); } + &__social-signOn-edit { + @include scss.block-components("account-management-social-signon-edit"); + @include scss.block-properties("account-management-social-signon-edit"); + } + + &__social-signOn-identity { + @include scss.block-components("account-management-social-signon-identity"); + @include scss.block-properties("account-management-social-signon-identity"); + } + + &__social-signOn-button-connect{ + @include scss.block-components("account-management-social-signon-button-connect"); + @include scss.block-properties("account-management-social-signon-button-connect"); + } + + &__social-signOn-button-disconnect{ + @include scss.block-components("account-management-social-signon-button-disconnect"); + @include scss.block-properties("account-management-social-signon-button-disconnect"); + } + + &__social-signOn-button-connected{ + @include scss.block-components("account-management-social-signon-button-connected"); + @include scss.block-properties("account-management-social-signon-button-connected"); + } + + &__social-signOn-identities-error{ + @include scss.block-components("account-management-social-signon-identities-error"); + @include scss.block-properties("account-management-social-signon-identities-error"); + } + @include scss.block-components("account-management"); @include scss.block-properties("account-management"); } @@ -173,7 +203,22 @@ .b-social-sign-on { &__button-container { + &__Google { + @include scss.block-components("social-sign-on-button-container-google"); + @include scss.block-properties("social-sign-on-button-container-google"); + } + + &__Facebook { + @include scss.block-components("social-sign-on-button-container-facebook"); + @include scss.block-properties("social-sign-on-button-container-facebook"); + } + &__Apple { + &__custom { + @include scss.block-components("social-sign-on-button-container-apple-custom"); + @include scss.block-properties("social-sign-on-button-container-apple-custom"); + } + @include scss.block-components("social-sign-on-button-container-apple"); @include scss.block-properties("social-sign-on-button-container-apple"); } diff --git a/blocks/identity-block/components/editable-form-input/index.jsx b/blocks/identity-block/components/editable-form-input/index.jsx index 51d2845827..6f9ca8a8a0 100644 --- a/blocks/identity-block/components/editable-form-input/index.jsx +++ b/blocks/identity-block/components/editable-form-input/index.jsx @@ -55,7 +55,7 @@ function EditableFieldPresentational({ setIsEditable={setIsEditable} >
- {isEditable ? ( + {(isEditable || formErrorText ) ? ( <> {children} {formErrorText ? ( diff --git a/blocks/identity-block/components/editable-form-input/index.test.jsx b/blocks/identity-block/components/editable-form-input/index.test.jsx index 88b7b29e8a..af7869b11a 100644 --- a/blocks/identity-block/components/editable-form-input/index.test.jsx +++ b/blocks/identity-block/components/editable-form-input/index.test.jsx @@ -1,15 +1,19 @@ import React from "react"; import { fireEvent, render, screen } from "@testing-library/react"; - +import '@testing-library/jest-dom'; import EditableFormInputField, { ConditionalFormContainer } from "."; describe("Editable form input field", () => { - it("conditional form renders a form when show form elected", () => { - render(); + it("conditional form renders a form when show form selected", () => { + render( + + {" "} + , + ); expect(screen.getByTestId("conditional-form")).not.toBeNull(); }); - it("conditional form does not render a form when show form not elected", () => { + it("conditional form does not render a form when show form not selected", () => { render(); expect(screen.queryByTestId("conditional-form")).toBeNull(); }); @@ -23,7 +27,7 @@ describe("Editable form input field", () => { onSubmit={() => {}} >

Test child

- + , ); expect(screen.getByText("initial value")).not.toBeNull(); expect(screen.getByText("edit text")).not.toBeNull(); @@ -40,7 +44,7 @@ describe("Editable form input field", () => { formErrorText="Error Text" >

Test child

- + , ); expect(screen.getByText("Error Text")).not.toBeNull(); @@ -55,7 +59,7 @@ describe("Editable form input field", () => { onSubmit={() => {}} >

Test child

- + , ); fireEvent.click(screen.getByRole("button")); @@ -69,7 +73,7 @@ describe("Editable form input field", () => { render( {}} showForm> - + , ); fireEvent.submit(screen.getByTestId("conditional-form")); @@ -83,7 +87,7 @@ describe("Editable form input field", () => { render( {}}> - + , ); fireEvent.submit(screen.getByTestId("conditional-form")); @@ -103,7 +107,7 @@ describe("Editable form input field", () => { formErrorText="Error" > - + , ); fireEvent.click(screen.getByText("cancel change")); @@ -115,7 +119,7 @@ describe("Editable form input field", () => { render( - + , ); expect(screen.getByText("Error")).not.toBeNull(); diff --git a/blocks/identity-block/components/social-sign-on/_children/AppleSignIn.jsx b/blocks/identity-block/components/social-sign-on/_children/AppleSignIn.jsx index 64c5eaa7ea..f03e237476 100644 --- a/blocks/identity-block/components/social-sign-on/_children/AppleSignIn.jsx +++ b/blocks/identity-block/components/social-sign-on/_children/AppleSignIn.jsx @@ -1,32 +1,28 @@ import React from "react"; -import { Button, Icon, useIdentity } from "@wpmedia/arc-themes-components"; -import { useFusionContext } from "fusion:context"; -import getTranslatedPhrases from "fusion:intl"; +import { Button, Icon, useIdentity, usePhrases } from "@wpmedia/arc-themes-components"; import { SIGN_UP } from "../constants"; const AppleIcon = ; -function AppleSignIn({ socialSignOnIn, className }) { - const { siteProperties } = useFusionContext(); - const { locale } = siteProperties; - const phrases = getTranslatedPhrases(locale); +function AppleSignIn({ customButtons, socialSignOnIn, className }) { + const phrases = usePhrases(); const { Identity } = useIdentity(); return ( - + ); } 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 2f5258f005..2dc559d97f 100644 --- a/blocks/identity-block/components/social-sign-on/_children/FacebookSignIn.jsx +++ b/blocks/identity-block/components/social-sign-on/_children/FacebookSignIn.jsx @@ -1,20 +1,46 @@ import React from "react"; +import { Button, Icon, usePhrases } from "@wpmedia/arc-themes-components"; + import { SIGN_UP } from "../constants"; -function FacebookSignIn({socialSignOnIn}) { - const facebookTextType = socialSignOnIn === SIGN_UP ? 'continue_with' : 'login_with'; +const FacebookIcon = ; + +function FacebookSignIn({ customButtons, socialSignOnIn, className }) { + const phrases = usePhrases(); + const facebookTextType = socialSignOnIn === SIGN_UP ? "continue_with" : "login_with"; + + if (customButtons) { + return ( + + ); + } + return ( -
+
+
+
); } 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 d9f97a11b9..fef109ebba 100644 --- a/blocks/identity-block/components/social-sign-on/_children/GoogleSignIn.jsx +++ b/blocks/identity-block/components/social-sign-on/_children/GoogleSignIn.jsx @@ -1,5 +1,49 @@ import React from "react"; -const GoogleSignIn = () =>
; +import { Button, Icon, usePhrases } from "@wpmedia/arc-themes-components"; + +import { SIGN_UP } from "../constants"; + +const GoogleIcon = ; + +function GoogleSignIn({ customButtons, socialSignOnIn, className }) { + const phrases = usePhrases(); + const googleNotification = phrases.t("identity-block.social-google-one-tap-notification"); + + if (customButtons) { + return ( + + ); + } + return ( +
+
+
+ ); +} export default GoogleSignIn; diff --git a/blocks/identity-block/components/social-sign-on/index.jsx b/blocks/identity-block/components/social-sign-on/index.jsx index cce4c58d35..833231b31b 100644 --- a/blocks/identity-block/components/social-sign-on/index.jsx +++ b/blocks/identity-block/components/social-sign-on/index.jsx @@ -5,13 +5,13 @@ import GoogleSignIn from "./_children/GoogleSignIn"; import AppleSignIn from "./_children/AppleSignIn"; import useSocialSignIn from "./utils/useSocialSignIn"; -const SocialSignOn = ({ className, onError, redirectURL, isOIDC, socialSignOnIn }) => { - const { facebookAppId, googleClientId, appleTeamId, appleKeyId, appleUrlToReceiveAuthToken } = useSocialSignIn(redirectURL, isOIDC, socialSignOnIn, onError); +const SocialSignOn = ({ className, onError, redirectURL, isOIDC, socialSignOnIn, customButtons }) => { + const { facebookAppId, googleClientId, appleTeamId, appleKeyId, appleUrlToReceiveAuthToken} = useSocialSignIn(redirectURL, isOIDC, socialSignOnIn, onError, customButtons); return (
- {googleClientId ? : null} - {facebookAppId ? : null} - {appleTeamId && appleKeyId && appleUrlToReceiveAuthToken ? : null} + {googleClientId ? : null} + {facebookAppId ? : null} + {appleTeamId && appleKeyId && appleUrlToReceiveAuthToken ? : null}
); }; 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 76bbf40b41..9451a0d1d6 100644 --- a/blocks/identity-block/components/social-sign-on/index.test.jsx +++ b/blocks/identity-block/components/social-sign-on/index.test.jsx @@ -1,10 +1,18 @@ import React from "react"; import { render, screen } from "@testing-library/react"; +import "@testing-library/jest-dom"; +import { useIdentity, usePhrases } from "@wpmedia/arc-themes-components"; import SocialSignOn from "./index"; -import { useIdentity } from "@wpmedia/arc-themes-components"; import { GoogleSignInProvider } from "./utils/googleContext"; -jest.mock("@wpmedia/arc-themes-components"); +const mockButton = jest.fn(); + +jest.mock('@wpmedia/arc-themes-components', () => ({ + ...jest.requireActual('@wpmedia/arc-themes-components'), + Button: (props) => mockButton(props), + useIdentity: jest.fn(), + usePhrases: jest.fn() + })); describe("Identity Social Login Component", () => { it("renders nothing if config settings are false", () => { @@ -20,61 +28,22 @@ describe("Identity Social Login Component", () => { 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( - - ); - // don't render any facebook stuff, only show wrapper - expect(screen.getByRole("generic")).not.toBeNull(); - }); - - it("renders only Google button", () => { - useIdentity.mockImplementation(() => ({ - isInitialized: true, - isLoggedIn: () => false, - Identity: { - configOptions: { - googleClientId: true, - facebookAppId: false, - }, - initFacebookLogin: () => {}, - initializeFacebook: () => {}, - }, - })); - - const { container } = render( - - null} redirectURL="#" /> - + , ); - - expect(container.querySelector("#google-sign-in-button")).not.toBeNull(); - expect(container.querySelector(".fb-login-button")).toBeNull(); - }); - - it("renders only Facebook button", () => { - useIdentity.mockImplementation(() => ({ - isInitialized: true, - isLoggedIn: () => false, - Identity: { - configOptions: { - googleClientId: false, - facebookAppId: true, - }, - initFacebookLogin: () => {}, - initializeFacebook: () => {}, - }, - })); - - const { container } = render( - - null} redirectURL="#" /> - - ); - - expect(container.querySelector("#google-sign-in-button")).toBeNull(); - expect(container.querySelector(".fb-login-button")).not.toBeNull(); + // 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", () => { @@ -90,7 +59,7 @@ describe("Identity Social Login Component", () => { Promise.resolve({ signinRecaptcha: false, recaptchaSiteKey: "6LdXKVQcAAAAAO2tv3GdUbSK-1vcgujX6cP0IgF_", - }) + }), ), initFacebookLogin: () => {}, initializeFacebook: () => {}, @@ -98,14 +67,14 @@ describe("Identity Social Login Component", () => { }, })); - const { container } = render( + render( null} redirectURL="#" /> - + , ); - expect(container.querySelector("#google-sign-in-button")).not.toBeNull(); - expect(container.querySelector(".fb-login-button")).not.toBeNull(); + expect(screen.getByTestId("fb-login-button")).toBeInTheDocument(); + expect(screen.getByTestId("google-sign-in-button")).toBeInTheDocument(); }); it("calls getConfig if the options are missing", () => { @@ -124,7 +93,7 @@ describe("Identity Social Login Component", () => { render( null} redirectURL="#" /> - + , ); expect(getConfigMock).toHaveBeenCalled(); @@ -151,7 +120,7 @@ describe("Identity Social Login Component", () => { render( null} redirectURL="#" /> - + , ); window.onFacebookSignOn(); expect(facebookSignOnMock).toHaveBeenCalled(); @@ -177,13 +146,102 @@ describe("Identity Social Login Component", () => { isLoggedIn: jest.fn(() => false), }, })); + 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( - + , ); window.onFacebookSignOn(); expect(onErrorMock).toHaveBeenCalled(); }); }); + +describe("Identity Social Login Component - Google Button", () => { + beforeEach(() => { + useIdentity.mockImplementation(() => ({ + isInitialized: true, + isLoggedIn: () => false, + Identity: { + configOptions: { + googleClientId: true, + facebookAppId: false, + }, + initFacebookLogin: () => {}, + initializeFacebook: () => {}, + }, + })); + }); + it("renders only Google (default) button", () => { + render( + + null} redirectURL="#" customButtons={false} /> + , + ); + + expect(screen.getByTestId("google-sign-in-button")).toBeInTheDocument(); + expect(screen.queryByTestId("fb-login-button")).not.toBeInTheDocument(); + }); + + it("renders only Google (custom) button", () => { + mockButton.mockImplementation(() =>
); + + render( + + null} redirectURL="#" customButtons /> + , + ); + + expect(screen.getByTestId("custom-google-sign-in-button")).toBeInTheDocument(); + expect(screen.queryByTestId("fb-login-button")).not.toBeInTheDocument(); + }); +}); + +describe("Identity Social Login Component - Facebook Button", () => { + + beforeEach(() => { + useIdentity.mockImplementation(() => ({ + isInitialized: true, + isLoggedIn: () => false, + Identity: { + configOptions: { + googleClientId: false, + facebookAppId: true, + }, + initFacebookLogin: () => {}, + initializeFacebook: () => {}, + }, + })); + }); + it("renders only Facebook (default) button", () => { + + render( + + null} redirectURL="#" /> + , + ); + + expect(screen.getByTestId("fb-login-button")).toBeInTheDocument(); + expect(screen.queryByTestId("google-sign-in-button")).not.toBeInTheDocument(); + }); + + it("renders only Facebook (custom) button", () => { + mockButton.mockImplementation(() =>
); + + render( + + null} redirectURL="#" customButtons /> + , + ); + + expect(screen.getByTestId("custom-facebook-btn")).toBeInTheDocument(); + expect(screen.queryByTestId("google-sign-in-button")).not.toBeInTheDocument(); + }); +}); diff --git a/blocks/identity-block/components/social-sign-on/utils/useSocialSignIn.js b/blocks/identity-block/components/social-sign-on/utils/useSocialSignIn.js index 2d217326e9..4bf7692ede 100644 --- a/blocks/identity-block/components/social-sign-on/utils/useSocialSignIn.js +++ b/blocks/identity-block/components/social-sign-on/utils/useSocialSignIn.js @@ -4,30 +4,58 @@ import { GoogleSignInContext } from "./googleContext"; import useOIDCLogin from "../../../utils/useOIDCLogin"; import validateURL from "../../../utils/validate-redirect-url"; -import {SIGN_UP} from "../constants"; +import { SIGN_UP } from "../constants"; -function useSocialSignIn(redirectURL, isOIDC, socialSignOnIn, onError = () => {}) { +function useSocialSignIn( + redirectURL, + isOIDC, + socialSignOnIn, + onError = () => {}, + customButtons = true, + fromSocialSignOnBlock = true, +) { const { Identity } = useIdentity(); const { isGoogleLoaded } = useContext(GoogleSignInContext); const [config, setConfig] = useState(() => Identity?.configOptions ?? {}); + + const [isFBInitialized, setIsFBInitialized] = useState(false); + const [isFBEventSubscribed, setIsFBEventSubscribed] = useState(false); + const [updateIdentities, setUpdateIdentities] = useState(false); + const { loginByOIDC } = useOIDCLogin(); useEffect(() => { window.onFacebookSignOn = async () => { try { - await Identity.facebookSignOn(); + Identity.facebookSignOn().then(() => { + if (customButtons) { + setIsFBInitialized(true); + } + }); if (isOIDC) { loginByOIDC(); - } else { - const validatedURL = validateURL(redirectURL); - window.location = validatedURL; + } else if (fromSocialSignOnBlock) { + Identity.isLoggedIn().then((isLoggedIn) => { + if (isLoggedIn) { + window.location = validateURL(redirectURL); + } + }); } } catch (e) { onError(); } }; - }, [Identity, onError, redirectURL, isOIDC, loginByOIDC]); + }, [ + Identity, + onError, + redirectURL, + isOIDC, + loginByOIDC, + customButtons, + setIsFBInitialized, + fromSocialSignOnBlock, + ]); useEffect(() => { const fetchConfig = async () => { @@ -43,9 +71,9 @@ function useSocialSignIn(redirectURL, isOIDC, socialSignOnIn, onError = () => {} // istanbul ignore next if (isGoogleLoaded && config.googleClientId) { const googleClientId = config.googleClientId.split(",")?.[0]; - const googleIdConfig = { + const googleIdConfigOneTap = { client_id: googleClientId, - callback: (credentialResponse) => + callback: async (credentialResponse) => Identity.signInWithGoogle(credentialResponse).then(() => { if (isOIDC) { loginByOIDC(); @@ -54,39 +82,97 @@ function useSocialSignIn(redirectURL, isOIDC, socialSignOnIn, onError = () => {} window.location = validatedURL; } }), - auto_select: true, + auto_select: false, + state_cookie_domain: "none", }; + // one-tap Google Sign-In + window.google.accounts.id.initialize(googleIdConfigOneTap); - window.google.accounts.id.initialize(googleIdConfig); - const googleTextType = socialSignOnIn === SIGN_UP ? 'signup_with' : 'signin_with'; - window.google.accounts.id.renderButton(document.getElementById("google-sign-in-button"), { - type: "standard", - theme: "outline", - size: "large", - text: googleTextType, - shape: "rectangular", - logo_alignment: "left", - width: "400", - }); + if (!customButtons) { + const googleTextType = socialSignOnIn === SIGN_UP ? "signup_with" : "signin_with"; + window.google.accounts.id.renderButton(document.getElementById("google-sign-in-button"), { + // render a standard Google Sign-In button + type: "standard", + theme: "outline", + size: "large", + text: googleTextType, + shape: "rectangular", + logo_alignment: "left", + width: "400", + }); + } Identity.isLoggedIn().then((isLoggedIn) => { if (!isLoggedIn) { + // If user rejects it will not appear again based on exponential cooldown https://developers.google.com/identity/gsi/web/guides/features#exponential_cooldown window.google.accounts.id.prompt(); } else if (isLoggedIn && isOIDC) { loginByOIDC(); } }); } - }, [config.googleClientId, Identity, isGoogleLoaded, isOIDC, loginByOIDC, redirectURL, socialSignOnIn]); + }, [ + config.googleClientId, + Identity, + isGoogleLoaded, + isOIDC, + loginByOIDC, + redirectURL, + socialSignOnIn, + customButtons, + ]); useEffect(() => { const initializeFacebook = async () => { - await Identity.initFacebookLogin(null); + // Basic setup: https://developers.facebook.com/docs/javascript/quickstart/ + await Identity.initFacebookLogin(null, null, customButtons); }; if (config.facebookAppId) { initializeFacebook(); } - }, [Identity, config.facebookAppId]); + }, [Identity, config.facebookAppId, customButtons]); + + useEffect(() => { + let timeout; + const checkIsLoggedIn = () => { + timeout = setTimeout(() => { + Identity.isLoggedIn().then((isLoggedIn) => { + if (isLoggedIn) { + window.location = validateURL(redirectURL); + } + }); + }, 1500); + }; + + const setIdentityUpdated = () => { + timeout = setTimeout(() => { + setUpdateIdentities((prev) => !prev); + }, 1500); + }; + + if (customButtons && isFBInitialized && !isFBEventSubscribed && window?.FB?.Event) { + setIsFBEventSubscribed(true); + window.FB.Event.subscribe("auth.statusChange", (response) => { + if (response.status === "connected") { + if (fromSocialSignOnBlock) { + checkIsLoggedIn(); + } else { + setIdentityUpdated(); + } + } + }); + } + return () => clearTimeout(timeout); + }, [ + isFBInitialized, + isFBEventSubscribed, + customButtons, + setUpdateIdentities, + updateIdentities, + Identity, + fromSocialSignOnBlock, + redirectURL, + ]); return { // if facebook and google setup with subs, @@ -95,7 +181,8 @@ function useSocialSignIn(redirectURL, isOIDC, socialSignOnIn, onError = () => {} googleClientId: config.googleClientId, appleTeamId: config.teamId, appleKeyId: config.keyId, - appleUrlToReceiveAuthToken: config.urlToReceiveAuthToken + appleUrlToReceiveAuthToken: config.urlToReceiveAuthToken, + updateIdentities, }; } diff --git a/blocks/identity-block/features/account-management/_children/PasswordEditableFieldContainer.jsx b/blocks/identity-block/features/account-management/_children/PasswordEditableFieldContainer.jsx index 16101fecc4..3af6e4e0b0 100644 --- a/blocks/identity-block/features/account-management/_children/PasswordEditableFieldContainer.jsx +++ b/blocks/identity-block/features/account-management/_children/PasswordEditableFieldContainer.jsx @@ -1,21 +1,26 @@ import React, { useEffect, useState } from "react"; -import { useFusionContext } from "fusion:context"; -import getProperties from "fusion:properties"; -import getTranslatedPhrases from "fusion:intl"; -import { Input, useIdentity } from "@wpmedia/arc-themes-components"; +import { + Input, + useIdentity, + usePhrases, + BotChallengeProtection, +} from "@wpmedia/arc-themes-components"; import EditableFieldPresentational from "../../../components/editable-form-input"; import FormPasswordConfirm from "../../../components/form-password-confirm"; import passwordValidationMessage from "../../../utils/password-validation-message"; import validatePasswordPattern from "../../../utils/validate-password-pattern"; +import definedMessageByCode from "../../../utils/definedMessageByCode"; function PasswordEditableFieldContainer({ blockClassName, email, hasPassword, setHasPassword }) { + const phrases = usePhrases(); + const [error, setError] = useState(false); const [passwordRequirements, setPasswordRequirements] = useState({}); const [configStatus, setConfigStatus] = useState("loading"); - const { arcSite } = useFusionContext(); - const { locale } = getProperties(arcSite); - const phrases = getTranslatedPhrases(locale); + const [captchaToken, setCaptchaToken] = useState(); + const [captchaError, setCaptchaError] = useState(); + const [resetRecaptcha, setResetRecaptcha] = useState(true); const { Identity } = useIdentity(); @@ -90,12 +95,25 @@ function PasswordEditableFieldContainer({ blockClassName, email, hasPassword, se }); } - return Identity.signUp({ userName: email, credentials: newPassword }, { email }) + return Identity.signUp( + { userName: email, credentials: newPassword }, + { email }, + undefined, + true, + captchaToken, + ) .then(() => { setHasPassword(true); setError(false); }) - .catch(() => setError(phrases.t("identity-block.sign-up-form-error"))); + .catch((e) => { + setResetRecaptcha(!resetRecaptcha); + if (e?.code === "010122") { + setCaptchaError(phrases.t(definedMessageByCode(e.code))); + } else { + setError(phrases.t(definedMessageByCode(e.code))); + } + }); }; const handleCancelEdit = () => { @@ -139,7 +157,7 @@ function PasswordEditableFieldContainer({ blockClassName, email, hasPassword, se pwMinLength, pwPwNumbers, pwSpecialCharacters, - pwUppercase + pwUppercase, )} confirmLabel={phrases.t("identity-block.confirm-password")} confirmValidationErrorMessage={phrases.t("identity-block.confirm-password-error")} @@ -156,12 +174,22 @@ function PasswordEditableFieldContainer({ blockClassName, email, hasPassword, se pwMinLength, pwPwNumbers, pwSpecialCharacters, - pwUppercase + pwUppercase, )} confirmLabel={phrases.t("identity-block.confirm-password")} confirmValidationErrorMessage={phrases.t("identity-block.confirm-password-error")} /> )} + {!hasPassword && ( + + )} ); } diff --git a/blocks/identity-block/features/account-management/_children/SocialEditableSection.jsx b/blocks/identity-block/features/account-management/_children/SocialEditableSection.jsx index c2d39b1b13..8279311c63 100644 --- a/blocks/identity-block/features/account-management/_children/SocialEditableSection.jsx +++ b/blocks/identity-block/features/account-management/_children/SocialEditableSection.jsx @@ -1,70 +1,78 @@ -import React from "react"; -import { useFusionContext } from "fusion:context"; -import getProperties from "fusion:properties"; -import getTranslatedPhrases from "fusion:intl"; +import React, { useEffect } from "react"; +import { Icon } from "@wpmedia/arc-themes-components"; + import useSocialSignIn from "../../../components/social-sign-on/utils/useSocialSignIn"; -import FacebookSignIn from "../../../components/social-sign-on/_children/FacebookSignIn"; -import GoogleSignIn from "../../../components/social-sign-on/_children/GoogleSignIn"; -import SocialEditableFieldContainer from "./SocialEditableFieldContainer"; +import SocialSignOnEditableFieldContainer from "./SocialSignOnEditableContainer"; + +function removeHostname(url) { + const parsedUrl = new URL(url); + const urlWithoutHostname = parsedUrl.pathname + parsedUrl.search + parsedUrl.hash; + + return urlWithoutHostname; +} function SocialEditableSection({ blockClassName, hasFacebook, hasGoogle, - hasPasswordAccount, + hasApple, unlinkFacebook, unlinkGoogle, + unlinkApple, + linkApple, + numIdentities, + updateIdentities, + setUpdateIdentities }) { // get current because social sign in has reload and need to re-render page anyway const currentUrl = window.location.href; + const newURL = removeHostname(currentUrl); - const { facebookAppId, googleClientId } = useSocialSignIn(currentUrl); + const { facebookAppId, googleClientId, appleTeamId, appleKeyId, appleUrlToReceiveAuthToken, updateIdentities: checkIdentities } = + useSocialSignIn(newURL, null, null, () => { }, true, false); - const { arcSite } = useFusionContext(); - const { locale } = getProperties(arcSite); - const phrases = getTranslatedPhrases(locale); + const GoogleIcon = ; + const AppleIcon = ; + const FacebookIcon = ; - const socialText = phrases.t("identity-block.connect-account"); - const disconnectText = phrases.t("identity-block.disconnect-account"); - const facebookConnectText = phrases.t("identity-block.connect-platform", { - platform: "Facebook", - }); - const googleConnectText = phrases.t("identity-block.connect-platform", { - platform: "Google", - }); + useEffect(() => { + setUpdateIdentities((prevState) => !prevState); + }, [checkIdentities, setUpdateIdentities]); return ( <> - {googleClientId ? ( -
-
- -
-
- -
-
- ) : null} - {facebookAppId ? ( -
-
- -
-
- -
-
- ) : null} + {googleClientId && ( + + )} + {facebookAppId && ( + + )} + {appleTeamId && appleKeyId && appleUrlToReceiveAuthToken && ( + + )} ); } diff --git a/blocks/identity-block/features/account-management/_children/SocialEditableSection.test.jsx b/blocks/identity-block/features/account-management/_children/SocialEditableSection.test.jsx index 477f36e204..d4db1eef1e 100644 --- a/blocks/identity-block/features/account-management/_children/SocialEditableSection.test.jsx +++ b/blocks/identity-block/features/account-management/_children/SocialEditableSection.test.jsx @@ -9,7 +9,7 @@ jest.mock("../../../components/social-sign-on/utils/useSocialSignIn"); jest.mock("fusion:properties", () => jest.fn(() => ({ locale: "en", - })) + })), ); jest.mock("fusion:intl", () => ({ @@ -21,42 +21,47 @@ jest.mock("fusion:intl", () => ({ describe("SocialEditableSection", () => { it("should render facebook and google with google and facebook app id", () => { + const setUpdateIdentitiesMock = jest.fn(); useSocialSignIn.mockImplementation(() => ({ facebookAppId: "123", googleClientId: "456", })); - render(); - expect(screen.getAllByText("Connect %{platform}")).toHaveLength(2); + render(); + expect(screen.getAllByText("Connect")).toHaveLength(2); }); it("should not render facebook and google without id", () => { + const setUpdateIdentitiesMock = jest.fn(); useSocialSignIn.mockImplementation(() => ({ facebookAppId: "", googleClientId: "", })); - render(); + render(); expect(screen.queryAllByText("Connect %{platform}")).toHaveLength(0); }); it("should render facebook only with google no id", () => { + const setUpdateIdentitiesMock = jest.fn(); useSocialSignIn.mockImplementation(() => ({ facebookAppId: "123", googleClientId: "", })); - render(); - expect(screen.getAllByText("Connect %{platform}")).toHaveLength(1); + render(); + expect(screen.getAllByText("Connect")).toHaveLength(1); }); it("should show text based on hasGoogle and hasFacebook props", () => { + const setUpdateIdentitiesMock = jest.fn(); useSocialSignIn.mockImplementation(() => ({ isFacebookInitialized: true, isGoogleInitialized: true, facebookAppId: "123", googleClientId: "456", + setUpdateIdentities: setUpdateIdentitiesMock, })); - render(); + render(); expect(screen.getAllByText(/Connected/i)).toHaveLength(2); }); }); diff --git a/blocks/identity-block/features/account-management/_children/SocialSignOnEditableContainer.jsx b/blocks/identity-block/features/account-management/_children/SocialSignOnEditableContainer.jsx new file mode 100644 index 0000000000..e88f203133 --- /dev/null +++ b/blocks/identity-block/features/account-management/_children/SocialSignOnEditableContainer.jsx @@ -0,0 +1,81 @@ +import React, { useCallback } from "react"; + +import { Button, usePhrases, Icon, useIdentity } from "@wpmedia/arc-themes-components"; + +function SocialSignOnEditableFieldContainer({ + blockClassName, + socialIcon, + type, + isConnected, + onDisconnectFunction, +}) { + const phrases = usePhrases(); + const { Identity } = useIdentity(); + + const googleNotification = phrases.t("identity-block.social-google-one-tap-notification"); + + const connectedText = phrases.t("identity-block.connect-account"); + const connectText = phrases.t("identity-block.connect-identity"); + const disconnectText = phrases.t("identity-block.disconnect-account"); + + 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(); + } + }); + break; + case "Facebook": + window.onFacebookSignOn(); + break; + case "Apple": + Identity.initAppleSignOn(); + break; + default: + break; + } + }, [googleNotification, Identity, type]); + + return ( +
+
+
{socialIcon}
+
{type}
+
+ {isConnected && ( + + )} + {!isConnected && ( + + )} + {isConnected && ( +
+ + {connectedText} +
+ )} +
+ ); +} + +export default SocialSignOnEditableFieldContainer; diff --git a/blocks/identity-block/features/account-management/default.jsx b/blocks/identity-block/features/account-management/default.jsx index fa32a2c35a..c7398683bc 100644 --- a/blocks/identity-block/features/account-management/default.jsx +++ b/blocks/identity-block/features/account-management/default.jsx @@ -3,7 +3,7 @@ import PropTypes from "@arc-fusion/prop-types"; import { useFusionContext } from "fusion:context"; import getProperties from "fusion:properties"; import getTranslatedPhrases from "fusion:intl"; -import { Heading, useIdentity } from "@wpmedia/arc-themes-components"; +import { Heading, useIdentity, Paragraph } from "@wpmedia/arc-themes-components"; import { GoogleSignInProvider } from "../../components/social-sign-on/utils/googleContext"; import EmailEditableFieldContainer from "./_children/EmailEditableFieldContainer"; import PasswordEditableFieldContainer from "./_children/PasswordEditableFieldContainer"; @@ -11,6 +11,17 @@ import SocialEditableSection from "./_children/SocialEditableSection"; const BLOCK_CLASS_NAME = "b-account-management"; +const errorCodes = { + 300044: "identity-block.social-signOn-unlink-error", + 130001: "identity-block.login-form-error.captcha-token-invalid", + '010122': "identity-block.login-form-error.captcha-token-required", + 0: "identity-block.login-form-error.something-went-wrong", +}; + +export function definedMessageByCode(code) { + return errorCodes[code] || errorCodes["0"]; +} + export function AccountManagementPresentational({ header, children }) { return (
@@ -27,6 +38,10 @@ function AccountManagement({ customFields }) { const [hasPassword, setHasPassword] = useState(); const [hasGoogle, setHasGoogle] = useState(false); const [hasFacebook, setHasFacebook] = useState(false); + const [hasApple, setHasApple] = useState(false); + const [numIdentities, setNumIdentities] = useState(); + const [updateIdentities, setUpdateIdentities] = useState(false); + const [error, setError] = useState(); const { redirectURL, showEmail, showPassword, showSocialProfile } = customFields; @@ -59,6 +74,8 @@ function AccountManagement({ customFields }) { Identity.getUserProfile().then((profileObject) => { const { email: loggedInEmail, identities } = profileObject; + setNumIdentities(identities.length); + if (loggedInEmail) { setEmail(loggedInEmail); } @@ -70,6 +87,7 @@ function AccountManagement({ customFields }) { setHasPassword(passwordProfile?.length > 0); setHasGoogle(identities.filter(({ type }) => type === "Google").length > 0); setHasFacebook(identities.filter(({ type }) => type === "Facebook").length > 0); + setHasApple(identities.filter(({ type }) => type === "Apple").length > 0); setIsLoading(false); }); @@ -77,15 +95,40 @@ function AccountManagement({ customFields }) { if (!isAdmin && loggedIn) { getProfile(); } - }, [loggedIn, setEmail, Identity, isAdmin]); + }, [loggedIn, setEmail, Identity, isAdmin, updateIdentities]); + + // istanbul ignore next + const unlinkGoogle = async () => + Identity.unlinkSocialIdentity("google").then(() => { + setUpdateIdentities(!updateIdentities); + setError(); + }).catch((e) => { + setError(phrases.t(definedMessageByCode(e.code))); + }); - // cause re-render to re-check if identity has social identity // istanbul ignore next const unlinkFacebook = () => - Identity.unlinkSocialIdentity("facebook").then(() => setHasFacebook(false)); + Identity.unlinkSocialIdentity("facebook") + .then(() => { + setUpdateIdentities(!updateIdentities); + setError(); + }) + .catch((e) => { + setError(phrases.t(definedMessageByCode(e.code))); + }); + + const linkApple = () => { + Identity.initAppleSignOn(); + }; + // istanbul ignore next - const unlinkGoogle = () => - Identity.unlinkSocialIdentity("google").then(() => setHasGoogle(false)); + const unlinkApple = () => + Identity.unlinkSocialIdentity("apple") + .then(() => { + setUpdateIdentities(!updateIdentities); + setError(); + }) + .catch((e) => setError(phrases.t(definedMessageByCode(e.code)))); if (!isInitialized || (isLoading && !isAdmin)) { return null; @@ -94,7 +137,6 @@ function AccountManagement({ customFields }) { const header = phrases.t("identity-block.account-information"); const socialProfileHeader = phrases.t("identity-block.connected-accounts"); - // if logged in, return account info return (
@@ -117,14 +159,26 @@ function AccountManagement({ customFields }) { {showSocialProfile ? ( + {error ? ( +
+ {error} +
+ ) : null} diff --git a/blocks/identity-block/features/login/default.jsx b/blocks/identity-block/features/login/default.jsx index 0d23bd2ef4..2c658d92e0 100644 --- a/blocks/identity-block/features/login/default.jsx +++ b/blocks/identity-block/features/login/default.jsx @@ -1,41 +1,25 @@ import React, { useState } from "react"; import PropTypes from "@arc-fusion/prop-types"; import { useFusionContext } from "fusion:context"; -import getProperties from "fusion:properties"; -import getTranslatedPhrases from "fusion:intl"; import { Input, useIdentity, Paragraph, BotChallengeProtection, + usePhrases } from "@wpmedia/arc-themes-components"; import HeadlinedSubmitForm from "../../components/headlined-submit-form"; import useLogin from "../../components/login"; import useOIDCLogin from "../../utils/useOIDCLogin"; import validateURL from "../../utils/validate-redirect-url"; +import definedMessageByCode from "../../utils/definedMessageByCode"; const BLOCK_CLASS_NAME = "b-login-form"; -const errorCodes = { - 100015: "identity-block.login-form-error.account-is-disabled", - 130001: "identity-block.login-form-error.captcha-token-invalid", - 130051: "identity-block.login-form-error.unverified-email-address", - 100013: "identity-block.login-form-error.max-devices", - 0: "identity-block.login-form-error.invalid-email-password", -}; - -export function definedMessageByCode(code) { - return errorCodes[code] || errorCodes["0"]; -} - const Login = ({ customFields }) => { - const { - redirectURL, - redirectToPreviousPage, - loggedInPageLocation, - OIDC, - termsAndPrivacyURL, - } = customFields; + const phrases = usePhrases(); + const { redirectURL, redirectToPreviousPage, loggedInPageLocation, OIDC, termsAndPrivacyURL } = + customFields; let urlString = ''; let url = ''; @@ -45,9 +29,7 @@ const Login = ({ customFields }) => { url = new URL(urlString); } - const { isAdmin, arcSite } = useFusionContext(); - const { locale } = getProperties(arcSite); - const phrases = getTranslatedPhrases(locale); + const { isAdmin } = useFusionContext(); const isOIDC = OIDC && url.searchParams.get("client_id") && url.searchParams.get("response_type") === "code"; diff --git a/blocks/identity-block/features/login/default.test.jsx b/blocks/identity-block/features/login/default.test.jsx index 9049b2898e..71afec630e 100644 --- a/blocks/identity-block/features/login/default.test.jsx +++ b/blocks/identity-block/features/login/default.test.jsx @@ -2,7 +2,8 @@ import React from "react"; import { fireEvent, render, screen, waitFor } from "@testing-library/react"; import { useIdentity } from "@wpmedia/arc-themes-components"; -import Login, {definedMessageByCode} from "./default"; +import Login from "./default"; +import definedMessageByCode from "../../utils/definedMessageByCode"; const defaultCustomFields = { redirectURL: "", diff --git a/blocks/identity-block/features/signup/default.test.jsx b/blocks/identity-block/features/signup/default.test.jsx index 5b90ef5dd8..36760c8f27 100644 --- a/blocks/identity-block/features/signup/default.test.jsx +++ b/blocks/identity-block/features/signup/default.test.jsx @@ -47,7 +47,6 @@ jest.mock("@wpmedia/arc-themes-components", () => ({ ...mockSales, }, })), - // Button: ({onClick}) => , BotChallengeProtection: ({ challengeIn= 'signup' }) =>
})); diff --git a/blocks/identity-block/features/social-sign-on/default.jsx b/blocks/identity-block/features/social-sign-on/default.jsx index 8c67371c79..7356082903 100644 --- a/blocks/identity-block/features/social-sign-on/default.jsx +++ b/blocks/identity-block/features/social-sign-on/default.jsx @@ -18,6 +18,7 @@ const SocialSignOnBlock = ({ customFields }) => { OIDC, socialSignOnIn, hideDiv, + customButtons } = customFields; const checkAppleCodeExists = (url) => { @@ -70,6 +71,7 @@ const SocialSignOnBlock = ({ customFields }) => { redirectURL={loginRedirect} isOIDC={isOIDC} socialSignOnIn={socialSignOnIn} + customButtons={customButtons} /> {error ? ( @@ -117,6 +119,12 @@ SocialSignOnBlock.propTypes = { defaultValue: false, description: "Used when we want to hide the ---OR--- divider", + }), + customButtons: PropTypes.bool.tag({ + name: "Custom Facebook/Gooogle/Apple buttons", + defaultValue: true, + description: + "Render a custom Facebook/Google/Apple buttons or the ones provided by Facebook, Google, and Apple.", }) }), }; diff --git a/blocks/identity-block/intl.json b/blocks/identity-block/intl.json index ac202d5582..babac976c3 100644 --- a/blocks/identity-block/intl.json +++ b/blocks/identity-block/intl.json @@ -207,6 +207,162 @@ "zh-CN": "已连接", "zh-TW": "已連結" }, + "identity-block.connect-identity": { + "ar": "Connect", + "bn": "Connect", + "bo": "Connect", + "de": "Connect", + "el": "Connect", + "en": "Connect", + "es": "Connect", + "fr": "Connect", + "id": "Connect", + "ja": "Connect", + "km-KH": "Connect", + "ko": "Connect", + "lo": "Connect", + "ms": "Connect", + "my": "Connect", + "no": "Connect", + "pt-BR": "Connect", + "pt": "Connect", + "sv": "Connect", + "th": "Connect", + "ug": "Connect", + "vi": "Connect", + "zh-CN": "Connect", + "zh-TW": "Connect" + }, + "identity-block.login-form-error.captcha-token-required": { + "ar": "Captcha token required.", + "bn": "Captcha token required.", + "bo": "Captcha token required.", + "de": "Captcha token required.", + "el": "Captcha token required.", + "en": "Captcha token required.", + "es": "Captcha token required.", + "fr": "Captcha token required.", + "id": "Captcha token required.", + "ja": "Captcha token required.", + "km-KH": "Captcha token required.", + "ko": "Captcha token required.", + "lo": "Captcha token required.", + "ms": "Captcha token required.", + "my": "Captcha token required.", + "no": "Captcha token required.", + "pt-BR": "Captcha token required.", + "pt": "Captcha token required.", + "sv": "Captcha token required.", + "th": "Captcha token required.", + "ug": "Captcha token required.", + "vi": "Captcha token required.", + "zh-CN": "Captcha token required.", + "zh-TW": "Captcha token required." + }, + "identity-block.social-google-one-tap-notification": { + "ar": "Sign-in prompt was suppressed by the user or dismissed. Please try again later or use another sign-in method.", + "bn": "Sign-in prompt was suppressed by the user or dismissed. Please try again later or use another sign-in method.", + "bo": "Sign-in prompt was suppressed by the user or dismissed. Please try again later or use another sign-in method.", + "de": "Sign-in prompt was suppressed by the user or dismissed. Please try again later or use another sign-in method.", + "el": "Sign-in prompt was suppressed by the user or dismissed. Please try again later or use another sign-in method.", + "en": "Sign-in prompt was suppressed by the user or dismissed. Please try again later or use another sign-in method.", + "es": "Sign-in prompt was suppressed by the user or dismissed. Please try again later or use another sign-in method.", + "fr": "Sign-in prompt was suppressed by the user or dismissed. Please try again later or use another sign-in method.", + "id": "Sign-in prompt was suppressed by the user or dismissed. Please try again later or use another sign-in method.", + "ja": "Sign-in prompt was suppressed by the user or dismissed. Please try again later or use another sign-in method.", + "km-KH": "Sign-in prompt was suppressed by the user or dismissed. Please try again later or use another sign-in method.", + "ko": "Sign-in prompt was suppressed by the user or dismissed. Please try again later or use another sign-in method.", + "lo": "Sign-in prompt was suppressed by the user or dismissed. Please try again later or use another sign-in method.", + "ms": "Sign-in prompt was suppressed by the user or dismissed. Please try again later or use another sign-in method.", + "my": "Sign-in prompt was suppressed by the user or dismissed. Please try again later or use another sign-in method.", + "no": "Sign-in prompt was suppressed by the user or dismissed. Please try again later or use another sign-in method.", + "pt-BR": "Sign-in prompt was suppressed by the user or dismissed. Please try again later or use another sign-in method.", + "pt": "Sign-in prompt was suppressed by the user or dismissed. Please try again later or use another sign-in method.", + "sv": "Sign-in prompt was suppressed by the user or dismissed. Please try again later or use another sign-in method.", + "th": "Sign-in prompt was suppressed by the user or dismissed. Please try again later or use another sign-in method.", + "ug": "Sign-in prompt was suppressed by the user or dismissed. Please try again later or use another sign-in method.", + "vi": "Sign-in prompt was suppressed by the user or dismissed. Please try again later or use another sign-in method.", + "zh-CN": "Sign-in prompt was suppressed by the user or dismissed. Please try again later or use another sign-in method.", + "zh-TW": "Sign-in prompt was suppressed by the user or dismissed. Please try again later or use another sign-in method." + }, + "identity-block.social-signOn-unlink-error": { + "ar": "At least one identity needs to remain on the user", + "bn": "At least one identity needs to remain on the user", + "bo": "At least one identity needs to remain on the user", + "de": "At least one identity needs to remain on the user", + "el": "At least one identity needs to remain on the user", + "en": "At least one identity needs to remain on the user", + "es": "At least one identity needs to remain on the user", + "fr": "At least one identity needs to remain on the user", + "id": "At least one identity needs to remain on the user", + "ja": "At least one identity needs to remain on the user", + "km-KH": "At least one identity needs to remain on the user", + "ko": "At least one identity needs to remain on the user", + "lo": "At least one identity needs to remain on the user", + "ms": "At least one identity needs to remain on the user", + "my": "At least one identity needs to remain on the user", + "no": "At least one identity needs to remain on the user", + "pt-BR": "At least one identity needs to remain on the user", + "pt": "At least one identity needs to remain on the user", + "sv": "At least one identity needs to remain on the user", + "th": "At least one identity needs to remain on the user", + "ug": "At least one identity needs to remain on the user", + "vi": "At least one identity needs to remain on the user", + "zh-CN": "At least one identity needs to remain on the user", + "zh-TW": "At least one identity needs to remain on the user" + }, + "identity-block.social-signOn-facebook-login": { + "ar": "Sign in with Facebook", + "bn": "Sign in with Facebook", + "bo": "Sign in with Facebook", + "de": "Sign in with Facebook", + "el": "Sign in with Facebook", + "en": "Sign in with Facebook", + "es": "Sign in with Facebook", + "fr": "Sign in with Facebook", + "id": "Sign in with Facebook", + "ja": "Sign in with Facebook", + "km-KH": "Sign in with Facebook", + "ko": "Sign in with Facebook", + "lo": "Sign in with Facebook", + "ms": "Sign in with Facebook", + "my": "Sign in with Facebook", + "no": "Sign in with Facebook", + "pt-BR": "Sign in with Facebook", + "pt": "Sign in with Facebook", + "sv": "Sign in with Facebook", + "th": "Sign in with Facebook", + "ug": "Sign in with Facebook", + "vi": "Sign in with Facebook", + "zh-CN": "Sign in with Facebook", + "zh-TW": "Sign in with Facebook" + }, + "identity-block.social-signOn-facebook-signUp": { + "ar": "Sign up with Facebook", + "bn": "Sign up with Facebook", + "bo": "Sign up with Facebook", + "de": "Sign up with Facebook", + "el": "Sign up with Facebook", + "en": "Sign up with Facebook", + "es": "Sign up with Facebook", + "fr": "Sign up with Facebook", + "id": "Sign up with Facebook", + "ja": "Sign up with Facebook", + "km-KH": "Sign up with Facebook", + "ko": "Sign up with Facebook", + "lo": "Sign up with Facebook", + "ms": "Sign up with Facebook", + "my": "Sign up with Facebook", + "no": "Sign up with Facebook", + "pt-BR": "Sign up with Facebook", + "pt": "Sign up with Facebook", + "sv": "Sign up with Facebook", + "th": "Sign up with Facebook", + "ug": "Sign up with Facebook", + "vi": "Sign up with Facebook", + "zh-CN": "Sign up with Facebook", + "zh-TW": "Sign up with Facebook" + }, "identity-block.connect-platform": { "ar": "تواصل عبر %{platform}", "bn": "%{platform} সংযুক্ত করুন", diff --git a/blocks/identity-block/package-lock.json b/blocks/identity-block/package-lock.json index 9612e18a92..f292b30be9 100644 --- a/blocks/identity-block/package-lock.json +++ b/blocks/identity-block/package-lock.json @@ -10,14 +10,24 @@ "license": "CC-BY-NC-ND-4.0", "dependencies": { "@arc-fusion/prop-types": "^0.1.5", - "@arc-publishing/sdk-identity": "^1.79.0", + "@arc-publishing/sdk-identity": "^1.88.0", "react-google-recaptcha": "^3.1.0", "react-google-recaptcha-v3": "^1.10.1" }, + "devDependencies": { + "@testing-library/jest-dom": "^6.4.6", + "@testing-library/react": "^16.0.0" + }, "peerDependencies": { "@wpmedia/arc-themes-components": "*" } }, + "node_modules/@adobe/css-tools": { + "version": "4.4.0", + "resolved": "https://registry.npmjs.org/@adobe/css-tools/-/css-tools-4.4.0.tgz", + "integrity": "sha512-Ff9+ksdQQB3rMncgqDK78uLznstjyfIf2Arnh22pW8kBpLs6rpKDwgnZT46hin5Hl1WzazzK64DOrhSwYpS7bQ==", + "dev": true + }, "node_modules/@arc-fusion/prop-types": { "version": "0.1.5", "resolved": "https://registry.npmjs.org/@arc-fusion/prop-types/-/prop-types-0.1.5.tgz", @@ -27,13 +37,256 @@ } }, "node_modules/@arc-publishing/sdk-identity": { - "version": "1.79.0", - "resolved": "https://registry.npmjs.org/@arc-publishing/sdk-identity/-/sdk-identity-1.79.0.tgz", - "integrity": "sha512-eblhb/AMa2uKr3/sWphlonIw5gKrz2KigUYnQDU2riWZn9Z+EECmQsbpbZbkWGDaTXrtkEX3DRqBIPJsPaEsXg==", + "version": "1.88.0", + "resolved": "https://registry.npmjs.org/@arc-publishing/sdk-identity/-/sdk-identity-1.88.0.tgz", + "integrity": "sha512-CSq/eAsE3tppnDnxRTHnTbO9HAo+4eS3byn+xHSPvDbDU/E+tPngWi0Hu9skfJxC1kBb/X3I97NBPcNxGs9fXQ==", "engines": { "node": ">=8" } }, + "node_modules/@babel/code-frame": { + "version": "7.24.7", + "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.24.7.tgz", + "integrity": "sha512-BcYH1CVJBO9tvyIZ2jVeXgSIMvGZ2FDRvDdOIVQyuklNKSsx+eppDEBq/g47Ayw+RqNFE+URvOShmf+f/qwAlA==", + "dev": true, + "peer": true, + "dependencies": { + "@babel/highlight": "^7.24.7", + "picocolors": "^1.0.0" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/helper-validator-identifier": { + "version": "7.24.7", + "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.24.7.tgz", + "integrity": "sha512-rR+PBcQ1SMQDDyF6X0wxtG8QyLCgUB0eRAGguqRLfkCA87l7yAP7ehq8SNj96OOGTO8OBV70KhuFYcIkHXOg0w==", + "dev": true, + "peer": true, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/highlight": { + "version": "7.24.7", + "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.24.7.tgz", + "integrity": "sha512-EStJpq4OuY8xYfhGVXngigBJRWxftKX9ksiGDnmlY3o7B/V7KIAc9X4oiK87uPJSc/vs5L869bem5fhZa8caZw==", + "dev": true, + "peer": true, + "dependencies": { + "@babel/helper-validator-identifier": "^7.24.7", + "chalk": "^2.4.2", + "js-tokens": "^4.0.0", + "picocolors": "^1.0.0" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/highlight/node_modules/ansi-styles": { + "version": "3.2.1", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz", + "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==", + "dev": true, + "peer": true, + "dependencies": { + "color-convert": "^1.9.0" + }, + "engines": { + "node": ">=4" + } + }, + "node_modules/@babel/highlight/node_modules/chalk": { + "version": "2.4.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz", + "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==", + "dev": true, + "peer": true, + "dependencies": { + "ansi-styles": "^3.2.1", + "escape-string-regexp": "^1.0.5", + "supports-color": "^5.3.0" + }, + "engines": { + "node": ">=4" + } + }, + "node_modules/@babel/highlight/node_modules/color-convert": { + "version": "1.9.3", + "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz", + "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==", + "dev": true, + "peer": true, + "dependencies": { + "color-name": "1.1.3" + } + }, + "node_modules/@babel/highlight/node_modules/color-name": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz", + "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==", + "dev": true, + "peer": true + }, + "node_modules/@babel/highlight/node_modules/has-flag": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz", + "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==", + "dev": true, + "peer": true, + "engines": { + "node": ">=4" + } + }, + "node_modules/@babel/highlight/node_modules/supports-color": { + "version": "5.5.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz", + "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==", + "dev": true, + "peer": true, + "dependencies": { + "has-flag": "^3.0.0" + }, + "engines": { + "node": ">=4" + } + }, + "node_modules/@babel/runtime": { + "version": "7.24.7", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.24.7.tgz", + "integrity": "sha512-UwgBRMjJP+xv857DCngvqXI3Iq6J4v0wXmwc6sapg+zyhbwmQX67LUEFrkK5tbyJ30jGuG3ZvWpBiB9LCy1kWw==", + "dev": true, + "dependencies": { + "regenerator-runtime": "^0.14.0" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@testing-library/dom": { + "version": "10.2.0", + "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.2.0.tgz", + "integrity": "sha512-CytIvb6tVOADRngTHGWNxH8LPgO/3hi/BdCEHOf7Qd2GvZVClhVP0Wo/QHzWhpki49Bk0b4VT6xpt3fx8HTSIw==", + "dev": true, + "peer": true, + "dependencies": { + "@babel/code-frame": "^7.10.4", + "@babel/runtime": "^7.12.5", + "@types/aria-query": "^5.0.1", + "aria-query": "5.3.0", + "chalk": "^4.1.0", + "dom-accessibility-api": "^0.5.9", + "lz-string": "^1.5.0", + "pretty-format": "^27.0.2" + }, + "engines": { + "node": ">=18" + } + }, + "node_modules/@testing-library/dom/node_modules/chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "dev": true, + "peer": true, + "dependencies": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/chalk?sponsor=1" + } + }, + "node_modules/@testing-library/dom/node_modules/dom-accessibility-api": { + "version": "0.5.16", + "resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.5.16.tgz", + "integrity": "sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==", + "dev": true, + "peer": true + }, + "node_modules/@testing-library/jest-dom": { + "version": "6.4.6", + "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-6.4.6.tgz", + "integrity": "sha512-8qpnGVincVDLEcQXWaHOf6zmlbwTKc6Us6PPu4CRnPXCzo2OGBS5cwgMMOWdxDpEz1mkbvXHpEy99M5Yvt682w==", + "dev": true, + "dependencies": { + "@adobe/css-tools": "^4.4.0", + "@babel/runtime": "^7.9.2", + "aria-query": "^5.0.0", + "chalk": "^3.0.0", + "css.escape": "^1.5.1", + "dom-accessibility-api": "^0.6.3", + "lodash": "^4.17.21", + "redent": "^3.0.0" + }, + "engines": { + "node": ">=14", + "npm": ">=6", + "yarn": ">=1" + }, + "peerDependencies": { + "@jest/globals": ">= 28", + "@types/bun": "latest", + "@types/jest": ">= 28", + "jest": ">= 28", + "vitest": ">= 0.32" + }, + "peerDependenciesMeta": { + "@jest/globals": { + "optional": true + }, + "@types/bun": { + "optional": true + }, + "@types/jest": { + "optional": true + }, + "jest": { + "optional": true + }, + "vitest": { + "optional": true + } + } + }, + "node_modules/@testing-library/react": { + "version": "16.0.0", + "resolved": "https://registry.npmjs.org/@testing-library/react/-/react-16.0.0.tgz", + "integrity": "sha512-guuxUKRWQ+FgNX0h0NS0FIq3Q3uLtWVpBzcLOggmfMoUpgBnzBzvLLd4fbm6yS8ydJd94cIfY4yP9qUQjM2KwQ==", + "dev": true, + "dependencies": { + "@babel/runtime": "^7.12.5" + }, + "engines": { + "node": ">=18" + }, + "peerDependencies": { + "@testing-library/dom": "^10.0.0", + "@types/react": "^18.0.0", + "@types/react-dom": "^18.0.0", + "react": "^18.0.0", + "react-dom": "^18.0.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, + "node_modules/@types/aria-query": { + "version": "5.0.4", + "resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-5.0.4.tgz", + "integrity": "sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw==", + "dev": true, + "peer": true + }, "node_modules/@wpmedia/arc-themes-components": { "version": "0.0.1", "resolved": "https://npm.pkg.github.com/download/@WPMedia/arc-themes-components/0.0.1/f9ff4b987c296ed8e615b4acbbf9fb8576e437e4", @@ -41,6 +294,111 @@ "license": "CC-BY-NC-ND-4.0", "peer": true }, + "node_modules/ansi-regex": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz", + "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==", + "dev": true, + "peer": true, + "engines": { + "node": ">=8" + } + }, + "node_modules/ansi-styles": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", + "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", + "dev": true, + "dependencies": { + "color-convert": "^2.0.1" + }, + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/chalk/ansi-styles?sponsor=1" + } + }, + "node_modules/aria-query": { + "version": "5.3.0", + "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.0.tgz", + "integrity": "sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==", + "dev": true, + "dependencies": { + "dequal": "^2.0.3" + } + }, + "node_modules/chalk": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-3.0.0.tgz", + "integrity": "sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==", + "dev": true, + "dependencies": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/color-convert": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", + "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", + "dev": true, + "dependencies": { + "color-name": "~1.1.4" + }, + "engines": { + "node": ">=7.0.0" + } + }, + "node_modules/color-name": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", + "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", + "dev": true + }, + "node_modules/css.escape": { + "version": "1.5.1", + "resolved": "https://registry.npmjs.org/css.escape/-/css.escape-1.5.1.tgz", + "integrity": "sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg==", + "dev": true + }, + "node_modules/dequal": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz", + "integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==", + "dev": true, + "engines": { + "node": ">=6" + } + }, + "node_modules/dom-accessibility-api": { + "version": "0.6.3", + "resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.6.3.tgz", + "integrity": "sha512-7ZgogeTnjuHbo+ct10G9Ffp0mif17idi0IyWNVA/wcwcm7NPOD/WEHVP3n7n3MhXqxoIYm8d6MuZohYWIZ4T3w==", + "dev": true + }, + "node_modules/escape-string-regexp": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz", + "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==", + "dev": true, + "peer": true, + "engines": { + "node": ">=0.8.0" + } + }, + "node_modules/has-flag": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", + "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", + "dev": true, + "engines": { + "node": ">=8" + } + }, "node_modules/hoist-non-react-statics": { "version": "3.3.2", "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz", @@ -49,11 +407,26 @@ "react-is": "^16.7.0" } }, + "node_modules/indent-string": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-4.0.0.tgz", + "integrity": "sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==", + "dev": true, + "engines": { + "node": ">=8" + } + }, "node_modules/js-tokens": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==" }, + "node_modules/lodash": { + "version": "4.17.21", + "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz", + "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==", + "dev": true + }, "node_modules/loose-envify": { "version": "1.4.0", "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz", @@ -65,6 +438,25 @@ "loose-envify": "cli.js" } }, + "node_modules/lz-string": { + "version": "1.5.0", + "resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.5.0.tgz", + "integrity": "sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==", + "dev": true, + "peer": true, + "bin": { + "lz-string": "bin/bin.js" + } + }, + "node_modules/min-indent": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/min-indent/-/min-indent-1.0.1.tgz", + "integrity": "sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==", + "dev": true, + "engines": { + "node": ">=4" + } + }, "node_modules/object-assign": { "version": "4.1.1", "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", @@ -73,6 +465,48 @@ "node": ">=0.10.0" } }, + "node_modules/picocolors": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.1.tgz", + "integrity": "sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew==", + "dev": true, + "peer": true + }, + "node_modules/pretty-format": { + "version": "27.5.1", + "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-27.5.1.tgz", + "integrity": "sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==", + "dev": true, + "peer": true, + "dependencies": { + "ansi-regex": "^5.0.1", + "ansi-styles": "^5.0.0", + "react-is": "^17.0.1" + }, + "engines": { + "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0" + } + }, + "node_modules/pretty-format/node_modules/ansi-styles": { + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz", + "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==", + "dev": true, + "peer": true, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/ansi-styles?sponsor=1" + } + }, + "node_modules/pretty-format/node_modules/react-is": { + "version": "17.0.2", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", + "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==", + "dev": true, + "peer": true + }, "node_modules/prop-types": { "version": "15.7.2", "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.7.2.tgz", @@ -149,6 +583,25 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" }, + "node_modules/redent": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/redent/-/redent-3.0.0.tgz", + "integrity": "sha512-6tDA8g98We0zd0GvVeMT9arEOnTw9qM03L9cJXaCjrip1OO764RDBLBfrB4cwzNGDj5OA5ioymC9GkizgWJDUg==", + "dev": true, + "dependencies": { + "indent-string": "^4.0.0", + "strip-indent": "^3.0.0" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/regenerator-runtime": { + "version": "0.14.1", + "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz", + "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==", + "dev": true + }, "node_modules/scheduler": { "version": "0.23.0", "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz", @@ -157,6 +610,30 @@ "dependencies": { "loose-envify": "^1.1.0" } + }, + "node_modules/strip-indent": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/strip-indent/-/strip-indent-3.0.0.tgz", + "integrity": "sha512-laJTa3Jb+VQpaC6DseHhF7dXVqHTfJPCRDaEbid/drOhgitgYku/letMUqOXFoWV0zIIUbjpdH2t+tYj4bQMRQ==", + "dev": true, + "dependencies": { + "min-indent": "^1.0.0" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/supports-color": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", + "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", + "dev": true, + "dependencies": { + "has-flag": "^4.0.0" + }, + "engines": { + "node": ">=8" + } } } } diff --git a/blocks/identity-block/package.json b/blocks/identity-block/package.json index f084ccf379..1284385080 100644 --- a/blocks/identity-block/package.json +++ b/blocks/identity-block/package.json @@ -30,8 +30,12 @@ }, "dependencies": { "@arc-fusion/prop-types": "^0.1.5", - "@arc-publishing/sdk-identity": "^1.79.0", + "@arc-publishing/sdk-identity": "^1.88.0", "react-google-recaptcha": "^3.1.0", "react-google-recaptcha-v3": "^1.10.1" + }, + "devDependencies": { + "@testing-library/jest-dom": "^6.4.6", + "@testing-library/react": "^16.0.0" } } diff --git a/blocks/identity-block/themes/news.json b/blocks/identity-block/themes/news.json index 1e17bff118..e4e9403834 100644 --- a/blocks/identity-block/themes/news.json +++ b/blocks/identity-block/themes/news.json @@ -100,6 +100,92 @@ } } }, + "account-management-social-signon-edit": { + "styles": { + "default": { + "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": { + "styles": { + "default": { + "display": "flex", + "components": { + "icon": { + "margin-inline-end": "var(--global-spacing-2)" + } + } + } + } + }, + "account-management-social-signon-button-connect": { + "styles": { + "default": { + "background-color": "var(--global-black)" + } + } + }, + "account-management-social-signon-button-disconnect": { + "styles": { + "default": { + "color": "var(--global-black)", + "border-color": "var(--global-black)" + } + } + }, + "account-management-social-signon-button-connected": { + "styles": { + "default": { + "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": { + "styles": { + "default": { + "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": {} + } + }, "forgot-password": { "styles": { "default": { @@ -685,6 +771,64 @@ "desktop": {} } }, + "social-sign-on-button-container-google": { + "styles": { + "default": { + "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-facebook": { + "styles": { + "default": { + "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-apple": { "styles": { "default": { @@ -711,6 +855,14 @@ "desktop": {} } }, + "social-sign-on-button-container-apple-custom": { + "styles": { + "default": { + "inline-size": "100%" + }, + "desktop": {} + } + }, "social-sign-on-dividerWithText": { "styles": { "default": { @@ -750,4 +902,4 @@ "desktop": {} } } -} \ No newline at end of file +} diff --git a/blocks/identity-block/utils/definedMessageByCode.js b/blocks/identity-block/utils/definedMessageByCode.js new file mode 100644 index 0000000000..08b53d71d9 --- /dev/null +++ b/blocks/identity-block/utils/definedMessageByCode.js @@ -0,0 +1,13 @@ +const errorCodes = { + 100015: "identity-block.login-form-error.account-is-disabled", + 130001: "identity-block.login-form-error.captcha-token-invalid", + 130051: "identity-block.login-form-error.unverified-email-address", + 100013: "identity-block.login-form-error.max-devices", + 0: "identity-block.login-form-error.invalid-email-password", +}; + +function definedMessageByCode(code) { + return errorCodes[code] || errorCodes["0"]; +} + +export default definedMessageByCode; diff --git a/blocks/subscriptions-block/package.json b/blocks/subscriptions-block/package.json index a120696855..4a3d082639 100644 --- a/blocks/subscriptions-block/package.json +++ b/blocks/subscriptions-block/package.json @@ -31,7 +31,7 @@ "dependencies": { "@arc-fusion/prop-types": "^0.1.5", "@arc-publishing/sdk-sales": "^1.55.0", - "@arc-publishing/sdk-identity": "^1.55.0", + "@arc-publishing/sdk-identity": "^1.88.0", "@stripe/react-stripe-js": "^2.4.0", "@stripe/stripe-js": "^2.3.0", "is-url": "^1.2.4" diff --git a/locale/ar.json b/locale/ar.json index 056b31290f..7512983ff8 100644 --- a/locale/ar.json +++ b/locale/ar.json @@ -114,6 +114,12 @@ "identity-block.confirm-password": "تأكيد كلمة المرور", "identity-block.confirm-password-error": "كلمة المرور غير مطابقة", "identity-block.connect-account": "متصل", + "identity-block.connect-identity": "Connect", + "identity-block.login-form-error.captcha-token-required": "Captcha token required.", + "identity-block.social-google-one-tap-notification": "Sign-in prompt was suppressed by the user or dismissed. Please try again later or use another sign-in method.", + "identity-block.social-signOn-unlink-error": "At least one identity needs to remain on the user", + "identity-block.social-signOn-facebook-login": "Sign in with Facebook", + "identity-block.social-signOn-facebook-signUp": "Sign up with Facebook", "identity-block.connect-platform": "تواصل عبر %{platform}", "identity-block.connected-accounts": "الحسابات المتصلة", "identity-block.create-an-account": "إنشاء حساب", diff --git a/locale/bn.json b/locale/bn.json index b88d4d29f0..2ee9142278 100644 --- a/locale/bn.json +++ b/locale/bn.json @@ -67,7 +67,7 @@ "global.gallery-autoplay-label-stop": "স্বয়ংক্রিয় স্লাইড শো বন্ধ করুন", "global.gallery-expand-button": "সম্প্রসারণ করুন", "global.gallery-next-label": "পরবর্তী স্লাইড", - "global.gallery-page-count-text": "%{total}-এর %{current}