Skip to content

Commit

Permalink
EP-2519 - Add styles for reordering gift selection on useV3. (#1118)
Browse files Browse the repository at this point in the history 
Add styles for reordering gift selection with useV3 flag.
  • Loading branch information
@wjames111
wjames111 authored Nov 27, 2024
1 parent 874f3fd commit ac2d5d9
Show file tree
Hide file tree
Showing 6 changed files with 155 additions and 149 deletions.
2 changes: 1 addition & 1 deletion src/app/branded/branded-checkout.component.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -182,6 +182,6 @@ export default angular
onOrderFailed: '&',
language: '@',
showCoverFees: '@',
useV3: '@',
useV3: '@'
}
})
2 changes: 1 addition & 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 @@ -189,6 +189,6 @@ export default angular
onPaymentFailed: '&',
radioStationApiUrl: '<',
radioStationRadius: '<',
useV3: '<',
useV3: '<'
}
})
5 changes: 4 additions & 1 deletion 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 @@ -11,7 +11,10 @@
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"
>

</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 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 @@ -416,6 +416,7 @@ export default angular
disableSessionRestart: '@',
updateQueryParam: '&',
submitted: '<',
onStateChange: '&'
onStateChange: '&',
useV3: '<'
}
})
284 changes: 142 additions & 142 deletions src/app/productConfig/productConfigForm/productConfigForm.tpl.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,172 +47,172 @@ <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">
<h4 class="panel-title border-bottom-small mt0 pt-" translate>
{{'RECURRING_START'}}
</h4>
<div class="panel-body pt0">
<div class="row">
<div class="col-sm-3">
<div class="form-group">
<label>
<span translate>{{'MONTH'}}</span>
<select class="form-control form-control-subtle"
ng-model="$ctrl.itemConfig['RECURRING_START_MONTH']"
ng-options="(m | date:'MM') as (m | date:'MMMM, yyyy') for m in $ctrl.possibleTransactionMonths($ctrl.nextDrawDate)"
ng-change="$ctrl.changeStartDay($ctrl.itemConfig['RECURRING_DAY_OF_MONTH'], $ctrl.itemConfig['RECURRING_START_MONTH'])">
</select>
</label>
<div ng-if="$ctrl.productData.frequency !== 'NA'">
<div class="panel panel-default give-modal-panel">
<h4 class="panel-title border-bottom-small mt0 pt-" translate>
{{'RECURRING_START'}}
</h4>
<div class="panel-body pt0">
<div class="row">
<div class="col-sm-3">
<div class="form-group">
<label>
<span translate>{{'MONTH'}}</span>
<select class="form-control form-control-subtle"
ng-model="$ctrl.itemConfig['RECURRING_START_MONTH']"
ng-options="(m | date:'MM') as (m | date:'MMMM, yyyy') for m in $ctrl.possibleTransactionMonths($ctrl.nextDrawDate)"
ng-change="$ctrl.changeStartDay($ctrl.itemConfig['RECURRING_DAY_OF_MONTH'], $ctrl.itemConfig['RECURRING_START_MONTH'])">
</select>
</label>
</div>
</div>
</div>
<div class="col-sm-2">
<div class="form-group">
<label>
<span translate>{{'DAY'}}</span>
<select class="form-control form-control-subtle"
ng-model="$ctrl.itemConfig['RECURRING_DAY_OF_MONTH']"
ng-options="o as (o | ordinal) for o in $ctrl.possibleTransactionDays($ctrl.itemConfig['RECURRING_START_MONTH'], $ctrl.nextDrawDate)"
ng-change="$ctrl.changeStartDay($ctrl.itemConfig['RECURRING_DAY_OF_MONTH'], $ctrl.itemConfig['RECURRING_START_MONTH'])">
</select>
</label>
<div class="col-sm-2">
<div class="form-group">
<label>
<span translate>{{'DAY'}}</span>
<select class="form-control form-control-subtle"
ng-model="$ctrl.itemConfig['RECURRING_DAY_OF_MONTH']"
ng-options="o as (o | ordinal) for o in $ctrl.possibleTransactionDays($ctrl.itemConfig['RECURRING_START_MONTH'], $ctrl.nextDrawDate)"
ng-change="$ctrl.changeStartDay($ctrl.itemConfig['RECURRING_DAY_OF_MONTH'], $ctrl.itemConfig['RECURRING_START_MONTH'])">
</select>
</label>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label translate>{{'GIFT_START_DATE'}}</label>
<div class="col-sm-4">
<div class="form-group">
{{$ctrl.startMonth( $ctrl.itemConfig['RECURRING_DAY_OF_MONTH'], $ctrl.itemConfig['RECURRING_START_MONTH'], $ctrl.nextDrawDate ).format('ll')}}
<label translate>{{'GIFT_START_DATE'}}</label>
<div class="form-group">
{{$ctrl.startMonth( $ctrl.itemConfig['RECURRING_DAY_OF_MONTH'], $ctrl.itemConfig['RECURRING_START_MONTH'], $ctrl.nextDrawDate ).format('ll')}}
</div>
</div>
</div>
</div>
</div>
</div><!-- // panel-body -->
</div><!-- // panel -->
</div><!-- // panel-body -->
</div><!-- // panel -->
</div>
</div>
<div class="panel panel-default give-modal-panel">
<h4 class="panel-title border-bottom-small mt" translate>
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 @@ -340,4 +343,3 @@ label.btn.btn-default-form.active {
}
}
}

0 comments on commit ac2d5d9

Please sign in to comment.