Skip to content

Commit

Permalink
Merge branch 'EP-2525' into staging
Browse files Browse the repository at this point in the history
  • Loading branch information
@wjames111
wjames111 committed Dec 23, 2024
2 parents 2a9c4c3 + c270f79 commit 2d91958
Show file tree
Hide file tree
Showing 10 changed files with 129 additions and 109 deletions.
8 changes: 7 additions & 1 deletion branded-checkout.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,13 @@
</head>
<body>

<branded-checkout designation-number="2294554" show-cover-fees="true" ng-cloak hide-spouse-details="true" hide-annual="true" hide-quarterly="true"></branded-checkout>
<branded-checkout
designation-number="2294554"
show-cover-fees="true"
ng-cloak hide-spouse-details="true"
hide-annual="true" hide-quarterly="true"
use-v3="true">
</branded-checkout>
<script src="branded-checkout.v2.js"></script>

</body>
Expand Down
3 changes: 2 additions & 1 deletion src/app/branded/branded-checkout.component.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -192,6 +192,7 @@ export default angular
showCoverFees: '@',
hideSpouseDetails: '@',
hideAnnual: '@',
hideQuarterly: '@'
hideQuarterly: '@',
useV3: '@'
}
})
3 changes: 2 additions & 1 deletion src/app/branded/branded-checkout.tpl.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,8 @@
item-config="$ctrl.itemConfig"
hide-spouse-details="$ctrl.hideSpouseDetails"
hide-quarterly="$ctrl.hideQuarterly"
hide-annual="$ctrl.hideAnnual">
hide-annual="$ctrl.hideAnnual"
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
Original file line number Diff line number Diff line change
Expand Up @@ -211,6 +211,7 @@ export default angular
itemConfig: '=',
hideSpouseDetails: '<',
hideAnnual: '<',
hideQuarterly: '<'
hideQuarterly: '<',
useV3: '<'
}
})
9 changes: 6 additions & 3 deletions src/app/branded/step-1/branded-checkout-step-1.tpl.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,9 @@
hide-annual="$ctrl.hideAnnual"
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"
>
</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 @@ -23,13 +25,14 @@
<div ng-if="!$ctrl.loadingProductConfig && !$ctrl.errorLoadingProductConfig">
<div class="panel">
<div class="panel-body">
<h3 class="panel-name" translate>{{'YOUR_INFORMATION'}}</h3>
<h3 ng-if="$ctrl.useV3 !== 'true'" class="panel-name" translate>{{'YOUR_INFORMATION'}}</h3>
<contact-info
submitted="$ctrl.submitted"
on-submit="$ctrl.onContactInfoSubmit(success)"
donor-details="$ctrl.donorDetails"
radio-station-api-url="$ctrl.radioStationApiUrl"
hide-spouse-details="$ctrl.hideSpouseDetails">
hide-spouse-details="$ctrl.hideSpouseDetails"
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
Original file line number Diff line number Diff line change
Expand Up @@ -440,6 +440,7 @@ export default angular
submitted: '<',
onStateChange: '&',
hideAnnual: '<',
hideQuarterly: '<'
hideQuarterly: '<',
useV3: '<'
}
})
169 changes: 78 additions & 91 deletions src/app/productConfig/productConfigForm/productConfigForm.tpl.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,79 +54,69 @@ <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-if="$ctrl.errorChangingFrequency" class="alert alert-danger" role="alert">
<p translate>{{'FREQUENCY_ERROR'}}</p>
</div>
<div ng-class="{'give-selection-reverse-order': ($ctrl.useV3 === 'true')}">
<div class="panel panel-default panel-plain mt">

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

<div ng-if="$ctrl.amountFormatError" role="alert" class="alert alert-danger">
<p translate>{{$ctrl.amountFormatError}}</p>
</div>
<div ng-if="$ctrl.errorSavingGeneric" role="alert" class="alert alert-danger">
<p translate>{{'ADDING_CART_ERROR'}}</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.amountFormatError" role="alert" class="alert alert-danger">
<p translate>{{$ctrl.amountFormatError}}</p>
</div>

<div ng-if="$ctrl.errorForcedUserToLogout" class="alert alert-warning" role="alert">
<p translate>{{'FORCED_USER_TO_LOGOUT'}}</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 p0">
<fieldset aria-label="Suggested Gift Amounts. Tab for Custom Amount">
<div class="button-group" ng-if="$ctrl.useSuggestedAmounts">
<div ng-repeat="suggested in $ctrl.suggestedAmounts | orderBy:'order'">
<input
type="radio"
name="suggestedAmount"
id="sa-{{$index}}"
ng-click="$ctrl.changeAmount(suggested.amount)"
ng-class=" {'active': !$ctrl.customInputActive && $ctrl.itemConfig.AMOUNT === suggested.amount}"
/>
<label for="sa-{{$index}}">
<span class="amount-box">{{$ctrl.suggestedAmount(suggested.amount)}}</span>
<span class="amount-description">{{suggested.label}}</span>
<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-click="$ctrl.changeAmount(suggested.amount)"
ng-checked="!$ctrl.customInputActive && $ctrl.itemConfig.AMOUNT === suggested.amount" />
{{$ctrl.suggestedAmount(suggested.amount)}} {{suggested.label}}
</label>
</div>
<div class="custom-amount-button" ng-class="{'has-error': ($ctrl.itemConfigForm.amount | showErrors)}">
<div class="input-prepend">
<span class="input-prepend-text">$</span>
<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>
<label for="ca">
<input
name="suggestedAmount"
type="radio"
ng-checked="$ctrl.customInputActive"
/>
<input
name="amount"
type="text"
id="ca"
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>
<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 data-toggle="buttons"
ng-class="{'has-error': ($ctrl.itemConfigForm.amount | showErrors)}"
ng-if="!$ctrl.useSuggestedAmounts">
Expand Down Expand Up @@ -163,34 +153,31 @@ <h4 class="panel-title border-bottom-small" translate>
</div>
</div>
</div>
</fieldset>
</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 ng-if="$ctrl.productData.frequency !== 'NA'" class="panel panel-default give-modal-panel">
<h4 class="panel-title border-bottom-small mt0 pt-" translate>
{{'RECURRING_START'}}
</h4>
Expand Down Expand Up @@ -232,7 +219,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
8 changes: 5 additions & 3 deletions src/assets/scss/_gift-config.scss
View file
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,11 @@ label.btn.btn-default-form.active {
}
}

