Skip to content

Commit c95c52d

Browse files
Jisayjleveugle
Jisay
authored and
jleveugle
committed
feat(pci.projects.new): improve responsive and add voucher details
1 parent 85c83ca commit c95c52d

File tree

10 files changed

+135
-61
lines changed

10 files changed

+135
-61
lines changed

‎packages/manager/modules/pci/src/projects/new/new.controller.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -76,6 +76,7 @@ export default class PciProjectNewCtrl {
7676
|| currentStep.loading.init
7777
|| currentStep.loading.availableSteps
7878
|| currentStep.loading.voucher
79+
|| (currentStep.model.voucher.value && !currentStep.model.voucher.submitted)
7980
|| (currentStep.model.mode === 'credits' && !currentStep.model.credit.value);
8081
}
8182

‎packages/manager/modules/pci/src/projects/new/new.html‎

Lines changed: 46 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,45 +1,49 @@
11
<div class="pci-projects-new h-100 overflow-auto">
2-
<div class="container-fluid h-100">
2+
<div class="container bg-white minh-100">
33
<div class="row minh-100 justify-content-md-center">
4-
<div class="col-lg-7 p-4 p-md-5 bg-white minh-100">
5-
<div class="p-0 p-md-5">
6-
<!-- progress -->
7-
<div class="oui-progress-tracker mx-auto mb-5">
8-
<ol class="oui-progress-tracker__steps">
9-
<li class="oui-progress-tracker__step"
10-
data-ng-repeat="step in $ctrl.steps track by $index"
11-
data-ng-class="{
12-
'oui-progress-tracker__step_active': $ctrl.getCurrentStep().name === step.name,
13-
'oui-progress-tracker__step_complete': $ctrl.getCurrentStep().name !== step.name && $ctrl.isStepComplete(step),
14-
}">
15-
<span class="oui-progress-tracker__status"></span>
16-
</li>
17-
</ol>
18-
</div>
4+
<div class="col-lg-10 p-5 minh-100">
5+
<!-- progress -->
6+
<div class="oui-progress-tracker mx-auto mb-5">
7+
<ol class="oui-progress-tracker__steps">
8+
<li class="oui-progress-tracker__step"
9+
data-ng-repeat="step in $ctrl.steps track by $index"
10+
data-ng-class="{
11+
'oui-progress-tracker__step_active': $ctrl.getCurrentStep().name === step.name,
12+
'oui-progress-tracker__step_complete': $ctrl.getCurrentStep().name !== step.name && $ctrl.isStepComplete(step),
13+
}">
14+
<span class="oui-progress-tracker__status"></span>
15+
</li>
16+
</ol>
17+
</div>
1918

20-
<!-- title -->
21-
<h1 data-translate="pci_projects_new_title">
22-
</h1>
19+
<!-- title -->
20+
<h1 data-translate="pci_projects_new_title"></h1>
2321

24-
<cui-message-container data-messages="$ctrl.messages.list"></cui-message-container>
22+
<cui-message-container data-messages="$ctrl.messages.list"></cui-message-container>
2523

26-
<div data-ui-view
27-
data-ng-if="!$ctrl.loading.creating && !$ctrl.loading.addPayment">
28-
<pci-project-new-description
29-
data-contracts="$ctrl.contracts"
30-
data-description-model="$ctrl.getCurrentStep().model"
31-
data-new-project-info="$ctrl.newProjectInfo"
32-
data-get-current-step="$ctrl.getCurrentStep"
33-
data-on-description-step-form-submit="$ctrl.onDescriptionStepFormSubmit">
34-
</pci-project-new-description>
35-
</div>
24+
<div data-ui-view
25+
data-ng-if="!$ctrl.loading.creating && !$ctrl.loading.addPayment">
26+
<pci-project-new-description
27+
data-contracts="$ctrl.contracts"
28+
data-description-model="$ctrl.getCurrentStep().model"
29+
data-new-project-info="$ctrl.newProjectInfo"
30+
data-get-current-step="$ctrl.getCurrentStep"
31+
data-on-description-step-form-submit="$ctrl.onDescriptionStepFormSubmit">
32+
</pci-project-new-description>
33+
</div>
3634

