Merge pull request #2224 from guardian/ts-payment-security-1b

Payment security test 1B secure transaction indicator with grey background (non-UK)
guardian · Nov 19, 2019 · f82af61 · f82af61
2 parents 996a9f8 + 007f96e
commit f82af61
Show file tree

Hide file tree

Showing 5 changed files with 39 additions and 17 deletions.
diff --git a/...ort-frontend/assets/components/secureTransactionIndicator/secureTransactionIndicator.scss b/...ort-frontend/assets/components/secureTransactionIndicator/secureTransactionIndicator.scss
@@ -40,6 +40,22 @@
   padding-bottom: 15px;
 }
 
+.component-secure-transaction--hideaftermobile {
+  @include mq($from: phablet) {
+    position: absolute;
+    visibility: hidden;
+    display: none;
+  }
+}
+
+.component-secure-transaction--showaftermobile {
+  @include mq($until: phablet) {
+    position: absolute;
+    visibility: hidden;
+    display: none;
+  }
+}
+
 .component-secure-transaction {
   display: flex;
   align-items: center;

diff --git a/support-frontend/assets/helpers/abTests/abtestDefinitions.js b/support-frontend/assets/helpers/abTests/abtestDefinitions.js
@@ -8,7 +8,7 @@ import {
 // ----- Tests ----- //
 export type LandingPageStripeElementsRecurringTestVariants = 'control' | 'stripeElements' | 'notintest';
 export type RecurringStripePaymentRequestButtonTestVariants = 'control' | 'paymentRequestButton' | 'notintest';
-export type PaymentSecurityDesignTestVariants = 'control' | 'V2_securemiddle' | 'V4_grey' | 'notintest';
+export type paymentSecuritySecureTransactionGreyNonUKVariants = 'control' | 'V1_securetransactiongrey' | 'notintest';
 
 const contributionsLandingPageMatch = '/(uk|us|eu|au|ca|nz|int)/contribute(/.*)?$';
 
@@ -59,17 +59,14 @@ export const tests: Tests = {
     targetPage: contributionsLandingPageMatch,
   },
 
-  paymentSecurityDesignTest: {
+  paymentSecuritySecureTransactionGreyNonUK: {
     type: 'OTHER',
     variants: [
       {
         id: 'control',
       },
       {
-        id: 'V2_securemiddle',
-      },
-      {
-        id: 'V4_grey',
+        id: 'V1_securetransactiongrey',
       },
     ],
     audiences: {

diff --git a/support-frontend/assets/pages/contributions-landing/components/ContributionForm.jsx b/support-frontend/assets/pages/contributions-landing/components/ContributionForm.jsx
@@ -52,7 +52,7 @@ import type { PaymentMethod } from 'helpers/paymentMethods';
 import { DirectDebit, Stripe, ExistingCard, ExistingDirectDebit } from 'helpers/paymentMethods';
 import { getCampaignName } from 'helpers/campaigns';
 import type { LandingPageStripeElementsRecurringTestVariants } from 'helpers/abTests/abtestDefinitions';
-import type { PaymentSecurityDesignTestVariants, RecurringStripePaymentRequestButtonTestVariants } from 'helpers/abTests/abtestDefinitions';
+import type { paymentSecuritySecureTransactionGreyNonUKVariants, RecurringStripePaymentRequestButtonTestVariants } from 'helpers/abTests/abtestDefinitions';
 
 
 // ----- Types ----- //
@@ -85,7 +85,7 @@ type PropTypes = {|
   country: IsoCountry,
   createStripePaymentMethod: () => void,
   stripeElementsRecurringTestVariant: LandingPageStripeElementsRecurringTestVariants,
-  paymentSecurityDesignTestVariant: PaymentSecurityDesignTestVariants,
+  paymentSecuritySecureTransactionGreyNonUKVariant: paymentSecuritySecureTransactionGreyNonUKVariants,
   recurringStripePaymentRequestButtonTestVariant: RecurringStripePaymentRequestButtonTestVariants,
 |};
 
@@ -118,7 +118,8 @@ const mapStateToProps = (state: State) => ({
   country: state.common.internationalisation.countryId,
   stripeV3HasLoaded: state.page.form.stripeV3HasLoaded,
   stripeElementsRecurringTestVariant: state.common.abParticipations.stripeElementsRecurring,
-  paymentSecurityDesignTestVariant: state.common.abParticipations.paymentSecurityDesignTest,
+  paymentSecuritySecureTransactionGreyNonUKVariant:
+    state.common.abParticipations.paymentSecuritySecureTransactionGreyNonUK,
   recurringStripePaymentRequestButtonTestVariant: state.common.abParticipations.recurringStripePaymentRequestButton,
 });
 
@@ -247,7 +248,7 @@ function withProps(props: PropTypes) {
 
   const classModifiers = ['contribution', 'with-labels'];
 
-  const showSecureStripeContainer: boolean = props.paymentSecurityDesignTestVariant !== 'control' || props.countryGroupId === 'GBPCountries';
+  const showSecureStripeContainer: boolean = props.paymentSecuritySecureTransactionGreyNonUKVariant !== 'control' || props.countryGroupId === 'GBPCountries';
   const showSecureButtonBg: boolean = showSecureStripeContainer && props.paymentMethod === Stripe && (props.stripeElementsRecurringTestVariant === 'stripeElements' || props.contributionType === 'ONE_OFF');
 
   return (

diff --git a/support-frontend/assets/pages/contributions-landing/components/PaymentMethodSelector.jsx b/support-frontend/assets/pages/contributions-landing/components/PaymentMethodSelector.jsx
@@ -41,7 +41,7 @@ import {
   subscriptionToExplainerPart,
 } from '../../../helpers/existingPaymentMethods/existingPaymentMethods';
 import SecureTransactionIndicator from 'components/secureTransactionIndicator/secureTransactionIndicator';
-import type { PaymentSecurityDesignTestVariants } from 'helpers/abTests/abtestDefinitions';
+import type { paymentSecuritySecureTransactionGreyNonUKVariants } from 'helpers/abTests/abtestDefinitions';
 import {
   type CountryGroupId,
   detect,
@@ -62,7 +62,7 @@ type PropTypes = {|
   updateSelectedExistingPaymentMethod: (RecentlySignedInExistingPaymentMethod | typeof undefined) => Action,
   isTestUser: boolean,
   switches: Switches,
-  paymentSecurityDesignTestVariant: PaymentSecurityDesignTestVariants,
+  paymentSecuritySecureTransactionGreyNonUKVariant: paymentSecuritySecureTransactionGreyNonUKVariants,
 |};
 /* eslint-enable react/no-unused-prop-types */
 
@@ -75,7 +75,8 @@ const mapStateToProps = (state: State) => ({
   existingPaymentMethod: state.page.form.existingPaymentMethod,
   isTestUser: state.page.user.isTestUser || false,
   switches: state.common.settings.switches,
-  paymentSecurityDesignTestVariant: state.common.abParticipations.paymentSecurityDesignTest,
+  paymentSecuritySecureTransactionGreyNonUKVariant:
+    state.common.abParticipations.paymentSecuritySecureTransactionGreyNonUK,
 });
 
 const mapDispatchToProps = {
@@ -121,10 +122,10 @@ function withProps(props: PropTypes) {
     <legend id="payment_method" className="form__legend"><h3>Payment method</h3></legend>
   );
 
-  const legend = props.paymentSecurityDesignTestVariant === 'V2_securemiddle' && countryGroupId !== 'GBPCountries' ?
+  const legend = props.paymentSecuritySecureTransactionGreyNonUKVariant === 'V1_securetransactiongrey' && countryGroupId !== 'GBPCountries' ?
     (
       <div className="secure-transaction">
-        {legendSimple} <SecureTransactionIndicator modifierClasses={['middle']} />
+        {legendSimple} <SecureTransactionIndicator modifierClasses={['middle', 'showaftermobile']} />
       </div>
     ) :
     legendSimple;

diff --git a/support-frontend/assets/pages/contributions-landing/contributionsLanding.jsx b/support-frontend/assets/pages/contributions-landing/contributionsLanding.jsx
@@ -94,7 +94,14 @@ const cssModifiers = campaignName && campaigns[campaignName] && campaigns[campai
 const backgroundImageSrc = campaignName && campaigns[campaignName] && campaigns[campaignName].backgroundImage ?
   campaigns[campaignName].backgroundImage : null;
 
-const showSecureTransactionIndicator = countryGroupId === 'GBPCountries' ? <SecureTransactionIndicator modifierClasses={['top']} /> : null;
+const showSecureTransactionIndicator = () => {
+  if (countryGroupId === 'GBPCountries') {
+    return <SecureTransactionIndicator modifierClasses={['top']} />;
+  } else if (store.getState().common.abParticipations.paymentSecuritySecureTransactionGreyNonUK === 'V1_securetransactiongrey') {
+    return <SecureTransactionIndicator modifierClasses={['top', 'hideaftermobile']} />;
+  }
+  return null;
+};
 
 function contributionsLandingPage(campaignCodeParameter: ?string) {
   return (
@@ -104,7 +111,7 @@ function contributionsLandingPage(campaignCodeParameter: ?string) {
       footer={<Footer disclaimer countryGroupId={countryGroupId} />}
       backgroundImageSrc={backgroundImageSrc}
     >
-      {showSecureTransactionIndicator}
+      {showSecureTransactionIndicator()}
       <ContributionFormContainer
         thankYouRoute={`/${countryGroups[countryGroupId].supportInternationalisationId}/thankyou`}
         campaignCodeParameter={campaignCodeParameter}