CruGlobal · wjames111 · Jun 13, 2022 · Jun 13, 2022 · Jun 13, 2022 · Aug 3, 2022
diff --git a/README.md b/README.md
@@ -59,7 +59,10 @@ 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"
+    hide-annual="true"
+    hide-quarterly="true">
 </branded-checkout>
 
 <script src="https://give-static.cru.org/branded-checkout.v2.js"></script>
@@ -132,6 +135,9 @@ 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 ([[email protected]](mailto:[email protected])) 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*
+- `hide-annual` - Hides the annual frequency option. If you don't want this feature, do not add this attribute at all. - *Optional*
+- `hide-quarterly` - Hides the quarterly frequency option. 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" use-v3="true" ng-cloak></branded-checkout>
+<branded-checkout designation-number="2294554" show-cover-fees="true" use-v3="true" ng-cloak hide-spouse-details="true" hide-annual="true" hide-quarterly="true"></branded-checkout>
 <script src="dev.v2.js"></script>
 
 </body>

diff --git a/src/app/branded/branded-checkout.component.js b/src/app/branded/branded-checkout.component.js
@@ -182,6 +182,9 @@ export default angular
       onOrderFailed: '&',
       language: '@',
       showCoverFees: '@',
+      hideSpouseDetails: '@',
+      hideAnnual: '@',
+      hideQuarterly: '@',
       useV3: '@',
     }
   })
diff --git a/src/app/branded/branded-checkout.tpl.html b/src/app/branded/branded-checkout.tpl.html
@@ -18,6 +18,9 @@
           on-payment-failed="$ctrl.onPaymentFailed($event.donorDetails)"
           radio-station-api-url="$ctrl.radioStationApiUrl"
           radio-station-radius="$ctrl.radioStationRadius"
+          hide-spouse-details="$ctrl.hideSpouseDetails"
+          hide-quarterly="$ctrl.hideQuarterly"
+          hide-annual="$ctrl.hideAnnual"
           use-v3="$ctrl.useV3">
         </branded-checkout-step-1>
         <branded-checkout-step-2

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
@@ -189,6 +189,9 @@ export default angular
       onPaymentFailed: '&',
       radioStationApiUrl: '<',
       radioStationRadius: '<',
+      hideSpouseDetails: '<',
+      hideAnnual: '<',
+      hideQuarterly: '<',
       useV3: '<',
     }
   })
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
@@ -9,6 +9,8 @@
                          default-frequency="$ctrl.defaultFrequency"
                          uri="$ctrl.item.uri"
                          submitted="$ctrl.submitted"
+                         hide-quarterly="$ctrl.hideQuarterly"
+                         hide-annual="$ctrl.hideAnnual"
                          on-state-change="$ctrl.onGiftConfigStateChange(state)"
                          disable-session-restart="true"
                          ng-if="!$ctrl.loadingProductConfig && !$ctrl.errorLoadingProductConfig">
@@ -27,7 +29,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/app/productConfig/productConfigForm/productConfigForm.component.js b/src/app/productConfig/productConfigForm/productConfigForm.component.js
@@ -126,6 +126,9 @@ class ProductConfigFormController {
         }
         this.setDefaultAmount()
         this.setDefaultFrequency()
+        if (this.envService.read('isBrandedCheckout')) {
+          this.filterChosenFrequencies()
+        }
       })
 
     const nextDrawDateObservable = this.commonService.getNextDrawDate()
@@ -247,6 +250,9 @@ class ProductConfigFormController {
         .subscribe(data => {
           this.itemConfigForm.$setDirty()
           this.productData = data
+          if (this.envService.read('isBrandedCheckout')) {
+            this.filterChosenFrequencies()
+          }
           this.changingFrequency = false
           this.onStateChange({ state: 'unsubmitted' })
         },
@@ -261,6 +267,21 @@ class ProductConfigFormController {
     }
   }
 
+  filterChosenFrequencies () {
+    let filteredFrequencies = this.productData.frequencies
+    if (this.hideQuarterly) {
+      filteredFrequencies = filteredFrequencies.filter((value) => {
+        return value.name !== 'QUARTERLY'
+      })
+    }
+    if (this.hideAnnual) {
+      filteredFrequencies = filteredFrequencies.filter((value) => {
+        return value.name !== 'ANNUAL'
+      })
+    }
+    this.productData.frequencies = filteredFrequencies
+  }
+
   changeAmount (amount, retainCoverFees) {
     this.itemConfigForm.$setDirty()
     this.checkAmountChanged(amount)
@@ -416,6 +437,8 @@ export default angular
       disableSessionRestart: '@',
       updateQueryParam: '&',
       submitted: '<',
-      onStateChange: '&'
+      onStateChange: '&',
+      hideAnnual: '<',
+      hideQuarterly: '<'
     }
   })
