From 789ce950339255b7a83872cd2332dd274d8d68ab Mon Sep 17 00:00:00 2001
From: Rafik Adiche <rafik.adiche.ext@corp.ovh.com>
Date: Thu, 10 Aug 2023 13:37:32 +0200
Subject: [PATCH] feat(projects.new): implement the checkbox fof legal
 agreement

ref: TAPC-150
Signed-off-by: Rafik Adiche <rafik.adiche.ext@corp.ovh.com>
---
 .../new/payment/components/add/controller.js  | 24 +++++++++++++
 .../new/payment/components/add/index.html     | 15 ++++++--
 .../pci/src/projects/new/payment/constants.js |  9 +++++
 .../src/projects/new/payment/controller.js    | 35 +++++++++++++++++--
 .../pci/src/projects/new/payment/index.html   | 10 +++---
 .../pci/src/projects/new/payment/index.js     |  1 +
 .../pci/src/projects/new/payment/index.scss   |  5 +++
 7 files changed, 88 insertions(+), 11 deletions(-)
 create mode 100644 packages/manager/modules/pci/src/projects/new/payment/constants.js
 create mode 100644 packages/manager/modules/pci/src/projects/new/payment/index.scss

diff --git a/packages/manager/modules/pci/src/projects/new/payment/components/add/controller.js b/packages/manager/modules/pci/src/projects/new/payment/components/add/controller.js
index 6d974af30aeb..4254c9ec9057 100644
--- a/packages/manager/modules/pci/src/projects/new/payment/components/add/controller.js
+++ b/packages/manager/modules/pci/src/projects/new/payment/components/add/controller.js
@@ -150,6 +150,30 @@ export default class PciProjectNewPaymentMethodAddCtrl {
       });
   }
 
