Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

EP-2517 Branded Checkout Improvements #1117

Open
wants to merge 24 commits into
base: master
Choose a base branch
from
Open

EP-2517 Branded Checkout Improvements #1117

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
24 commits
Select commit Hold shift + click to select a range
5818f43
Change to dev.v2.js for local development
caleballdrin Nov 20, 2024
874f3fd
Add use-v3 config variable
caleballdrin Nov 20, 2024
ac2d5d9
EP-2519 - Add styles for reordering gift selection on useV3. (#1118)
wjames111 Nov 27, 2024
41840af
EP-2525 - Hide unnecessary fields (#1120)
wjames111 Dec 16, 2024
4ec9576
Reorders gift selection to frequency/dates/amount. (#1127)
wjames111 Dec 17, 2024
1522b6a
Add submitOrder() service
caleballdrin Dec 19, 2024
70f2559
Add submitOrderInternal and helper functions to branded checkout step 1
caleballdrin Dec 19, 2024
315bd48
Remove submitOrderInternal() from step 3 and use orderService.submitO…
caleballdrin Dec 19, 2024
e3818f6
Add recaptcha button and loading if using V3
caleballdrin Dec 19, 2024
4408c96
Remove componentInstance from Recaptcha and use apply() to make Angul…
caleballdrin Dec 19, 2024
545412e
Move variables to cartEvents.js to avoid circular dependency
caleballdrin Dec 19, 2024
1b24d26
Move checkout error messages to a new component
caleballdrin Dec 19, 2024
346ee7b
Merge remote-tracking branch 'origin/EP-2517-branded-checkout-improve…
caleballdrin Dec 19, 2024
405bd6e
Merge pull request #1119 from CruGlobal/EP-2518-remove-confirmation-step
caleballdrin Dec 20, 2024
d964703
EP-2560 (#1129)
wjames111 Jan 7, 2025
806d875
EP-2560-QA-1 (#1131)
wjames111 Jan 9, 2025
1852e9e
Suggested amount button design for branded checkout v3
rguinee Jan 10, 2025
270183d
Styles for suggested amount buttons for branded checkout v3
rguinee Jan 10, 2025
122207f
Fix codestyle in emailField.tpl.html.
wjames111 Jan 13, 2025
67586aa
fix styling for first and last name.
wjames111 Jan 13, 2025
015c7fa
account for no phone number on the form when adding custom validators…
wjames111 Jan 13, 2025
53cf9d1
Merge pull request #1133 from CruGlobal/EP-2560-QA-2
wjames111 Jan 14, 2025
72d00e3
Merge pull request #1116 from CruGlobal/EP-2521-Radio-Button-redesign-1
rguinee Jan 15, 2025
9896968
Merge branch 'master' into EP-2517-branded-checkout-improvements (pri…
wrandall22 Jan 16, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions branded-checkout.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,8 @@
</head>
<body>

<branded-checkout designation-number="2294554" show-cover-fees="true" ng-cloak></branded-checkout>
<script src="branded-checkout.v2.js"></script>
<branded-checkout designation-number="2294554" show-cover-fees="true" use-v3="true" ng-cloak></branded-checkout>
<script src="dev.v2.js"></script>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We'll want to change this back before we merge.

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Was there mention of JSON config file for these options or did I make that up? Are we just using the use-v3 flag for everything?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There is no config file, we use this flag for everything.


</body>
</html>
3 changes: 2 additions & 1 deletion src/app/branded/branded-checkout.component.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -181,6 +181,7 @@ export default angular
onOrderCompleted: '&',
onOrderFailed: '&',
language: '@',
showCoverFees: '@'
showCoverFees: '@',
useV3: '@'
}
})
3 changes: 2 additions & 1 deletion src/app/branded/branded-checkout.tpl.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
use-v3="$ctrl.useV3">
</branded-checkout-step-1>
<branded-checkout-step-2
ng-if="$ctrl.checkoutStep === 'review'"
Expand Down
3 changes: 2 additions & 1 deletion src/app/branded/step-1/branded-checkout-step-1.component.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -188,6 +188,7 @@ export default angular
next: '&',
onPaymentFailed: '&',
radioStationApiUrl: '<',
radioStationRadius: '<'
radioStationRadius: '<',
useV3: '<'
}
})
7 changes: 5 additions & 2 deletions src/app/branded/step-1/branded-checkout-step-1.tpl.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,9 @@
submitted="$ctrl.submitted"
on-state-change="$ctrl.onGiftConfigStateChange(state)"
disable-session-restart="true"
ng-if="!$ctrl.loadingProductConfig && !$ctrl.errorLoadingProductConfig">
ng-if="!$ctrl.loadingProductConfig && !$ctrl.errorLoadingProductConfig"
use-v3="$ctrl.useV3"
>
wrandall22 marked this conversation as resolved.
Show resolved Hide resolved
</product-config-form>
<div ng-if="$ctrl.errorLoadingProductConfig" class="alert alert-danger" role="alert">
<p translate='LOADING_ERROR' translate-values="{loadData: '$ctrl.loadData()'}" translate-compile></p>
Expand All @@ -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"
use-v3="$ctrl.useV3">
</contact-info>
</div>
</div>
Expand Down
3 changes: 2 additions & 1 deletion src/app/productConfig/productConfigForm/productConfigForm.component.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -416,6 +416,7 @@ export default angular
disableSessionRestart: '@',
updateQueryParam: '&',
submitted: '<',
onStateChange: '&'
onStateChange: '&',
useV3: '<'
}
})
216 changes: 107 additions & 109 deletions src/app/productConfig/productConfigForm/productConfigForm.tpl.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,132 +47,130 @@ <h4 class="panel-title border-bottom-small" translate>
</div>

