Allow branded checkout to configure hiding spouse information initial…

…ly, and show it when button is clicked.
CruGlobal · Aug 12, 2022 · 3522f20 · 3522f20
1 parent f6de87a
commit 3522f20
Show file tree

Hide file tree

Showing 9 changed files with 41 additions and 11 deletions.
diff --git a/README.md b/README.md
@@ -59,7 +59,8 @@ Add the following code to your page where appropriate. See the [Branded checkout
     on-order-completed="$event.$window.onOrderCompleted($event.purchase)"
     on-order-failed="$event.$window.onOrderFailed($event.donorDetails)"
     radio-station-api-url="https://api.domain.com/getStations"
-    radio-station-radius="100">
+    radio-station-radius="100"
+    hide-spouse-details="true">
 </branded-checkout>
 
 <script src="https://give-static.cru.org/branded-checkout.v2.js"></script>
@@ -132,6 +133,7 @@ The `<branded-checkout>` element is where the branded checkout Angular app will
   - `$event.purchase` - contains the order's details that are loaded for the thank you page
 - `radio-station-api-url` - Provides a URL path for fetching a list of radio stations in the donor's vicinity.  If you plan to use this feature, contact Cru's Digital Products and Services (DPS) department ([help@cru.org](mailto:help@cru.org)) to have your URL domain whitelisted to interact with our API - *Optional*
 - `radio-station-radius` - Provides a radius (in miles) for fetching a list of radio stations in the donor's vicinity - *Optional*
+- `hide-spouse-details` - Hides the spouse detail line initially, and adds a link to toggle the spouse details. If you don't want this feature, do not add this attribute at all. - *Optional*
 
 
 #### Server-side configuration for a new branded checkout domain

diff --git a/branded-checkout.html b/branded-checkout.html
@@ -11,7 +11,7 @@
 </head>
 <body>
 
-<branded-checkout designation-number="2294554" show-cover-fees="true" ng-cloak></branded-checkout>
+<branded-checkout designation-number="2294554" show-cover-fees="true" ng-cloak hide-spouse-details="true"></branded-checkout>
 <script src="branded-checkout.v2.js"></script>
 
 </body>

diff --git a/src/app/branded/branded-checkout.component.js b/src/app/branded/branded-checkout.component.js
@@ -140,6 +140,7 @@ export default angular
       onOrderCompleted: '&',
       onOrderFailed: '&',
       language: '@',
-      showCoverFees: '@'
+      showCoverFees: '@',
+      hideSpouseDetails: '@'
     }
   })
diff --git a/src/app/branded/branded-checkout.tpl.html b/src/app/branded/branded-checkout.tpl.html
@@ -17,7 +17,8 @@
           next="$ctrl.next()"
           on-payment-failed="$ctrl.onPaymentFailed($event.donorDetails)"
           radio-station-api-url="$ctrl.radioStationApiUrl"
-          radio-station-radius="$ctrl.radioStationRadius">
+          radio-station-radius="$ctrl.radioStationRadius"
+          hide-spouse-details="$ctrl.hideSpouseDetails">
         </branded-checkout-step-1>
         <branded-checkout-step-2
           ng-if="$ctrl.checkoutStep === 'review'"

diff --git a/src/app/branded/step-1/branded-checkout-step-1.component.js b/src/app/branded/step-1/branded-checkout-step-1.component.js
@@ -184,6 +184,7 @@ export default angular
       next: '&',
       onPaymentFailed: '&',
       radioStationApiUrl: '<',
-      radioStationRadius: '<'
+      radioStationRadius: '<',
+      hideSpouseDetails: '<'
     }
   })
diff --git a/src/app/branded/step-1/branded-checkout-step-1.tpl.html b/src/app/branded/step-1/branded-checkout-step-1.tpl.html
@@ -27,7 +27,8 @@ <h3 class="panel-name" translate>{{'YOUR_INFORMATION'}}</h3>
         on-submit="$ctrl.onContactInfoSubmit(success)"
         donor-details="$ctrl.donorDetails"
         radio-station-api-url="$ctrl.radioStationApiUrl"
-        radio-station-radius="$ctrl.radioStationRadius">
+        radio-station-radius="$ctrl.radioStationRadius"
+        hide-spouse-details="$ctrl.hideSpouseDetails">
       </contact-info>
     </div>
   </div>

