EP-2261: BCO Premium Selection

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"
+    premium-code="BOOKS01"
+    premium-name="Books"
+    premium-image-url="https://api.images.com/">
 </branded-checkout>
 
 <script src="https://give-static.cru.org/branded-checkout.v2.js"></script>
@@ -80,6 +83,9 @@ The `<branded-checkout>` element is where the branded checkout Angular app will
 - `designation-number` - the designation number you would like donors to give to - **Required**
 - `campaign-page` - the campaign page you would like to use, used for suggested amounts - *Optional*
 - `campaign-code` - the campaign code you would like to use - *Optional*
+- `premium-code` - the premium code you would like to use - *Optional* - make sure you use the proper premium code associated with the campaign
+- `premium-name` - the name of the premium offered to donors - *Optional*
+- `premium-image-url` - the custom image to appear when selecting a premium - *Optional*
 - `tsys-device` - the device name that corresponds to the TSYS Merchant Account which will be used for tokenizing your site's credit cards with TSYS - **Required** - Will be provided by DPS when adding your domain to the TSYS whitelist. `cru` is the default and corresponds with Cru's main TSYS Merchant ID
 - `amount` - defaults the gift's amount - *Optional*
 - `frequency` - defaults the gift's frequency - *Optional* - can be one of the following values:

src/app/branded/branded-checkout.component.js

@@ -57,6 +57,8 @@ class BrandedCheckoutController {
       console.error(err)
     })
     this.$translate.use(this.language || 'en')
+
+    this.itemConfig = {}
   }
 
   formatDonorDetails () {
@@ -175,6 +177,10 @@ export default angular
       apiUrl: '@',
       radioStationApiUrl: '@',
       radioStationRadius: '@',
+      premiumCode: '@',
+      premiumName: '@',
+      premiumImageUrl: '@',
+      itemConfig: '=',
       donorDetailsVariable: '@donorDetails',
       defaultPaymentType: '@',
       hidePaymentTypeOptions: '@',

src/app/branded/branded-checkout.tpl.html

@@ -17,12 +17,18 @@
           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"
+          premium-code="$ctrl.premiumCode"
+          premium-name="$ctrl.premiumName"
+          premium-image-url="$ctrl.premiumImageUrl"
+          item-config="$ctrl.itemConfig">
         </branded-checkout-step-1>
         <branded-checkout-step-2
           ng-if="$ctrl.checkoutStep === 'review'"
           next="$ctrl.next()"
-          previous="$ctrl.previous(newStep)">
+          previous="$ctrl.previous(newStep)"
+          premium-name="$ctrl.premiumName"
+          item-config="$ctrl.itemConfig">
         </branded-checkout-step-2>
         <thank-you-summary
           ng-if="$ctrl.checkoutStep === 'thankYou'"

src/app/branded/step-1/branded-checkout-step-1.component.js

@@ -32,6 +32,8 @@ class BrandedCheckoutStep1Controller {
   }
 
   initItemConfig () {
+    this.defaultItemConfig = angular.copy(this.itemConfig)
+
     this.itemConfig = {}
     this.itemConfig.CAMPAIGN_CODE = this.campaignCode
     if (this.itemConfig.CAMPAIGN_CODE &&
@@ -60,6 +62,13 @@ class BrandedCheckoutStep1Controller {
     }
     this.itemConfig.RECURRING_DAY_OF_MONTH = this.day
     this.itemConfig.frequency = this.frequency
+
+    this.premiumSelected = false
+
+    if (this.defaultItemConfig && this.defaultItemConfig.PREMIUM_CODE) {
+      this.itemConfig.PREMIUM_CODE = this.defaultItemConfig.PREMIUM_CODE
+      this.premiumSelected = true
+    }
   }
 
   initCart () {
@@ -151,6 +160,14 @@ class BrandedCheckoutStep1Controller {
     }
   }
 
+  onSelectPremiumOption () {
+    if (this.premiumSelected) {
+      this.itemConfig.PREMIUM_CODE = this.premiumCode
+    } else {
+      this.itemConfig.PREMIUM_CODE = undefined
+    }
+  }
+
   checkSuccessfulSubmission () {
     if (every(this.submission, 'completed')) {
       if (every(this.submission, { error: false })) {
@@ -188,6 +205,10 @@ export default angular
       next: '&',
       onPaymentFailed: '&',
       radioStationApiUrl: '<',
-      radioStationRadius: '<'
+      radioStationRadius: '<',
+      premiumCode: '<',
+      premiumName: '<',
+      premiumImageUrl: '<',
+      itemConfig: '='
     }
   })

src/app/branded/step-1/branded-checkout-step-1.spec.js

@@ -84,6 +84,12 @@ describe('branded checkout step 1', () => {
       $ctrl.initItemConfig()
       expect($ctrl.itemConfig.CAMPAIGN_CODE).toEqual('')
     })
+
+    it('should persist premium-code in item config', () => {
+      $ctrl.itemConfig = { PREMIUM_CODE: '112233' }
+      $ctrl.initItemConfig()
+      expect($ctrl.itemConfig.PREMIUM_CODE).toEqual('112233')
+    })
   })
 
   describe('initCart', () => {
@@ -277,6 +283,29 @@ describe('branded checkout step 1', () => {
     })
   })
 