<div ng-if="!$ctrl.loading && !$ctrl.errorLoading && !$ctrl.showGivingLinks">
<div class="panel panel-default panel-plain mt">
<div ng-class="{'give-selection-reverse-order': ($ctrl.useV3 === 'true')}">
<div class="panel panel-default panel-plain mt">

<div ng-if="$ctrl.errorChangingFrequency" class="alert alert-danger" role="alert">
<p translate>{{'FREQUENCY_ERROR'}}</p>
</div>
<div ng-if="$ctrl.errorChangingFrequency" class="alert alert-danger" role="alert">
<p translate>{{'FREQUENCY_ERROR'}}</p>
</div>

<div ng-if="$ctrl.errorSavingGeneric" role="alert" class="alert alert-danger">
<p translate>{{'ADDING_CART_ERROR'}}</p>
</div>
<div ng-if="$ctrl.errorSavingGeneric" role="alert" class="alert alert-danger">
<p translate>{{'ADDING_CART_ERROR'}}</p>
</div>

<div ng-if="$ctrl.amountFormatError" role="alert" class="alert alert-danger">
<p translate>{{$ctrl.amountFormatError}}</p>
</div>
<div ng-if="$ctrl.amountFormatError" role="alert" class="alert alert-danger">
<p translate>{{$ctrl.amountFormatError}}</p>
</div>

<div ng-if="$ctrl.errorAlreadyInCart" class="alert alert-warning" role="alert">
<p translate>{{'GIFT_IN_CART_ERROR'}}</p>
</div>
<div ng-if="$ctrl.errorAlreadyInCart" class="alert alert-warning" role="alert">
<p translate>{{'GIFT_IN_CART_ERROR'}}</p>
</div>

