ASUB-8193 Adding reCaptchav3

[LauraPinilla]

If you have not filled out the checklist below, the pr is not ready for review.

Description

Render reCaptcha v3 in case the tenant has this config.

We are passing a parameter

reCaptcha V3 is the invisible reCaptcha provided by google. Once it's included on the page should look like the image below.

By default, google includes this in the bottom right corner.
reCaptcha v3 does not require action by the user, the recaptcha is returned automatically.

BotChallengeProtection component will accept a challengeIn attribute. This attribute could be one of:
'signup' || ‘signin’ || ‘magiclink’ || ‘checkout’

IF !!`${challengeIn}Recaptcha && (0 <=recaptchaScore && recaptchaScore <= 1) && !!recaptchaSiteKey
THEN render reCaptchaV3. reCaptchaV3 should be initialized by passing the recaptchaSiteKey

Currently, we have this enabled for org:subssinglesite site:the-daily-intelligencer env: sandbox admin. In case you need this setting for any tenant, please let us know.

Jira Ticket

https://arcpublishing.atlassian.net/browse/ASUB-8193

Acceptance Criteria

Update BotChallengeProtection component in identity-block

BotChallengeProtection will accept a challengeIn attribute. This attribute could be one of:
'signup' || ‘signin’ || ‘magiclink’ || ‘checkout’

IF !!`${challengeIn}Recaptcha && recaptchaScore between 0 - 1 &&!!recaptchaSiteKey
THEN render reCaptchaV3. reCaptchaV3 should be initialized by passing the recaptchaSiteKey

Every time you grab a response token from reCAPTCHA component, store the response in localStorage.

The BotChallengeProtection should be part of the Login block, and the reCaptcha token should be sent during the call to Identity.login();
User should be successfully Logged In when reCaptcha v3 is enabled for signin.

Test Steps

• Add test steps a reviewer must complete to test this PR

Figma file

1. Checkout this branch git checkout {branch name}
2. npx fusion start -l @wpmedia/identity-block
3. point the site configs on blocks.json to https://subssinglesite-the-daily-intelligencer-sandbox.api.cdn.arcpublishing.com (It has recaptchav3 enabled for signin), or enable the config for the tenant you are using.
4. Create a page and includeIdentity Log In - Arc Block component. Check the component BotChallengeProtection is being rendered (reCaptcha v2 or reCaptchaV3, depending on the configs), and after ask for login the user should be logged In successfully.

Effect Of Changes

Before

Example: When I clicked the search button, the button turned red.

[include screenshot or gif or link to video, storybook would be awesome]

After

Example: When I clicked the search button, the button turned green.

[include screenshot or gif or link to video, storybook would be awesome]

Dependencies or Side Effects

Examples of dependencies or side effects are:

• Manifest pr for new block:
• Feature pack pr for local development:
• How to deploy to news: https://arcpublishing.atlassian.net/wiki/spaces/TI/pages/3138682964/News+Theme+2.0+Migration+Development+Deployment+Notes
• Additional settings that will be required in the blocks.json
• Changes to the custom fields which will require users to reconfigure features
• Dependency on another PR that needs to be merged first

Author Checklist

The author of the PR should fill out the following sections to ensure this PR is ready for review.

• Confirmed all the test steps a reviewer will follow above are working.
• Confirmed there are no linter errors. Please run npm run lint to check for errors. Often, npm run lint:fix will fix those errors and warnings.
• Ran this code locally and checked that there are not any unintended side effects. For example, that a CSS selector is scoped only to a particular block.
• Confirmed this PR has reasonable code coverage. You can run npm run test:coverage to see your progress.
  • Confirmed this PR has unit test files
  • Ran npm run test, made sure all tests are passing
  • If the amount of work to write unit tests for this change are excessive,
    please explain why (so that we can fix it whenever it gets refactored).
• Confirmed relevant documentation has been updated/added.

Reviewer Checklist

The reviewer of the PR should copy-paste this template into the review comments on review.

• Linting code actions have passed.
• Ran the code locally based on the test instructions.
  • I don’t think this is needed to be tested locally. For example, a padding style change (storybook?) or a logic change (write a test).
• I am a member of the engine theme team so that I can approve and merge this. If you're not on the team, you won't have access to approve and merge this pr.
• Looked to see that the new or changed code has code coverage, specifically. We want the global code coverage to keep on going up with targeted testing.

[vgalatro]

Like I mentioned in the other PR, Themes needs to use CSS logical properties in its default styles since we have RTL clients. Please look over https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_logical_properties_and_values and convert any physical property that has a logical equivalent. In this file it seems to be just padding, margin, and width. Note that CSS shorthand props (like padding) are not logical, so use padding-block-start, padding-block-end, etc...