diff --git a/blocks/identity-block/components/login/index.jsx b/blocks/identity-block/components/login/index.jsx index 5e6e239dbf..1435763ee4 100644 --- a/blocks/identity-block/components/login/index.jsx +++ b/blocks/identity-block/components/login/index.jsx @@ -1,9 +1,17 @@ import { useEffect, useState } from "react"; import { useIdentity } from "@wpmedia/arc-themes-components"; +import appendURLParams from "../../utils/append-url-params"; import validateURL from "../../utils/validate-redirect-url"; import useOIDCLogin from "../../utils/useOIDCLogin"; -const useLogin = ({ isAdmin, redirectURL, redirectToPreviousPage, loggedInPageLocation, isOIDC }) => { +const useLogin = ({ + isAdmin, + redirectURL, + redirectToPreviousPage, + loggedInPageLocation, + isOIDC, +}) => { + const { Identity } = useIdentity(); const validatedRedirectURL = validateURL(redirectURL); const [redirectToURL, setRedirectToURL] = useState(validatedRedirectURL); @@ -13,7 +21,18 @@ const useLogin = ({ isAdmin, redirectURL, redirectToPreviousPage, loggedInPageLo useEffect(() => { if (window?.location?.search) { const searchParams = new URLSearchParams(window.location.search.substring(1)); - const validatedRedirectParam = validateURL(searchParams.get("redirect")); + + //redirectURL could have additional params + const params = ["paymentMethodID"]; + const aditionalParams = params.map((p) => { + const paramExist = searchParams.has(p) + if(paramExist){ + return {[p]:searchParams.get(p)} + } + }) + + const fullURL = searchParams.get("redirect") ? appendURLParams(searchParams.get("redirect"), aditionalParams.filter(item => item !== undefined)) : null; + const validatedRedirectParam = validateURL(fullURL); setRedirectQueryParam(validatedRedirectParam); } diff --git a/blocks/identity-block/utils/append-url-params.js b/blocks/identity-block/utils/append-url-params.js new file mode 100644 index 0000000000..335f378cfd --- /dev/null +++ b/blocks/identity-block/utils/append-url-params.js @@ -0,0 +1,13 @@ +// Funtion to append additional parameters as part of URL +const appendURLParams = (initURL, params) => { + + let fullURL = initURL; + if (params.length) { + const allParams = params.map((x) => Object.keys(x) + "=" + Object.values(x)).join("&"); + fullURL = initURL.includes("?") ? `${initURL}&${allParams}` : `${initURL}?${allParams}`; + } + + return fullURL; +}; + +export default appendURLParams; diff --git a/blocks/subscriptions-block/_index.scss b/blocks/subscriptions-block/_index.scss index 88f015e8a4..0198280a4a 100644 --- a/blocks/subscriptions-block/_index.scss +++ b/blocks/subscriptions-block/_index.scss @@ -50,6 +50,41 @@ @include scss.block-components("checkout-payment"); @include scss.block-properties("checkout-payment"); + &-info { + @include scss.block-components("checkout-payment-info"); + @include scss.block-properties("checkout-payment-info"); + + &-payments { + @include scss.block-components("checkout-payment-info-payments"); + @include scss.block-properties("checkout-payment-info-payments"); + } + + &-paypal { + @include scss.block-components("checkout-payment-info-paypal"); + @include scss.block-properties("checkout-payment-info-paypal"); + + &-button { + @include scss.block-components("checkout-payment-info-paypal-button"); + @include scss.block-properties("checkout-payment-info-paypal-button"); + + &:hover { + @include scss.block-components("checkout-payment-info-paypal-button-hover"); + @include scss.block-properties("checkout-payment-info-paypal-button-hover"); + } + } + } + + &-divider-container { + @include scss.block-components("checkout-payment-info-divider-container"); + @include scss.block-properties("checkout-payment-info-divider-container"); + } + + &-divider-line { + @include scss.block-components("checkout-payment-info-divider-line"); + @include scss.block-properties("checkout-payment-info-divider-line"); + } + } + &-form { @include scss.block-components("checkout-payment-form"); @include scss.block-properties("checkout-payment-form"); diff --git a/blocks/subscriptions-block/components/PayPal/index.jsx b/blocks/subscriptions-block/components/PayPal/index.jsx new file mode 100644 index 0000000000..ed9eb6961f --- /dev/null +++ b/blocks/subscriptions-block/components/PayPal/index.jsx @@ -0,0 +1,29 @@ +import React from "react"; +import { usePaymentRedirect } from "../usePaymentRedirect"; +import { usePhrases } from "@wpmedia/arc-themes-components"; + +export const PaypalCheckout = ({ labelOrderNumber, paypal, orderNumber, successURL }) => { + const phrases = usePhrases(); + const params = new URLSearchParams(window.location.search); + const token = params.get("token"); + + // Paypal can't pass back the orderNumber to us (like other payment methods does, e.g. payment express), we store it in local storage + if (orderNumber) { + localStorage.setItem(labelOrderNumber, orderNumber); + } else { + orderNumber = localStorage[labelOrderNumber]; + } + + const { error } = usePaymentRedirect(paypal, orderNumber, token, "parameter1", successURL); + + return ( + <> +