<h4 class="panel-title border-bottom-small" translate>
{{'GIFT_AMOUNT'}}
</h4>
<div class="panel-body pt0">
<div ng-if="$ctrl.useSuggestedAmounts">
<div class="radio radio-custom-amount"
ng-repeat="suggested in $ctrl.suggestedAmounts | orderBy:'order'">
<label>
<input name="suggestedAmount"
type="radio"
ng-click="$ctrl.changeAmount(suggested.amount)"
ng-checked="!$ctrl.customInputActive && $ctrl.itemConfig.AMOUNT === suggested.amount" />
{{$ctrl.suggestedAmount(suggested.amount)}} {{suggested.label}}
</label>
</div>
<div class="radio radio-custom-amount form-inline" ng-class="{'has-error': ($ctrl.itemConfigForm.amount | showErrors)}">
<div class="form-group">
<h4 class="panel-title border-bottom-small" translate>
{{'GIFT_AMOUNT'}}
</h4>
<div ng-if="$ctrl.useSuggestedAmounts">
<div class="radio radio-custom-amount"
ng-repeat="suggested in $ctrl.suggestedAmounts | orderBy:'order'">
<label>
<input name="suggestedAmount"
type="radio"
ng-checked="$ctrl.customInputActive" />
<input class="form-control form-control-subtle"
name="amount"
type="text"
step="1"
tabindex="-1"
ng-model="$ctrl.customAmount"
ng-change="$ctrl.changeCustomAmount($ctrl.customAmount)"
ng-focus="$ctrl.customInputActive = true;"
ng-required="$ctrl.customInputActive"
placeholder="{{'OTHER_PLACEHOLDER' | translate}}" />
type="radio"
ng-click="$ctrl.changeAmount(suggested.amount)"
ng-checked="!$ctrl.customInputActive && $ctrl.itemConfig.AMOUNT === suggested.amount" />
{{$ctrl.suggestedAmount(suggested.amount)}} {{suggested.label}}
</label>
<div role="alert" ng-messages="$ctrl.itemConfigForm.amount.$error"
ng-if="($ctrl.itemConfigForm.amount | showErrors)">
<div class="help-block" ng-message="pattern" translate>{{'VALID_DOLLAR_AMOUNT_ERROR'}}</div>
<div class="help-block" ng-message="required" translate>{{'AMOUNT_EMPTY_ERROR'}}</div>
<div class="help-block" ng-message="minimum" translate translate-values="{currencyLimit: (1 | currency)}">{{'AMOUNT_MIN_ERROR'}}</div>
<div class="help-block" ng-message="maximum" translate translate-values="{currencyLimit: (10000000 | currency)}">
{{'AMOUNT_MAX_ERROR'}}
</div>
<div class="radio radio-custom-amount form-inline" ng-class="{'has-error': ($ctrl.itemConfigForm.amount | showErrors)}">
<div class="form-group">
<label>
<input name="suggestedAmount"
type="radio"
ng-checked="$ctrl.customInputActive" />
<input class="form-control form-control-subtle"
name="amount"
type="text"
step="1"
tabindex="-1"
ng-model="$ctrl.customAmount"
ng-change="$ctrl.changeCustomAmount($ctrl.customAmount)"
ng-focus="$ctrl.customInputActive = true;"
ng-required="$ctrl.customInputActive"
placeholder="{{'OTHER_PLACEHOLDER' | translate}}" />
</label>
<div role="alert" ng-messages="$ctrl.itemConfigForm.amount.$error"
ng-if="($ctrl.itemConfigForm.amount | showErrors)">
<div class="help-block" ng-message="pattern" translate>{{'VALID_DOLLAR_AMOUNT_ERROR'}}</div>
<div class="help-block" ng-message="required" translate>{{'AMOUNT_EMPTY_ERROR'}}</div>
<div class="help-block" ng-message="minimum" translate translate-values="{currencyLimit: (1 | currency)}">{{'AMOUNT_MIN_ERROR'}}</div>
<div class="help-block" ng-message="maximum" translate translate-values="{currencyLimit: (10000000 | currency)}">
{{'AMOUNT_MAX_ERROR'}}
</div>
</div>
</div>
</div>
</div>
</div>