diff --git a/src/app/productConfig/productConfigForm/productConfigForm.component.spec.js b/src/app/productConfig/productConfigForm/productConfigForm.component.spec.js
@@ -371,8 +371,14 @@ describe('product config form component', function () {
     it('orders frequency by name', () => {
       expect($ctrl.frequencyOrder({ name: 'NA' })).toEqual(0)
       expect($ctrl.frequencyOrder({ name: 'MON' })).toEqual(1)
-      expect($ctrl.frequencyOrder({ name: 'QUARTERLY' })).toEqual(2)
-      expect($ctrl.frequencyOrder({ name: 'ANNUAL' })).toEqual(3)
+      if (!this.hideQuarterly) {
+        expect($ctrl.frequencyOrder({ name: 'QUARTERLY' })).toEqual(2)
+      }
+      if (this.hideAnnual === true && !this.hideQuarterly) {
+        expect($ctrl.frequencyOrder({ name: 'ANNUAL' })).toEqual(3)
+      } else if (this.hideAnnual === true) {
+        expect($ctrl.frequencyOrder({ name: 'ANNUAL' })).toEqual(2)
+      }
     })
   })
 

diff --git a/src/app/productConfig/productConfigForm/productConfigForm.tpl.html b/src/app/productConfig/productConfigForm/productConfigForm.tpl.html
@@ -1,4 +1,11 @@
 <form novalidate name="$ctrl.itemConfigForm" ng-submit="$ctrl.saveGiftToCart()">
+  <div class="row">
+    <span class="u-floatRight" style="margin-top: -16px">
+      Secure
+      <i class="fas fa-lock ml--">
+      </i>
+    </span>
+  </div>
   <div class="row">
     <div class="col-sm-6">
       <h4 id="product-config-header" class="give-gift-header" translate>

