Feature/v6 removing allowedDOMAccess config prop (#2424)

* removing allowedDOMAccess config prop

* changed prop order

* deleting allowedDOMAccess and related utils

packages/lib/src/components/Ach/components/AchInput/AchInput.tsx

@@ -204,7 +204,6 @@ export default AchInput;
 
 const extractPropsForSFP = (props: ACHInputProps) => {
     return {
-        allowedDOMAccess: props.allowedDOMAccess,
         autoFocus: props.autoFocus,
         clientKey: props.clientKey,
         i18n: props.i18n,

packages/lib/src/components/Ach/components/AchInput/types.ts

@@ -27,7 +27,6 @@ type PlaceholderKeys = 'holderName' | 'bankAccountNumber' | 'bankLocationId';
 export type Placeholders = Partial<Record<PlaceholderKeys, string>>;
 
 export interface ACHInputProps {
-    allowedDOMAccess?: boolean;
     autoFocus?: boolean;
     billingAddressAllowedCountries?: string[];
     billingAddressRequired?: boolean;

packages/lib/src/components/Card/components/CardInput/types.ts

@@ -63,7 +63,6 @@ export type Placeholders = Partial<Record<PlaceholderKeys, string>>;
 export interface CardInputProps {
     amount?: PaymentAmount;
     isPayButtonPrimaryVariant?: boolean;
-    allowedDOMAccess?: boolean;
     autoFocus?: boolean;
     billingAddressAllowedCountries?: string[];
     billingAddressRequired?: boolean;

packages/lib/src/components/Card/components/CardInput/utils.ts

@@ -137,7 +137,6 @@ export const extractPropsForCardFields = (props: CardInputProps) => {
 
 export const extractPropsForSFP = (props: CardInputProps) => {
     return {
-        allowedDOMAccess: props.allowedDOMAccess,
         autoFocus: props.autoFocus,
         brands: props.brands,
         brandsConfiguration: props.brandsConfiguration,
@@ -161,8 +160,8 @@ export const extractPropsForSFP = (props: CardInputProps) => {
         onLoad: props.onLoad,
         showWarnings: props.showWarnings,
         trimTrailingSeparator: props.trimTrailingSeparator,
-        maskSecurityCode: props.maskSecurityCode,
         resources: props.resources,
+        maskSecurityCode: props.maskSecurityCode,
         placeholders: props.placeholders,
         showContextualElement: props.showContextualElement
     } as SFPProps; // Can't set as return type on fn or it will complain about missing, mandatory, props

packages/lib/src/components/Card/types.ts

@@ -272,7 +272,6 @@ export interface CardElementProps extends UIElementProps {
     expiryMonth?: string;
 
     // forceCompat?: boolean, // TODO - probably drop, if Checkout won't support IE then SF doesn't need to
-    // allowedDOMAccess: false, // TODO -  Drop for v6 (not sure if anyone ever uses this)
 }
 
 export type SocialSecurityMode = 'show' | 'hide' | 'auto';

packages/lib/src/components/CustomCard/CustomCardInput/CustomCardInput.tsx

@@ -10,7 +10,6 @@ import { Resources } from '../../../core/Context/Resources';
 import { Placeholders } from '../../Card/components/CardInput/types';
 
 interface SecuredFieldsProps {
-    allowedDOMAccess?: boolean;
     autoFocus?: boolean;
     brands?: string[];
     brandsConfiguration?: CardBrandsConfiguration;
@@ -134,7 +133,6 @@ export default CustomCardInput;
 
 const extractPropsForSFP = (props: SecuredFieldsProps) => {
     return {
-        allowedDOMAccess: props.allowedDOMAccess,
         autoFocus: props.autoFocus,
         brands: props.brands,
         brandsConfiguration: props.brandsConfiguration,

packages/lib/src/components/internal/SecuredFields/SFP/SecuredFieldsProvider.ts

@@ -159,7 +159,6 @@ class SecuredFieldsProvider extends Component<SFPProps, SFPState> {
             type: this.props.type,
             clientKey: this.props.clientKey,
             cardGroupTypes: this.props.brands,
-            allowedDOMAccess: this.props.allowedDOMAccess,
             autoFocus: this.props.autoFocus,
             trimTrailingSeparator: this.props.trimTrailingSeparator,
             loadingContext,

packages/lib/src/components/internal/SecuredFields/SFP/defaultProps.ts

@@ -6,7 +6,6 @@ export default {
     rootNode: null,
     loadingContext: null,
     brands: [],
-    allowedDOMAccess: false,
     showWarnings: false,
     autoFocus: true,
     trimTrailingSeparator: true,

packages/lib/src/components/internal/SecuredFields/SFP/types.ts

@@ -14,7 +14,6 @@ export type Placeholders = CardPlaceholders | AchPlaceholders | GiftcardPlacehol
  * Should be the only props that can be sent to SFP (from CardInput, SecuredFieldsInput, AchInput, GiftcardComponent)
  */
 export interface SFPProps {
-    allowedDOMAccess?: boolean;
     autoFocus?: boolean;
     brands?: string[];
     brandsConfiguration?: CardBrandsConfiguration;

packages/lib/src/components/internal/SecuredFields/lib/CSF/extensions/handleConfig.ts

@@ -34,10 +34,6 @@ export function handleConfig(props: CSFSetupObject): void {
     // Configuration object for individual txVariants - contains styling object values for securedFields inputs
     this.config.iframeUIConfig = props.iframeUIConfig ?? {};
 
-    // By default CSF is allowed to add the encrypted element to the DOM - user of CSF must explicitly 'opt-out' to prevent this happening
-    // (If either condition is true - then set allowedDOMAccess to false)
-    this.config.allowedDOMAccess = !(props.allowedDOMAccess === false || props.allowedDOMAccess === 'false');
-
     // By default CSF is allowed to automatically shift focus from the date to CVC fields - user of CSF must explicitly 'opt-out' to prevent this happening
     this.config.autoFocus = !(props.autoFocus === false || props.autoFocus === 'false');
 

packages/lib/src/components/internal/SecuredFields/lib/CSF/extensions/handleEncryption.ts

@@ -1,5 +1,4 @@
 import { makeCallbackObjectsEncryption } from '../utils/callbackUtils';
-import { addEncryptedElements } from '../utils/encryptedElements';
 import { ENCRYPTED_EXPIRY_MONTH, ENCRYPTED_EXPIRY_YEAR, ENCRYPTED_SECURITY_CODE, ENCRYPTED_CARD_NUMBER } from '../../configuration/constants';
 import { processErrors } from '../utils/processErrors';
 import { truthy } from '../../utilities/commonUtils';
@@ -31,11 +30,6 @@ export function handleEncryption(pFeedbackObj: SFFeedbackObj): void {
     // Set boolean saying this securedField is in an encryptedState
     this.state.securedFields[fieldType].isEncrypted = true;
 
-    // ADD HIDDEN INPUT TO PARENT FORM ELEMENT, if allowed
-    if (this.config.allowedDOMAccess) {
-        addEncryptedElements(encryptedObjArr, this.state.type, this.props.rootNode);
-    }
-
     // REMOVE ANY ERRORS ON FIELD e.g. was a full number that failed the luhnCheck, then we corrected the number and now it passes
     processErrors(
         { error: '', fieldType } as any as SFFeedbackObj,

packages/lib/src/components/internal/SecuredFields/lib/CSF/extensions/handleValidation.ts

@@ -1,5 +1,4 @@
 import { makeCallbackObjectsValidation } from '../utils/callbackUtils';
-import { removeEncryptedElement } from '../utils/encryptedElements';
 import { processErrors } from '../utils/processErrors';
 import { existy } from '../../utilities/commonUtils';
 import { ENCRYPTED_SECURITY_CODE, ENCRYPTED_CARD_NUMBER } from '../../configuration/constants';
@@ -48,11 +47,6 @@ export function handleValidation(pFeedbackObj: SFFeedbackObj): void {
         }
 
         for (let i = 0, len = callbackObjectsArr.length; i < len; i += 1) {
-            // Remove DOM elements
-            if (this.config.allowedDOMAccess) {
-                removeEncryptedElement(this.props.rootNode, callbackObjectsArr[i].uid);
-            }
-
             // ...BROADCAST VALID STATE OF INDIVIDUAL INPUTS
             this.callbacks.onFieldValid(callbackObjectsArr[i]);
         }

packages/lib/src/components/internal/SecuredFields/lib/CSF/types.ts

@@ -25,7 +25,6 @@ export interface CSFReturnObject {
  * These are the props that are passed from SFP when CSF is initialised and which end up as props in (CSF) this.config: CSFConfigObject
  */
 interface CSFCommonProps {
-    allowedDOMAccess?: boolean | string; // accept boolean or string representation of a boolean i.e. "false"
     autoFocus?: boolean | string;
     keypadFix?: boolean | string;
     // Below are config props that also end up set on createSecuredFields->SecuredFieldSetupObject