diff --git a/README.md b/README.md index dfad40e52..a740872b3 100644 --- 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" + premium-code="BOOKS01" + premium-name="Books" + premium-image-url="https://api.images.com/img.png"> @@ -80,6 +83,9 @@ The `` 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: diff --git a/src/app/branded/branded-checkout.component.js b/src/app/branded/branded-checkout.component.js index 065ac52df..ecf6b8648 100644 --- a/src/app/branded/branded-checkout.component.js +++ b/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,9 @@ export default angular apiUrl: '@', radioStationApiUrl: '@', radioStationRadius: '@', + premiumCode: '@', + premiumName: '@', + premiumImageUrl: '@', donorDetailsVariable: '@donorDetails', defaultPaymentType: '@', hidePaymentTypeOptions: '@', diff --git a/src/app/branded/branded-checkout.tpl.html b/src/app/branded/branded-checkout.tpl.html index edf52f85a..bfe68a587 100644 --- a/src/app/branded/branded-checkout.tpl.html +++ b/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"> + previous="$ctrl.previous(newStep)" + premium-name="$ctrl.premiumName" + item-config="$ctrl.itemConfig"> { $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() 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 index e2f85b2e2..5e208a36e 100644 --- a/src/app/branded/step-1/branded-checkout-step-1.tpl.html +++ b/src/app/branded/step-1/branded-checkout-step-1.tpl.html @@ -44,6 +44,40 @@

{{'PAYMENT'}}

+
+
+

{{'CHOOSE_RESOURCE'}}

+
+
+
+ +
+
+ +
+
+
+ +
+
+
+
diff --git a/src/app/checkout/step-3/step-3.component.js b/src/app/checkout/step-3/step-3.component.js index 76d955ed8..408a9243b 100644 --- a/src/app/checkout/step-3/step-3.component.js +++ b/src/app/checkout/step-3/step-3.component.js @@ -220,6 +220,8 @@ export default angular onSubmitted: '&', onSubmittingOrder: '&', submittingOrder: '<', - radioStationName: '<' + radioStationName: '<', + premiumName: '<', + brandedCheckoutItem: '<' } }) diff --git a/src/app/checkout/step-3/step-3.tpl.html b/src/app/checkout/step-3/step-3.tpl.html index 6e62128de..ee414ee52 100644 --- a/src/app/checkout/step-3/step-3.tpl.html +++ b/src/app/checkout/step-3/step-3.tpl.html @@ -150,6 +150,22 @@ +
+
+
+ {{'CHOOSE_RESOURCE'}} + +
+
+
+
+ {{$ctrl.premiumName}} +
+
+
+
+
+
diff --git a/src/assets/scss/_checkout.scss b/src/assets/scss/_checkout.scss index 4b29480ea..d5730cc4f 100644 --- a/src/assets/scss/_checkout.scss +++ b/src/assets/scss/_checkout.scss @@ -218,3 +218,7 @@ .cover-fees-text { margin-left: 5px; } + +.premium-thumbnail { + width: 200px; +} diff --git a/src/common/app.config.js b/src/common/app.config.js index a5b3be9c0..edc2a81a0 100644 --- a/src/common/app.config.js +++ b/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.', diff --git a/src/common/components/paymentMethods/bankAccountForm/bankAccountForm.tpl.html b/src/common/components/paymentMethods/bankAccountForm/bankAccountForm.tpl.html index 42ab8601b..8e2d28655 100644 --- a/src/common/components/paymentMethods/bankAccountForm/bankAccountForm.tpl.html +++ b/src/common/components/paymentMethods/bankAccountForm/bankAccountForm.tpl.html @@ -24,7 +24,7 @@

{{'BANK_ACCOUNT_PAYMENT'}}

-
+