+  resetLegalAgreements() {
+    this.model.legalAgreements = {
+      credit: false,
+      payPal: false,
+      bankAccount: false,
+    };
+    return null;
+  }
+
+  onCreditCardAgreementCheckboxChange(modelValue) {
+    this.resetLegalAgreements();
+    this.model.legalAgreements.credit = modelValue;
+  }
+
+  onBankAccountAgreementCheckboxChange(modelValue) {
+    this.resetLegalAgreements();
+    this.model.legalAgreements.bankAccount = modelValue;
+  }
+
+  onPaypalAgreementCheckboxChange(modelValue) {
+    this.resetLegalAgreements();
+    this.model.legalAgreements.paypal = modelValue;
+  }
+
   showSpecificCrossBorderSentenceForCardPayment() {
     return (
       this.hasSpecificCrossBorderSentenceForCardPayment &&
diff --git a/packages/manager/modules/pci/src/projects/new/payment/components/add/index.html b/packages/manager/modules/pci/src/projects/new/payment/components/add/index.html
index 1c8a15ccd454..de33722ae32b 100644
--- a/packages/manager/modules/pci/src/projects/new/payment/components/add/index.html
+++ b/packages/manager/modules/pci/src/projects/new/payment/components/add/index.html
@@ -42,7 +42,10 @@
         <p
             data-translate="pci_project_new_payment_method_add_credit_card_selected_explain_generic_2"
         ></p>
-        <oui-checkbox class="mt-4">
+        <oui-checkbox
+            class="mt-4"
+            data-on-change="$ctrl.onCreditCardAgreementCheckboxChange(modelValue)"
+        >
             <oui-checkbox-label>
                 <span
                     data-translate="pci_project_new_payment_method_add_credit_card_default_validation"
@@ -71,7 +74,10 @@
             data-translate="pci_project_new_payment_method_add_info_paypal"
             data-translate-values="{ paymentMethodSection: $ctrl.paymentSectionHref }"
         ></p>
-        <oui-checkbox class="mt-4">
+        <oui-checkbox
+            class="mt-4"
+            data-on-change="$ctrl.onPaypalAgreementCheckboxChange(modelValue)"
+        >
             <oui-checkbox-label>
                 <span
                     data-translate="pci_project_new_payment_method_add_credit_card_default_validation"
@@ -117,7 +123,10 @@
             ></p>
         </oui-message>
 
-        <oui-checkbox class="mt-4">
+        <oui-checkbox
+            class="mt-4"
+            data-on-change="$ctrl.onBankAccountAgreementCheckboxChange(modelValue)"
+        >
             <oui-checkbox-label>
                 <span
                     data-translate="pci_project_new_payment_method_add_credit_card_default_validation"
diff --git a/packages/manager/modules/pci/src/projects/new/payment/constants.js b/packages/manager/modules/pci/src/projects/new/payment/constants.js
new file mode 100644
index 000000000000..c9369cf2ae15
--- /dev/null
+++ b/packages/manager/modules/pci/src/projects/new/payment/constants.js
@@ -0,0 +1,9 @@
+export const PAYMENT_MEANS = {
+  CREDIT: 'CREDIT',
+  SEPA_DIRECT_DEBIT: 'SEPA_DIRECT_DEBIT',
+  PAYPAL: 'PAYPAL',
+};
+
+export default {
+  PAYMENT_MEANS,
+};
diff --git a/packages/manager/modules/pci/src/projects/new/payment/controller.js b/packages/manager/modules/pci/src/projects/new/payment/controller.js
index b79913ea1c68..d179574f1699 100644
--- a/packages/manager/modules/pci/src/projects/new/payment/controller.js
+++ b/packages/manager/modules/pci/src/projects/new/payment/controller.js
@@ -5,6 +5,7 @@ import {
   ORDER_FOLLOW_UP_STATUS_ENUM,
   ORDER_FOLLOW_UP_STEP_ENUM,
 } from '../../projects.constant';
+import { PAYMENT_MEANS } from './constants';
 
 const getPaymentMethodTimeoutLimit = 30000;
 const ANTI_FRAUD = {
@@ -216,7 +217,7 @@ export default class PciProjectNewPaymentCtrl {
 
     if (
       this.model.paymentMethod &&
-      this.model.paymentMethod.paymentType === 'CREDIT' &&
+      this.model.paymentMethod.paymentType === PAYMENT_MEANS.CREDIT &&
       this.model.credit &&
       !this.cart.creditOption
     ) {
@@ -358,7 +359,7 @@ export default class PciProjectNewPaymentCtrl {
     // call integration submit function if some
     if (
       this.eligibility.isAddPaymentMethodRequired() &&
-      this.model.paymentMethod.paymentType !== 'CREDIT' &&
+      this.model.paymentMethod.paymentType !== PAYMENT_MEANS.CREDIT &&
       this.integrationSubmitFn
     ) {
       return this.integrationSubmitFn();
@@ -510,6 +511,36 @@ export default class PciProjectNewPaymentCtrl {
       },
     );
 
+    this.resetLegalAgreements();
+
+    return null;
+  }
+
+  resetLegalAgreements() {
+    this.model.legalAgreements = {
+      credit: false,
+      payPal: false,
+      bankAccount: false,
+    };
+    return null;
+  }
+
+  displayCreateProjectButton() {
+    if (this.model.paymentMethod.type.isCreditCard()) {
+      return this.model.legalAgreements.credit;
+    }
+    if (
+      (this.model.legalAgreements.bankAccount &&
+        this.model.paymentMethod.type.paymentType ===
+          PAYMENT_MEANS.SEPA_DIRECT_DEBIT) ||
+      (this.model.legalAgreements.paypal &&
+        this.model.paymentMethod.type.paymentType === PAYMENT_MEANS.PAYPAL)
+    ) {
+      return [
+        this.OVH_PAYMENT_METHOD_INTEGRATION_TYPE.REDIRECT,
+        this.OVH_PAYMENT_METHOD_INTEGRATION_TYPE.IN_CONTEXT,
+      ].includes(this.model.paymentMethod.integration);
+    }
     return null;
   }
 
diff --git a/packages/manager/modules/pci/src/projects/new/payment/index.html b/packages/manager/modules/pci/src/projects/new/payment/index.html
index a739a36a0c08..d606ca775998 100644
--- a/packages/manager/modules/pci/src/projects/new/payment/index.html
+++ b/packages/manager/modules/pci/src/projects/new/payment/index.html
@@ -55,7 +55,7 @@ <h1 data-translate="pci_project_new_payment_title"></h1>
 
         <!-- footer -->
         <div
-            class="actions-container d-md-flex flex-row-reverse justify-content-between align-items-center my-3"
+            class="footer actions-container d-md-flex flex-row-reverse justify-content-between align-items-end"
         >
             <form
                 novalidate
@@ -70,10 +70,7 @@ <h1 data-translate="pci_project_new_payment_title"></h1>
                     data-on-submit="$ctrl.onIntegrationSubmit.bind($ctrl)"
                     data-on-submit-error="$ctrl.onIntegrationSubmitError.bind($ctrl)"
                     data-on-submit-success="$ctrl.onIntegrationSubmitSuccess.bind($ctrl)"
-                    data-ng-if="[
-                        $ctrl.OVH_PAYMENT_METHOD_INTEGRATION_TYPE.REDIRECT,
-                        $ctrl.OVH_PAYMENT_METHOD_INTEGRATION_TYPE.IN_CONTEXT
-                    ].includes($ctrl.model.paymentMethod.integration)"
+                    data-ng-if="$ctrl.displayCreateProjectButton()"
                 >
                     <!--Create project btn-->
                     <div class="d-flex">
@@ -174,7 +171,7 @@ <h1 data-translate="pci_project_new_payment_title"></h1>
                             variant="primary"
                             type="button"
                             on-click="$ctrl.initComponentInitialParams()"
-                            data-ng-if="$ctrl.model.paymentMethod.isHandleByComponent() && !$ctrl.componentInitialParams && !$ctrl.isCheckingPaymentMethod"
+                            data-ng-if="$ctrl.model.paymentMethod.isHandleByComponent() && !$ctrl.componentInitialParams && !$ctrl.isCheckingPaymentMethod && $ctrl.model.legalAgreements.credit"
                             disabled="$ctrl.globalLoading.finalize"
                         >
                             <span
@@ -234,6 +231,7 @@ <h1 data-translate="pci_project_new_payment_title"></h1>
             </form>
 
             <a
+                class="mt-3"
                 data-ng-if="!$ctrl.model.paymentMethod.isHandleByComponent() || !$ctrl.componentInitialParams"
                 data-ng-href="{{ $ctrl.step1Link() }}"
                 data-ng-click="$ctrl.sendTrack('new_project_payment_cancel')"
diff --git a/packages/manager/modules/pci/src/projects/new/payment/index.js b/packages/manager/modules/pci/src/projects/new/payment/index.js
index c4ec3076e5e1..796a1c2aabeb 100644
--- a/packages/manager/modules/pci/src/projects/new/payment/index.js
+++ b/packages/manager/modules/pci/src/projects/new/payment/index.js
@@ -12,6 +12,7 @@ import credit from './credit';
 import routing from './routing';
 import component from './component';
 import paymentService from './service';
+import './index.scss';
 
 const moduleName = 'pciProjectNewPayment';
 
diff --git a/packages/manager/modules/pci/src/projects/new/payment/index.scss b/packages/manager/modules/pci/src/projects/new/payment/index.scss
new file mode 100644
index 000000000000..9db2006cafac
--- /dev/null
+++ b/packages/manager/modules/pci/src/projects/new/payment/index.scss
@@ -0,0 +1,5 @@
+.pci-project-new-payment {
+  .footer {
+    height: 3rem;
+  }
+}