{
- const { facebookAppId, googleClientId } = useSocialSignIn(redirectURL, onError, isOIDC);
-
+const SocialSignOn = ({ className, onError, redirectURL, isOIDC, socialSignOnIn }) => {
+ const { facebookAppId, googleClientId, appleTeamId, appleKeyId, appleUrlToReceiveAuthToken} = useSocialSignIn(redirectURL, isOIDC, socialSignOnIn, onError);
return (
- {googleClientId ? : null}
- {facebookAppId ? : null}
+ {googleClientId ? : null}
+ {facebookAppId ? : null}
+ {appleTeamId && appleKeyId && appleUrlToReceiveAuthToken ? : null}
);
};
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 ac00d1312f..0c8f5d7e5b 100644
--- a/blocks/identity-block/components/social-sign-on/utils/useSocialSignIn.js
+++ b/blocks/identity-block/components/social-sign-on/utils/useSocialSignIn.js
@@ -4,7 +4,9 @@ import { GoogleSignInContext } from "./googleContext";
import useOIDCLogin from "../../../utils/useOIDCLogin";
import validateURL from "../../../utils/validate-redirect-url";
-function useSocialSignIn(redirectURL, onError = () => {}, isOIDC) {
+import {SIGN_UP} from "../constants";
+
+function useSocialSignIn(redirectURL, isOIDC, socialSignOnIn, onError = () => {}) {
const { Identity } = useIdentity();
const { isGoogleLoaded } = useContext(GoogleSignInContext);
const [config, setConfig] = useState(() => Identity?.configOptions ?? {});
@@ -25,7 +27,7 @@ function useSocialSignIn(redirectURL, onError = () => {}, isOIDC) {
onError();
}
};
- }, [Identity, onError, redirectURL]);
+ }, [Identity, onError, redirectURL, isOIDC, loginByOIDC]);
useEffect(() => {
const fetchConfig = async () => {
@@ -56,15 +58,15 @@ function useSocialSignIn(redirectURL, onError = () => {}, isOIDC) {
};
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: "continue_with",
+ text: googleTextType,
shape: "rectangular",
logo_alignment: "left",
- width: "300",
+ width: "400",
});
Identity.isLoggedIn().then((isLoggedIn) => {
@@ -75,7 +77,7 @@ function useSocialSignIn(redirectURL, onError = () => {}, isOIDC) {
}
});
}
- }, [config.googleClientId, Identity, isGoogleLoaded]);
+ }, [config.googleClientId, Identity, isGoogleLoaded, isOIDC, loginByOIDC, redirectURL, socialSignOnIn ]);
useEffect(() => {
const initializeFacebook = async () => {
@@ -91,6 +93,9 @@ function useSocialSignIn(redirectURL, onError = () => {}, isOIDC) {
// then they will have a truthy value here
facebookAppId: config.facebookAppId,
googleClientId: config.googleClientId,
+ appleTeamId: config.teamId,
+ appleKeyId: config.keyId,
+ appleUrlToReceiveAuthToken: config.urlToReceiveAuthToken
};
}
diff --git a/blocks/identity-block/features/account-management/_children/EmailEditableFieldContainer.test.jsx b/blocks/identity-block/features/account-management/_children/EmailEditableFieldContainer.test.jsx
new file mode 100644
index 0000000000..7351409129
--- /dev/null
+++ b/blocks/identity-block/features/account-management/_children/EmailEditableFieldContainer.test.jsx
@@ -0,0 +1,40 @@
+import React from 'react';
+import { render, fireEvent, screen} from '@testing-library/react';
+import EmailEditableFieldContainer from './EmailEditableFieldContainer';
+
+const mockUpdateProfile = jest.fn(() => Promise.resolve())
+const mockIdentity = {
+ apiOrigin: "http://origin/",
+ isLoggedIn: jest.fn(() => false),
+ getConfig: jest.fn(() => ({})),
+ updateUserProfile: mockUpdateProfile
+};
+
+jest.mock("@wpmedia/arc-themes-components", () => ({
+ ...jest.requireActual("@wpmedia/arc-themes-components"),
+ useIdentity: jest.fn(() => ({
+ isInitialized: true,
+ Identity: {
+ ...mockIdentity,
+ },
+ }))
+}));
+
+describe('EmailEditableFieldContainer', () => {
+ it('updates email and clears error on successful submission', async () => {
+ const setEmail = jest.fn();
+ render(
+
+ );
+
+ fireEvent.click(screen.getByText('identity-block.edit'));
+ const inputElement = screen.getByLabelText('identity-block.email')
+ fireEvent.input(inputElement, { target: { value: 'new@example.com' } });
+
+ expect(inputElement.value).toBe('new@example.com');
+ });
+});
\ No newline at end of file
diff --git a/blocks/identity-block/features/account-management/_children/PasswordEditableFieldContainer.test.jsx b/blocks/identity-block/features/account-management/_children/PasswordEditableFieldContainer.test.jsx
index 1822a2a89d..4612a6c09e 100644
--- a/blocks/identity-block/features/account-management/_children/PasswordEditableFieldContainer.test.jsx
+++ b/blocks/identity-block/features/account-management/_children/PasswordEditableFieldContainer.test.jsx
@@ -1,9 +1,7 @@
import React from "react";
import { fireEvent, render, screen } from "@testing-library/react";
-import { act } from "react-dom/test-utils";
import PasswordEditableFieldContainer from "./PasswordEditableFieldContainer";
-import FormPasswordConfirm from "../../../components/form-password-confirm";
jest.mock("../../../components/form-password-confirm", () => () =>
Password Confirm
);
diff --git a/blocks/identity-block/features/account-management/default.jsx b/blocks/identity-block/features/account-management/default.jsx
index 6e56956ce1..fa32a2c35a 100644
--- a/blocks/identity-block/features/account-management/default.jsx
+++ b/blocks/identity-block/features/account-management/default.jsx
@@ -94,7 +94,6 @@ function AccountManagement({ customFields }) {
const header = phrases.t("identity-block.account-information");
const socialProfileHeader = phrases.t("identity-block.connected-accounts");
- console.log(header, socialProfileHeader);
// if logged in, return account info
return (
diff --git a/blocks/identity-block/features/account-management/default.test.jsx b/blocks/identity-block/features/account-management/default.test.jsx
index 331af54723..afcf8de71d 100644
--- a/blocks/identity-block/features/account-management/default.test.jsx
+++ b/blocks/identity-block/features/account-management/default.test.jsx
@@ -1,18 +1,67 @@
import React from "react";
-import { render, screen } from "@testing-library/react";
+import { render, screen, waitFor } from "@testing-library/react";
import "@testing-library/jest-dom";
import { useIdentity } from "@wpmedia/arc-themes-components";
import AccountManagement, { AccountManagementPresentational } from "./default";
-import EmailEditableFieldContainer from "./_children/EmailEditableFieldContainer";
-import PasswordEditableFieldContainer from "./_children/PasswordEditableFieldContainer";
-import SocialEditableSection from "./_children/SocialEditableSection";
-
jest.mock("./_children/EmailEditableFieldContainer", () => () =>
Email
);
jest.mock("./_children/PasswordEditableFieldContainer", () => () =>
Password
);
jest.mock("./_children/SocialEditableSection", () => () =>
Social
);
-jest.mock("@wpmedia/arc-themes-components");
+jest.mock("fusion:context", () => ({
+ useFusionContext: () => ({ isAdmin: false, globalContent: { credits: {} } }),
+}));
+jest.mock("fusion:properties", () => jest.fn(() => ({})));
+
+const defaultCustomFields = {
+ redirectURL: "",
+ showEmail: true,
+ showPassword: true,
+ showSocialProfile: false,
+};
+
+jest.mock("@arc-publishing/sdk-identity", () => ({
+ __esModule: true,
+ default: {
+ apiOrigin: "http://origin/",
+ options: jest.fn(),
+ },
+}));
+
+jest.mock("fusion:properties", () =>
+ jest.fn(() => ({
+ api: {
+ identity: {
+ origin: "https://corecomponents-arc-demo-3-prod.api.cdn.arcpublishing.com",
+ },
+ },
+ })),
+);
+
+const mockLogin = jest.fn(() => Promise.resolve());
+const mockIdentity = {
+ apiOrigin: "http://origin/",
+ isLoggedIn: jest.fn(() => false),
+ getConfig: jest.fn(() => ({})),
+ getUserProfile: jest.fn(() => ({})),
+ login: mockLogin,
+};
+
+jest.mock("@wpmedia/arc-themes-components", () => ({
+ useIdentity: jest.fn(() => ({
+ isInitialized: true,
+ Identity: {
+ ...mockIdentity,
+ },
+ })),
+ Heading: ({ children }) =>
{children}
,
+ Input: ({ type, label }) => (
+
+
+
+
+ ),
+}));
const userProfileMock = jest.fn(() =>
Promise.resolve({ email: "test@domain.com", identities: [] }),
@@ -25,21 +74,24 @@ describe("Account management", () => {
it("renders header text", async () => {
render(
);
- await expect(screen.findByText("header")).not.toBeNull();
+ const title = screen.getByText("header");
+ expect(title).not.toBeNull();
});
it("should render account management if logged in and initialized", async () => {
useIdentity.mockImplementation(() => ({
isInitialized: true,
Identity: {
+ apiOrigin: "http://origin/",
isLoggedIn: jest.fn(async () => true),
getConfig: jest.fn(async () => ({})),
getUserProfile: userProfileMock,
},
}));
- render(
);
- await expect(screen.findByText("Account Information")).not.toBeNull();
+ render(
);
+
+ await waitFor(() => expect(screen.getByText("identity-block.account-information")));
});
it("should not render if not logged in and not initialized", async () => {
@@ -65,7 +117,8 @@ describe("Account management", () => {
}));
render(
);
- await expect(screen.findByText("Email")).not.toBeNull();
+
+ await waitFor(() => expect(screen.getByText("Email")));
});
it("hides email input editable field if showing email", () => {
@@ -84,7 +137,8 @@ describe("Account management", () => {
}));
render(
);
- await expect(screen.findByText("Password")).not.toBeNull();
+
+ await waitFor(() => expect(screen.getByText("Password")));
});
it("hides password input editable field if showing password", async () => {
@@ -103,7 +157,8 @@ describe("Account management", () => {
}));
render(
);
- await expect(screen.findByText("Password")).not.toBeNull();
+
+ await waitFor(() => expect(screen.getByText("Social")));
});
it("hides social profile if showing social", async () => {
diff --git a/blocks/identity-block/features/login-links/default.jsx b/blocks/identity-block/features/login-links/default.jsx
index 4a1615492c..3e543d9b36 100644
--- a/blocks/identity-block/features/login-links/default.jsx
+++ b/blocks/identity-block/features/login-links/default.jsx
@@ -29,10 +29,10 @@ const LoginLinks = ({ customFields }) => {
return (
{showLogin ? (
- {phrases.t("identity-block.login-links-login")}
+ {phrases.t("identity-block.login-links-login")}{phrases.t("identity-block.log-in")}
) : null}
{showForgot ? (
- {phrases.t("identity-block.login-links-forgot")}
+ {phrases.t("identity-block.login-links-forgot")}
) : null}
{showSignUp ? (
{phrases.t("identity-block.login-links-signup")}{phrases.t("identity-block.sign-up-natural")}
diff --git a/blocks/identity-block/features/login/default.jsx b/blocks/identity-block/features/login/default.jsx
index 4faf237548..baa30af765 100644
--- a/blocks/identity-block/features/login/default.jsx
+++ b/blocks/identity-block/features/login/default.jsx
@@ -1,16 +1,18 @@
-/* global grecaptcha */
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 } from "@wpmedia/arc-themes-components";
+import {
+ Input,
+ useIdentity,
+ Paragraph,
+ BotChallengeProtection,
+} from "@wpmedia/arc-themes-components";
import HeadlinedSubmitForm from "../../components/headlined-submit-form";
import useLogin from "../../components/login";
-import BotChallengeProtection from "../../components/bot-challenge-protection";
import useOIDCLogin from "../../utils/useOIDCLogin";
import validateURL from "../../utils/validate-redirect-url";
-import { RECAPTCHA_LOGIN } from "../../utils/useRecaptcha";
const BLOCK_CLASS_NAME = "b-login-form";
@@ -27,7 +29,8 @@ export function definedMessageByCode(code) {
}
const Login = ({ customFields }) => {
- const { redirectURL, redirectToPreviousPage, loggedInPageLocation, OIDC } = customFields;
+ const { redirectURL, redirectToPreviousPage, loggedInPageLocation, OIDC, termsAndPrivacyURL } =
+ customFields;
const urlString = window.location.href;
const url = new URL(urlString);
@@ -38,11 +41,15 @@ const Login = ({ customFields }) => {
const isOIDC =
OIDC && url.searchParams.get("client_id") && url.searchParams.get("response_type") === "code";
+
const { Identity, isInitialized } = useIdentity();
+
const [captchaToken, setCaptchaToken] = useState();
+ const [captchaError, setCaptchaError] = useState();
const [resetRecaptcha, setResetRecaptcha] = useState(true);
+
const [error, setError] = useState();
- const [captchaError, setCaptchaError] = useState();
+
const { loginRedirect } = useLogin({
isAdmin,
redirectURL,
@@ -66,7 +73,7 @@ const Login = ({ customFields }) => {
setCaptchaError(null);
return Identity.login(email, password, {
rememberMe: true,
- recaptchaToken: captchaToken
+ recaptchaToken: captchaToken,
})
.then(() => {
if (isOIDC) {
@@ -79,15 +86,10 @@ const Login = ({ customFields }) => {
.catch((e) => {
setResetRecaptcha(!resetRecaptcha);
if (e?.code === "130001") {
- setCaptchaError(true);
- }
- else {
+ setCaptchaError(phrases.t(definedMessageByCode(e.code)));
+ } else {
setError(phrases.t(definedMessageByCode(e.code)));
}
- if (grecaptcha) {
- grecaptcha.reset();
- }
-
});
}}
>
@@ -114,16 +116,20 @@ const Login = ({ customFields }) => {
type="password"
/>
-
- {phrases.t("identity-block.privacy-statement")}
-
+
);
};
@@ -154,6 +160,10 @@ Login.propTypes = {
description:
"Used when authenticating a third party site with OIDC PKCE flow. This will use an ArcXp Org as an auth provider",
}),
+ termsAndPrivacyURL: PropTypes.string.tag({
+ name: "Privacy Policy URL",
+ defaultValue: "/privacy-policy/",
+ }),
}),
};
diff --git a/blocks/identity-block/features/login/default.test.jsx b/blocks/identity-block/features/login/default.test.jsx
index 5c07d0d40b..9049b2898e 100644
--- a/blocks/identity-block/features/login/default.test.jsx
+++ b/blocks/identity-block/features/login/default.test.jsx
@@ -1,24 +1,44 @@
import React from "react";
import { fireEvent, render, screen, waitFor } from "@testing-library/react";
import { useIdentity } from "@wpmedia/arc-themes-components";
-import Login from "./default";
+
+import Login, {definedMessageByCode} from "./default";
const defaultCustomFields = {
redirectURL: "",
redirectToPreviousPage: true,
- signUpURL: ""
+ signUpURL: "",
};
+jest.mock("@arc-publishing/sdk-identity", () => ({
+ __esModule: true,
+ default: {
+ apiOrigin: "http://origin/",
+ options: jest.fn(),
+ },
+}));
+
+jest.mock("fusion:properties", () =>
+ jest.fn(() => ({
+ api: {
+ identity: {
+ origin: "https://corecomponents-arc-demo-3-prod.api.cdn.arcpublishing.com",
+ }
+ },
+ })),
+);
+
const mockLogin = jest.fn(() => Promise.resolve());
const mockIdentity = {
+ apiOrigin: "http://origin/",
isLoggedIn: jest.fn(() => false),
getConfig: jest.fn(() => ({})),
login: mockLogin,
};
const mockSales = {
- getConfig: jest.fn(() => {})
-}
+ getConfig: jest.fn(() => {}),
+};
jest.mock("@wpmedia/arc-themes-components", () => ({
...jest.requireActual("@wpmedia/arc-themes-components"),
@@ -34,13 +54,21 @@ jest.mock("@wpmedia/arc-themes-components", () => ({
...mockSales,
},
})),
+ BotChallengeProtection: ({ challengeIn= 'login' }) =>
}));
-jest.mock("fusion:properties", () => jest.fn(() => ({})));
+
+jest.mock("../../components/login", () => ({
+ __esModule: true,
+ default: jest.fn(() => ({
+ loginRedirect: jest.fn(),
+ })),
+ }));
describe("Identity Login Feature", () => {
- it("renders", () => {
+ it("renders", async () => {
render();
expect(screen.getByRole("form")).not.toBeNull();
+ expect(screen.getByTestId("reCapctha-signin")).not.toBeNull();
});
it("shows login form", () => {
@@ -72,8 +100,8 @@ describe("Identity Login Feature - rejected Login, general message", () => {
beforeEach(() => {
mockLogin.mockRejectedValueOnce({ code: 0 });
global.grecaptcha = {
- reset: jest.fn()
- }
+ reset: jest.fn(),
+ };
});
afterEach(() => {
@@ -103,10 +131,10 @@ describe("Identity Login Feature - rejected Login, general message", () => {
describe("Identity Login Feature - rejected Login, error code 130001", () => {
beforeEach(() => {
- mockLogin.mockRejectedValueOnce({ code: 130001 });
+ mockLogin.mockRejectedValueOnce({ code: 130001 }); // eslint-disable-line
global.grecaptcha = {
- reset: jest.fn()
- }
+ reset: jest.fn(),
+ };
});
afterEach(() => {
@@ -114,7 +142,6 @@ describe("Identity Login Feature - rejected Login, error code 130001", () => {
});
it("rejects the login", async () => {
-
render();
await waitFor(() => expect(screen.getByLabelText("identity-block.email-label")));
@@ -149,8 +176,25 @@ describe("Identity Login Feature - unInitialized", () => {
jest.clearAllMocks();
});
- it("renders nothing if identity not initialized", () => {
+ it("renders null if identity not initialized", async () => {
render();
expect(screen.queryAllByRole("button")).toEqual([]);
});
});
+
+describe("Define message by code", () => {
+ it("returns generic message if code doesn't exist", () => {
+ const result = definedMessageByCode("123");
+ expect(result).toEqual("identity-block.login-form-error.invalid-email-password");
+ });
+
+ it("returns generic message if code is undefined", () => {
+ const result = definedMessageByCode();
+ expect(result).toEqual("identity-block.login-form-error.invalid-email-password");
+ });
+
+ it("return message if code exists", () => {
+ const result = definedMessageByCode(100015);
+ expect(result).toEqual("identity-block.login-form-error.account-is-disabled");
+ });
+});
\ No newline at end of file
diff --git a/blocks/identity-block/features/signup/default.jsx b/blocks/identity-block/features/signup/default.jsx
index 331116c57b..eec5d5d653 100644
--- a/blocks/identity-block/features/signup/default.jsx
+++ b/blocks/identity-block/features/signup/default.jsx
@@ -2,7 +2,13 @@ import React, { useEffect, useState } from "react";
import PropTypes from "@arc-fusion/prop-types";
import getProperties from "fusion:properties";
import getTranslatedPhrases from "fusion:intl";
-import { Input, isServerSide, Paragraph, useIdentity } from "@wpmedia/arc-themes-components";
+import {
+ Input,
+ isServerSide,
+ Paragraph,
+ useIdentity,
+ BotChallengeProtection,
+} from "@wpmedia/arc-themes-components";
import HeadlinedSubmitForm from "../../components/headlined-submit-form";
import FormPasswordConfirm from "../../components/form-password-confirm";
import validatePasswordPattern from "../../utils/validate-password-pattern";
@@ -10,20 +16,34 @@ import passwordValidationMessage from "../../utils/password-validation-message";
const BLOCK_CLASS_NAME = "b-sign-up";
+const errorCodes = {
+ 300039: "identity-block.signup-form-error.identity-already-exists",
+ '010122': "identity-block.login-form-error.captcha-token-invalid",
+ 0: "identity-block.login-form-error.invalid-email-password",
+};
+
+export function definedMessageByCode(code) {
+ return errorCodes[code] || errorCodes["0"];
+}
+
const SignUp = ({ customFields, arcSite }) => {
let { redirectURL } = customFields;
- const { privacyURL, redirectToPreviousPage, termsURL } = customFields;
+ const { termsAndPrivacyURL, redirectToPreviousPage } = customFields;
const { locale } = getProperties(arcSite);
const phrases = getTranslatedPhrases(locale);
const { Identity, isInitialized } = useIdentity();
+ const [captchaToken, setCaptchaToken] = useState();
+ const [resetRecaptcha, setResetRecaptcha] = useState(true);
+ const [captchaError, setCaptchaError] = useState();
+
+ const [error, setError] = useState();
+
const [passwordRequirements, setPasswordRequirements] = useState({
status: "initial",
});
- const [error, setError] = useState();
-
useEffect(() => {
const getConfig = async () => {
await Identity.getConfig()
@@ -66,48 +86,56 @@ const SignUp = ({ customFields, arcSite }) => {
status,
} = passwordRequirements;
+ const passwordOptions = {
+ lowercase: {
+ value: pwLowercase,
+ message: phrases.t("identity-block.password-requirements-lowercase", {
+ requirementCount: pwLowercase,
+ }),
+ },
+ minLength: {
+ value: pwMinLength,
+ message: phrases.t("identity-block.password-requirements-characters", {
+ requirementCount: pwMinLength,
+ }),
+ },
+ uppercase: {
+ value: pwUppercase,
+ message: phrases.t("identity-block.password-requirements-uppercase", {
+ requirementCount: pwUppercase,
+ }),
+ },
+ numbers: {
+ value: pwPwNumbers,
+ message: phrases.t("identity-block.password-requirements-numbers", {
+ requirementCount: pwPwNumbers,
+ }),
+ },
+ specialCharacters: {
+ value: pwSpecialCharacters,
+ message: phrases.t("identity-block.password-requirements-special", {
+ requirementCount: pwSpecialCharacters,
+ }),
+ },
+ };
+
const passwordErrorMessage = passwordValidationMessage({
defaultMessage: phrases.t("identity-block.password-requirements"),
- options: {
- lowercase: {
- value: pwLowercase,
- message: phrases.t("identity-block.password-requirements-lowercase", {
- requirementCount: pwLowercase,
- }),
- },
- minLength: {
- value: pwMinLength,
- message: phrases.t("identity-block.password-requirements-characters", {
- requirementCount: pwMinLength,
- }),
- },
- uppercase: {
- value: pwUppercase,
- message: phrases.t("identity-block.password-requirements-uppercase", {
- requirementCount: pwUppercase,
- }),
- },
- numbers: {
- value: pwPwNumbers,
- message: phrases.t("identity-block.password-requirements-numbers", {
- requirementCount: pwPwNumbers,
- }),
- },
- specialCharacters: {
- value: pwSpecialCharacters,
- message: phrases.t("identity-block.password-requirements-special", {
- requirementCount: pwSpecialCharacters,
- }),
- },
- },
+ options: passwordOptions,
+ });
+
+ const tipPasswordMessage = passwordValidationMessage({
+ options: passwordOptions,
});
return (
- Identity.signUp(
+ headline={phrases.t("identity-block.create-an-account")}
+ buttonLabel={phrases.t("identity-block.sign-up-natural")}
+ onSubmit={({ email, password }) => {
+ setError(null);
+ setCaptchaError(null);
+ return Identity.signUp(
{
userName: email,
credentials: password,
@@ -117,18 +145,30 @@ const SignUp = ({ customFields, arcSite }) => {
},
undefined,
true,
+ captchaToken,
)
.then(() => {
window.location = redirectURL;
})
- .catch(() => setError(phrases.t("identity-block.sign-up-form-error")))
- }
- formErrorText={error}
+ .catch((e) => {
+ setResetRecaptcha(!resetRecaptcha);
+ if (e?.code === "010122") {
+ setCaptchaError(phrases.t(definedMessageByCode(e.code)));
+ } else {
+ setError(phrases.t(definedMessageByCode(e.code)));
+ }
+ });
+ }}
className={BLOCK_CLASS_NAME}
>
+ {error ? (
+
+ ) : null}
{
)}
confirmLabel={phrases.t("identity-block.confirm-password")}
confirmValidationErrorMessage={phrases.t("identity-block.confirm-password-error")}
+ tipPasswordMessage={tipPasswordMessage}
+ className={BLOCK_CLASS_NAME}
/>
-
+
);
};
@@ -174,15 +225,11 @@ SignUp.propTypes = {
description:
"Do you wish for the user to be redirected to the page they entered from before signing up? This overrides redirect URL",
}),
- termsURL: PropTypes.string.tag({
- name: "Terms and Conditions URL",
- defaultValue: "/terms-and-conditions/",
- }),
- privacyURL: PropTypes.string.tag({
+ termsAndPrivacyURL: PropTypes.string.tag({
name: "Privacy Policy URL",
defaultValue: "/privacy-policy/",
}),
}),
};
-export default SignUp;
+export default SignUp;
\ No newline at end of file
diff --git a/blocks/identity-block/features/signup/default.test.jsx b/blocks/identity-block/features/signup/default.test.jsx
index de36ab139a..5b90ef5dd8 100644
--- a/blocks/identity-block/features/signup/default.test.jsx
+++ b/blocks/identity-block/features/signup/default.test.jsx
@@ -1,11 +1,55 @@
import React from "react";
-import { fireEvent, render, screen } from "@testing-library/react";
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
import { useIdentity } from "@wpmedia/arc-themes-components";
-import Signup from "./default";
+import Signup, {definedMessageByCode} from "./default";
-jest.mock("fusion:properties", () => jest.fn(() => ({})));
+jest.mock("@arc-publishing/sdk-identity", () => ({
+ __esModule: true,
+ default: {
+ apiOrigin: "http://origin/",
+ options: jest.fn(),
+ },
+}));
-jest.mock("@wpmedia/arc-themes-components");
+jest.mock("fusion:properties", () =>
+ jest.fn(() => ({
+ api: {
+ identity: {
+ origin: "https://corecomponents-arc-demo-3-prod.api.cdn.arcpublishing.com",
+ }
+ },
+ })),
+);
+
+const mockLogin = jest.fn(() => Promise.resolve());
+const mockIdentity = {
+ apiOrigin: "http://origin/",
+ isLoggedIn: jest.fn(() => false),
+ getConfig: jest.fn(() => ({})),
+ login: mockLogin,
+};
+
+const mockSales = {
+ getConfig: jest.fn(() => {}),
+};
+
+jest.mock("@wpmedia/arc-themes-components", () => ({
+ ...jest.requireActual("@wpmedia/arc-themes-components"),
+ useIdentity: jest.fn(() => ({
+ isInitialized: true,
+ Identity: {
+ ...mockIdentity,
+ },
+ })),
+ useSales: jest.fn(() => ({
+ isInitialized: true,
+ Sales: {
+ ...mockSales,
+ },
+ })),
+ // Button: ({onClick}) => ,
+ BotChallengeProtection: ({ challengeIn= 'signup' }) =>
+}));
describe("With unintialized identity", () => {
it("renders nothing if identity not initialized", () => {
@@ -21,83 +65,103 @@ describe("With initialized identity", () => {
expect(true);
});
- // Fails
- // it("renders something", () => {
- // useIdentity.mockImplementation(() => ({ isInitialized: true }));
- // render();
-
- // expect(screen.getByRole("form")).not.toBeNull();
- // expect(screen.getByLabelText("identity-block.email")).not.toBeNull();
- // expect(screen.getByLabelText("identity-block.password")).not.toBeNull();
- // expect(screen.getByLabelText("identity-block.confirm-password")).not.toBeNull();
- // });
-
- // it("submits the form", () => {
- // const signUpMock = jest.fn(() => Promise.resolve());
- // useIdentity.mockImplementation(
- // jest.fn(() => ({
- // Identity: {
- // getConfig: jest.fn(() => Promise.resolve()),
- // signUp: signUpMock,
- // },
- // isInitialized: true,
- // })),
- // );
- // render();
-
- // fireEvent.change(screen.getByLabelText("identity-block.email"), {
- // target: { value: "email@test.com" },
- // });
- // fireEvent.change(screen.getByLabelText("identity-block.password"), {
- // target: { value: "thisIsMyPassword" },
- // });
- // fireEvent.change(screen.getByLabelText("identity-block.confirm-password"), {
- // target: { value: "thisIsMyPassword" },
- // });
- // fireEvent.click(screen.getByRole("button"));
- // expect(signUpMock).toHaveBeenCalledWith(
- // {
- // userName: "email@test.com",
- // credentials: "thisIsMyPassword",
- // },
- // {
- // email: "email@test.com",
- // },
- // );
- // });
-
- // it("rejects the form", async () => {
- // const signUpMock = jest.fn(() => Promise.reject());
- // useIdentity.mockImplementation(
- // jest.fn(() => ({
- // Identity: {
- // getConfig: jest.fn(() => Promise.resolve()),
- // signUp: signUpMock,
- // },
- // isInitialized: true,
- // }))
- // );
- // render();
-
- // fireEvent.change(screen.getByLabelText("identity-block.email"), {
- // target: { value: "email-already-exists@test.com" },
- // });
- // fireEvent.change(screen.getByLabelText("identity-block.password"), {
- // target: { value: "thisIsMyPassword" },
- // });
- // fireEvent.change(screen.getByLabelText("identity-block.confirm-password"), {
- // target: { value: "thisIsMyPassword" },
- // });
- // fireEvent.click(screen.getByRole("button"));
- // await expect(signUpMock).toHaveBeenCalledWith(
- // {
- // userName: "email-already-exists@test.com",
- // credentials: "thisIsMyPassword",
- // },
- // {
- // email: "email-already-exists@test.com",
- // }
- // );
- // expect(screen.getByText("identity-block.sign-up-form-error")).not.toBeNull();
- // });
+ it("renders something", () => {
+ useIdentity.mockImplementation(() => ({ isInitialized: true }));
+ render();
+
+ expect(screen.getByRole("form")).not.toBeNull();
+ expect(screen.getByLabelText("identity-block.email-label")).not.toBeNull();
+ expect(screen.getByLabelText("identity-block.password")).not.toBeNull();
+ expect(screen.getByLabelText("identity-block.confirm-password")).not.toBeNull();
+ });
+
+ it("submits the form", async () => {
+ const signUpMock = jest.fn(() => Promise.resolve());
+ useIdentity.mockImplementation(
+ jest.fn(() => ({
+ Identity: {
+ getConfig: jest.fn(() => Promise.resolve()),
+ signUp: signUpMock,
+ },
+ isInitialized: true,
+ })),
+ );
+ render();
+
+ await waitFor(() => expect(screen.getByLabelText("identity-block.email-label")));
+ fireEvent.change(screen.getByLabelText("identity-block.email-label"), {
+ target: { value: "email@test.com" },
+ });
+ await waitFor(() => expect(screen.getByLabelText("identity-block.password")));
+ fireEvent.change(screen.getByLabelText("identity-block.password"), {
+ target: { value: "thisIsMyPassword" },
+ });
+ await waitFor(() => expect(screen.getByLabelText("identity-block.confirm-password")));
+ fireEvent.change(screen.getByLabelText("identity-block.confirm-password"), {
+ target: { value: "thisIsMyPassword" },
+ });
+
+ await waitFor(() => expect(screen.getByRole("button")));
+ fireEvent.click(screen.getByRole("button"));
+
+ await waitFor(() => {
+ expect(signUpMock).toHaveBeenCalled();
+ });
+ });
+
+ it("rejects the form", async () => {
+ const signUpMock = jest.fn(() => Promise.reject(new Error({code: 0})));
+ useIdentity.mockImplementation(
+ jest.fn(() => ({
+ Identity: {
+ getConfig: jest.fn(() => Promise.resolve()),
+ signUp: signUpMock,
+ },
+ isInitialized: true,
+ }))
+ );
+ render();
+
+ expect(screen.queryByTestId("signup-form-error")).toBeNull();
+
+ await waitFor(() => expect(screen.getByLabelText("identity-block.email-label")));
+ fireEvent.change(screen.getByLabelText("identity-block.email-label"), {
+ target: { value: "email-already-exists@test.com" },
+ });
+
+ await waitFor(() => expect(screen.getByLabelText("identity-block.password")));
+ fireEvent.change(screen.getByLabelText("identity-block.password"), {
+ target: { value: "thisIsMyPassword" },
+ });
+
+ await waitFor(() => expect(screen.getByLabelText("identity-block.confirm-password")));
+ fireEvent.change(screen.getByLabelText("identity-block.confirm-password"), {
+ target: { value: "thisIsMyPassword" },
+ });
+
+ fireEvent.click(screen.getByRole("button"));
+
+ await waitFor(() => {
+ expect(signUpMock).toHaveBeenCalled();
+ });
+
+ expect(screen.getByTestId("signup-form-error")).not.toBeNull();
+ });
+});
+
+describe("Define message by code", () => {
+ it("returns generic message if code doesn't exist", () => {
+ const result = definedMessageByCode("123");
+ expect(result).toEqual("identity-block.login-form-error.invalid-email-password");
+ });
+
+ it("returns generic message if code is undefined", () => {
+ const result = definedMessageByCode();
+ expect(result).toEqual("identity-block.login-form-error.invalid-email-password");
+ });
+
+ it("return message if code exists", () => {
+ const result = definedMessageByCode('010122');
+ expect(result).toEqual("identity-block.login-form-error.captcha-token-invalid");
+ });
});
diff --git a/blocks/identity-block/features/social-sign-on/default.jsx b/blocks/identity-block/features/social-sign-on/default.jsx
index 4c991ce4ff..6f7a81f80f 100644
--- a/blocks/identity-block/features/social-sign-on/default.jsx
+++ b/blocks/identity-block/features/social-sign-on/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 { Paragraph, useIdentity } from "@wpmedia/arc-themes-components";
+import { Paragraph, useIdentity, Stack } from "@wpmedia/arc-themes-components";
import SocialSignOn from "../../components/social-sign-on";
import useLogin from "../../components/login";
import { GoogleSignInProvider } from "../../components/social-sign-on/utils/googleContext";
@@ -11,12 +11,32 @@ import { GoogleSignInProvider } from "../../components/social-sign-on/utils/goog
const BLOCK_CLASS_NAME = "b-social-sign-on";
const SocialSignOnBlock = ({ customFields }) => {
- const { redirectURL, redirectToPreviousPage, loggedInPageLocation, OIDC } = customFields;
+ const {
+ redirectURL,
+ redirectToPreviousPage,
+ loggedInPageLocation,
+ OIDC,
+ socialSignOnIn,
+ hideDiv,
+ } = customFields;
+
+ const checkAppleCodeExists = (url) => {
+ const urlQueryParams = url.split("?");
+ if (urlQueryParams.length) {
+ const charsAfterLastQuestionMark = urlQueryParams[urlQueryParams.length - 1];
+ const queryParams = new URLSearchParams(charsAfterLastQuestionMark);
+ const appleCode = queryParams.get("code");
+ return appleCode;
+ }
+ return null;
+ };
- const url_string = window.location.href;
- const url = new URL(url_string);
- const isOIDC = OIDC && url.searchParams.get("client_id") && url.searchParams.get("response_type") === "code";
+ const urlString = window.location.href;
+ const url = new URL(urlString);
+ const isOIDC =
+ OIDC && url.searchParams.get("client_id") && url.searchParams.get("response_type") === "code";
+ const appleCode = checkAppleCodeExists(urlString);
const { isAdmin, arcSite } = useFusionContext();
const { locale } = getProperties(arcSite);
const phrases = getTranslatedPhrases(locale);
@@ -30,7 +50,8 @@ const SocialSignOnBlock = ({ customFields }) => {
redirectURL,
redirectToPreviousPage,
loggedInPageLocation,
- isOIDC
+ isOIDC,
+ appleCode,
});
if (!isInitialized) {
@@ -38,7 +59,8 @@ const SocialSignOnBlock = ({ customFields }) => {
}
return (
-
+
+ {!hideDiv ? {phrases.t("identity-block.or")}
: null}
{
}}
redirectURL={loginRedirect}
isOIDC={isOIDC}
+ socialSignOnIn={socialSignOnIn}
/>
{error ? (
@@ -54,7 +77,7 @@ const SocialSignOnBlock = ({ customFields }) => {
{error}
) : null}
-
+
);
};
@@ -79,10 +102,22 @@ SocialSignOnBlock.propTypes = {
"The URL to which a user would be redirected to if logged in an vist a page with the login form on",
}),
OIDC: PropTypes.bool.tag({
- name: 'Login with OIDC',
- defaultValue: false,
- description: 'Used when authenticating a third party site with OIDC PKCE flow. This will use an ArcXp Org as an auth provider',
- }),
+ name: "Login with OIDC",
+ defaultValue: false,
+ description:
+ "Used when authenticating a third party site with OIDC PKCE flow. This will use an ArcXp Org as an auth provider",
+ }),
+ socialSignOnIn: PropTypes.oneOf(["Login", "SignUp"]).tag({
+ defaultValue: "Login",
+ description: "Social Sign on component to be rendered on Login or Sign Up form.",
+ label: "Social Sign On In",
+ }),
+ hideDiv: PropTypes.bool.tag({
+ name: "Hide divider",
+ defaultValue: false,
+ description:
+ "Used when we want to hide the ---OR--- divider",
+ })
}),
};
diff --git a/blocks/identity-block/features/social-sign-on/default.test-ignore.jsx b/blocks/identity-block/features/social-sign-on/default.test.jsx
similarity index 70%
rename from blocks/identity-block/features/social-sign-on/default.test-ignore.jsx
rename to blocks/identity-block/features/social-sign-on/default.test.jsx
index 76e7c4645d..2af7022553 100644
--- a/blocks/identity-block/features/social-sign-on/default.test-ignore.jsx
+++ b/blocks/identity-block/features/social-sign-on/default.test.jsx
@@ -14,6 +14,21 @@ const defaultCustomFields = {
redirectToPreviousPage: true,
};
+const mockIdentity = {
+ apiOrigin: "http://origin/",
+ getConfig: jest.fn(() => ({})),
+};
+
+jest.mock("@wpmedia/arc-themes-components", () => ({
+ ...jest.requireActual("@wpmedia/arc-themes-components"),
+ useIdentity: jest.fn(() => ({
+ isInitialized: true,
+ Identity: {
+ ...mockIdentity,
+ },
+ })),
+}));
+
describe("Subscriptions Social Login Feature", () => {
SocialSignOn.mockImplementation(() =>
);
@@ -23,11 +38,12 @@ describe("Subscriptions Social Login Feature", () => {
render(
);
expect(screen.queryByTestId("social-sign-on-container")).toBeNull();
});
- it("renders", () => {
+ it("renders", async () => {
useIdentity.mockImplementation(() => ({ isInitialized: true }));
render(
);
- expect(screen.queryByTestId("social-sign-on-container")).not.toBeNull();
+ const element = await screen.findByTestId("social-sign-on-container");
+ expect(element).not.toBeNull();
});
it("shows an error", () => {
SocialSignOn.mockImplementation(({ onError }) => {
@@ -35,6 +51,6 @@ describe("Subscriptions Social Login Feature", () => {
return
;
});
render(
);
- expect(screen.getByText("identity-block.login-form-error")).not.toBeNull();
+ expect(screen.getByText("identity-block.login-form-error"));
});
});
diff --git a/blocks/identity-block/intl.json b/blocks/identity-block/intl.json
index 933752f1b1..32f73e47b8 100644
--- a/blocks/identity-block/intl.json
+++ b/blocks/identity-block/intl.json
@@ -74,6 +74,31 @@
"zh-CN": "添加密码",
"zh-TW": "新增密碼"
},
+ "identity-block.bot-protection-error": {
+ "ar": "يُرجى التأكيد على أنك لست روبوت.",
+ "bn": "অনুগ্রহ করে আপনি যে রোবট নন তা যাচাই করুন।",
+ "bo": "ཁྱེད་རང་གློག་མི་མ་ཡིན་པ་ར་སྤྲོད་གནང་རོགས།",
+ "de": "Bitte bestätigen Sie, dass Sie kein Roboter sind.",
+ "en": "Please verify that you are not a robot.",
+ "es": "Verifique que no es un robot.",
+ "fr": "Veuillez vérifier que vous n'êtes pas un robot.",
+ "id": "Verifikasi bahwa Anda bukan robot.",
+ "ja": "あなたがロボットでないことを認証してください。",
+ "km-KH": "សូមផ្ទៀងផ្ទាត់ថា អ្នកមិនមែនជាមនុស្សយន្ដ។",
+ "ko": "로봇이 아님을 확인해 주세요.",
+ "lo": "ກະລຸນາຢັ້ງຢືນວ່າທ່ານບໍ່ແມ່ນຫຸ່ນຍົນ.",
+ "ms": "Sila sahkan bahawa anda bukan robot.",
+ "my": "သင်က စက်ရုပ်မဟုတ်ကြောင်း အတည်ပြုပါ။",
+ "no": "Bekreft at du ikke er en robot.",
+ "pt-BR": "Certifique-se de que você não é um robô.",
+ "pt": "Verifique que não é um robô.",
+ "sv": "Verifiera att du inte är en robot.",
+ "th": "โปรดตรวจสอบยืนยันว่าคุณไม่ใช่หุ่นยนต์",
+ "ug": "ئۆزىڭىزنىڭ ماشىنا ئادەم ئەمەسلىكىنى جەزملەڭ.",
+ "vi": "Vui lòng xác minh rằng bạn không phải là robot.",
+ "zh-CN": "请验证您不是机器人。",
+ "zh-TW": "請確認您不是機器人。"
+ },
"identity-block.cancel": {
"ar": "إلغاء",
"bn": "বাতিল করুন",
@@ -224,6 +249,31 @@
"zh-CN": "已连接帐户",
"zh-TW": "已連結的帳戶"
},
+ "identity-block.create-an-account": {
+ "ar": "إنشاء حساب",
+ "bn": "অ্যাকাউন্ট তৈরী করুন",
+ "bo": "ཁ་བྱང་གསར་པ་བཟོ་བ།",
+ "de": "Konto erstellen",
+ "en": "Create an account",
+ "es": "Crear una cuenta",
+ "fr": "Créer un compte",
+ "id": "Buat akun",
+ "ja": "アカウントを作成",
+ "km-KH": "បង្កើតគណនី",
+ "ko": "계정 만들기",
+ "lo": "ສ້າງບັນຊີ",
+ "ms": "Cipta akaun",
+ "my": "အကောင့်ဖွင့်ပါ",
+ "no": "Opprett en konto",
+ "pt-BR": "Crie uma conta",
+ "pt": "Crie uma conta",
+ "sv": "Skapa ett konto",
+ "th": "สร้างบัญชี",
+ "ug": "ھېسابات قۇرۇش",
+ "vi": "Tạo tài khoản",
+ "zh-CN": "创建帐户",
+ "zh-TW": "建立帳戶"
+ },
"identity-block.current-password": {
"ar": "كلمة المرور الحالية",
"bn": "বর্তমান পাসওয়ার্ড",
@@ -324,6 +374,31 @@
"zh-CN": "电子邮件地址",
"zh-TW": "電子郵件地址"
},
+ "identity-block.email-label": {
+ "ar": "البريد الإلكتروني",
+ "bn": "ইমেইল",
+ "bo": "གློག་འཕྲིན།",
+ "de": "E-Mail",
+ "en": "Email",
+ "es": "Correo electrónico",
+ "fr": "E-mail",
+ "id": "Email",
+ "ja": "メールアドレス",
+ "km-KH": "អ៊ីមែល",
+ "ko": "이메일 전송",
+ "lo": "ອີເມວ",
+ "ms": "E-mel",
+ "my": "အီးမေးလ်",
+ "no": "E-post",
+ "pt-BR": "E-mail",
+ "pt": "Email",
+ "sv": "E-post",
+ "th": "อีเมล",
+ "ug": "ئېلخەت",
+ "vi": "Email",
+ "zh-CN": "电子邮件",
+ "zh-TW": "電子郵件"
+ },
"identity-block.email-requirements": {
"ar": "رجاء أدخل عنوان بريد إلكتروني صحيح",
"bn": "অনুগ্রহ করে একটি বৈধ ইমেইল ঠিকানা লিখুন",
@@ -504,7 +579,7 @@
"bn": "লগ ইন করুন",
"bo": "ཐོ་འཇུག",
"de": "Log In",
- "en": "Log In",
+ "en": "Log in",
"es": "Log In",
"fr": "Log In",
"id": "Masuk",
@@ -524,6 +599,31 @@
"zh-CN": "登录",
"zh-TW": "登入"
},
+ "identity-block.log-in-headline": {
+ "ar": "تسجيل الدخول إلى حسابك",
+ "bn": "আপনার অ্যাকাউন্টে লগইন করুন",
+ "bo": "ཁྱེད་ཀྱི་ཁ་བྱང་ནང་དུ་འཛུལ་བ།",
+ "de": "Bei Ihrem Konto anmelden",
+ "en": "Log in to your account",
+ "es": "Inicie sesión en su cuenta",
+ "fr": "Connectez-vous à votre compte",
+ "id": "Masuk ke akun Anda",
+ "ja": "アカウントにログイン",
+ "km-KH": "ចូលក្នុងគណនីរបស់អ្នក",
+ "ko": "계정에 로그인하세요",
+ "lo": "ເຂົ້າສູ່ລະບົບບັນຊີຂອງທ່ານ",
+ "ms": "Log masuk ke akaun anda",
+ "my": "သင့်အကောင့်သို့ ဝင်ပါ",
+ "no": "Logg inn på kontoen din",
+ "pt-BR": "Faça login na sua conta",
+ "pt": "Inicie sessão na sua conta",
+ "sv": "Logga in på ditt konto",
+ "th": "เข้าสู่ระบบบัญชีของคุณ",
+ "ug": "ھېساباتىڭىزغا كىرىش",
+ "vi": "Đăng nhập vào tài khoản của bạn",
+ "zh-CN": "登录您的帐户",
+ "zh-TW": "登入您的帳戶"
+ },
"identity-block.log-out": {
"ar": "تسجيل الخروج",
"bn": "লগ আউট করুন",
@@ -574,6 +674,131 @@
"zh-CN": "将您登录时出错",
"zh-TW": "登入時發生錯誤"
},
+ "identity-block.login-form-error.account-is-disabled": {
+ "ar": "تم تعطيل الحساب.",
+ "bn": "অ্যাকাউন্ট নিষ্ক্রিয় করা হয়েছে৷",
+ "bo": "ཁ་བྱང་སྤྱོད་མི་ཆོག་པ་བཟོས་འདུག",
+ "de": "Konto ist deaktiviert.",
+ "en": "Account is disabled.",
+ "es": "La cuenta está desactivada.",
+ "fr": "Le compte est désactivé.",
+ "id": "Akun dinonaktifkan.",
+ "ja": "アカウントが無効になっています。",
+ "km-KH": "គណនីត្រូវបានបិទ។",
+ "ko": "계정이 비활성화되었습니다.",
+ "lo": "ບັນຊີຖືກປິດໃຊ້ງານ.",
+ "ms": "Akaun dilumpuhkan.",
+ "my": "အကောင့်ကို ပိတ်ထားသည်။",
+ "no": "Kontoen er deaktivert.",
+ "pt-BR": "A conta está desativada.",
+ "pt": "A conta está desativada.",
+ "sv": "Kontot är inaktiverat.",
+ "th": "บัญชีถูกปิดใช้งาน",
+ "ug": "ھېساباتنى ئىشلىتىش چەكلەنگەن.",
+ "vi": "Tài khoản đã bị vô hiệu hóa.",
+ "zh-CN": "帐户已禁用。",
+ "zh-TW": "帳戶已停用。"
+ },
+ "identity-block.login-form-error.captcha-token-invalid": {
+ "ar": "رمز Captcha غير صالح.",
+ "bn": "ক্যাপচা টোকেন অবৈধ৷",
+ "bo": "ཀེབ་ཆ་བྱང་བུ་ཏག་ཏག་མི་འདུག",
+ "de": "Captcha-Token ungültig.",
+ "en": "Captcha token invalid.",
+ "es": "El código Captcha no es válido.",
+ "fr": "Jeton Captcha invalide.",
+ "id": "Token captcha tidak valid.",
+ "ja": "Captchaトークンが無効です。",
+ "km-KH": "ថូខឹន Captcha មិនត្រឹមត្រូវ។",
+ "ko": "CAPTCHA 토큰이 잘못되었습니다.",
+ "lo": "ເທເຄັນ Captcha ບໍ່ຖືກຕ້ອງ.",
+ "ms": "Token Captcha tidak sah.",
+ "my": "Captcha တိုကင် မှားနေသည်။",
+ "no": "Ugyldig CAPTCHA-token.",
+ "pt-BR": "Token Captcha inválido.",
+ "pt": "Token de captcha inválido.",
+ "sv": "Captcha-token är ogiltig.",
+ "th": "โทเค็น Captcha ไม่ถูกต้อง",
+ "ug": "دەلىللەش كودى ئىناۋەتسىز.",
+ "vi": "Mã xác thực captcha không hợp lệ.",
+ "zh-CN": "验证码令牌无效。",
+ "zh-TW": "人機驗證碼無效。"
+ },
+ "identity-block.login-form-error.invalid-email-password": {
+ "ar": "البريد الإلكتروني غير صالح أو كلمة المرور غير صالحة. أعد المحاولة.",
+ "bn": "ইমেল বা পাসওয়ার্ড অবৈধ। আবার চেষ্টা করুন।",
+ "bo": "གློག་འཕྲིན་ནམ་ཡང་ན་གསང་ཚིག་འགྲིགས་མི་འདུག །ཡང་བསྐྱར་ཚོད་ལྟ་བྱོས།",
+ "de": "E-Mail-Adresse oder Passwort ist ungültig. Versuchen Sie es erneut.",
+ "en": "Email or password is invalid. Try again.",
+ "es": "El correo electrónico o la contraseña no son válidos. Inténtelo de nuevo.",
+ "fr": "L'e-mail ou le mot de passe n'est pas valide. Veuillez réessayer.",
+ "id": "Email atau kata sandi tidak valid. Coba lagi.",
+ "ja": "メールアドレスまたはパスワードが無効です。もう一度やり直してください。",
+ "km-KH": "អ៊ីមែល ឬពាក្យសម្ងាត់គឺមិនត្រឹមត្រូវ។ សូមព្យាយាមម្ដងទៀត។",
+ "ko": "이메일 또는 비밀번호가 잘못되었습니다. 다시 시도하십시오.",
+ "lo": "ອີເມວ ຫຼື ລະຫັດຜ່ານບໍ່ຖືກຕ້ອງ. ລອງໃໝ່.",
+ "ms": "E-mel atau kata laluan tidak sah. Sila cuba lagi.",
+ "my": "အီးမေးလ်း သို့မဟုတ် စကားဝှက် မမှန်ကန်ပါ။ ထပ်မံကြိုးစားပါ။",
+ "no": "Ugyldig e-post eller passord. Prøv igjen.",
+ "pt-BR": "O e-mail ou a senha são inválidos. Tente novamente.",
+ "pt": "O email ou palavra-passe é inválido. Tente de novo.",
+ "sv": "E-postadressen eller lösenordet är ogiltigt. Försök igen.",
+ "th": "อีเมลหรือรหัสผ่านไม่ถูกต้อง ลองอีกครั้ง",
+ "ug": "ئېلخەت ياكى مەخپىي نومۇر ئىناۋەتسىز. قايتا سىناڭ.",
+ "vi": "Email hoặc mật khẩu không hợp lệ. Vui lòng thử lại.",
+ "zh-CN": "电子邮箱或密码无效。请重试。",
+ "zh-TW": "電子郵件或密碼無效。再試一次。"
+ },
+ "identity-block.login-form-error.max-devices": {
+ "ar": "وصل حساب المستخدم إلى الحد الأقصى لعدد الأجهزة.",
+ "bn": "ব্যবহারকারীর অ্যাকাউন্ট ডিভাইসের সর্বাধিক সংখ্যায় পৌঁছেছে৷",
+ "bo": "སྤྱོད་པ་པོའི་ཁ་བྱང་ཐོག་འཕྲུས་ཆས་སྤྱོད་ཆོག་པའི་གྲངས་ཚད་མང་ཤོས་ཟིན་འདུག",
+ "de": "Das Benutzerkonto hat die maximale Anzahl an Geräten erreicht.",
+ "en": "User account has reached the max number of devices.",
+ "es": "La cuenta de usuario ha alcanzado el número máximo de dispositivos.",
+ "fr": "Le compte utilisateur a atteint le nombre maximum d'appareils.",
+ "id": "Akun pengguna telah mencapai jumlah perangkat maksimum.",
+ "ja": "ユーザーアカウントがデバイスの上限に達しました。",
+ "km-KH": "គណនីអ្នកប្រើបានឈានដល់ចំនួនឧបករណ៍អតិបរមាហើយ។",
+ "ko": "사용자 계정이 최대 장치 수에 도달했습니다.",
+ "lo": "ບັນຊີຜູ້ໃຊ້ໄດ້ຮອດຈຳນວນອຸປະກອນສູງສຸດແລ້ວ.",
+ "ms": "Akaun pengguna telah mencapai bilangan maksimum peranti.",
+ "my": "သုံးစွဲသူအကောင့်သည် အများဆုံး စက်အရေအတွက်ကို ရောက်သွားပြီ။",
+ "no": "Brukerkontoen har nådd maksimalt antall enheter.",
+ "pt-BR": "A conta de usuário atingiu o número máximo de dispositivos.",
+ "pt": "A conta do utilizador atingiu o número máximo de dispositivos.",
+ "sv": "Användarkontot har nått det maximala antalet enheter.",
+ "th": "บัญชีผู้ใช้มีอุปกรณ์ถึงจำนวนสูงสุดแล้ว",
+ "ug": "ئىشلەتكۈچى ھېساباتى ئەڭ چوڭ ئۈسكۈنە سانى چېكىگە يەتكەن.",
+ "vi": "Tài khoản người dùng đã đạt đến số lượng thiết bị tối đa.",
+ "zh-CN": "用户帐户已达到最大设备数量。",
+ "zh-TW": "使用者帳戶已達到裝置數量上限。"
+ },
+ "identity-block.login-form-error.unverified-email-address": {
+ "ar": "لم يتم التحقق من عنوان البريد الإلكتروني.",
+ "bn": "ইমেইল ঠিকানা যাচাই করা হয় নি৷",
+ "bo": "གློག་འཕྲིན་ཁ་བྱང་གཏན་འཁེལ་བྱས་མི་འདུག",
+ "de": "Diese E-Mail-Adresse ist nicht bestätigt.",
+ "en": "Email Address is not verified.",
+ "es": "La dirección de correo electrónico no se ha verificado.",
+ "fr": "L'adresse e-mail n'est pas vérifiée.",
+ "id": "Alamat Email tidak terverifikasi.",
+ "ja": "メールアドレスが認証されていません。",
+ "km-KH": "អាសយដ្ឋានអ៊ីមែលមិនត្រូវបានផ្ទៀងផ្ទាត់។",
+ "ko": "이메일 주소가 인증되지 않았습니다.",
+ "lo": "ທີ່ຢູ່ອີເມວບໍ່ໄດ້ຮັບການພິສູດຢັ້ງຢືນ.",
+ "ms": "Alamat E-mel tidak disahkan.",
+ "my": "အီးမေးလ်လိပ်စာကို အတည်ပြုမထားပါ။",
+ "no": "E-postadressen er ikke bekreftet.",
+ "pt-BR": "Endereço de e-mail não verificado.",
+ "pt": "O endereço de email não está verificado.",
+ "sv": "E-postadressen är inte verifierad.",
+ "th": "ที่อยู่อีเมลไม่ได้รับการตรวจสอบยืนยัน",
+ "ug": "ئېلخەت ئادرېسى دەلىللەنمىگەن.",
+ "vi": "Địa chỉ email chưa được xác minh.",
+ "zh-CN": "电子邮件地址未验证。",
+ "zh-TW": "電子郵件地址未驗證。"
+ },
"identity-block.login-links-forgot": {
"ar": "هل نسيت كلمة المرور؟",
"bn": "আপনার পাসওয়ার্ড ভুলে গেছেন?",
@@ -604,7 +829,7 @@
"bn": "ইতিমধ্যে একটি অ্যাকাউন্ট আছে?\nলগ ইন করুন",
"bo": "དྲ་གྲངས་ཡོད་པ་ཡིན་ནམ། ཐོ་འཇུག",
"de": "Already have an account? Log in.",
- "en": "Already have an account? Log in",
+ "en": "Already have an account?",
"es": "Already have an account? Log in.",
"fr": "Already have an account? Log in.",
"id": "Sudah memiliki akun? Masuk",
@@ -724,6 +949,31 @@
"zh-CN": "新密码",
"zh-TW": "新密碼"
},
+ "identity-block.or": {
+ "ar": "أو",
+ "bn": "অথবা",
+ "bo": "ཡང་ན།",
+ "de": "ODER",
+ "en": "OR",
+ "es": "O",
+ "fr": "OU",
+ "id": "ATAU",
+ "ja": "または",
+ "km-KH": "ឬ",
+ "ko": "또는",
+ "lo": "ຫຼື",
+ "ms": "ATAU",
+ "my": "သို့မဟုတ်",
+ "no": "ELLER",
+ "pt-BR": "OU",
+ "pt": "OU",
+ "sv": "ELLER",
+ "th": "หรือ",
+ "ug": "ياكى",
+ "vi": "HOẶC",
+ "zh-CN": "或者",
+ "zh-TW": "或"
+ },
"identity-block.password": {
"ar": "كلمة المرور",
"bn": "পাসওয়ার্ড",
@@ -924,6 +1174,31 @@
"zh-CN": "必须包含至少 %{requirementCount} 个大写字符。",
"zh-TW": "必須有至少 %{requirementCount} 個大寫字元。"
},
+ "identity-block.privacy-statement": {
+ "ar": "يعني إنشائك لحساب أنك توافق على \"شروط الخدمة\" وتقبل \"سياسة الخصوصية\" لدينا.",
+ "bn": "একটি অ্যাকাউন্ট তৈরী করে, আপনি পরিষেবার শর্তাবলীতে সম্মত হন এবং আমাদের গোপনীয়তা নীতি স্বীকার করেন।",
+ "bo": "དྲ་གྲངས་གཅིག་གསར་བཟོ་བྱས་ཚེ། ཁྱེད་ཀྱིས་ཞབས་ཞུའི་དོན་ཚན་ལ་མོས་མཐུན་བྱེད་པ་དང་། གསང་བའི་སྲིད་ཇུས་ཁས་ལེན་བྱེད་པ་མཚོན།",
+ "de": "Durch die Erstellung eines Kontos stimmen Sie den Nutzungsbedingungen zu und erkennen unsere Datenschutzrichtlinie an.",
+ "en": "By creating an account, you agree to the Terms of Service and acknowledge our Privacy Policy.",
+ "es": "Al crear una cuenta, acepta las Condiciones del servicio y reconoce nuestra Política de privacidad.",
+ "fr": "En créant un compte, vous acceptez les conditions d'utilisation et notre politique de confidentialité.",
+ "id": "Dengan membuat akun, Anda menyetujui Ketentuan Layanan dan menerima Kebijakan Privasi kami.",
+ "ja": "アカウントを作成すると、利用規約に同意し、 プライバシー ポリシーを承認したことになります。",
+ "km-KH": "តាមរយៈការបង្កើតគណនី អ្នកយល់ព្រមតាមលក្ខខណ្ឌប្រើប្រាស់ និងទទួលស្គាល់គោលការណ៍ឯកជនភាពរបស់យើង។",
+ "ko": "계정을 만들면 서비스 약관에 동의하고 개인정보 보호정책을 인정하게 됩니다.",
+ "lo": "ໂດຍການສ້າງບັນຊີ, ແມ່ນຖືວ່າທ່ານເຫັນດີນຳຂໍ້ກຳນົດຂອງການບໍລິການ ແລະ ຍອມຮັບນະໂຍບາຍວ່າດ້ວຍຄວາມເປັນສ່ວນຕົວຂອງພວກເຮົາ.",
+ "ms": "Dengan mencipta akaun, anda bersetuju untuk menerima Terma Perkhidmatan dan memperakui Dasar Privasi kami.",
+ "my": "အကောင့်ဖွင့်ခြင်းဖြင့် သင်သည် ဝန်ဆောင်မှုဆိုင်ရာ စည်းမျဉ်းများကို သဘောတူပြီး ကျွန်ုပ်တို့၏ ကိုယ်ရေးလုံခြုံမှု မူဝါဒကို လက်ခံရာရောက်သည်။",
+ "no": "Når du oppretter en konto, godtar du vilkårene for bruk og personvernerklæringen vår.",
+ "pt-BR": "Ao criar uma conta, você concorda com os Termos de Serviço e aceita nossa Política de Privacidade",
+ "pt": "Ao criar uma conta, está a concordar com os Termos de Serviço e a reconhecer a nossa Política de Privacidade.",
+ "sv": "Genom att skapa ett konto godkänner du användarvillkoren och du tar del av vår integritetspolicy.",
+ "th": "เมื่อคุณสร้างบัญชี แสดงว่าคุณยอมรับเงื่อนไขการให้บริการและรับทราบนโยบายความเป็นส่วนตัวของเรา",
+ "ug": "ھېسابات قۇرسىڭىز، مۇلازىمەت ماددىلىرىغا قوشۇلغانلىقىڭىزنى ۋە بىزنىڭ مەخپىيەتلىك سىياسىتىمىزنى بىلگەنلىكىڭىزنى ئىپادىلەيدۇ.",
+ "vi": "Bằng việc tạo tài khoản, bạn đồng ý với Điều khoản dịch vụ và thừa nhận Chính sách quyền riêng tư của chúng tôi.",
+ "zh-CN": "创建帐户即表示您同意服务条款并确认我们的隐私政策。",
+ "zh-TW": "建立帳戶即表示您同意服務條款並確認我們的隱私權政策。"
+ },
"identity-block.reset-password-error": {
"ar": "حدث خطأ في أثناء معالجة طلبك.",
"bn": "আপনার অনুরোধ প্রক্রিয়া করার সময় একটি ত্রুটি ঘটেছিল।",
@@ -1174,6 +1449,131 @@
"zh-CN": "创建您的帐户时出错",
"zh-TW": "建立帳戶時發生錯誤"
},
+ "identity-block.sign-up-natural": {
+ "ar": "الاشتراك",
+ "bn": "সাইন আপ করুন",
+ "bo": "ཐོ་འགོད།",
+ "de": "Registrieren",
+ "en": "Sign up",
+ "es": "Registrarse",
+ "fr": "S'inscrire",
+ "id": "Daftar",
+ "ja": "サインアップ",
+ "km-KH": "ចុះឈ្មោះ",
+ "ko": "회원 가입",
+ "lo": "ລົງທະບຽນ",
+ "ms": "Daftar",
+ "my": "အကောင့်ဖွင့်ရန်",
+ "no": "Registrer deg",
+ "pt-BR": "Inscreva-se",
+ "pt": "Registar",
+ "sv": "Registrera dig",
+ "th": "สมัคร",
+ "ug": "تىزىملىتىش",
+ "vi": "Đăng ký",
+ "zh-CN": "注册",
+ "zh-TW": "註冊"
+ },
+ "identity-block.social-signOn-apple-login": {
+ "ar": "تسجيل الدخول باستخدام Apple",
+ "bn": "Apple দিয়ে সাইন ইন করুন",
+ "bo": "Appleདང་ལྷན་ནང་ཞུགས་བྱོས།",
+ "de": "Mit Apple anmelden",
+ "en": "Sign in with Apple",
+ "es": "Iniciar sesión con Apple",
+ "fr": "Se connecter avec Apple",
+ "id": "Masuk dengan Apple",
+ "ja": "Appleでサインイン",
+ "km-KH": "ចូលតាម Apple",
+ "ko": "Apple로 로그인",
+ "lo": "ເຂົ້າສູ່ລະບົບດ້ວຍ Apple",
+ "ms": "Daftar masuk dengan Apple",
+ "my": "Apple ဖြင့် ဝင်ရောက်ရန်",
+ "no": "Logg inn med Apple",
+ "pt-BR": "Faça login com a Apple",
+ "pt": "Iniciar sessão com Apple",
+ "sv": "Logga in med Apple",
+ "th": "ลงชื่อเข้าใช้ด้วย Apple",
+ "ug": "Apple ئارقىلىق كىرىش",
+ "vi": "Đăng nhập bằng Apple",
+ "zh-CN": "使用 Apple 登录",
+ "zh-TW": "使用 Apple 登入"
+ },
+ "identity-block.social-signOn-apple-signUp": {
+ "ar": "الاشتراك باستخدام Apple",
+ "bn": "Apple দিয়ে সাইন আপ করুন",
+ "bo": "Appleདང་ལྷན་ཐོ་འགོད་བྱོས།",
+ "de": "Mit Apple registrieren",
+ "en": "Sign up with Apple",
+ "es": "Registrarse con Apple",
+ "fr": "S'inscrire avec Apple",
+ "id": "Daftar dengan Apple",
+ "ja": "Appleでサインアップ",
+ "km-KH": "ចុះឈ្មោះជាមួយ Apple",
+ "ko": "Apple로 회원 가입",
+ "lo": "ລົງທະບຽນດ້ວຍ Apple",
+ "ms": "Daftar dengan Apple",
+ "my": "Apple ဖြင့် အကောင့်ဖွင့်ရန်",
+ "no": "Registrer deg med Apple",
+ "pt-BR": "Inscreva-se com a Apple",
+ "pt": "Registar com Apple",
+ "sv": "Registrera dig med Apple",
+ "th": "สมัครด้วย Apple",
+ "ug": "Apple ئارقىلىق تىزىملىتىش",
+ "vi": "Đăng ký bằng Apple",
+ "zh-CN": "使用 Apple 注册",
+ "zh-TW": "使用 Apple 註冊"
+ },
+ "identity-block.social-signOn-google-login": {
+ "ar": "تسجيل الدخول باستخدام Google",
+ "bn": "Google দিয়ে সাইন ইন করুন",
+ "bo": "Googleདང་ལྷན་ནང་ཞུགས་བྱོས།",
+ "de": "Mit Google anmelden",
+ "en": "Sign in with Google",
+ "es": "Iniciar sesión con Google",
+ "fr": "Se connecter avec Google",
+ "id": "Masuk dengan Google",
+ "ja": "Googleでサインイン",
+ "km-KH": "ចូលតាម Google",
+ "ko": "Google로 로그인",
+ "lo": "ເຂົ້າສູ່ລະບົບດ້ວຍ Google",
+ "ms": "Daftar masuk dengan Google",
+ "my": "Google ဖြင့် ဝင်ရောက်ရန်",
+ "no": "Logg inn med Google",
+ "pt-BR": "Faça login com o Google",
+ "pt": "Iniciar sessão com o Google",
+ "sv": "Logga in med Google",
+ "th": "ลงชื่อเข้าใช้ด้วย Google",
+ "ug": "Google ئارقىلىق كىرىش",
+ "vi": "Đăng nhập bằng Google",
+ "zh-CN": "使用 Google 登录",
+ "zh-TW": "使用 Google 登入"
+ },
+ "identity-block.social-signOn-google-signUp": {
+ "ar": "الاشتراك باستخدام Google",
+ "bn": "Google দিয়ে সাইন আপ করুন",
+ "bo": "Googleདང་ལྷན་ཐོ་འགོད་བྱོས།",
+ "de": "Mit Google registrieren",
+ "en": "Sign up with Google",
+ "es": "Registrarse con Google",
+ "fr": "S'inscrire avec Google",
+ "id": "Daftar dengan Google",
+ "ja": "Googleでサインアップ",
+ "km-KH": "ចុះឈ្មោះជាមួយ Google",
+ "ko": "Google로 회원 가입",
+ "lo": "ລົງທະບຽນດ້ວຍ Google",
+ "ms": "Daftar dengan Google",
+ "my": "Google ဖြင့် အကောင့်ဖွင့်ရန်",
+ "no": "Registrer deg med Google",
+ "pt-BR": "Inscreva-se com o Google",
+ "pt": "Registar com o Google",
+ "sv": "Registrera dig med Google",
+ "th": "สมัครด้วย Google",
+ "ug": "Google ئارقىلىق تىزىملىتىش",
+ "vi": "Đăng ký bằng Google",
+ "zh-CN": "使用 Google 注册",
+ "zh-TW": "使用 Google 註冊"
+ },
"identity-block.terms-privacy-text": {
"ar": "يعني إنشاءك لحساب أنك توافق على
شروط الخدمة وتقر
بسياسة الخصوصية.",
"bn": "একটি অ্যাকাউন্ট তৈরী করে,
আপনি পরিষেবার শর্তাবলীতে সম্মত হন এবং আমাদের
গোপনীয়তা নীতি স্বীকার করেন।",
@@ -1199,6 +1599,31 @@
"zh-CN": "创建帐户即表示您同意
服务条款并确认我们的
隐私政策。",
"zh-TW": "建立帳戶即表示您同意
服務條款並確認我們的
隱私權政策。"
},
+ "identity-block.terms-service-privacy-text": {
+ "ar": "يعني إنشائك حسابًا أنك توافق على
\"شروط الخدمة\" وتقبل \"سياسة الخصوصية\" لدينا",
+ "bn": "একটি অ্যাকাউন্ট তৈরী করে, আপনি
পরিষেবার শর্তাবলীতে সম্মত হন এবং আমাদের গোপনীয়তা নীতি স্বীকার করেন।",
+ "bo": "ཁ་བྱང་གཅིག་གསར་བཟོ་བྱས་ཚེ། ཁྱེད་ཀྱིས་ཞབས་ཞུའི་དོན་ཚན་ལ་མོས་མཐུན་བྱེད་པ་དང་།
གསང་བའི་སྲིད་ཇུས་ཁས་ལེན་བྱེད་པ་མཚོན།",
+ "de": "Durch die Erstellung eines Kontos stimmen Sie den
Nutzungsbedingungen zu und erkennen unsere Datenschutzrichtlinie an.",
+ "en": "By creating an account, you agree to the
Terms of Service and acknowledge our Privacy Policy",
+ "es": "Al crear una cuenta, acepta las
Condiciones del servicio y reconoce nuestra Política de privacidad.",
+ "fr": "En créant un compte, vous acceptez les
conditions d'utilisation et notre politique de confidentialité",
+ "id": "Dengan membuat akun, Anda menyetujui
Ketentuan Layanan dan menerima Kebijakan Privasi kami",
+ "ja": "アカウントを作成すると、
利用規約に同意し、 プライバシー ポリシーを承認したことになります",
+ "km-KH": "តាមរយៈការបង្កើតគណនី អ្នកយល់ព្រមតាម
លក្ខខណ្ឌប្រើប្រាស់ និងទទួលស្គាល់គោលការណ៍ឯកជនភាពរបស់យើង",
+ "ko": "계정을 만들면
서비스 약관에 동의하고 개인정보 보호정책을 인정하게 됩니다.",
+ "lo": "ໂດຍການສ້າງບັນຊີ, ແມ່ນຖືວ່າທ່ານເຫັນດີນຳ
ຂໍ້ກຳນົດຂອງການບໍລິການ ແລະ ຍອມຮັບນະໂຍບາຍວ່າດ້ວຍຄວາມເປັນສ່ວນຕົວຂອງພວກເຮົາ",
+ "ms": "Dengan mencipta akaun, anda bersetuju untuk menerima
Terma Perkhidmatan dan memperakui Dasar Privasi kami",
+ "my": "အကောင့်ဖွင့်ခြင်းဖြင့် သင်သည်
ဝန်ဆောင်မှုဆိုင်ရာ စည်းမျဉ်းများကို သဘောတူပြီး ကျွန်ုပ်တို့၏ ကိုယ်ရေးလုံခြုံမှုမူဝါဒကို လက်ခံရာရောက်သည်",
+ "no": "Når du oppretter en konto, godtar du
vilkårene for bruk og personvernerklæringen vår",
+ "pt-BR": "Ao criar uma conta, você concorda com os
Termos de Serviço e aceita nossa Política de Privacidade",
+ "pt": "Ao criar uma conta, está a concordar com os
Termos de Serviço e a reconhecer a nossa Política de Privacidade",
+ "sv": "Genom att skapa ett konto godkänner du
användarvillkoren och du tar del av vår integritetspolicy",
+ "th": "เมื่อคุณสร้างบัญชี แสดงว่าคุณยอมรับ
เงื่อนไขการให้บริการและรับทราบนโยบายความเป็นส่วนตัวของเรา",
+ "ug": "ھېسابات قۇرسىڭىز،
مۇلازىمەت ماددىلىرىغا قوشۇلغانلىقىڭىزنى ۋە بىزنىڭ مەخپىيەتلىك سىياسىتىمىزنى بىلگەنلىكىڭىزنى ئىپادىلەيدۇ",
+ "vi": "Bằng việc tạo tài khoản, bạn đồng ý với
Điều khoản dịch vụ và thừa nhận Chính sách quyền riêng tư của chúng tôi",
+ "zh-CN": "创建帐户即表示您同意
服务条款并确认我们的隐私政策",
+ "zh-TW": "建立帳戶即表示您同意
服務條款並確認我們的隱私權政策。"
+ },
"identity-block.update-email-error": {
"ar": "حدث خطأ في أثناء تحديث عنوان بريدك الإلكتروني",
"bn": "আপনার ইমেইল ঠিকানা আপডেট করার সময় একটি ত্রুটি ঘটেছে",
@@ -1274,34 +1699,7 @@
"zh-CN": "用户名",
"zh-TW": "使用者名稱"
},
- "identity-block.bot-protection-error": {
- "en": "Please verify that you are not a robot."
- },
- "identity-block.email-label": {
- "en": "Email"
- },
- "identity-block.log-in-headline": {
- "en": "Log in to your account"
- },
- "identity-block.login-form-error.account-is-disabled": {
- "en": "Account is disabled."
- },
- "identity-block.login-form-error.captcha-token-invalid": {
- "en": "Captcha token invalid."
- },
- "identity-block.login-form-error.unverified-email-address": {
- "en": "Email Address is not verified."
- },
- "identity-block.login-form-error.max-devices": {
- "en": "User account has reached the max number of devices."
- },
- "identity-block.login-form-error.invalid-email-password": {
- "en": "Email or password is invalid. Try again."
- },
- "identity-block.privacy-statement": {
- "en": "By creating an account, you agree to the Terms of Service and acknowledge our Privacy Policy."
- },
- "identity-block.sign-up-natural": {
- "en": "Sign up"
+ "identity-block.signup-form-error.identity-already-exists": {
+ "en": "Account already exists"
}
}
\ No newline at end of file
diff --git a/blocks/identity-block/themes/news.json b/blocks/identity-block/themes/news.json
index 849113dd61..9561efc3b0 100644
--- a/blocks/identity-block/themes/news.json
+++ b/blocks/identity-block/themes/news.json
@@ -240,7 +240,7 @@
"styles": {
"default": {
"font-family": "var(--font-family-primary)",
- "padding-block-end": "var(--global-spacing-5)",
+ "padding-block-end": "var(--global-spacing-2)",
"components": {
"button": {
"font-size": "var(--global-font-size-4)"
@@ -252,11 +252,10 @@
"font-style": "normal",
"line-height": "140%",
"text-align": "center",
- "padding-block-end": 0,
"padding-block-start": 0,
"padding-inline-end": 0,
- "padding-inline-start": 0,
- "margin-block-end": "var(--global-spacing-5)"
+ "margin-block-end": "var(--global-spacing-0)",
+ "padding-block-end": "var(--global-spacing-2)"
},
"input": {
"margin-block-end": "var(--global-spacing-4)"
@@ -393,10 +392,40 @@
"login-links-inner-link": {
"styles": {
"default": {
- "text-decoration": "underline"
+ "text-decoration": "underline",
+ "margin-block-end": "var(--global-spacing-5)",
+ "margin-inline-end": 0,
+ "margin-inline-start": 0,
+ "padding-inline-start": "var(--global-spacing-2)"
}
}
},
+ "login-form-tos-link": {
+ "styles": {
+ "default": {
+ "color": "var(--text-color)",
+ "text-decoration": "underline"
+ },
+ "desktop": {}
+ }
+ },
+ "login-form-tos-link-hover": {
+ "styles": {
+ "default": {
+ "color": "var(--text-color-subtle)"
+ },
+ "desktop": {}
+ }
+ },
+ "login-form-tos-container-link":{
+ "styles": {
+ "default": {
+ "margin-block-start": "var(--global-spacing-5)",
+ "margin-block-end": "var(--global-spacing-5)"
+ },
+ "desktop": {}
+ }
+ },
"reset-password": {
"styles": {
"default": {
@@ -446,18 +475,22 @@
"styles": {
"default": {
"font-family": "var(--font-family-primary)",
+ "padding-block-end": "var(--global-spacing-2)",
"components": {
"button": {
"font-size": "var(--global-font-size-4)"
},
"heading": {
- "border-block-end-color": "var(--border-color)",
- "border-block-end-style": "var(--global-border-style-1)",
- "border-block-end-width": "var(--global-border-width-1)",
- "font-size": "var(--global-font-size-9)",
- "margin-block-end": "var(--global-spacing-4)",
- "padding-block-end": "var(--global-spacing-2)",
- "text-align": "center"
+ "font-size": "var(--heading-level-4-font-size)",
+ "font-family": "var(--font-family-secondary)",
+ "font-weight": 700,
+ "font-style": "normal",
+ "line-height": "140%",
+ "text-align": "center",
+ "padding-block-start": 0,
+ "padding-inline-end": 0,
+ "margin-block-end": "var(--global-spacing-0)",
+ "padding-block-end": "var(--global-spacing-2)"
},
"input": {
"margin-block-end": "var(--global-spacing-5)"
@@ -470,6 +503,9 @@
"padding-block-end": "var(--global-spacing-2)",
"padding-block-start": "var(--global-spacing-2)"
},
+ "input-tip": {
+ "font-size": "var(--global-font-size-3)"
+ },
"paragraph": {
"font-family": "var(--font-family-primary)",
"margin-block-end": "var(--global-spacing-5)"
@@ -486,11 +522,40 @@
}
}
},
+ "sign-up-tos-container-link":{
+ "styles": {
+ "default": {
+ "margin-block-start": "var(--global-spacing-5)",
+ "margin-block-end": "var(--global-spacing-5)"
+ },
+ "desktop": {}
+ }
+ },
+ "sign-up-form-error":{
+ "styles": {
+ "default": {
+ "font-family": "var(--font-family-primary)",
+ "text-align": "center",
+ "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": {}
+ }
+ },
"sign-up-tos-link": {
"styles": {
"default": {
"color": "var(--text-color)",
- "text-decoration": "none"
+ "text-decoration": "underline"
},
"desktop": {}
}
@@ -506,8 +571,9 @@
"social-sign-on": {
"styles": {
"default": {
- "inline-size": "300px",
+ "inline-size": "100%",
"margin-inline": "auto",
+ "gap": "var(--global-spacing-4)",
"components": {
"paragraph": {
"color": "var(--status-color-danger)",
@@ -523,7 +589,76 @@
"default": {
"display": "flex",
"flex-direction": "column",
- "gap": "var(--global-spacing-4)"
+ "align-items": "center",
+ "gap": "var(--global-spacing-4)",
+ "inline-size": "100%",
+ "margin-block-start": "var(--global-spacing-2)",
+ "margin-block-end": "var(--global-spacing-2)"
+ },
+ "desktop": {}
+ }
+ },
+ "social-sign-on-button-container-apple": {
+ "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": "400px",
+ "components": {
+ "button-secondary-reverse-hover": {
+ "color": "var(--text-color)"
+ }
+ }
+ },
+ "desktop": {}
+ }
+ },
+ "social-sign-on-dividerWithText": {
+ "styles": {
+ "default": {
+ "display": "flex",
+ "align-items": "center",
+ "flex-direction": "row",
+ "color": "var(--text-color-subtle)",
+ "font-family": "var(--font-family-primary)",
+ "font-weight": "var(--global-font-weight-4)",
+ "font-size": "var(--global-font-size-4)",
+ "margin-block-start": "var(--global-spacing-2)"
+ },
+ "desktop": {}
+ }
+ },
+ "social-sign-on-dividerWithText-before": {
+ "styles": {
+ "default": {
+ "content": "''",
+ "height": "1px",
+ "background-color": "var(--border-color)",
+ "flex-grow": "1",
+ "margin-inline-end": "var(--global-spacing-2)"
+ },
+ "desktop": {}
+ }
+ },
+ "social-sign-on-dividerWithText-after": {
+ "styles": {
+ "default": {
+ "content": "''",
+ "height": "1px",
+ "background-color": "var(--border-color)",
+ "flex-grow": "1",
+ "margin-inline-start": "var(--global-spacing-2)"
},
"desktop": {}
}
diff --git a/blocks/identity-block/utils/useRecaptcha.js b/blocks/identity-block/utils/useRecaptcha.js
deleted file mode 100644
index 6e2c7602b5..0000000000
--- a/blocks/identity-block/utils/useRecaptcha.js
+++ /dev/null
@@ -1,62 +0,0 @@
-import { useState, useMemo } from "react";
-import { useIdentity, useSales } from "@wpmedia/arc-themes-components";
-
-export const RECAPTCHA_LOGIN = "signin";
-export const RECAPTCHA_SIGNUP = "signup";
-export const RECAPTCHA_MAGICLINK = "magicLink";
-export const RECAPTCHA_CHECKOUT = "checkout";
-
-export const RECAPTCHA_V2 = "V2";
-export const RECAPTCHA_V3 = "V3";
-
-const useRecaptcha = (challengeIn) => {
- const { Identity } = useIdentity();
- const { Sales } = useSales();
-
- const [recaptchaVersion, setRecaptchaVersion] = useState();
- const [siteKey, setSiteKey] = useState();
- const [isRecaptchaEnabled, setIsRecaptchaEnabled] = useState(false);
-
- const setRecaptchaInfo = (isCaptchaEnabled, recaptchaSiteKey, recaptchaScore) => {
- if (isCaptchaEnabled && recaptchaSiteKey && !!String(recaptchaScore)) {
- if (recaptchaScore === "-1") {
- setSiteKey(recaptchaSiteKey);
- setRecaptchaVersion(RECAPTCHA_V2);
- setIsRecaptchaEnabled(true);
- } else if (parseFloat(recaptchaScore) >= 0 && parseFloat(recaptchaScore) <= 1) {
- setSiteKey(recaptchaSiteKey);
- setRecaptchaVersion(RECAPTCHA_V3);
- setIsRecaptchaEnabled(true);
- }
- }
- };
-
- const checkCaptcha = async () => {
- const identityConfig = await Identity.getConfig();
- const { recaptchaSiteKey, recaptchaScore } = identityConfig;
- if ([RECAPTCHA_LOGIN, RECAPTCHA_SIGNUP, RECAPTCHA_MAGICLINK].includes(challengeIn)) {
- const isIdentityCaptchaEnabled = identityConfig?.[`${challengeIn}Recaptcha`];
- setRecaptchaInfo(isIdentityCaptchaEnabled, recaptchaSiteKey, recaptchaScore);
- }
-
- if (challengeIn === RECAPTCHA_CHECKOUT) {
- const salesConfig = await Sales.getConfig();
- const isSalesCaptchaEnabled = salesConfig?.checkoutRecaptchaEnabled;
- setRecaptchaInfo(isSalesCaptchaEnabled, recaptchaSiteKey, recaptchaScore);
- }
- };
-
- useMemo(
- () => checkCaptcha(),
- /* eslint-disable-next-line */
- [challengeIn],
- );
-
- return {
- recaptchaVersion,
- siteKey,
- isRecaptchaEnabled,
- };
-};
-
-export default useRecaptcha;
diff --git a/blocks/identity-block/utils/useRecaptcha.test.js b/blocks/identity-block/utils/useRecaptcha.test.js
deleted file mode 100644
index 9419b66f94..0000000000
--- a/blocks/identity-block/utils/useRecaptcha.test.js
+++ /dev/null
@@ -1,199 +0,0 @@
-import { waitFor, renderHook } from "@testing-library/react";
-import { useIdentity } from "@wpmedia/arc-themes-components";
-import useRecaptcha from "./useRecaptcha";
-
-// Mock setTimeout and clearTimeout
-jest.useFakeTimers();
-
-jest.mock("@arc-publishing/sdk-identity", () => ({
- __esModule: true,
- default: {
- apiOrigin: "",
- options: jest.fn(),
- },
-}));
-
-jest.mock("fusion:properties", () =>
- jest.fn(() => ({
- api: {
- identity: {
- origin: "https://corecomponents-arc-demo-3-prod.api.cdn.arcpublishing.com",
- },
- retail: {
- origin: "https://corecomponents-arc-demo-3-prod.api.cdn.arcpublishing.com",
- endpoint: "/retail/public/v1/offer/live/",
- },
- },
- })),
-);
-
-jest.mock("fusion:context", () => ({
- __esModule: true,
- useFusionContext: () => ({
- arcSite: "Test Site",
- }),
-}));
-
-const mockIdentity = {
- getConfig: jest.fn(() =>
- Promise.resolve({
- signupRecaptcha: true,
- signinRecaptcha: true,
- magicLinkRecaptcha: true,
- recaptchaScore: "-1",
- recaptchaSiteKey: "6LemcOMhAAAAAEGptytQEAMK_SfH4ZAGJ_e4652C",
- }),
- ),
-};
-
-const mockSales = {
- getConfig: jest.fn(() =>
- Promise.resolve({
- checkoutRecaptchaEnabled: true,
- }),
- ),
-};
-
-jest.mock("@wpmedia/arc-themes-components", () => ({
- ...jest.requireActual("@wpmedia/arc-themes-components"),
- useIdentity: jest.fn(() => ({
- isInitialized: true,
- Identity: {
- ...mockIdentity,
- },
- })),
- useSales: jest.fn(() => ({
- isInitialized: true,
- Sales: {
- ...mockSales,
- },
- })),
-}));
-
-describe("useRecaptcha", () => {
- it("reCaptcha v2 enabled for signIn", async () => {
- const { result } = renderHook(() => useRecaptcha("signin"));
-
- expect(result.current.recaptchaVersion).toBe(undefined);
- expect(result.current.siteKey).toBe(undefined);
- expect(result.current.isRecaptchaEnabled).toBe(false);
-
- await waitFor(() => expect(result.current.recaptchaVersion).toEqual("V2"));
-
- await waitFor(() => expect(result.current.isRecaptchaEnabled).toEqual(true));
-
- await waitFor(() =>
- expect(result.current.siteKey).toEqual("6LemcOMhAAAAAEGptytQEAMK_SfH4ZAGJ_e4652C"),
- );
- });
-
- it("reCaptcha v2 enabled for signUp", async () => {
- const { result } = renderHook(() => useRecaptcha("signup"));
-
- expect(result.current.recaptchaVersion).toBe(undefined);
- expect(result.current.siteKey).toBe(undefined);
- expect(result.current.isRecaptchaEnabled).toBe(false);
-
- await waitFor(() => expect(result.current.recaptchaVersion).toEqual("V2"));
-
- await waitFor(() => expect(result.current.isRecaptchaEnabled).toEqual(true));
-
- await waitFor(() =>
- expect(result.current.siteKey).toEqual("6LemcOMhAAAAAEGptytQEAMK_SfH4ZAGJ_e4652C"),
- );
- });
-
- it("reCaptcha v2 enabled for magicLink", async () => {
- const { result } = renderHook(() => useRecaptcha("magicLink"));
-
- expect(result.current.recaptchaVersion).toBe(undefined);
- expect(result.current.siteKey).toBe(undefined);
- expect(result.current.isRecaptchaEnabled).toBe(false);
-
- await waitFor(() => expect(result.current.recaptchaVersion).toEqual("V2"));
-
- await waitFor(() => expect(result.current.isRecaptchaEnabled).toEqual(true));
-
- await waitFor(() =>
- expect(result.current.siteKey).toEqual("6LemcOMhAAAAAEGptytQEAMK_SfH4ZAGJ_e4652C"),
- );
- });
-
- it("reCaptcha v2 enabled for checkout", async () => {
- const { result } = renderHook(() => useRecaptcha("checkout"));
-
- expect(result.current.recaptchaVersion).toBe(undefined);
- expect(result.current.siteKey).toBe(undefined);
- expect(result.current.isRecaptchaEnabled).toBe(false);
-
- await waitFor(() => expect(result.current.recaptchaVersion).toEqual("V2"));
-
- await waitFor(() => expect(result.current.isRecaptchaEnabled).toEqual(true));
-
- await waitFor(() =>
- expect(result.current.siteKey).toEqual("6LemcOMhAAAAAEGptytQEAMK_SfH4ZAGJ_e4652C"),
- );
- });
-
- it("reCaptcha v3 enabled for signIn", async () => {
- useIdentity.mockReturnValueOnce({
- isInitialized: true,
- Identity: {
- getConfig: jest.fn(() =>
- Promise.resolve({
- signupRecaptcha: true,
- signinRecaptcha: true,
- magicLinkRecaptcha: true,
- recaptchaScore: "0.5",
- recaptchaSiteKey: "6LemcOMhAAAAAEGptytQEAMK_SfH4ZAGJ_e4652C",
- }),
- ),
- },
- });
-
- const { result } = renderHook(() => useRecaptcha("signin"));
-
- expect(result.current.recaptchaVersion).toBe(undefined);
- expect(result.current.siteKey).toBe(undefined);
- expect(result.current.isRecaptchaEnabled).toBe(false);
-
- await waitFor(() => expect(result.current.recaptchaVersion).toEqual("V3"));
-
- await waitFor(() => expect(result.current.isRecaptchaEnabled).toEqual(true));
-
- await waitFor(() =>
- expect(result.current.siteKey).toEqual("6LemcOMhAAAAAEGptytQEAMK_SfH4ZAGJ_e4652C"),
- );
- });
-
- it("reCaptcha v2 disabled for signIn", async () => {
- useIdentity.mockReturnValueOnce({
- isInitialized: true,
- Identity: {
- getConfig: jest.fn(() =>
- Promise.resolve({
- signupRecaptcha: false,
- signinRecaptcha: false,
- magicLinkRecaptcha: false,
- recaptchaScore: "-1",
- recaptchaSiteKey: "6LemcOMhAAAAAEGptytQEAMK_SfH4ZAGJ_e4652C",
- }),
- ),
- },
- });
-
- const { result } = renderHook(() => useRecaptcha("signin"));
-
- expect(result.current.recaptchaVersion).toBe(undefined);
- expect(result.current.siteKey).toBe(undefined);
- expect(result.current.isRecaptchaEnabled).toBe(false);
-
- await waitFor(() => expect(result.current.recaptchaVersion).toEqual(undefined));
-
- await waitFor(() => expect(result.current.isRecaptchaEnabled).toEqual(false));
-
- await waitFor(() =>
- expect(result.current.siteKey).toEqual(undefined),
- );
- });
-});
diff --git a/blocks/large-manual-promo-block/features/large-manual-promo/default.jsx b/blocks/large-manual-promo-block/features/large-manual-promo/default.jsx
index 4a552ab853..7df721dc2d 100644
--- a/blocks/large-manual-promo-block/features/large-manual-promo/default.jsx
+++ b/blocks/large-manual-promo-block/features/large-manual-promo/default.jsx
@@ -5,6 +5,7 @@ import { useComponentContext, useFusionContext } from "fusion:context";
import { useContent, useEditableContent } from "fusion:content";
import getProperties from "fusion:properties";
import {
+ getFocalFromANS,
Conditional,
Image,
isServerSide,
@@ -22,6 +23,16 @@ import {
const BLOCK_CLASS_NAME = "b-large-manual-promo";
+const PromoOverline = ({ showOverline, overline, overlineURL }) => {
+ if (showOverline && overline) {
+ if (overlineURL) {
+ return
{overline};
+ }
+ return
{overline};
+ }
+ return null;
+};
+
const LargeManualPromo = ({ customFields }) => {
const {
description,
@@ -29,6 +40,7 @@ const LargeManualPromo = ({ customFields }) => {
imageAuth,
imageURL,
imageId,
+ imageFocalPoint,
imageRatio,
lazyLoad,
linkURL,
@@ -52,9 +64,9 @@ const LargeManualPromo = ({ customFields }) => {
resizedImage || !imageURL
? {}
: {
- source: "signing-service",
- query: { id: imageURL },
- }
+ source: "signing-service",
+ query: { id: imageURL },
+ }
);
if (imageAuth && !resizedAuth) {
resizedAuth = JSON.parse(imageAuth);
@@ -66,38 +78,30 @@ const LargeManualPromo = ({ customFields }) => {
if (shouldLazyLoad && isServerSide()) {
return null;
}
+ const ansImage = {
+ _id: resizedImage ? imageId : "",
+ url: imageURL,
+ auth: resizedAuth,
+ focal_point: imageFocalPoint ? JSON.parse(imageFocalPoint) : undefined
+ }
const alt = headline || description || null;
const imageParams =
imageURL && resizedAuth
? {
- ansImage: {
- _id: resizedImage ? imageId : "",
- url: imageURL,
- auth: resizedAuth,
- },
- alt,
- aspectRatio: imageRatio,
- resizedOptions: {
- smart: true,
- },
- responsiveImages: [200, 400, 600, 800, 1200],
- width: 600,
- }
- : {
- src: fallbackImage,
- alt,
- };
-
- const PromoOverline = () => {
- if (showOverline && overline) {
- if (overlineURL) {
- return
{overline};
+ ansImage,
+ alt,
+ aspectRatio: imageRatio,
+ resizedOptions: {
+ ...getFocalFromANS(ansImage)
+ },
+ responsiveImages: [200, 400, 600, 800, 1200],
+ width: 600,
}
- return
{overline};
- }
- return null;
- };
+ : {
+ src: fallbackImage,
+ alt,
+ };
return (
@@ -109,6 +113,7 @@ const LargeManualPromo = ({ customFields }) => {
imageURL: "url",
imageId: "_id",
imageAuth: "auth",
+ imageFocalPoint: "focal_point",
})}
suppressContentEditableWarning
>
@@ -126,7 +131,7 @@ const LargeManualPromo = ({ customFields }) => {
) : null}
-
+
{showDescription || showHeadline ? (
{showHeadline && headline ? (
@@ -181,6 +186,9 @@ LargeManualPromo.propTypes = {
imageId: PropTypes.string.tag({
hidden: true,
}),
+ imageFocalPoint: PropTypes.string.tag({
+ hidden: true,
+ }),
linkURL: PropTypes.string.tag({
label: "Link URL",
group: "Configure Content",
diff --git a/blocks/large-manual-promo-block/features/large-manual-promo/default.test.jsx b/blocks/large-manual-promo-block/features/large-manual-promo/default.test.jsx
index 9f450f17f1..a8bedbdf21 100644
--- a/blocks/large-manual-promo-block/features/large-manual-promo/default.test.jsx
+++ b/blocks/large-manual-promo-block/features/large-manual-promo/default.test.jsx
@@ -1,12 +1,14 @@
import React from "react";
+import "@testing-library/jest-dom";
import { render, screen } from "@testing-library/react";
import { useContent } from "fusion:content";
-import { isServerSide } from "@wpmedia/arc-themes-components";
+import { isServerSide, getFocalFromANS } from "@wpmedia/arc-themes-components";
import LargeManualPromo from "./default";
jest.mock("@wpmedia/arc-themes-components", () => ({
...jest.requireActual("@wpmedia/arc-themes-components"),
+ getFocalFromANS: jest.fn(() => { }),
isServerSide: jest.fn(() => true),
LazyLoad: ({ children }) => children,
}));
@@ -21,7 +23,7 @@ jest.mock("fusion:context", () => ({
jest.mock("fusion:content", () => ({
useContent: jest.fn(() => ({})),
useEditableContent: jest.fn(() => ({
- searchableField: () => {},
+ searchableField: () => { },
})),
}));
@@ -43,6 +45,7 @@ const customFieldData = {
describe("the large promo feature", () => {
afterEach(() => {
jest.resetModules();
+ getFocalFromANS.mockClear();
});
beforeEach(() => {
@@ -60,7 +63,7 @@ describe("the large promo feature", () => {
lazyLoad: true,
};
const { container } = render();
- expect(container.firstChild).toBe(null);
+ expect(container).toBeEmptyDOMElement();
});
it("should use content source to get image auth", () => {
@@ -77,7 +80,7 @@ describe("the large promo feature", () => {
/>,
);
expect(useContent).toHaveBeenCalled();
- expect(screen.queryByRole("img", { hidden: true })).not.toBeNull();
+ expect(screen.getByRole("img", { hidden: true })).not.toBeNull();
});
it("does not show image", () => {
@@ -99,8 +102,8 @@ describe("the large promo feature", () => {
render();
expect(screen.queryByText(customFieldData.headline)).toBeNull();
- expect(screen.queryByText(customFieldData.description)).not.toBeNull();
- expect(screen.queryByRole("img")).not.toBeNull();
+ expect(screen.getByText(customFieldData.description)).not.toBeNull();
+ expect(screen.getByRole("img")).not.toBeNull();
});
it("renders headline with no link", () => {
@@ -111,9 +114,9 @@ describe("the large promo feature", () => {
render();
expect(screen.queryByRole("link", { name: customFieldData.headline })).toBeNull();
- expect(screen.queryByText(customFieldData.headline)).not.toBeNull();
- expect(screen.queryByText(customFieldData.description)).not.toBeNull();
- expect(screen.queryByRole("img")).not.toBeNull();
+ expect(screen.getByText(customFieldData.headline)).not.toBeNull();
+ expect(screen.getByText(customFieldData.description)).not.toBeNull();
+ expect(screen.getByRole("img")).not.toBeNull();
});
it("does not show headline or description", () => {
@@ -128,7 +131,7 @@ describe("the large promo feature", () => {
render();
expect(screen.queryByText(customFieldData.headline)).toBeNull();
expect(screen.queryByText(customFieldData.description)).toBeNull();
- expect(screen.queryByRole("img")).not.toBeNull();
+ expect(screen.getByRole("img")).not.toBeNull();
});
it("does not show description", () => {
@@ -139,9 +142,9 @@ describe("the large promo feature", () => {
};
render();
- expect(screen.queryByText(customFieldData.headline)).not.toBeNull();
+ expect(screen.getByText(customFieldData.headline)).not.toBeNull();
expect(screen.queryByText(customFieldData.description)).toBeNull();
- expect(screen.queryByRole("img")).not.toBeNull();
+ expect(screen.getByRole("img")).not.toBeNull();
});
it("renders overline", () => {
@@ -151,11 +154,11 @@ describe("the large promo feature", () => {
};
render();
- expect(screen.queryByRole("link", { name: customFieldData.overline })).not.toBeNull();
- expect(screen.queryByText(customFieldData.overline)).not.toBeNull();
- expect(screen.queryByText(customFieldData.headline)).not.toBeNull();
- expect(screen.queryByText(customFieldData.description)).not.toBeNull();
- expect(screen.queryByRole("img")).not.toBeNull();
+ expect(screen.getByRole("link", { name: customFieldData.overline })).not.toBeNull();
+ expect(screen.getByText(customFieldData.overline)).not.toBeNull();
+ expect(screen.getByText(customFieldData.headline)).not.toBeNull();
+ expect(screen.getByText(customFieldData.description)).not.toBeNull();
+ expect(screen.getByRole("img")).not.toBeNull();
});
it("renders overline without link", () => {
@@ -166,10 +169,10 @@ describe("the large promo feature", () => {
render();
expect(screen.queryByRole("link", { name: customFieldData.overline })).toBeNull();
- expect(screen.queryByText(customFieldData.overline)).not.toBeNull();
- expect(screen.queryByText(customFieldData.headline)).not.toBeNull();
- expect(screen.queryByText(customFieldData.description)).not.toBeNull();
- expect(screen.queryByRole("img", { hidden: true })).not.toBeNull();
+ expect(screen.getByText(customFieldData.overline)).not.toBeNull();
+ expect(screen.getByText(customFieldData.headline)).not.toBeNull();
+ expect(screen.getByText(customFieldData.description)).not.toBeNull();
+ expect(screen.getByRole("img", { hidden: true })).not.toBeNull();
});
it("does not render overline", () => {
@@ -182,9 +185,9 @@ describe("the large promo feature", () => {
render();
expect(screen.queryByRole("link", { name: customFieldData.overline })).toBeNull();
expect(screen.queryByText(customFieldData.overline)).toBeNull();
- expect(screen.queryByText(customFieldData.headline)).not.toBeNull();
- expect(screen.queryByText(customFieldData.description)).not.toBeNull();
- expect(screen.queryByRole("img", { hidden: true })).not.toBeNull();
+ expect(screen.getByText(customFieldData.headline)).not.toBeNull();
+ expect(screen.getByText(customFieldData.description)).not.toBeNull();
+ expect(screen.getByRole("img", { hidden: true })).not.toBeNull();
});
it("should return a fallback image if showImage is true and imageId is not valid", () => {
@@ -194,7 +197,7 @@ describe("the large promo feature", () => {
imageId: null,
};
render();
- expect(screen.queryByRole("img", { name: config.headline })).not.toBeNull();
+ expect(screen.getByRole("img", { name: config.headline })).not.toBeNull();
});
it("should make a blank call to the signing-service if the image is from PhotoCenter and has an Auth value", () => {
@@ -238,4 +241,21 @@ describe("the large promo feature", () => {
query: { id: "test_id=123" },
});
});
+
+ it("should respect focal point if one is set", () => {
+ const config = {
+ imageAuth: "",
+ imageURL: "test_id=123",
+ imageId: "123",
+ imageFocalPoint: JSON.stringify({ x: 1234, y: 2345 }),
+ imageRatio: "4:3",
+ showImage: true,
+ };
+ render();
+ expect(getFocalFromANS).toHaveBeenCalledWith(
+ expect.objectContaining({
+ focal_point: JSON.parse(config.imageFocalPoint)
+ })
+ );
+ })
});
diff --git a/blocks/large-manual-promo-block/index.story.jsx b/blocks/large-manual-promo-block/index.story.jsx
index bf7e4ef613..da923feb26 100644
--- a/blocks/large-manual-promo-block/index.story.jsx
+++ b/blocks/large-manual-promo-block/index.story.jsx
@@ -1,10 +1,8 @@
import React from "react";
-import { withKnobs } from "@storybook/addon-knobs";
import LargeManualPromo from "./features/large-manual-promo/default";
export default {
title: "Blocks/Large Manual Promo",
- decorators: [withKnobs],
parameters: {
// Set the viewports in Chromatic at a component level.
chromatic: { viewports: [320, 1200] },
diff --git a/blocks/lead-art-block/features/leadart/default.jsx b/blocks/lead-art-block/features/leadart/default.jsx
index 0cd5136a9d..d79878b3de 100644
--- a/blocks/lead-art-block/features/leadart/default.jsx
+++ b/blocks/lead-art-block/features/leadart/default.jsx
@@ -1,5 +1,5 @@
/* eslint-disable camelcase */
-import React, { useState, useRef } from "react";
+import React, { useState, useRef, useEffect, useMemo } from "react";
import PropTypes from "@arc-fusion/prop-types";
import { useFusionContext } from "fusion:context";
import getProperties from "fusion:properties";
@@ -44,6 +44,26 @@ export const LeadArtPresentation = (props) => {
viewportPercentage = 65
} = customFields;
+ const lead_art = useMemo(() => content?.promo_items?.lead_art || content?.promo_items?.basic || {}, [content]) ;
+
+ useEffect(() => {
+ if (lead_art?.type === "image") {
+ if (document.fullscreenEnabled) {
+ document.addEventListener("fullscreenchange", () => {
+ if (!document.fullscreenElement) {
+ setIsOpen(false);
+ }
+ });
+ } else if (document.webkitFullscreenEnabled) {
+ document.addEventListener("webkitfullscreenchange", () => {
+ if (!document.webkitFullscreenElement) {
+ setIsOpen(false);
+ }
+ })
+ }
+ }
+ }, [lead_art]);
+
/* istanbul ignore next */
const toggleFullScreen = () => {
// the full screen element is the div wrapping a lead art of type image
@@ -259,7 +279,6 @@ export const LeadArtPresentation = (props) => {
return null;
};
- const lead_art = content?.promo_items?.lead_art || content?.promo_items?.basic || {};
const leadArtContent = getLeadArtContent(lead_art);
if (leadArtContent) {
return {leadArtContent}
;
diff --git a/blocks/links-bar-block/index.story.jsx b/blocks/links-bar-block/index.story.jsx
index 072a526879..21b9484b23 100644
--- a/blocks/links-bar-block/index.story.jsx
+++ b/blocks/links-bar-block/index.story.jsx
@@ -1,10 +1,8 @@
import React from "react";
-import { withKnobs } from "@storybook/addon-knobs";
import LinksBar from "./features/links-bar/default";
export default {
title: "Blocks/Links Bar",
- decorators: [withKnobs],
parameters: {
chromatic: {
viewports: [320, 1200],
diff --git a/blocks/masthead-block/index.story.jsx b/blocks/masthead-block/index.story.jsx
index 2582b113ac..ebc828d200 100644
--- a/blocks/masthead-block/index.story.jsx
+++ b/blocks/masthead-block/index.story.jsx
@@ -1,10 +1,8 @@
import React from "react";
-import { withKnobs } from "@storybook/addon-knobs";
import { MastheadPresentational } from "./features/masthead-block/default";
export default {
title: "Blocks/Masthead",
- decorators: [withKnobs],
parameters: {
// Set the viewports in Chromatic at a component level.
chromatic: { viewports: [320, 1200] },
diff --git a/blocks/medium-manual-promo-block/features/medium-manual-promo/default.jsx b/blocks/medium-manual-promo-block/features/medium-manual-promo/default.jsx
index 2ac3471044..5f4150bada 100644
--- a/blocks/medium-manual-promo-block/features/medium-manual-promo/default.jsx
+++ b/blocks/medium-manual-promo-block/features/medium-manual-promo/default.jsx
@@ -5,6 +5,7 @@ import { useContent, useEditableContent } from "fusion:content";
import { useComponentContext, useFusionContext } from "fusion:context";
import getProperties from "fusion:properties";
import {
+ getFocalFromANS,
Conditional,
formatURL,
Heading,
@@ -26,6 +27,7 @@ const MediumManualPromo = ({ customFields }) => {
imageAuth,
imageURL,
imageId,
+ imageFocalPoint,
imageRatio,
lazyLoad,
linkURL,
@@ -46,9 +48,9 @@ const MediumManualPromo = ({ customFields }) => {
resizedImage || !imageURL
? {}
: {
- source: "signing-service",
- query: { id: imageURL },
- }
+ source: "signing-service",
+ query: { id: imageURL },
+ }
);
if (imageAuth && !resizedAuth) {
resizedAuth = JSON.parse(imageAuth);
@@ -61,27 +63,29 @@ const MediumManualPromo = ({ customFields }) => {
return null;
}
+ const ansImage = {
+ _id: resizedImage ? imageId : "",
+ url: imageURL,
+ auth: resizedAuth,
+ focal_point: imageFocalPoint ? JSON.parse(imageFocalPoint) : undefined
+ }
const alt = headline || description || null;
const imageParams =
imageURL && resizedAuth
? {
- ansImage: {
- _id: resizedImage ? imageId : "",
- url: imageURL,
- auth: resizedAuth,
- },
- alt,
- aspectRatio: imageRatio,
- resizedOptions: {
- smart: true,
- },
- responsiveImages: [200, 400, 600, 800, 1200],
- width: 600,
- }
+ ansImage,
+ alt,
+ aspectRatio: imageRatio,
+ resizedOptions: {
+ ...getFocalFromANS(ansImage)
+ },
+ responsiveImages: [200, 400, 600, 800, 1200],
+ width: 600,
+ }
: {
- src: fallbackImage,
- alt,
- };
+ src: fallbackImage,
+ alt,
+ };
return (
@@ -95,6 +99,7 @@ const MediumManualPromo = ({ customFields }) => {
imageURL: "url",
imageId: "_id",
imageAuth: "auth",
+ imageFocalPoint: "focal_point"
})}
suppressContentEditableWarning
>
@@ -153,6 +158,9 @@ MediumManualPromo.propTypes = {
imageId: PropTypes.string.tag({
hidden: true,
}),
+ imageFocalPoint: PropTypes.string.tag({
+ hidden: true,
+ }),
linkURL: PropTypes.string.tag({
label: "Link URL",
group: "Configure Content",
diff --git a/blocks/medium-manual-promo-block/features/medium-manual-promo/default.test.jsx b/blocks/medium-manual-promo-block/features/medium-manual-promo/default.test.jsx
index b6db21547d..f10599b7bc 100644
--- a/blocks/medium-manual-promo-block/features/medium-manual-promo/default.test.jsx
+++ b/blocks/medium-manual-promo-block/features/medium-manual-promo/default.test.jsx
@@ -1,20 +1,22 @@
import React from "react";
+import "@testing-library/jest-dom";
import { render, screen } from "@testing-library/react";
-import { isServerSide } from "@wpmedia/arc-themes-components";
+import { isServerSide, getFocalFromANS } from "@wpmedia/arc-themes-components";
import { useContent } from "fusion:content";
import MediumManualPromo from "./default";
jest.mock("@wpmedia/arc-themes-components", () => ({
...jest.requireActual("@wpmedia/arc-themes-components"),
+ getFocalFromANS: jest.fn(() => { }),
isServerSide: jest.fn(() => false),
LazyLoad: ({ children }) => children,
}));
jest.mock("fusion:content", () => ({
- useContent: jest.fn(() => {}),
+ useContent: jest.fn(() => ({})),
useEditableContent: jest.fn(() => ({
- searchableField: () => {},
+ searchableField: () => { },
})),
}));
@@ -34,6 +36,7 @@ const customFieldData = {
describe("the medium promo feature", () => {
afterEach(() => {
jest.resetModules();
+ getFocalFromANS.mockClear();
});
it("should return null if lazyLoad on the server and not in the admin", () => {
@@ -42,14 +45,14 @@ describe("the medium promo feature", () => {
lazyLoad: true,
};
const { container } = render();
- expect(container.firstChild).toBe(null);
+ expect(container).toBeEmptyDOMElement();
});
it("should render all fields", () => {
render();
- expect(screen.queryByText(customFieldData.headline)).not.toBeNull();
- expect(screen.queryByText(customFieldData.description)).not.toBeNull();
- expect(screen.queryByRole("img", { hidden: true })).not.toBeNull();
+ expect(screen.getByText(customFieldData.headline)).not.toBeNull();
+ expect(screen.getByText(customFieldData.description)).not.toBeNull();
+ expect(screen.getByRole("img", { hidden: true })).not.toBeNull();
});
it("does not show image", () => {
@@ -59,8 +62,8 @@ describe("the medium promo feature", () => {
};
render();
- expect(screen.queryByText(customFieldData.headline)).not.toBeNull();
- expect(screen.queryByText(customFieldData.description)).not.toBeNull();
+ expect(screen.getByText(customFieldData.headline)).not.toBeNull();
+ expect(screen.getByText(customFieldData.description)).not.toBeNull();
expect(screen.queryByRole("img")).toBeNull();
});
@@ -71,9 +74,9 @@ describe("the medium promo feature", () => {
};
render();
- expect(screen.queryByText(customFieldData.headline)).not.toBeNull();
- expect(screen.queryByText(customFieldData.description)).not.toBeNull();
- expect(screen.queryByRole("img", { hidden: true })).not.toBeNull();
+ expect(screen.getByText(customFieldData.headline)).not.toBeNull();
+ expect(screen.getByText(customFieldData.description)).not.toBeNull();
+ expect(screen.getByRole("img", { hidden: true })).not.toBeNull();
});
it("should return a fallback image if showImage is true and imageId is not valid", () => {
@@ -83,7 +86,7 @@ describe("the medium promo feature", () => {
imageId: null,
};
render();
- expect(screen.queryByRole("img", { name: config.headline })).not.toBeNull();
+ expect(screen.getByRole("img", { name: config.headline })).not.toBeNull();
});
it("should make a blank call to the signing-service if the image is from PhotoCenter and has an Auth value", () => {
@@ -121,9 +124,9 @@ describe("the medium promo feature", () => {
};
render();
- expect(screen.queryByText(customFieldData.headline)).not.toBeNull();
+ expect(screen.getByText(customFieldData.headline)).not.toBeNull();
expect(screen.queryByText(customFieldData.description)).toBeNull();
- expect(screen.queryByRole("img", { hidden: true })).not.toBeNull();
+ expect(screen.getByRole("img", { hidden: true })).not.toBeNull();
});
it("does not show headline", () => {
@@ -135,8 +138,8 @@ describe("the medium promo feature", () => {
render();
expect(screen.getByRole("link")).not.toBeNull();
expect(screen.queryByText(customFieldData.headline)).toBeNull();
- expect(screen.queryByText(customFieldData.description)).not.toBeNull();
- expect(screen.queryByRole("img")).not.toBeNull();
+ expect(screen.getByText(customFieldData.description)).not.toBeNull();
+ expect(screen.getByRole("img")).not.toBeNull();
});
it("does not show description or headline", () => {
@@ -150,7 +153,7 @@ describe("the medium promo feature", () => {
render();
expect(screen.queryByText(customFieldData.headline)).toBeNull();
expect(screen.queryByText(customFieldData.description)).toBeNull();
- expect(screen.queryByRole("img", { hidden: true })).not.toBeNull();
+ expect(screen.getByRole("img", { hidden: true })).not.toBeNull();
});
it("renders headline with no link", () => {
@@ -161,8 +164,25 @@ describe("the medium promo feature", () => {
render();
expect(screen.queryByRole("link")).toBeNull();
- expect(screen.queryByText(customFieldData.headline)).not.toBeNull();
- expect(screen.queryByText(customFieldData.description)).not.toBeNull();
- expect(screen.queryByRole("img")).not.toBeNull();
+ expect(screen.getByText(customFieldData.headline)).not.toBeNull();
+ expect(screen.getByText(customFieldData.description)).not.toBeNull();
+ expect(screen.getByRole("img")).not.toBeNull();
});
+
+ it("should respect focal point if one is set", () => {
+ const config = {
+ imageAuth: "",
+ imageURL: "test_id=123",
+ imageId: "123",
+ imageFocalPoint: JSON.stringify({ x: 1234, y: 2345 }),
+ imageRatio: "4:3",
+ showImage: true,
+ };
+ render();
+ expect(getFocalFromANS).toHaveBeenCalledWith(
+ expect.objectContaining({
+ focal_point: JSON.parse(config.imageFocalPoint)
+ })
+ );
+ })
});
diff --git a/blocks/medium-manual-promo-block/index.story.jsx b/blocks/medium-manual-promo-block/index.story.jsx
index 7e0e5d3778..d108a1ebb5 100644
--- a/blocks/medium-manual-promo-block/index.story.jsx
+++ b/blocks/medium-manual-promo-block/index.story.jsx
@@ -1,10 +1,8 @@
import React from "react";
-import { withKnobs } from "@storybook/addon-knobs";
import MediumManualPromo from "./features/medium-manual-promo/default";
export default {
title: "Blocks/Medium Manual Promo",
- decorators: [withKnobs],
parameters: {
// Set the viewports in Chromatic at a component level.
chromatic: { viewports: [320, 768, 1200] },
diff --git a/blocks/medium-promo-block/index.story.jsx b/blocks/medium-promo-block/index.story.jsx
index 70df5b5bbe..a9f09d07e3 100644
--- a/blocks/medium-promo-block/index.story.jsx
+++ b/blocks/medium-promo-block/index.story.jsx
@@ -1,10 +1,8 @@
import React from "react";
-import { withKnobs } from "@storybook/addon-knobs";
import MediumPromo from "./features/medium-promo/default";
export default {
title: "Blocks/Medium Promo",
- decorators: [withKnobs],
parameters: {
// Set the viewports in Chromatic at a component level.
chromatic: { viewports: [320, 768, 1200] },
diff --git a/blocks/numbered-list-block/index.story.jsx b/blocks/numbered-list-block/index.story.jsx
index fda2ac6eab..ac645fdafc 100644
--- a/blocks/numbered-list-block/index.story.jsx
+++ b/blocks/numbered-list-block/index.story.jsx
@@ -1,10 +1,8 @@
import React from "react";
-import { withKnobs } from "@storybook/addon-knobs";
import NumberedList from "./features/numbered-list/default";
export default {
title: "Blocks/Numbered List",
- decorators: [withKnobs],
parameters: {
// Set the viewports in Chromatic at a component level.
chromatic: { viewports: [320, 1200] },
diff --git a/blocks/overline-block/index.story.jsx b/blocks/overline-block/index.story.jsx
new file mode 100644
index 0000000000..0e30c92a9b
--- /dev/null
+++ b/blocks/overline-block/index.story.jsx
@@ -0,0 +1,9 @@
+import React from "react";
+import Overline from "./features/overline/default";
+
+export default {
+ title: "Blocks/Overline",
+ component: Overline,
+};
+
+export const defaultOverline = ;
diff --git a/blocks/overline-block/index.story.mdx b/blocks/overline-block/index.story.mdx
deleted file mode 100644
index bb2803c3b0..0000000000
--- a/blocks/overline-block/index.story.mdx
+++ /dev/null
@@ -1,15 +0,0 @@
-import { Meta, Story, Canvas } from "@storybook/addon-docs";
-
-import Overline from "./features/overline/default";
-
-
-
-## Stories
-
-** Overline **
-
-
diff --git a/blocks/product-featured-image-block/index.story.jsx b/blocks/product-featured-image-block/index.story.jsx
index faa03af89a..87ce2df9cf 100644
--- a/blocks/product-featured-image-block/index.story.jsx
+++ b/blocks/product-featured-image-block/index.story.jsx
@@ -11,19 +11,34 @@ export default {
const mockFeaturedImageData = {
_id: "HY6LDPEW4BBFDLBYD4S3S7LZ3E",
type: "image",
- url: "https://cloudfront-us-east-1.images.arcpublishing.com/sandbox.themesinternal/HY6LDPEW4BBFDLBYD4S3S7LZ3E.jpg",
+ caption:
+ "Reimagining a tried-and-true staple can invigorate the senses. Tired of tomato soup with grilled cheese? Why not try a hearty gazpacho with a caprese focaccia?",
+ credits: {
+ affiliation: [
+ {
+ name: "Affiliation Name",
+ },
+ ],
+ by: [
+ {
+ type: "author",
+ name: "Author Name",
+ org: "Author Org",
+ slug: "",
+ },
+ ],
+ },
+ subtitle: "Switching It Up",
auth: {
- 1: "ab9e85e4ddf84da579c217bc66331a71941bd99dcfbc17ef0f25b166a094bec4",
+ 2: "ab9e85e4ddf84da579c217bc66331a71941bd99dcfbc17ef0f25b166a094bec4",
},
- alt_text: "Man smiling posing in front of shelves. (This is alt text.)",
+ url: "https://cloudfront-us-east-1.images.arcpublishing.com/sandbox.themesinternal/HY6LDPEW4BBFDLBYD4S3S7LZ3E.jpg",
};
export const displayImage = () => (
);
-
-export const noImage = () => ;
diff --git a/blocks/quad-chain-block/index.story.jsx b/blocks/quad-chain-block/index.story.jsx
index 41f1664d08..82a41dfdf1 100644
--- a/blocks/quad-chain-block/index.story.jsx
+++ b/blocks/quad-chain-block/index.story.jsx
@@ -1,10 +1,8 @@
import React from "react";
-import { withKnobs } from "@storybook/addon-knobs";
import QuadChain from "./chains/quad-chain/default";
export default {
title: "Chains/Quad",
- decorators: [withKnobs],
parameters: {
// Set the viewports in Chromatic at a component level.
chromatic: { viewports: [320, 740, 1200] },
diff --git a/blocks/results-list-block/index.story.jsx b/blocks/results-list-block/index.story.jsx
index 1b6bf89f73..f3835601ad 100644
--- a/blocks/results-list-block/index.story.jsx
+++ b/blocks/results-list-block/index.story.jsx
@@ -1,10 +1,8 @@
import React from "react";
-import { withKnobs } from "@storybook/addon-knobs";
import ResultsListBlock from "./features/results-list/default";
export default {
title: "Blocks/Results List",
- decorators: [withKnobs],
parameters: {
// Set the viewports in Chromatic at a component level.
chromatic: { viewports: [320, 1200] },
diff --git a/blocks/right-rail-advanced-block/index.story.jsx b/blocks/right-rail-advanced-block/index.story.jsx
index 7e7074d525..8924151c1e 100644
--- a/blocks/right-rail-advanced-block/index.story.jsx
+++ b/blocks/right-rail-advanced-block/index.story.jsx
@@ -81,8 +81,8 @@ export const basic = () => (