Add feature to make the annual and quarterly frequencies optional.

CruGlobal · Aug 12, 2022 · a71f602 · a71f602
1 parent 27a6d7c
commit a71f602
Show file tree

Hide file tree

Showing 8 changed files with 49 additions and 8 deletions.
diff --git a/README.md b/README.md
@@ -60,7 +60,9 @@ Add the following code to your page where appropriate. See the [Branded checkout
     on-order-failed="$event.$window.onOrderFailed($event.donorDetails)"
     radio-station-api-url="https://api.domain.com/getStations"
     radio-station-radius="100"
-    hide-spouse-details="true">
+    hide-spouse-details="true"
+    hide-annual="true"
+    hide-quarterly="true">
 </branded-checkout>
 
 <script src="https://give-static.cru.org/branded-checkout.v2.js"></script>
@@ -134,6 +136,8 @@ The `<branded-checkout>` element is where the branded checkout Angular app will
 - `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*
+- `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" ng-cloak hide-spouse-details="true"></branded-checkout>
+<branded-checkout designation-number="2294554" show-cover-fees="true" ng-cloak hide-spouse-details="true" hide-annual="true" hide-quarterly="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
@@ -141,6 +141,8 @@ export default angular
       onOrderFailed: '&',
       language: '@',
       showCoverFees: '@',
-      hideSpouseDetails: '@'
+      hideSpouseDetails: '@',
+      hideAnnual: '@',
+      hideQuarterly: '@'
     }
   })
diff --git a/src/app/branded/branded-checkout.tpl.html b/src/app/branded/branded-checkout.tpl.html
@@ -18,7 +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-spouse-details="$ctrl.hideSpouseDetails"
+          hide-quarterly="$ctrl.hideQuarterly"
+          hide-annual="$ctrl.hideAnnual">
         </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
@@ -185,6 +185,8 @@ export default angular
       onPaymentFailed: '&',
       radioStationApiUrl: '<',
       radioStationRadius: '<',
-      hideSpouseDetails: '<'
+      hideSpouseDetails: '<',
+      hideAnnual: '<',
+      hideQuarterly: '<'
     }
   })
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">

diff --git a/src/app/productConfig/productConfigForm/productConfigForm.component.js b/src/app/productConfig/productConfigForm/productConfigForm.component.js
@@ -118,6 +118,9 @@ class ProductConfigFormController {
         this.productData = productData
         this.setDefaultAmount()
         this.setDefaultFrequency()
+        if (this.envService.read('isBrandedCheckout')) {
+          this.filterChosenFrequencies()
+        }
       })
 
     const nextDrawDateObservable = this.commonService.getNextDrawDate()
@@ -238,6 +241,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' })
         },
@@ -252,6 +258,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)
@@ -384,6 +405,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
@@ -348,8 +348,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)
+      }
     })
   })
-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 hide-spouse-details="true"></branded-checkout>
+    <branded-checkout designation-number="2294554" show-cover-fees="true" ng-cloak hide-spouse-details="true" hide-annual="true" hide-quarterly="true"></branded-checkout>
     <script src="branded-checkout.v2.js"></script>
     </body>
@@ Expand Down @@