37-
<div class="text-center"
38-
data-ng-if="$ctrl.loading.creating || $ctrl.loading.addPayment">
39-
<oui-spinner data-size="l"></oui-spinner>
40-
</div>
35+
<div class="text-center"
36+
data-ng-if="$ctrl.loading.creating || $ctrl.loading.addPayment">
37+
<oui-spinner data-size="l"></oui-spinner>
38+
</div>
39+
40+
<div class="actions-container d-md-flex flex-row-reverse justify-content-between align-items-center my-3">
41+
<div class="d-md-flex align-items-center">
42+
<span class="validate-voucher-info"
43+
data-ng-if="$ctrl.getStepByName('payment').model.voucher.value && !$ctrl.getStepByName('payment').model.voucher.submitted"
44+
data-translate="pci_projects_new_create_voucher_not_submitted">
45+
</span>
4146

42-
<div class="d-flex flex-row-reverse justify-content-between align-items-center my-3">
4347
<button class="oui-button oui-button_primary oui-button_icon-right no-transition"
4448
type="submit" form="projectDescriptionForm"
4549
data-ng-disabled="$ctrl.isNextButtonDisabled()"
@@ -59,16 +63,16 @@ <h1 data-translate="pci_projects_new_title">
5963
aria-hidden="true">
6064
</span>
6165
</a>
62-
63-
<a data-ng-href="{{ $ctrl.getStateLink('cancel') }}"
64-
data-translate="pci_projects_new_cancel">
65-
</a>
6666
</div>
6767

68-
<p data-ng-if="$ctrl.isCreditAsteriskVisible()">
69-
<small data-translate="pci_projects_new_create_credit_asterisk"></small>
70-
</p>
68+
<a data-ng-href="{{ $ctrl.getStateLink('cancel') }}"
69+
data-translate="pci_projects_new_cancel">
70+
</a>
7171
</div>
72+
73+
<p data-ng-if="$ctrl.isCreditAsteriskVisible()">
74+
<small data-translate="pci_projects_new_create_credit_asterisk"></small>
75+
</p>
7276
</div>
7377
</div>
7478
</div>

‎packages/manager/modules/pci/src/projects/new/new.routing.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -121,6 +121,7 @@ export default /* @ngInject */ ($stateProvider) => {
121121
valid: false,
122122
value: null,
123123
paymentMeanRequired: null,
124+
submitted: false,
124125
},
125126
defaultPaymentMethod: null,
126127
paymentType: null,

‎packages/manager/modules/pci/src/projects/new/new.scss‎

Lines changed: 36 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,10 @@
11
$step-dimension: 40px;
22

33
pci-project-new { /* stylelint-disable-line */
4+
@import '~bootstrap4/scss/_functions';
5+
@import '~bootstrap4/scss/_variables';
6+
@import "~bootstrap4/scss/mixins/_breakpoints";
7+
48
.pci-projects-new {
59
background-color: rgb(241, 249, 253);
610

@@ -14,8 +18,11 @@ pci-project-new { /* stylelint-disable-line */
1418
line-height: 16px;
1519
}
1620

17-
.bg-white {
18-
background-color: #fff;
21+
.validate-voucher-info {
22+
font-size: 14px;
23+
max-width: 200px;
24+
text-align: right;
25+
margin-right: $spacer * .5;
1926
}
2027

2128
.oui-progress-tracker {
@@ -61,5 +68,32 @@ pci-project-new { /* stylelint-disable-line */
6168
}
6269
}
6370
}
71+
72+
@include media-breakpoint-down(sm) {
73+
.oui-field .oui-field__control {
74+
width: 100%;
75+
max-width: 100%;
76+
}
77+
78+
.actions-container {
79+
text-align: center;
80+
81+
.validate-voucher-info {
82+
text-align: left;
83+
max-width: 100%;
84+
display: block;
85+
margin-right: 0;
86+
margin-bottom: $spacer;
87+
}
88+
89+
a,
90+
.oui-button {
91+
max-width: 100%;
92+
display: block;
93+
width: 100%;
94+
margin-bottom: $spacer;
95+
}
96+
}
97+
}
6498
}
6599
}

‎packages/manager/modules/pci/src/projects/new/payment/payment.controller.js‎

Lines changed: 17 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -30,33 +30,45 @@ export default class PciProjectNewPaymentCtrl {
3030
this.displayVoucher = !this.displayVoucher;
3131
}
3232