+  describe('onSelectPremiumOption', () => {
+    beforeEach(() => {
+      $ctrl.initItemConfig()
+      $ctrl.premiumCode = '112233'
+    })
+
+    it('premium selected', () => {
+      $ctrl.premiumSelected = true
+
+      $ctrl.onSelectPremiumOption()
+
+      expect($ctrl.itemConfig.PREMIUM_CODE).toEqual($ctrl.premiumCode)
+    })
+
+    it('premium deselected', () => {
+      $ctrl.premiumSelected = false
+
+      $ctrl.onSelectPremiumOption()
+
+      expect($ctrl.itemConfig.PREMIUM_CODE).toEqual(undefined)
+    })
+  })
+
   describe('checkSuccessfulSubmission', () => {
     beforeEach(() => {
       $ctrl.resetSubmission()

src/app/branded/step-1/branded-checkout-step-1.tpl.html

@@ -44,6 +44,40 @@ <h3 class="panel-name" translate>{{'PAYMENT'}}</h3>
       </checkout-step-2>
     </div>
   </div>
+  <div class="panel" ng-if="$ctrl.premiumCode">
+    <div class="panel-body">
+      <h3 class="panel-name" translate>{{'CHOOSE_RESOURCE'}}</h3>
+      <div class="row">
+        <div class="col-sm-3">
+          <div class="row">
+            <label class="radio-inline">
+              <input
+                type="radio"
+                name="premiumSelect"
+                ng-model="$ctrl.premiumSelected"
+                ng-value="true"
+                ng-change="$ctrl.onSelectPremiumOption()">
+              {{$ctrl.premiumName}}
+            </label>
+          </div>
+          <div class="row">
+            <label class="radio-inline">
+              <input
+                type="radio"
+                name="premiumSelect"
+                ng-model="$ctrl.premiumSelected"
+                ng-value="false"
+                ng-change="$ctrl.onSelectPremiumOption()">
+              <translate>{{'NO_THANK_YOU'}}</translate>
+            </label>
+          </div>
+        </div>
+        <div class="col-sm-4">
+          <img class="premium-thumbnail" ng-src="{{$ctrl.premiumImageUrl}}" />
+        </div>
+      </div>
+    </div>
+  </div>
   <div class="panel">
     <div class="panel-body text-right">
       <button class="btn btn-primary"

src/app/branded/step-2/branded-checkout-step-2.component.js

@@ -67,6 +67,8 @@ export default angular
     templateUrl: template,
     bindings: {
       previous: '&',
-      next: '&'
+      next: '&',
+      premiumName: '<',
+      itemConfig: '<'
     }
   })

src/app/branded/step-2/branded-checkout-step-2.tpl.html

@@ -5,7 +5,9 @@ <h3 class="panel-name" translate>{{'REVIEW'}}</h3>
     <checkout-step-3
       cart-data="$ctrl.cartData"
       change-step="$ctrl.changeStep(newStep)"
-      radio-station-name="$ctrl.radioStationName">
+      radio-station-name="$ctrl.radioStationName"
+      premium-name="$ctrl.premiumName"
+      branded-checkout-item="$ctrl.itemConfig">
     </checkout-step-3>
   </div>
 </div>

src/app/checkout/step-3/step-3.component.js

@@ -220,6 +220,8 @@ export default angular
       onSubmitted: '&',
       onSubmittingOrder: '&',
       submittingOrder: '<',
-      radioStationName: '<'
+      radioStationName: '<',
+      premiumName: '<',
+      brandedCheckoutItem: '<'
     }
   })

src/app/checkout/step-3/step-3.tpl.html

@@ -150,6 +150,22 @@
     </div>
   </div>
 
+  <div class="mb" ng-if="!!$ctrl.brandedCheckoutItem['premium-code']">
+    <div class="panel panel-default">
+      <div class="panel-heading">
+        <translate>{{'CHOOSE_RESOURCE'}}</translate>
+        <button id="changePremiumButton" class="btn btn-default btn-panel-head pull-right" ng-click="$ctrl.changeStep({newStep: 'premium'})" translate>{{'CHANGE'}}</button>
+      </div>
+      <div class="panel-body">
+        <div class="row">
+          <div class="col-md-12">
+            {{$ctrl.premiumName}}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
   <div class="mb">
     <div class="panel panel-default">
       <div id="step3-header" class="panel-heading">

src/assets/scss/_checkout.scss

@@ -218,3 +218,7 @@
 .cover-fees-text {
   margin-left: 5px;
 }
+
+.premium-thumbnail {
+  width: 200px;
+}

src/common/app.config.js

@@ -353,6 +353,8 @@ export const appConfig = /* @ngInject */ function (envServiceProvider, $compileP
     FIRST_GIFT: 'First Gift:',
     ANNUAL_GIFT_TOTAL: 'Annual Gift Total:',
     FREQUENCY_GIFT_TOTAL: '{{frequency}} Gift Total:',
+    CHOOSE_RESOURCE: 'Choose a Resource',
+    NO_THANK_YOU: 'Thank you, but please do not send me the resources.',
     RADIO_STATION: 'Radio Station',
     RADIO_STATION_LIST_ERROR: 'There was an error loading radio stations in your area.',
     RADIO_STATION_SELECT_ERROR: 'There was an error selecting a radio station.',
@@ -564,6 +566,8 @@ export const appConfig = /* @ngInject */ function (envServiceProvider, $compileP
     FIRST_GIFT: 'First Gift:',
     ANNUAL_GIFT_TOTAL: 'Annual Gift Total:',
     FREQUENCY_GIFT_TOTAL: '{{frequency}} Gift Total:',
+    CHOOSE_RESOURCE: 'Choose a Resource',
+    NO_THANK_YOU: 'Thank you, but please do not send me the resources.',
     RADIO_STATION: 'Radio Station',
     RADIO_STATION_LIST_ERROR: 'There was an error loading radio stations in your area.',
     RADIO_STATION_SELECT_ERROR: 'There was an error selecting a radio station.',