diff --git a/README.md b/README.md index 909ad4920..4e0f7d374 100644 --- a/README.md +++ b/README.md @@ -81,23 +81,24 @@ Config functions save data to local storage (as `CLEENG_*` items). These data ar #### Config methods -| Method | Param | Description | -| -------------------------- | ------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `setEnvironment` | `'sandbox'` | `'production'` | Required for all components. Default: `sandbox` | -| `setJWT` | `JWT :string` | Customer authorization token received from login / registration / SSO endpoint | -| `setRefreshToken` | `refeshToken :string` | Customer refresh token received from login / registration / SSO endpoint | -| `setPublisher` | `publisherId :string` | Your broadcaster ID in the Cleeng system | -| `setOffer` | `offerId :string` | `offerId` is the ID of the offer created for your broadcaster in the Cleeng system | -| `setCheckoutPayPalUrls` | `{successURL: string, cancelUrl: string,errorUrl: string }` | PayPal redirection URLs, required for Paypal payment | -| `setMyAccountPayPalUrls` | `{successURL: string, cancelUrl: string, errorUrl: string }` | PayPal redirection URLs, required for update PayPal payment details. Query param 'message' with a readable error message will be added to errorUrl when an error occurs | -| `setMyAccountUrl` | `url: string` | My account URL. Needed for checkout legal notes | -| `setOfferSelectionUrl` | `url: string` | Url to offer selection page. Recommended for CTA when the customer has no active plan | -| `setTheme` | `styles:object` | More information in the [Styling](#styling) section. | -| `setHidePayPal` | - | Option to hide PayPal, by default PayPal will be visible when configured | -| `setEnable3DSRedirectFlow` | - | Set to true to force 3DS redirect flow. | -| `setLanguage` | `language :string` | Option to change language without reloading page | -| `setTermsUrl` | `termsUrl :string` | Option to Provide a URL for Terms & Conditions: This feature will display a link to them adjacent to the payment method. | -| `setResetUrl` | `resetUrl :string` | Option to Provide a URL for custom password reset page. This URL will be sent in an email with additional parameters: `email`, `resetPasswordToken`, `publisherId` | +| Method | Param | Description | +| --------------------------- | ------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `setEnvironment` | `'sandbox'` | `'production'` | Required for all components. Default: `sandbox` | +| `setJWT` | `JWT :string` | Customer authorization token received from login / registration / SSO endpoint | +| `setRefreshToken` | `refeshToken :string` | Customer refresh token received from login / registration / SSO endpoint | +| `setPublisher` | `publisherId :string` | Your broadcaster ID in the Cleeng system | +| `setOffer` | `offerId :string` | `offerId` is the ID of the offer created for your broadcaster in the Cleeng system | +| `setCheckoutPayPalUrls` | `{successURL: string, cancelUrl: string,errorUrl: string }` | PayPal redirection URLs, required for Paypal payment | +| `setMyAccountPayPalUrls` | `{successURL: string, cancelUrl: string, errorUrl: string }` | PayPal redirection URLs, required for update PayPal payment details. Query param 'message' with a readable error message will be added to errorUrl when an error occurs | +| `setMyAccountUrl` | `url: string` | My account URL. Needed for checkout legal notes | +| `setOfferSelectionUrl` | `url: string` | Url to offer selection page. Recommended for CTA when the customer has no active plan | +| `setTheme` | `styles:object` | More information in the [Styling](#styling) section. | +| `setHidePayPal` | - | Option to hide PayPal, by default PayPal will be visible when configured | +| `setEnable3DSRedirectFlow` | - | Set to true to force 3DS redirect flow. | +| `setDisablePaymentCheckbox` | - | Option to hide consent checkbox shown next to the payment method. | +| `setLanguage` | `language :string` | Option to change language without reloading page | +| `setTermsUrl` | `termsUrl :string` | Option to Provide a URL for Terms & Conditions: This feature will display a link to them adjacent to the payment method. | +| `setResetUrl` | `resetUrl :string` | Option to Provide a URL for custom password reset page. This URL will be sent in an email with additional parameters: `email`, `resetPasswordToken`, `publisherId` | **Usage sample** @@ -109,6 +110,7 @@ Config.setPublisher('123456789'); Config.setOffer('S123456789_US'); Config.setHidePayPal(); Config.setEnable3DSRedirectFlow(); +Config.setDisablePaymentCheckbox(); Config.setLanguage('es'); Config.setTermsUrl('https://your_terms_and_conditions-url.com'); ``` diff --git a/src/appRedux/publisherConfigSlice.ts b/src/appRedux/publisherConfigSlice.ts index 9409d0449..97e577a3f 100644 --- a/src/appRedux/publisherConfigSlice.ts +++ b/src/appRedux/publisherConfigSlice.ts @@ -12,7 +12,8 @@ export const initialState: PublisherConfigInitialState = { displayGracePeriodError: false, termsUrl: '', resetUrl: '', - enable3DSRedirectFlow: false + enable3DSRedirectFlow: false, + isPaymentCheckboxDisabled: false }; export const publisherConfigSlice = createSlice({ diff --git a/src/appRedux/types/publisherConfigSlice.types.ts b/src/appRedux/types/publisherConfigSlice.types.ts index fb2a6278c..25eaeff44 100644 --- a/src/appRedux/types/publisherConfigSlice.types.ts +++ b/src/appRedux/types/publisherConfigSlice.types.ts @@ -56,6 +56,7 @@ export type PublisherConfigInitialState = { termsUrl: string; resetUrl: string; enable3DSRedirectFlow: boolean; + isPaymentCheckboxDisabled: boolean; }; type OfferIdPayload = { diff --git a/src/components/Adyen/Adyen.jsx b/src/components/Adyen/Adyen.jsx index f41c47c43..9a690a5cd 100644 --- a/src/components/Adyen/Adyen.jsx +++ b/src/components/Adyen/Adyen.jsx @@ -19,7 +19,10 @@ import { import CheckboxLegacy from 'components/CheckboxLegacy'; import { PaymentErrorStyled } from 'components/Payment/PaymentStyled'; import { validateDeliveryDetailsForm } from 'components/DeliveryDetails/RecipientForm/validators'; -import { selectTermsUrl } from 'appRedux/publisherConfigSlice'; +import { + selectPublisherConfig, + selectTermsUrl +} from 'appRedux/publisherConfigSlice'; import eventDispatcher, { MSSDK_ADYEN_ERROR } from 'util/eventDispatcher'; import AdyenStyled from './AdyenStyled'; import Loader from '../Loader'; @@ -47,8 +50,11 @@ const Adyen = ({ priceBreakdown: { discountAmount } } = order; - const { adyenConfiguration, paymentMethods: publisherPaymentMethods } = - useAppSelector((state) => state.publisherConfig); + const { + adyenConfiguration, + paymentMethods: publisherPaymentMethods, + isPaymentCheckboxDisabled + } = useAppSelector(selectPublisherConfig); const [isLoading, setIsLoading] = useState(true); const { selectedPaymentMethod } = useAppSelector( @@ -177,7 +183,7 @@ const Adyen = ({ adyenConfiguration?.openFirstPaymentMethod == null ? !window.matchMedia('(max-width:991px)').matches : adyenConfiguration?.openFirstPaymentMethod, - onReady: showAdditionalText + onReady: !isPaymentCheckboxDisabled && showAdditionalText }); dropin.mount(paymentMethodsRef.current); setDropInInstance(dropin); @@ -250,6 +256,10 @@ const Adyen = ({ }; const isCheckboxChecked = (methodName) => { + if (isPaymentCheckboxDisabled) { + return true; + } + const isBancontactCard = selectedPaymentMethodRef?.current?.methodName === 'bancontact_card'; diff --git a/src/components/Payment/PayPal/PayPal.tsx b/src/components/Payment/PayPal/PayPal.tsx index f9c1e4c8a..e0ccaf970 100644 --- a/src/components/Payment/PayPal/PayPal.tsx +++ b/src/components/Payment/PayPal/PayPal.tsx @@ -8,7 +8,10 @@ import PaypalLogo from 'assets/images/paymentMethods/PayPalColor.svg'; import Button from 'components/Button'; import { getStandardCopy } from 'util/paymentMethodHelper'; import CheckboxLegacy from 'components/CheckboxLegacy'; -import { selectTermsUrl } from 'appRedux/publisherConfigSlice'; +import { + selectPublisherConfig, + selectTermsUrl +} from 'appRedux/publisherConfigSlice'; import { PayPalContentStyled, CopyStyled, @@ -30,10 +33,16 @@ const PayPal = ({ const termsUrl = useAppSelector(selectTermsUrl); const { isGift } = useAppSelector(selectDeliveryDetails); + const { isPaymentCheckboxDisabled } = useAppSelector(selectPublisherConfig); const [isChecked, setIsChecked] = useState(false); const handleSubmit = () => { + if (isPaymentCheckboxDisabled) { + onSubmit(); + return; + } + const checkbox: HTMLInputElement | null = document.querySelector(`#paypal-input`); @@ -80,37 +89,39 @@ const PayPal = ({ "We'll redirect you to PayPal to complete your purchase. Note, PayPal is subject to an additional 8% fee that will be added to your next payments." )} - - | undefined) => { - if (!event) { - return; - } + {!isPaymentCheckboxDisabled && ( + + | undefined) => { + if (!event) { + return; + } + + if ( + event.nativeEvent instanceof KeyboardEvent && + event.nativeEvent.key === ' ' + ) { + event.target.parentElement?.classList.remove( + 'adyen-checkout__bank-checkbox--error' + ); + } - if ( - event.nativeEvent instanceof KeyboardEvent && - event.nativeEvent.key === ' ' - ) { - event.target.parentElement?.classList.remove( + event.target.classList.remove( 'adyen-checkout__bank-checkbox--error' ); - } - - event.target.classList.remove( - 'adyen-checkout__bank-checkbox--error' - ); - setIsChecked(!event.target.checked); - }} - termsUrl={termsUrl} - isPayPal - > - {getStandardCopy(isMyAccount, offer, order, isGift)} - - + setIsChecked(!event.target.checked); + }} + termsUrl={termsUrl} + isPayPal + > + {getStandardCopy(isMyAccount, offer, order, isGift)} + + + )}