feat(account): added the confirm erasure request page (#15442)

ref: MANAGER-16210

Signed-off-by: Omar ALKABOUSS MOUSSANA <[email protected]>

packages/manager/modules/account/src/user/gdpr/confirm/confirm-request-erasure.component.js

@@ -0,0 +1,10 @@
+import controller from './confirm-request-erasure.controller';
+import template from './confirm-request-erasure.html';
+
+export default {
+  bindings: {
+    publicId: '<',
+  },
+  controller,
+  template,
+};

packages/manager/modules/account/src/user/gdpr/confirm/confirm-request-erasure.controller.js

@@ -0,0 +1,102 @@
+import {
+  GDPR_FEATURES_CONFIRM_BANNER_CONTAINER,
+  CONFIRMATION_EMAIL_ERASURE_REQUEST_MESSAGES_MAP,
+  CONFIRM_ERASURE_REQUEST_MESSAGES_MAP,
+} from '../gdpr.constants';
+
+export default class ConfirmRequestErasureController {
+  /* @ngInject */
+  constructor(
+    $translate,
+    Alerter,
+    gdprService,
+    $state,
+    ssoAuthentication,
+    $window,
+  ) {
+    this.Alerter = Alerter;
+    this.$translate = $translate;
+    this.gdprService = gdprService;
+    this.$state = $state;
+    this.ssoAuthentication = ssoAuthentication;
+    this.$window = $window;
+  }
+
+  $onInit() {
+    this.loading = {
+      confirm: false,
+      sendConfirmEmail: false,
+    };
+
+    this.model = {
+      confirm_code: '',
+    };
+  }
+
+  buildErrorMessage(error, mapMessages) {
+    const requestId = error.headers('x-ovh-queryid');
+    return `
+        <p>${this.$translate.instant(mapMessages[error.status])}</p>
+        ${
+          requestId
+            ? `<p>${this.$translate.instant(
+                'gdpr_error_identifier',
+              )} ${requestId}</p>`
+            : ''
+        }
+    `;
+  }
+
+  sendErasureRequestConfirmationEmail() {
+    this.Alerter.resetMessage(GDPR_FEATURES_CONFIRM_BANNER_CONTAINER);
+    this.loading.sendConfirmEmail = true;
+    this.gdprService
+      .sendErasureRequestConfirmationEmail(this.publicId)
+      .then(() => {
+        this.Alerter.info(
+          `<strong>${this.$translate.instant(
+            'gdpr_erasure_confirmation_email_sent_success_title',
+          )}</strong> ${this.$translate.instant(
+            'gdpr_erasure_confirmation_email_sent_success_description',
+          )}`,
+          GDPR_FEATURES_CONFIRM_BANNER_CONTAINER,
+        );
+      })
+      .catch((error) => {
+        this.Alerter.error(
+          this.buildErrorMessage(
+            error,
+            CONFIRMATION_EMAIL_ERASURE_REQUEST_MESSAGES_MAP,
+          ),
+          GDPR_FEATURES_CONFIRM_BANNER_CONTAINER,
+        );
+      })
+      .finally(() => {
+        this.loading.sendConfirmEmail = false;
+      });
+  }
+
+  submitConfirmation() {
+    if (this.model.confirm_code) {
+      this.loading.confirm = true;
+      this.Alerter.resetMessage(GDPR_FEATURES_CONFIRM_BANNER_CONTAINER);
+
+      this.gdprService
+        .confirmErasure(this.publicId, this.model.confirm_code)
+        .then(() => this.ssoAuthentication.logout())
+        .catch((error) => {
+          this.Alerter.error(
+            this.buildErrorMessage(error, CONFIRM_ERASURE_REQUEST_MESSAGES_MAP),
+            GDPR_FEATURES_CONFIRM_BANNER_CONTAINER,
+          );
+        })
+        .finally(() => {
+          this.loading.confirm = false;
+        });
+    }
+  }
+
+  cancelConfirmation() {
+    this.$window.location.href = this.$state.href('account.user.gdpr');
+  }
+}

packages/manager/modules/account/src/user/gdpr/confirm/confirm-request-erasure.html

@@ -0,0 +1,74 @@
+<div>
+    <div
+        data-ovh-alert="gdpr-features-confirm.alerts.global"
+        data-ovh-alert-hide-remove-button="true"
+    ></div>
+
+    <oui-message type="info" class="mb-3">
+        <strong data-translate="gdpr_erasure_confirm_banner_title"></strong>
+        <span data-translate="gdpr_erasure_confirm_banner_description"></span>
+    </oui-message>
+
+    <oui-tile class="h-100 oui-tile-h-100">
+        <div class="d-flex align-items-center mb-4">
+            <span
+                data-translate="gdpr_erasure_confirm_input_code_prompt"
+            ></span>
+            <oui-button
+                type="button"
+                variant="link"
+                data-on-click="$ctrl.sendErasureRequestConfirmationEmail()"
+                data-disabled="$ctrl.loading.sendConfirmEmail"
+            >
+                <oui-spinner
+                    data-size="s"
+                    ng-if="$ctrl.loading.sendConfirmEmail"
+                ></oui-spinner>
+                <span
+                    ng-if="!$ctrl.loading.sendConfirmEmail"
+                    data-translate="gdpr_erasure_confirm_resend_code"
+                ></span>
+            </oui-button>
+        </div>
+
+        <form name="confirmForm">
+            <input
+                type="text"
+                class="oui-input oui-input_xl mb-4"
+                name="confirm_code"
+                id="confirm_code"
+                data-ng-model="$ctrl.model.confirm_code"
+                required
+                ng-pattern="/^[^{}]*$/"
+            />
+
+            <div class="mt-3">
+                <oui-button
+                    type="reset"
+                    variant="secondary"
+                    data-disabled="$ctrl.loading.confirm"
+                    data-on-click="$ctrl.cancelConfirmation()"
+                >
+                    <span
+                        data-translate="gdpr_erasure_confirm_form_cancel"
+                    ></span>
+                </oui-button>
+                <oui-button
+                    type="submit"
+                    variant="primary"
+                    data-on-click="$ctrl.submitConfirmation()"
+                    data-disabled="confirmForm.$invalid || $ctrl.loading.confirm"
+                >
+                    <oui-spinner
+                        data-size="s"
+                        ng-if="$ctrl.loading.confirm"
+                    ></oui-spinner>
+                    <span
+                        ng-if="!$ctrl.loading.confirm"
+                        data-translate="gdpr_erasure_confirm_form_submit"
+                    ></span>
+                </oui-button>
+            </div>
+        </form>
+    </oui-tile>
+</div>

packages/manager/modules/account/src/user/gdpr/confirm/confirm-request-erasure.module.js

@@ -0,0 +1,12 @@
+import routing from './confirm-request-erasure.routing';
+import component from './confirm-request-erasure.component';
+
+const moduleName = 'ovhManagerAccountGdprConfirmModule';
+
+angular
+  .module(moduleName, [])
+  .config(routing)
+  .component('gdprFeaturesConfirm', component)
+  .run(/* @ngTranslationsInject:json ./translations */);
+
+export default moduleName;

packages/manager/modules/account/src/user/gdpr/confirm/confirm-request-erasure.routing.js

@@ -0,0 +1,12 @@
+export default /* @ngInject */ ($stateProvider) => {
+  $stateProvider.state('account.user.gdpr.confirm', {
+    url: '/:publicId/confirm-request-erasure',
+    component: 'gdprFeaturesConfirm',
+    resolve: {
+      publicId: /* @ngInject */ ($transition$) =>
+        $transition$.params().publicId,
+      breadcrumb: /* @ngInject */ ($translate) =>
+        $translate.instant('gdpr_erasure_confirm_title'),
+    },
+  });
+};

packages/manager/modules/account/src/user/gdpr/confirm/index.js

@@ -0,0 +1,22 @@
+import 'oclazyload';
+
+const moduleName = 'ovhManagerAccountGdprConfirmModuleLazyLoading';
+
+angular
+  .module(moduleName, [])
+  .config(
+    /* @ngInject */ ($stateProvider) => {
+      $stateProvider.state('account.user.gdpr.confirm.**', {
+        url: '/:publicId/confirm-request-erasure',
+        lazyLoad: ($transition$) => {
+          const $ocLazyLoad = $transition$.injector().get('$ocLazyLoad');
+          return import('./confirm-request-erasure.module').then((mod) =>
+            $ocLazyLoad.inject(mod.default || mod),
+          );
+        },
+      });
+    },
+  )
+  .run(/* @ngTranslationsInject:json ./translations */);
+
+export default moduleName;

packages/manager/modules/account/src/user/gdpr/confirm/translations/Messages_fr_FR.json

@@ -0,0 +1,9 @@
+{
+  "gdpr_erasure_confirm_title": "Confirmer la demande",
+  "gdpr_erasure_confirm_banner_title": "Attention, après confirmation vous serez déconnecté et vous n’aurez plus accès au compte supprimé.",
+  "gdpr_erasure_confirm_banner_description": "La clôture du compte met définitivement fin à son fonctionnement. À défaut, une demande d’assistance sera créée et un conseiller reviendra vers vous dès que possible.",
+  "gdpr_erasure_confirm_resend_code": "Récupérer votre code",
+  "gdpr_erasure_confirm_input_code_prompt": "Renseignez le code que vous avez reçu par e-mail.",
+  "gdpr_erasure_confirm_form_submit": "Confirmer",
+  "gdpr_erasure_confirm_form_cancel": "Annuler"
+}

packages/manager/modules/account/src/user/gdpr/gdpr.constants.js

@@ -17,6 +17,8 @@ export const GDPR_REQUEST_MANAGEMENT_ACTIONS = [
 ];
 
 export const GDPR_FEATURES_BANNER_CONTAINER = 'gdpr-features.alerts.global';
+export const GDPR_FEATURES_CONFIRM_BANNER_CONTAINER =
+  'gdpr-features-confirm.alerts.global';
 
 export const CREATE_ERASURE_REQUEST_MESSAGES_MAP = {
   400: 'gdpr_erasure_creation_error',
@@ -42,6 +44,14 @@ export const CONFIRMATION_EMAIL_ERASURE_REQUEST_MESSAGES_MAP = {
   503: 'gdpr_erasure_retryable',
 };
 
+export const CONFIRM_ERASURE_REQUEST_MESSAGES_MAP = {
+  400: 'gdpr_erasure_confirm_error_invalid_code',
+  404: 'gdpr_erasure_cancel_error_missing_nic_or_invalid_request',
+  409: 'gdpr_erasure_confirm_error_exhausted_attempts',
+  500: 'gdpr_erasure_retryable',
+  503: 'gdpr_erasure_retryable',
+};
+
 export const ERASURE_REQUEST_STATUS_MESSAGES_COLORS_MAP = {
   blocked: {
     MESSAGE: 'gdpr_erasure_request_status_blocked',
@@ -89,6 +99,7 @@ export default {
   GDPR_REQUEST_MANAGEMENT_ACTIONS,
   CREATE_ERASURE_REQUEST_ACTION,
   GDPR_FEATURES_BANNER_CONTAINER,
+  GDPR_FEATURES_CONFIRM_BANNER_CONTAINER,
   CREATE_ERASURE_REQUEST_MESSAGES_MAP,
   ERASURE_REQUEST_STATUS_MESSAGES_COLORS_MAP,
   ERASURE_INELIGIBILITY_REASON_MESSAGES_MAP,

packages/manager/modules/account/src/user/gdpr/gdpr.module.js

@@ -1,13 +1,14 @@
 import component from './gdpr.component';
 import routing from './gdpr.routing';
 import service from './gdpr.service';
+import confirmModule from './confirm';
 
 import './gdpr.scss';
 
 const moduleName = 'ovhManagerAccountGdprModule';
 
 angular
-  .module(moduleName, [])
+  .module(moduleName, [confirmModule])
   .config(routing)
   .component('gdprFeatures', component)
   .service('gdprService', service)

packages/manager/modules/account/src/user/gdpr/gdpr.service.js

@@ -64,4 +64,16 @@ export default class GdprService {
       )
       .then(({ data }) => data);
   }
+
+  confirmErasure(requestPublicId, code) {
+    return this.$http.post(
+      `/me/privacy/requests/erasure/${requestPublicId}/confirm`,
+      {
+        code,
+      },
+      {
+        serviceType: 'apiv6',
+      },
+    );
+  }
 }

packages/manager/modules/account/src/user/gdpr/translations/Messages_fr_FR.json

@@ -52,5 +52,8 @@
   "gdpr_erasure_confirmation_email_error_bad_request": "Une erreur est survenue.",
   "gdpr_erasure_confirmation_email_error_not_found": "Une erreur est survenue. Merci de prendre contact avec l'équipe Support.",
   "gdpr_erasure_confirmation_email_error_invalid_status": "Le statut de votre demande ne permet pas l'envoi d'une confirmation.",
-  "gdpr_erasure_confirmation_email_error_max_attempts": "Vous avez reçu le nombre maximal de nouveaux e-mails de confirmation. Vous pouvez confirmer votre demande avec l’e-mail de confirmation déjà reçu. Dans le cas contraire nous vous invitons à annuler la demande actuelle ou de prendre contact avec l’équipe Support."
+  "gdpr_erasure_confirmation_email_error_max_attempts": "Vous avez reçu le nombre maximal de nouveaux e-mails de confirmation. Vous pouvez confirmer votre demande avec l’e-mail de confirmation déjà reçu. Dans le cas contraire nous vous invitons à annuler la demande actuelle ou de prendre contact avec l’équipe Support.",
+
+  "gdpr_erasure_confirm_error_invalid_code": "Le code de confirmation est erroné.",
+  "gdpr_erasure_confirm_error_exhausted_attempts": "Votre demande a été annulée à la suite de plusieurs saisies erronées du code de confirmation."
 }