<div data-toggle="buttons"
ng-class="{'has-error': ($ctrl.itemConfigForm.amount | showErrors)}"
ng-if="!$ctrl.useSuggestedAmounts">
<label class="btn btn-radio"
ng-click="$ctrl.changeAmount(a)"
ng-class="{'active': $ctrl.itemConfig.AMOUNT === a && !$ctrl.customInputActive}"
ng-repeat-start="a in $ctrl.selectableAmounts">
<span class="number">&dollar;{{a}}</span>
</label>
<span ng-repeat-end></span>
<label
ng-class="{active: $ctrl.customInputActive}"
class="btn btn-default-form u-textLeft custom-amount">
<div class="form-group form-group-default u-inline">
<input class="form-control form-control-subtle number"
name="amount"
type="text"
step="1"
ng-required="$ctrl.customInputActive"
ng-model="$ctrl.customAmount"
ng-change="$ctrl.changeCustomAmount($ctrl.customAmount)"
ng-focus="$ctrl.customInputActive = true;"
tabindex="-1"
placeholder="{{'Other' | translate}}"
required />
</div>
</label>
<div role="alert" ng-messages="$ctrl.itemConfigForm.amount.$error"
ng-if="($ctrl.itemConfigForm.amount | showErrors)">
<div class="help-block" ng-message="pattern" translate>{{'VALID_DOLLAR_AMOUNT_ERROR'}}</div>
<div class="help-block" ng-message="required" translate>{{'AMOUNT_EMPTY_ERROR'}}</div>
<div class="help-block" ng-message="minimum" translate="AMOUNT_MIN_ERROR" translate-values="{currencyLimit: (1 | currency)}"></div>
<div class="help-block" ng-message="maximum" translate="AMOUNT_MAX_ERROR" translate-values="{currencyLimit: (10000000 | currency)}">
<div data-toggle="buttons"
ng-class="{'has-error': ($ctrl.itemConfigForm.amount | showErrors)}"
ng-if="!$ctrl.useSuggestedAmounts">
<label class="btn btn-radio"
ng-click="$ctrl.changeAmount(a)"
ng-class="{'active': $ctrl.itemConfig.AMOUNT === a && !$ctrl.customInputActive}"
ng-repeat-start="a in $ctrl.selectableAmounts">
<span class="number">&dollar;{{a}}</span>
</label>
<span ng-repeat-end></span>
<label
ng-class="{active: $ctrl.customInputActive}"
class="btn btn-default-form u-textLeft custom-amount">
<div class="form-group form-group-default u-inline">
<input class="form-control form-control-subtle number"
name="amount"
type="text"
step="1"
ng-required="$ctrl.customInputActive"
ng-model="$ctrl.customAmount"
ng-change="$ctrl.changeCustomAmount($ctrl.customAmount)"
ng-focus="$ctrl.customInputActive = true;"
tabindex="-1"
placeholder="{{'Other' | translate}}"
required />
</div>
</label>
<div role="alert" ng-messages="$ctrl.itemConfigForm.amount.$error"
ng-if="($ctrl.itemConfigForm.amount | showErrors)">
<div class="help-block" ng-message="pattern" translate>{{'VALID_DOLLAR_AMOUNT_ERROR'}}</div>
<div class="help-block" ng-message="required" translate>{{'AMOUNT_EMPTY_ERROR'}}</div>
<div class="help-block" ng-message="minimum" translate="AMOUNT_MIN_ERROR" translate-values="{currencyLimit: (1 | currency)}"></div>
<div class="help-block" ng-message="maximum" translate="AMOUNT_MAX_ERROR" translate-values="{currencyLimit: (10000000 | currency)}">
</div>
</div>
</div>
</div><!-- // panel -->
<div class="panel panel-default give-modal-panel">
<h4 class="panel-title border-bottom-small mt" translate>
{{'GIFT_FREQUENCY'}}
</h4>
<div class="panel-body">
<div data-toggle="buttons">
<label class="btn btn-radio btn-wide"
ng-repeat-start="f in $ctrl.productData.frequencies | orderBy: $ctrl.frequencyOrder track by $index"
ng-if="f.name !== 'SEMIANNUAL'"
ng-class="{'active': f.name === $ctrl.productData.frequency}"
ng-click="$ctrl.changeFrequency(f)">
<span class="giftsum-about giftsum-title" ng-switch="f.name">
<span ng-switch-when="NA" translate>{{'SINGLE_GIFT'}}</span>
<span ng-switch-default>{{f.display}}</span>
</span>
</label>
<span ng-repeat-end></span>
</div>
<loading inline="true" ng-if="$ctrl.changingFrequency" class="mt-- text-center">
<translate>{{'CHANGING_FREQUENCY'}}</translate>
</loading>
</div><!-- // panel-body -->
</div><!-- // panel -->
<div class="panel panel-default give-modal-panel">
<h4 class="panel-title border-bottom-small mt" translate>
{{'GIFT_FREQUENCY'}}
</h4>
<div class="panel-body">
<div data-toggle="buttons">
<label class="btn btn-radio btn-wide"
ng-repeat-start="f in $ctrl.productData.frequencies | orderBy: $ctrl.frequencyOrder track by $index"
ng-if="f.name !== 'SEMIANNUAL'"
ng-class="{'active': f.name === $ctrl.productData.frequency}"
ng-click="$ctrl.changeFrequency(f)">
<span class="giftsum-about giftsum-title" ng-switch="f.name">
<span ng-switch-when="NA" translate>{{'SINGLE_GIFT'}}</span>
<span ng-switch-default>{{f.display}}</span>
</span>
</label>
<span ng-repeat-end></span>
</div>
<loading inline="true" ng-if="$ctrl.changingFrequency" class="mt-- text-center">
<translate>{{'CHANGING_FREQUENCY'}}</translate>
</loading>
</div><!-- // panel-body -->
</div><!-- // panel -->
<div ng-if="$ctrl.productData.frequency !== 'NA'">
<div class="panel panel-default give-modal-panel">
<div class="panel panel-default give-modal-panel" ng-if="$ctrl.productData.frequency !== 'NA'">
<h4 class="panel-title border-bottom-small mt0 pt-" translate>
{{'RECURRING_START'}}
</h4>
Expand Down Expand Up @@ -214,7 +212,7 @@ <h4 class="panel-title border-bottom-small mt0 pt-" translate>
</div><!-- // panel-body -->
</div><!-- // panel -->
</div>
<div class="panel panel-default give-modal-panel">
<div ng-if="$ctrl.useV3 !== 'true'" class="panel panel-default give-modal-panel">
<h4 class="panel-title border-bottom-small mt" translate>
{{'OPTIONAL'}}
</h4>
Expand Down
17 changes: 14 additions & 3 deletions src/assets/scss/_gift-config.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,8 +25,6 @@ label.custom-amount {
width: auto;
}



.radio,
.checkbox {
label {
Expand Down Expand Up @@ -217,6 +215,20 @@ label.btn.btn-default-form.active {
}
}

.give-selection-reverse-order {
display: flex;
flex-direction: column;
& > .panel.panel-default:nth-child(1) {
order: 3;
}
& > .panel.panel-default:nth-child(2) {
order: 1;
}
& > .panel.panel-default:nth-child(3) {
order: 2;
}
}

@media (max-width: 549px) {
.give-modal-recipient {
margin-top: 5px;
Expand Down Expand Up @@ -340,4 +352,3 @@ label.btn.btn-default-form.active {
}
}
}

3 changes: 2 additions & 1 deletion src/common/components/contactInfo/contactInfo.component.js
View file
Open in desktop
wrandall22 marked this conversation as resolved.
Show resolved Hide resolved
Original file line number Diff line number Diff line change
Expand Up @@ -191,6 +191,7 @@ export default angular
donorDetails: '=?',
onSubmit: '&',
radioStationApiUrl: '<',
radioStationRadius: '<'
radioStationRadius: '<',
useV3: '<'
}
})
Loading
Loading