.give-selection-reverse-order {
display: flex;
flex-direction: column-reverse;
}

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

3 changes: 2 additions & 1 deletion src/common/components/contactInfo/contactInfo.component.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -217,6 +217,7 @@ export default angular
onSubmit: '&',
radioStationApiUrl: '<',
hideSpouseDetails: '<',
compactAddress: '<'
compactAddress: '<',
useV3: '<'
}
})
29 changes: 23 additions & 6 deletions src/common/components/contactInfo/contactInfo.tpl.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,8 @@

<form novalidate ng-keyup="$event.key === 'Enter' && $ctrl.submitDetails()" name="$ctrl.detailsForm">
<div class="name mb">
<h4 class="panel-title border-bottom-small visible" translate>{{'YOUR_INFORMATION'}}</h4>
<h4 ng-if="$ctrl.useV3 !== 'true'" class="panel-title border-bottom-small visible" translate>{{'YOUR_INFORMATION'}}</h4>
<h4 ng-if="$ctrl.useV3 === 'true'" class="panel-title border-bottom-small visible" translate>{{'CONTACT_INFO'}}</h4>
<div class="row">
<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)}">
Expand All @@ -65,7 +66,7 @@ <h4 class="panel-title border-bottom-small visible" translate>{{'YOUR_INFORMAT
</div>
</div>
</div>
<div ng-class="{'col-sm-1': $ctrl.hideSpouseDetails, 'col-sm-2': !$ctrl.hideSpouseDetails}">
<div ng-if="$ctrl.useV3 !== 'true'" 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>
Expand Down Expand Up @@ -99,7 +100,7 @@ <h4 class="panel-title border-bottom-small visible" translate>{{'YOUR_INFORMAT
</div>
</div>
</div>
<div class="col-sm-2">
<div ng-if="$ctrl.useV3 !== 'true'" class="col-sm-2">
<div class="form-group">
<label>
<span translate>{{'SUFFIX'}}</span>
Expand All @@ -118,7 +119,7 @@ <h4 class="panel-title border-bottom-small visible" translate>{{'YOUR_INFORMAT
</label>
</div>
</div>
<div class="col-sm-2" ng-if="$ctrl.hideSpouseDetails">
<div class="col-sm-2" ng-if="$ctrl.hideSpouseDetails && $ctrl.useV3 !== 'true'">
<button type="button"
id="showSpouseButton"
class="btn btn-link"
Expand All @@ -138,6 +139,22 @@ <h4 class="panel-title border-bottom-small visible" translate>{{'YOUR_INFORMAT
</div>

</div>

<div ng-if="$ctrl.useV3 === 'true'" class="row">
<div class="col-sm-6">
<div class="form-group is-required" ng-class="{'has-error': ($ctrl.detailsForm.email | showErrors)}">
<label>
<span translate>{{'EMAIL'}}</span>
<input type="email" class="form-control form-control-subtle" name="email" ng-model="$ctrl.donorDetails['email']" required ng-maxlength="100" ng-disabled="$ctrl.donorDetails.staff">
</label>
<div role="alert" ng-messages="$ctrl.detailsForm.email.$error" ng-if="($ctrl.detailsForm.email | showErrors)">
<div class="help-block" ng-message="required" translate>{{'EMAIL_MISSING_ERROR'}}</div>
<div class="help-block" ng-message="email" translate>{{'EMAIL_INVALID_ERROR'}}</div>
<div class="help-block" ng-message="maxlength" translate>{{'EMAIL_LENGTH_ERROR'}}</div>
</div>
</div>
</div>
</div>

<h4 class="panel-title border-bottom-small visible" ng-if="$ctrl.donorDetails['donor-type'] === 'Household'" translate>{{'SPOUSE_NAME'}}</h4>

Expand All @@ -154,7 +171,7 @@ <h4 class="panel-title border-bottom-small visible" ng-if="$ctrl.donorDetails[
</div>
</div>

<div class="row" ng-if="$ctrl.donorDetails['donor-type'] === 'Household' && $ctrl.showSpouseFields">
<div class="row" ng-if="($ctrl.donorDetails['donor-type'] === 'Household' && $ctrl.showSpouseFields) || $ctrl.useV3 !== 'true'">
<div class="col-sm-4">
<div class="form-group" ng-class="{'has-error': ($ctrl.detailsForm.spouseGivenName | showErrors)}">
<label>
Expand Down Expand Up @@ -257,7 +274,7 @@ <h4 class="panel-title border-bottom-small visible" translate>{{'MAILING_ADDRE
</address-form>
</div>

<div class="contact-info mb">
<div ng-if="$ctrl.useV3 !== 'true'" class="contact-info mb">
<h4 class="panel-title border-bottom-small visible" translate>{{'CONTACT_INFO'}}</h4>
<div class="row">
<div class="col-sm-6">
Expand Down

0 comments on commit 2d91958

Please sign in to comment.