diff --git a/src/assets/scss/_gift-config.scss b/src/assets/scss/_gift-config.scss
@@ -233,28 +233,37 @@ label.btn.btn-default-form.active {
   border: 0px;
   box-shadow: none;
   margin-bottom: 15px;
+
   .panel-heading {
     border-width: 0 0 1px 0;
     background: none;
     padding-left: 0;
     padding-right: 0;
   }
+
   .panel-body {
     padding-left: 0;
     padding-right: 0;
     padding-bottom: 0;
     padding-top: 15px;
+
     .list-unstyled {
       padding: 0;
+
       li:before {
         content: "";
         display: none;
         text-indent: 0;
       }
+
       li {
         text-indent: 0;
       }
     }
+
+    #sendMessageButton, #sendHandlingButton {
+      text-decoration: underline;
+    }
   }
   input.number {
     border: none;

diff --git a/src/common/app.config.js b/src/common/app.config.js
@@ -173,6 +173,8 @@ export const appConfig = /* @ngInject */ function (envServiceProvider, $compileP
     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',
@@ -384,6 +386,8 @@ export const appConfig = /* @ngInject */ function (envServiceProvider, $compileP
     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',
@@ -536,7 +540,7 @@ export const appConfig = /* @ngInject */ function (envServiceProvider, $compileP
     REVIEW_DEFAULT_ERROR: 'There was an issue processing your request. Please contact <a href="mailto:[email protected]">[email protected]</a> for assistance.',
     ACCOUNT_NUM_FULL: 'Account Number',
     ROUTING_NUM_FULL: 'Routing Number',
-    CARD_NUM_FULL: 'Card Number',
+    CARD_NUM_FULL: 'Número de tarjeta',
     CARD_TYPE: 'Card Type',
     EXPIRES: 'Expires',
     REVIEW_GIFTS: 'Review Gifts',

diff --git a/src/common/components/addressForm/addressForm.component.js b/src/common/components/addressForm/addressForm.component.js
@@ -69,6 +69,7 @@ export default angular
       address: '=',
       parentForm: '<',
       onAddressChanged: '&',
-      addressDisabled: '<'
+      addressDisabled: '<',
+      compactAddress: '<'
     }
   })
diff --git a/src/common/components/addressForm/addressForm.tpl.html b/src/common/components/addressForm/addressForm.tpl.html
@@ -95,7 +95,7 @@
 </div>
 <div ng-if="$ctrl.address.country === 'US'">
   <div class="row">
-    <div class="col-sm-12">
+    <div ng-class="$ctrl.compactAddress ? 'col-sm-6' : 'col-sm-12'">
       <div class="form-group is-required" ng-class="{'has-error': ($ctrl.parentForm.addressLocality | showErrors)}">
         <label>
           <span translate>{{'CITY'}}</span>
@@ -113,9 +113,49 @@
         </div>
       </div>
     </div>
-  </div>
-  <div class="row">
-    <div class="col-sm-6">
+    <!-- TODO: Turn this into component structure when we have time -->
+    <div class="row" ng-if="$ctrl.compactAddress">
+      <div class="col-sm-3">
+        <div class="form-group is-required" ng-class="{'has-error': ($ctrl.parentForm.addressRegion | showErrors) || $ctrl.loadingRegionsError}">
+          <label translate>{{'STATE'}}</label>
+          <div class="form-group">
+            <select class="form-control  form-control-subtle"
+                    name="addressRegion" required
+                    ng-model="$ctrl.address.region"
+                    ng-options="v.name as v['display-name'] for v in $ctrl.regions | orderBy:'\'display-name\''"
+                    ng-disabled="$ctrl.addressDisabled">
+            </select>
+            <div role="alert" ng-if="$ctrl.loadingRegionsError">
+              <div class="help-block">
+                <translate>{{'REGIONS_LOADING_ERROR'}}</translate>
+                <button id="retryButton2" type="button" class="btn btn-default btn-sm" ng-click="$ctrl.refreshRegions($ctrl.address.addressCountry, true)" translate>{{'RETRY'}}</button>
+              </div>
+            </div>
+            <div role="alert" ng-messages="$ctrl.parentForm.addressRegion.$error" ng-if="($ctrl.parentForm.addressRegion | showErrors)">
+              <div class="help-block" ng-message="required" translate>{{'SELECT_STATE_ERROR'}}</div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="col-sm-3">
+        <div class="form-group is-required" ng-class="{'has-error': ($ctrl.parentForm.addressPostalCode | showErrors)}">
+          <label translate>{{'ZIP'}}</label>
+          <input type="text"
+                 class="form-control  form-control-subtle"
+                 name="addressPostalCode"
+                 ng-model="$ctrl.address.postalCode"
+                 required
+                 ng-pattern="/^\d{5}(?:[-\s]\d{4})?$/"
+                 ng-change="$ctrl.onPostalCodeChanged()"
+                 ng-disabled="$ctrl.addressDisabled">
+          <div role="alert" ng-messages="$ctrl.parentForm.addressPostalCode.$error" ng-if="($ctrl.parentForm.addressPostalCode | showErrors)">
+            <div class="help-block" ng-message="required" translate>{{'ZIP_CODE_ERROR'}}</div>
+            <div class="help-block" ng-message="pattern" translate>{{'INVALID_US_ZIP_ERROR'}}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="col-sm-6" ng-if="!$ctrl.compactAddress">
       <div class="form-group is-required" ng-class="{'has-error': ($ctrl.parentForm.addressRegion | showErrors) || $ctrl.loadingRegionsError}">
         <label>
           <span translate>{{'STATE'}}</span>
@@ -137,7 +177,7 @@
         </label>
       </div>
     </div>
-    <div class="col-sm-6">
+    <div class="col-sm-6" ng-if="!$ctrl.compactAddress">
       <div class="form-group is-required" ng-class="{'has-error': ($ctrl.parentForm.addressPostalCode | showErrors)}">
         <label>
           <span translate>{{'ZIP'}}</span>

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 () {
@@ -191,6 +192,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>
               <span translate>{{'FIRST_NAME'}}</span>
@@ -65,7 +65,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>
               <span translate>{{'MIDDLE_ABBREV'}}</span>
@@ -81,7 +81,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>
               <span translate>{{'LAST_NAME'}}</span>
@@ -118,10 +118,28 @@ <h4 class="panel-title  border-bottom-small  visible" translate>{{'YOUR_INFORMAT
             </label>
           </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>
@@ -219,6 +237,7 @@ <h4 class="panel-title  border-bottom-small  visible" translate>{{'MAILING_ADDRE
         parent-form="$ctrl.detailsForm"
         on-address-changed="$ctrl.loadRadioStations()"
         address-disabled="$ctrl.donorDetails.staff"
+        compact-address="true"
       >
       </address-form>
     </div>
-Original file line number
+Diff line change
@@ Expand Up / @@ -11,7 +11,7 @@ @@
     </head>
     <body>
-    <branded-checkout designation-number="2294554" show-cover-fees="true" use-v3="true" ng-cloak></branded-checkout>
+    <branded-checkout designation-number="2294554" show-cover-fees="true" use-v3="true" ng-cloak hide-spouse-details="true" hide-annual="true" hide-quarterly="true"></branded-checkout>
     <script src="dev.v2.js"></script>
     </body>
@@ Expand Down @@