diff --git a/blocks/identity-block/components/bot-challenge-protection/index.jsx b/blocks/identity-block/components/bot-challenge-protection/index.jsx
index 06c99caf76..937e987299 100644
--- a/blocks/identity-block/components/bot-challenge-protection/index.jsx
+++ b/blocks/identity-block/components/bot-challenge-protection/index.jsx
@@ -1,16 +1,20 @@
import React from "react";
-import { useIdentity, Paragraph } from "@wpmedia/arc-themes-components";
-import useRecaptcha, { RECAPTCHA_V2, RECAPTCHA_V3 } from "../../utils/useRecaptcha";
import ReCAPTCHA from "react-google-recaptcha";
import { GoogleReCaptchaProvider } from "react-google-recaptcha-v3";
+
+import { usePhrases, useIdentity, Paragraph } from "@wpmedia/arc-themes-components";
+import useRecaptcha, { RECAPTCHA_V2, RECAPTCHA_V3 } from "../../utils/useRecaptcha";
+
+// eslint-disable-next-line
import RecaptchaV3 from "./reCaptchaV3";
export const ARCXP_CAPTCHA= "ArcXP_captchaToken"
const BotChallengeProtection = ({ challengeIn, setCaptchaToken, className, captchaError, setCaptchaError, resetRecaptcha }) => {
-
+
const { isInitialized } = useIdentity();
const { recaptchaVersion, siteKey, isRecaptchaEnabled } = useRecaptcha(challengeIn);
+ const phrases = usePhrases();
const onChange = (value) => {
setCaptchaToken(value);
@@ -44,6 +48,8 @@ const BotChallengeProtection = ({ challengeIn, setCaptchaToken, className, captc
} else {
return null;
}
+
+ return null;
};
export default BotChallengeProtection;
diff --git a/blocks/identity-block/components/bot-challenge-protection/index.test.jsx b/blocks/identity-block/components/bot-challenge-protection/index.test.jsx
index b1f5a40b00..8b8ef85645 100644
--- a/blocks/identity-block/components/bot-challenge-protection/index.test.jsx
+++ b/blocks/identity-block/components/bot-challenge-protection/index.test.jsx
@@ -1,7 +1,10 @@
import React from "react";
-import { render, screen } from "@testing-library/react";
+import { render, screen, waitFor } from "@testing-library/react";
import { useIdentity } from "@wpmedia/arc-themes-components";
import BotChallengeProtection from ".";
+import * as useRecaptcha from "../../utils/useRecaptcha";
+
+jest.mock("../../utils/useRecaptcha");
const mockLogin = jest.fn(() => Promise.resolve());
@@ -12,8 +15,8 @@ const mockIdentity = {
};
const mockSales = {
- getConfig: jest.fn(() => {})
-}
+ getConfig: jest.fn(() => {}),
+};
jest.mock("@wpmedia/arc-themes-components", () => ({
...jest.requireActual("@wpmedia/arc-themes-components"),
@@ -32,18 +35,33 @@ jest.mock("@wpmedia/arc-themes-components", () => ({
}));
describe("Bot challenge protection", () => {
- it("renders with required items", () => {
+ it("renders with required items", async () => {
+ useRecaptcha.default.mockReturnValue({
+ recaptchaVersion: "V2",
+ siteKey: "123",
+ isRecaptchaEnabled: true,
+ });
+
render();
- expect(screen.getByTestId("bot-challege-protection-container")).not.toBeNull();
+ await waitFor(() => {
+ expect(screen.getByTestId("bot-challege-protection-container")).not.toBeNull();
+ });
});
it("it does not render if identity is not initialized", () => {
+
+ useRecaptcha.default.mockReturnValue({
+ recaptchaVersion: "V2",
+ siteKey: "123",
+ isRecaptchaEnabled: true,
+ });
+
useIdentity.mockImplementation(() => ({
isInitialized: false,
Identity: {
...mockIdentity,
},
- }))
+ }));
render();
expect(screen.queryByTestId("bot-challege-protection-container")).toBeNull();
});
diff --git a/blocks/identity-block/components/bot-challenge-protection/reCaptchaV3.js b/blocks/identity-block/components/bot-challenge-protection/reCaptchaV3.js
index 40ef3e1829..b1c4fe986b 100644
--- a/blocks/identity-block/components/bot-challenge-protection/reCaptchaV3.js
+++ b/blocks/identity-block/components/bot-challenge-protection/reCaptchaV3.js
@@ -1,22 +1,28 @@
import { useEffect, useCallback } from "react";
import { useGoogleReCaptcha } from "react-google-recaptcha-v3";
+
+// eslint-disable-next-line
import { ARCXP_CAPTCHA } from "./index";
const RecaptchaV3 = ({ setCaptchaToken, resetRecaptcha }) => {
const { executeRecaptcha } = useGoogleReCaptcha();
+
const handleReCaptcha3Verify = useCallback(async () => {
if (!executeRecaptcha) {
+ // eslint-disable-next-line
console.log("ArcXP - Execute recaptcha not yet available");
return;
}
const token = await executeRecaptcha();
setCaptchaToken(token);
localStorage.setItem(ARCXP_CAPTCHA, token);
+ /* eslint-disable-next-line */
}, [executeRecaptcha]);
useEffect(() => {
handleReCaptcha3Verify();
+ /* eslint-disable-next-line */
}, [executeRecaptcha, resetRecaptcha]);
return null;
diff --git a/blocks/identity-block/features/login/default.jsx b/blocks/identity-block/features/login/default.jsx
index 334757e81f..4faf237548 100644
--- a/blocks/identity-block/features/login/default.jsx
+++ b/blocks/identity-block/features/login/default.jsx
@@ -1,3 +1,4 @@
+/* global grecaptcha */
import React, { useState } from "react";
import PropTypes from "@arc-fusion/prop-types";
import { useFusionContext } from "fusion:context";
@@ -13,10 +14,6 @@ import { RECAPTCHA_LOGIN } from "../../utils/useRecaptcha";
const BLOCK_CLASS_NAME = "b-login-form";
-export function definedMessageByCode(code) {
- return errorCodes[code] || errorCodes["0"];
-}
-
const errorCodes = {
100015: "identity-block.login-form-error.account-is-disabled",
130001: "identity-block.login-form-error.captcha-token-invalid",
@@ -25,6 +22,10 @@ const errorCodes = {
0: "identity-block.login-form-error.invalid-email-password",
};
+export function definedMessageByCode(code) {
+ return errorCodes[code] || errorCodes["0"];
+}
+
const Login = ({ customFields }) => {
const { redirectURL, redirectToPreviousPage, loggedInPageLocation, OIDC } = customFields;
diff --git a/blocks/identity-block/features/login/default.test.jsx b/blocks/identity-block/features/login/default.test.jsx
index a5c8ace853..3aac18b2e5 100644
--- a/blocks/identity-block/features/login/default.test.jsx
+++ b/blocks/identity-block/features/login/default.test.jsx
@@ -70,7 +70,7 @@ describe("Identity Login Feature", () => {
describe("Identity Login Feature - rejected Login", () => {
beforeEach(() => {
- mockLogin.mockImplementation(() => Promise.reject());
+ mockLogin.mockImplementation(() => Promise.reject({ code: 0 }));
global.grecaptcha = {
reset: jest.fn()
}
@@ -97,7 +97,7 @@ describe("Identity Login Feature - rejected Login", () => {
fireEvent.click(screen.getByRole("button"));
await waitFor(() => expect(mockLogin).toHaveBeenCalled());
- await screen.findByText("identity-block.login-form-error");
+ await screen.findByText("identity-block.login-form-error.invalid-email-password");
});
});
diff --git a/blocks/identity-block/utils/useRecaptcha.js b/blocks/identity-block/utils/useRecaptcha.js
index 7c421009db..bab44e0034 100644
--- a/blocks/identity-block/utils/useRecaptcha.js
+++ b/blocks/identity-block/utils/useRecaptcha.js
@@ -1,14 +1,13 @@
import { useState, useMemo } from "react";
-import { useIdentity } from "@wpmedia/arc-themes-components";
-import { useSales } from "@wpmedia/arc-themes-components";
+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_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';
+export const RECAPTCHA_V2 = "V2";
+export const RECAPTCHA_V3 = "V3";
const useRecaptcha = (challengeIn) => {
const { Identity } = useIdentity();
@@ -18,13 +17,13 @@ const useRecaptcha = (challengeIn) => {
const [siteKey, setSiteKey] = useState();
const [isRecaptchaEnabled, setIsRecaptchaEnabled] = useState(false);
- const setRecaptchaInfo = (isRecaptchaEnabled, recaptchaSiteKey, recaptchaScore) => {
- if (isRecaptchaEnabled && recaptchaSiteKey && recaptchaScore) {
+ const setRecaptchaInfo = (isCaptchaEnabled, recaptchaSiteKey, recaptchaScore) => {
+ if (isCaptchaEnabled && recaptchaSiteKey && recaptchaScore) {
if (recaptchaScore === "-1") {
setSiteKey(recaptchaSiteKey);
setRecaptchaVersion(RECAPTCHA_V2);
setIsRecaptchaEnabled(true);
- } else if (0 <= parseFloat(recaptchaScore) && parseFloat(recaptchaScore) <= 1) {
+ } else if (parseFloat(recaptchaScore) >= 0 && parseFloat(recaptchaScore) <= 1) {
setSiteKey(recaptchaSiteKey);
setRecaptchaVersion(RECAPTCHA_V3);
setIsRecaptchaEnabled(true);
@@ -47,14 +46,17 @@ const useRecaptcha = (challengeIn) => {
}
};
- useMemo(() => checkCaptcha(), [challengeIn]);
-
+ useMemo(
+ () => checkCaptcha(),
+ /* eslint-disable-next-line */
+ [challengeIn],
+ );
+
return {
recaptchaVersion,
siteKey,
- isRecaptchaEnabled
+ isRecaptchaEnabled,
};
};
export default useRecaptcha;
-