diff --git a/src/common/app.config.js b/src/common/app.config.js
@@ -104,6 +104,8 @@ const appConfig = /* @ngInject */ function (envServiceProvider, $compileProvider
     GIFT_START_DATE: 'Your gift will start on',
     OPTIONAL: 'Optional',
     SEND_MESSAGE_TO: 'Send a Message to {{ministry}}',
+    SHOW_SPOUSE: 'Show Spouse',
+    HIDE_SPOUSE: 'Hide Spouse',
     SPECIAL_INSTRUCTIONS: 'Special Handling Instructions for Processing This Gift',
     MESSAGE_EXAMPLE: 'For example: stop my gift after 18 months, make this gift anonymous (note: please remove any messages to ministry or missionary to remain anonymous), etc.',
     YOUR_INFORMATION: 'Your information',
@@ -315,6 +317,8 @@ const appConfig = /* @ngInject */ function (envServiceProvider, $compileProvider
     GIFT_START_DATE: 'Tu regalo comenzará el',
     OPTIONAL: 'Opcional',
     SEND_MESSAGE_TO: 'Enviar un mensaje al {{ministry}}',
+    SHOW_SPOUSE: 'Show Spouse',
+    HIDE_SPOUSE: 'Hide Spouse',
     SPECIAL_INSTRUCTIONS: 'Instrucciones especiales de manejo para procesar este regalo',
     MESSAGE_EXAMPLE: 'Por ejemplo: Detener mi donación después de 18 meses, hacer esta donación anónima (nota: favor de quitar cualquier mensaje al ministerio o al misionero para permanecer en el anonimato), etc.',
     YOUR_INFORMATION: 'Tu información',

diff --git a/src/common/components/contactInfo/contactInfo.component.js b/src/common/components/contactInfo/contactInfo.component.js
@@ -30,6 +30,7 @@ class Step1Controller {
     this.radioStationsService = radioStationsService
     this.sessionService = sessionService
     this.analyticsFactory = analyticsFactory
+    this.showSpouseDetails = false
   }
 
   $onInit () {
@@ -187,6 +188,7 @@ export default angular
       donorDetails: '=?',
       onSubmit: '&',
       radioStationApiUrl: '<',
-      radioStationRadius: '<'
+      radioStationRadius: '<',
+      hideSpouseDetails: '<'
     }
   })
diff --git a/src/common/components/contactInfo/contactInfo.tpl.html b/src/common/components/contactInfo/contactInfo.tpl.html
@@ -47,7 +47,7 @@
     <div class="mb">
       <h4 class="panel-title  border-bottom-small  visible" translate>{{'YOUR_INFORMATION'}}</h4>
       <div class="row">
-        <div class="col-sm-4">
+        <div ng-class="{'col-sm-3': $ctrl.hideSpouseDetails, 'col-sm-4': !$ctrl.hideSpouseDetails}">
           <div class="form-group is-required" ng-class="{'has-error': ($ctrl.detailsForm.nameGivenName | showErrors)}">
             <label translate>{{'FIRST_NAME'}}</label>
             <input type="text"
@@ -63,7 +63,7 @@ <h4 class="panel-title  border-bottom-small  visible" translate>{{'YOUR_INFORMAT
             </div>
           </div>
         </div>
-        <div class="col-sm-2">
+        <div ng-class="{'col-sm-1': $ctrl.hideSpouseDetails, 'col-sm-2': !$ctrl.hideSpouseDetails}">
           <div class="form-group" ng-class="{'has-error': ($ctrl.detailsForm.nameMiddleInitial | showErrors)}">
             <label translate>{{'MIDDLE_ABBREV'}}</label>
             <input type="text"
@@ -77,7 +77,7 @@ <h4 class="panel-title  border-bottom-small  visible" translate>{{'YOUR_INFORMAT
             </div>
           </div>
         </div>
-        <div class="col-sm-4">
+        <div ng-class="{'col-sm-3': $ctrl.hideSpouseDetails, 'col-sm-4': !$ctrl.hideSpouseDetails}">
           <div class="form-group is-required" ng-class="{'has-error': ($ctrl.detailsForm.nameFamilyName | showErrors)}">
             <label translate>{{'LAST_NAME'}}</label>
             <input type="text"
@@ -108,10 +108,28 @@ <h4 class="panel-title  border-bottom-small  visible" translate>{{'YOUR_INFORMAT
             </div>
           </div>
         </div>
+        <div class="col-sm-2" ng-if="$ctrl.hideSpouseDetails">
+          <button type="button" 
+                  id="showSpouseButton"
+                  class="btn btn-link"
+                  style="font-weight:bold"
+                  ng-if="!$ctrl.showSpouseDetails"
+                  ng-click="$ctrl.showSpouseDetails = !$ctrl.showSpouseDetails"
+                  translate='SHOW_SPOUSE'>
+          </button>
+          <button type="button"
+                  id="hideSpouseButton"
+                  class="btn btn-link"
+                  style="font-weight:bold"
+                  ng-if="$ctrl.showSpouseDetails"
+                  ng-click="$ctrl.showSpouseDetails = !$ctrl.showSpouseDetails"
+                  translate='HIDE_SPOUSE'>
+          </button>
+        </div>
 
       </div>
 
-      <div class="row" ng-if="$ctrl.donorDetails['donor-type'] === 'Household'">
+      <div class="row" ng-if="$ctrl.donorDetails['donor-type'] === 'Household' && ($ctrl.showSpouseDetails || !$ctrl.hideSpouseDetails)">
         <div class="col-sm-4">
           <div class="form-group" ng-class="{'has-error': ($ctrl.detailsForm.spouseGivenName | showErrors)}">
             <label translate>{{'SPOUSE_FIRST_NAME'}}</label>
-Original file line number
+Diff line change
@@ Expand Up / @@ -11,7 +11,7 @@ @@
     </head>
     <body>
-    <branded-checkout designation-number="2294554" show-cover-fees="true" ng-cloak></branded-checkout>
+    <branded-checkout designation-number="2294554" show-cover-fees="true" ng-cloak hide-spouse-details="true"></branded-checkout>
     <script src="branded-checkout.v2.js"></script>
     </body>
@@ Expand Down @@