33+
onVoucherInputChange() {
34+
if (!this.step.model.voucher.value
35+
&& !this.step.model.voucher.valid) {
36+
this.step.model.voucher.submitted = false;
37+
}
38+
}
39+
3340
onVoucherFormSubmit() {
3441
this.step.loading.voucher = true;
3542

3643
return this.PciProjectNewService
3744
.getNewProjectInfo({
3845
voucher: this.step.model.voucher.value,
3946
})
40-
.then(() => {
47+
.then(({ voucher }) => {
4148
this.voucherForm.voucher.$setValidity('voucher', true);
4249
this.step.model.voucher.valid = true;
43-
this.step.model.voucher.paymentMeanRequired = false;
44-
this.step.model.paymentType = null;
50+
this.step.model.voucher.paymentMethodRequired = voucher.paymentMethodRequired;
51+
this.step.model.voucher.credit = voucher.credit;
52+
if (!this.step.model.voucher.paymentMethodRequired) {
53+
this.step.model.paymentType = null;
54+
}
4555
})
4656
.catch((error) => {
57+
this.step.model.voucher.credit = null;
4758
// @TODO => remove this test when API will be ready
4859
if (error.status === 403 && error.data.message === 'Please register a payment method') { //
4960
this.voucherForm.voucher.$setValidity('voucher', true);
5061
this.step.model.voucher.valid = true;
51-
this.step.model.voucher.paymentMeanRequired = true;
62+
this.step.model.voucher.paymentMethodRequired = true;
5263
} else {
5364
this.voucherForm.voucher.$setValidity('voucher', false);
5465
this.step.model.voucher.valid = false;
55-
this.step.model.voucher.paymentMeanRequired = null;
66+
this.step.model.voucher.paymentMethodRequired = null;
5667
}
5768
})
5869
.finally(() => {
5970
this.step.loading.voucher = false;
71+
this.step.model.voucher.submitted = true;
6072
});
6173
}
6274

‎packages/manager/modules/pci/src/projects/new/payment/payment.html‎

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@
3838

3939
<div class="row"
4040
data-ng-if="!$ctrl.dlpStatus">
41-
<div class="col-md-6"
41+
<div class="alternative-payment-box col-md-6"
4242
data-ng-class="{ 'border-right': $ctrl.step.model.paymentType.paymentType.value !== 'BANK_ACCOUNT' }"
4343
data-ng-switch="$ctrl.step.model.mode">
4444
<div data-ng-switch-when="credits">
@@ -72,7 +72,7 @@
7272
</span>
7373
</button>
7474

75-
<form class="oui-box h-100 d-flex justify-content-between align-items-center no-transition"
75+
<form class="voucher-form oui-box h-100 d-lg-flex justify-content-between align-items-center no-transition"
7676
name="$ctrl.voucherForm"
7777
data-ng-if="$ctrl.displayVoucher && !$ctrl.step.model.voucher.valid"
7878
data-ng-submit="$ctrl.onVoucherFormSubmit()">
@@ -81,13 +81,14 @@
8181
<label for="text-5" class="oui-field__label oui-label"
8282
data-translate="pci_project_new_payment_enter_voucher">
8383
</label>
84-
<div class="oui-field__control oui-field__control_s">
84+
<div class="oui-field__control oui-field__control_auto">
8585
<input
8686
class="oui-input"
8787
type="text"
8888
id="voucher"
8989
name="voucher"
90-
data-ng-model="$ctrl.step.model.voucher.value" />
90+
data-ng-model="$ctrl.step.model.voucher.value"
91+
data-ng-change="$ctrl.onVoucherInputChange()" />
9192
</div>
9293
<div class="oui-field__error"
9394
data-ng-if="!$ctrl.voucherForm.voucher.$pristine && $ctrl.voucherForm.voucher.$invalid && !$ctrl.step.loading.voucher">
@@ -98,7 +99,7 @@
9899
</span>
99100
</div>
100101
</div>
101-
<button type="submit" class="oui-button oui-button_link oui-button_icon-right"
102+
<button type="submit" class="oui-button oui-button_secondary oui-button_icon-right"
102103
data-ng-disabled="!$ctrl.step.model.voucher.value || $ctrl.step.loading.voucher">
103104
<span data-translate="pci_project_new_payment_add_voucher"></span>
104105
<span class="oui-icon oui-icon-add"
@@ -121,8 +122,9 @@
121122
data-translate="pci_project_new_payment_validated_voucher"
122123
data-translate-values="{ voucher: $ctrl.step.model.voucher.value }">
123124
</p>
124-
<strong data-translate="pci_project_new_payment_validated_voucher_amount"
125-
data-translate-values="{ amount: '???' }">
125+
<strong data-ng-if="$ctrl.step.model.voucher.credit"
126+
data-translate="pci_project_new_payment_validated_voucher_amount"
127+
data-translate-values="{ amount: $ctrl.step.model.voucher.credit.text }">
126128
</strong>
127129
</div>
128130
</div>

‎packages/manager/modules/pci/src/projects/new/payment/payment.scss‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,8 @@
11
pci-project-new-payment { /* stylelint-disable-line */
2+
@import '~bootstrap4/scss/_functions';
3+
@import '~bootstrap4/scss/_variables';
4+
@import "~bootstrap4/scss/mixins/_breakpoints";
5+
26
.pci-projects-new-payment {
37
.add-voucher {
48
.btn-voucher {
@@ -15,5 +19,21 @@ pci-project-new-payment { /* stylelint-disable-line */
1519
}
1620
}
1721

22+
@include media-breakpoint-down(sm) {
23+
.alternative-payment-box.border-right {
24+
border-right: 0 !important;
25+
margin-bottom: $spacer;
26+
}
27+
}
28+
29+
@include media-breakpoint-down(md) {
30+
.voucher-form {
31+
.oui-button.oui-button_secondary {
32+
width: 100%;
33+
max-width: 100%;
34+
display: block;
35+
}
36+
}
37+
}
1838
}
1939
}

‎packages/manager/modules/pci/src/projects/new/payment/translations/Messages_fr_FR.json‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,11 @@
66
"pci_project_new_payment_add_payment_method": "Enregistrer un moyen de paiement",
77
"pci_project_new_payment_no_payment_method": "Autre mode de paiement",
88
"pci_project_new_payment_use_credits": "Vous pouvez également <a href=\"{{ href }}\">utiliser des crédits</a>.",
9-
"pci_project_new_payment_use_voucher": "Bon d'achat ?",
10-
"pci_project_new_payment_enter_voucher": "Entrer le bon d'achat",
9+
"pci_project_new_payment_use_voucher": "Code promo ?",
10+
"pci_project_new_payment_enter_voucher": "Entrer un code promo",
1111
"pci_project_new_payment_add_voucher": "Ajouter",
1212
"pci_project_new_payment_valid_voucher_explain": "Ce montant sera utilisé pour le paiement de la consommation de votre projet Public Cloud. Une fois cette somme épuisée, le moyen de paiement enregistré ci-dessus sera automatiquement utilisé pour assurer la continuité de vos instances créées.",
13-
"pci_project_new_payment_validated_voucher": "Le bon d'achat {{ voucher }} a bien été pris en compte",
13+
"pci_project_new_payment_validated_voucher": "Le code promo {{ voucher }} a bien été pris en compte.",
1414
"pci_project_new_payment_validated_voucher_amount": "Montant crédité : {{ amount }}",
1515
"pci_project_new_payment_invalid_voucher": "Code invalide",
1616
"pci_project_new_payment_dlp_title": "Crédits Digital Launch Pad (DLP)",

‎packages/manager/modules/pci/src/projects/new/translations/Messages_fr_FR.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,5 +8,6 @@
88
"pci_projects_new_add_payment_error_message": "Une erreur est survenue lors de l'enregistrement de votre moyen de paiement. Veuillez réessayer ou choisir un autre moyen de paiement.",
99
"pci_projects_new_add_credit_payment_error_message": "Une erreur est survenue lors du paiement de votre bon de commande de crédit.",
1010
"pci_projects_new_create_error_message": "Une erreur est survenue lors de la création de votre projet Publi Cloud. Veuillez réessayer.",
11-
"pci_projects_new_create_credit_asterisk": "* Chaque projet Public Cloud possède un compte crédit qui lui est propre. Vos factures seront automatiquement débitées de celui-ci. Si le montant du crédit est insuffisant, vous devrez régler la somme restant due avec un moyen de paiement enregistré dans les plus brefs délais."
11+
"pci_projects_new_create_credit_asterisk": "* Chaque projet Public Cloud possède un compte crédit qui lui est propre. Vos factures seront automatiquement débitées de celui-ci. Si le montant du crédit est insuffisant, vous devrez régler la somme restant due avec un moyen de paiement enregistré dans les plus brefs délais.",
12+
"pci_projects_new_create_voucher_not_submitted": "Merci de valider votre code promo avant de continuer"
1213
}

‎packages/manager/modules/pci/src/projects/project/creating/creating.scss‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,6 @@ pci-project-creating { /* stylelint-disable-line */
3636
}
3737
}
3838

39-
// @media(min-width: map-get($grid-breakpoints, md)) {
4039
@include media-breakpoint-up(md) {
4140
img {
4241
max-width: $spinner-size;

0 commit comments

Comments
 (0)