feat(sign-up): sms marketing consent (#9679)

* feat(sign-up): update sign up page display ref: MANAGER-11426 Signed-off-by: Jacques Larique <[email protected]> * feat(sign-ip): adding phone type to sign up ref: MANAGER-11426 Signed-off-by: Jacques Larique <[email protected]> * feat(sign-up): adding sms consent ref: MANAGER-11426 Signed-off-by: Jacques Larique <[email protected]> * feat(sign-up): miscellaneous fixes ref: MANAGER-11426 Signed-off-by: Jacques Larique <[email protected]> * fix(i18n): add missing translations [CDS 2403] Signed-off-by: CDS Translator Agent <[email protected]> * feat(sign-up): consent request management ref: MANAGER-11426 Signed-off-by: Jacques Larique <[email protected]> * feat(sign-up): restrict request for us ref: MANAGER-11426 Signed-off-by: Jacques Larique <[email protected]> --------- Signed-off-by: Jacques Larique <[email protected]> Signed-off-by: CDS Translator Agent <[email protected]> Co-authored-by: Jacques Larique <[email protected]>
ovh · Aug 3, 2023 · 23d44a8 · 23d44a8
1 parent d444ad9
commit 23d44a8
Show file tree

Hide file tree

Showing 20 changed files with 215 additions and 87 deletions.
diff --git a/packages/manager/apps/sign-up/package.json b/packages/manager/apps/sign-up/package.json
@@ -28,6 +28,7 @@
     "@ovh-ux/ng-at-internet-ui-router-plugin": "^3.2.3",
     "@ovh-ux/ng-ovh-http": "^5.0.6",
     "@ovh-ux/ng-ovh-request-tagger": "^1.1.8",
+    "@ovh-ux/ng-ovh-feature-flipping": "^1.0.7",
     "@ovh-ux/ng-ovh-sso-auth": "^4.7.0",
     "@ovh-ux/ng-translate-async-loader": "^2.1.6",
     "@ovh-ux/request-tagger": "^0.1.1",

diff --git a/packages/manager/apps/sign-up/src/app.js b/packages/manager/apps/sign-up/src/app.js
@@ -16,6 +16,7 @@ import '@uirouter/angularjs';
 import 'regenerator-runtime/runtime';
 import { registerCoreModule } from '@ovh-ux/manager-core';
 
+import ngOvhFeatureFlipping from '@ovh-ux/ng-ovh-feature-flipping';
 import ngOvhSsoAuth from '@ovh-ux/ng-ovh-sso-auth'; // peerDep of manager-core
 import ngAtInternet from '@ovh-ux/ng-at-internet';
 import ovhManagerCookiePolicy from '@ovh-ux/manager-cookie-policy';
@@ -48,6 +49,7 @@ export default (containerEl, environment) => {
       ovhManagerAtInternetConfiguration,
       ovhManagerCookiePolicy,
       ngAtInternetUiRouterPlugin,
+      ngOvhFeatureFlipping,
       ngOvhSsoAuth,
       signUpFormView,
       detailsState,

diff --git a/packages/manager/apps/sign-up/src/constants.js b/packages/manager/apps/sign-up/src/constants.js
@@ -44,8 +44,13 @@ export const SANITIZATION = {
   regex: /^\s*(?:(?:(?:https?|ftp|file|blob):\/\/(?:(?:(?:[^./?#]+\.)*(?:ovh|(?:ovhcloud(?=\.com))|(?:ovhtelecom(?=\.fr))|(?:ovh-hosting(?=\.fi))|soyoustart|kimsufi)\.(?:com|net|org|ovh|co\.uk|com\.tn|cz|de|es|eu|fi|fr|ie|it|lt|ma|nl|pl|pt|sn|uk|us))|localhost|127\.0\.0\.1)(?::\d+)?)|data:image)(?:\/|$)/i,
 };
 
+export const FEATURES = {
+  smsConsent: 'account:sms-consent',
+};
+
 export default {
   HOME_PAGE,
   LOGO_SRC,
   SANITIZATION,
+  FEATURES,
 };
diff --git a/packages/manager/apps/sign-up/src/form/form.controller.js b/packages/manager/apps/sign-up/src/form/form.controller.js
@@ -13,6 +13,7 @@ export default class SignUpFormAppCtrl {
     this.saveError = null;
 
     this.isValid = false;
+    this.smsConsent = false;
 
     this.loading = {
       init: true,
@@ -80,7 +81,7 @@ export default class SignUpFormAppCtrl {
 
     // call to finishSignUp binding
     if (isFunction(this.finishSignUp)) {
-      return this.finishSignUp()
+      return this.finishSignUp(this.smsConsent)
         .then(() => {
           localStorage.removeItem(OVH_SUBSIDIARY_ITEM_NAME);
         })

diff --git a/packages/manager/apps/sign-up/src/form/form.html b/packages/manager/apps/sign-up/src/form/form.html
@@ -9,6 +9,7 @@
         data-action="create"
         data-me="$ctrl.me"
         data-model="$ctrl.model"
+        data-sms-consent="$ctrl.smsConsent"
         data-is-valid="$ctrl.isValid"
         data-on-rules-updated="$ctrl.onRulesUpdated.bind($ctrl)"
     >

diff --git a/packages/manager/apps/sign-up/src/routing.js b/packages/manager/apps/sign-up/src/routing.js
@@ -1,6 +1,6 @@
 import find from 'lodash/find';
 
-import { SANITIZATION } from './constants';
+import { SANITIZATION, FEATURES } from './constants';
 
 import signupFormComponent from './form/component';
 
@@ -70,22 +70,36 @@ export const state = {
       }
     },
 
+    isSmsConsentAvailable: /* @ngInject */ (ovhFeatureFlipping) =>
+      ovhFeatureFlipping
+        .checkFeatureAvailability(FEATURES.smsConsent)
+        .then((featureAvailability) =>
+          featureAvailability.isFeatureAvailable(FEATURES.smsConsent),
+        ),
+
     finishSignUp: /* @ngInject */ (
       $window,
+      $q,
       getRedirectLocation,
       me,
       signUp,
-    ) => () =>
+      isSmsConsentAvailable,
+    ) => (smsConsent) =>
       signUp.saveNic(me.model).then(() => {
-        // for tracking purposes
-        if ($window.sessionStorage) {
-          $window.sessionStorage.setItem('ovhSessionSuccess', true);
-        }
-        // manage redirection
-        const redirectUrl = getRedirectLocation(me.nichandle);
-        if (redirectUrl) {
-          $window.location.assign(redirectUrl);
-        }
+        const promise = isSmsConsentAvailable
+          ? signUp.sendSmsConsent(smsConsent)
+          : $q.resolve();
+        return promise.then(() => {
+          // for tracking purposes
+          if ($window.sessionStorage) {
+            $window.sessionStorage.setItem('ovhSessionSuccess', true);
+          }
+          // manage redirection
+          const redirectUrl = getRedirectLocation(me.nichandle);
+          if (redirectUrl) {
+            $window.location.assign(redirectUrl);
+          }
+        });
       }),
 
     steps: () => [

diff --git a/packages/manager/modules/sign-up/src/form/component.js b/packages/manager/modules/sign-up/src/form/component.js
@@ -9,5 +9,6 @@ export default {
     onRulesUpdated: '&',
     model: '=',
     isValid: '=',
+    smsConsent: '=',
   },
 };
diff --git a/packages/manager/modules/sign-up/src/form/details/details.controller.js b/packages/manager/modules/sign-up/src/form/details/details.controller.js
@@ -262,4 +262,10 @@ export default class SignUpDetailsCtrl {
       this.onFieldError(startCase(field.$name));
     }
   }
+
+  onPhoneTypeChange() {
+    if (this.signUpFormCtrl.model.phoneType === 'landline') {
+      this.signUpFormCtrl.smsConsent = false;
+    }
+  }
 }
diff --git a/packages/manager/modules/sign-up/src/form/details/details.html b/packages/manager/modules/sign-up/src/form/details/details.html
@@ -1,6 +1,6 @@
 <div class="sign-up-form-details">
     <div class="row">
-        <div class="col-lg-6">
+        <div class="col-lg">
             <!-- legalform -->
             <oui-field
                 data-label="{{ 'sign_up_details_field_legalform' | translate }}"
@@ -26,8 +26,9 @@
             </oui-field>
             <!-- /select[name="legalform"] -->
         </div>
-
-        <div class="col-lg-6">
+    </div>
+    <div class="row">
+        <div class="col-lg">
             <!-- country -->
             <oui-field
                 data-label="{{ 'sign_up_details_field_country' | translate }}"
@@ -57,7 +58,61 @@
     </div>
 
     <div class="row">
-        <div class="col-lg-6">
+        <div class="col-lg">
+            <!-- language -->
+            <oui-field
+                data-label="{{ 'sign_up_details_field_language' | translate }}"
+            >
+                <label class="oui-select">
+                    <select
+                        id="language"
+                        name="language"
+                        class="oui-select__input"
+                        data-ng-options="language.value as language.label for language in $ctrl.signUpFormCtrl.rules.language.in"
+                        data-ng-model="$ctrl.signUpFormCtrl.model.language"
+                        data-ng-required="$ctrl.signUpFormCtrl.rules.language.mandatory"
+                        data-ng-disabled="$ctrl.signUpFormCtrl.rules.language.in.length === 0"
+                        data-ng-blur="$ctrl.onFieldBlur($ctrl.formCtrl.language)"
+                    >
+                    </select>
+                    <span
+                        class="oui-icon oui-icon-chevron-down bg-transparent"
+                        aria-hidden="true"
+                    >
+                    </span>
+                </label>
+            </oui-field>
+            <!-- /select[name="language"] -->
+        </div>
+    </div>
+
+    <div class="row" data-ng-if="$ctrl.signUpFormCtrl.rules.phoneType">
+        <div class="col-lg">
+            <oui-field>
+                <oui-radio-group
+                    name="phoneType"
+                    data-model="$ctrl.signUpFormCtrl.model.phoneType"
+                    data-required
+                    data-ng-blur="$ctrl.onFieldBlur($ctrl.formCtrl.phoneType)"
+                    data-on-change="$ctrl.onPhoneTypeChange()"
+                >
+                    <oui-radio data-value="'mobile'" inline>
+                        <span
+                            data-translate="sign_up_details_field_mobile_phone"
+                        ></span>
+                    </oui-radio>
+                    <oui-radio data-value="'landline'" inline>
+                        <span
+                            data-translate="sign_up_details_field_landline_phone"
+                        ></span>
+                    </oui-radio>
+                </oui-radio-group>
+            </oui-field>
+        </div>
+    </div>
+
+    <div class="row">
+        <div class="col-lg">
             <!-- phone -->
             <oui-field
                 data-label="{{ 'sign_up_details_field_phone' | translate }}"
@@ -71,14 +126,15 @@
                         <ui-select-match>
                             <country-flag
                                 data-country="$select.selected.value"
+                                data-label="+{{ $select.selected.prefix }}"
                             ></country-flag>
                         </ui-select-match>
                         <ui-select-choices
                             data-repeat="phoneCountry.value as phoneCountry in ($ctrl.signUpFormCtrl.rules.phoneCountry.in | filter: $select.search) track by $index"
                         >
                             <country-flag
                                 data-country="phoneCountry.value"
-                                data-label="{{ phoneCountry.label }}"
+                                data-label="{{ phoneCountry.label + ' (+' + phoneCountry.prefix + ')' }}"
                             >
                             </country-flag>
                         </ui-select-choices>
@@ -99,22 +155,59 @@
             </oui-field>
             <!-- /input[name="phone"] -->
         </div>
+    </div>
 
-        <div class="col-lg-6">
-            <!-- language -->
+    <div class="row" data-ng-if="$ctrl.signUpFormCtrl.rules.phoneType">
+        <div class="col-lg">
+            <oui-field>
+                <oui-checkbox
+                    name="sms-consent"
+                    data-model="$ctrl.signUpFormCtrl.smsConsent"
+                    data-disabled="$ctrl.signUpFormCtrl.model.phoneType !== 'mobile'"
+                >
+                    <span
+                        data-translate="sign_up_details_field_sms_consent"
+                    ></span>
+                </oui-checkbox>
+            </oui-field>
+        </div>
+    </div>
+
+    <div class="row">
+        <div class="col-lg">
+            <!-- address -->
             <oui-field
-                data-label="{{ 'sign_up_details_field_language' | translate }}"
+                data-label="{{ 'sign_up_details_field_address' | translate }}"
+            >
+                <input
+                    type="text"
+                    class="oui-input"
+                    name="address"
+                    id="address"
+                    data-ng-model="$ctrl.signUpFormCtrl.model.address"
+                    data-ng-required="$ctrl.signUpFormCtrl.rules.address.mandatory"
+                    data-ng-pattern="$ctrl.signUpFormCtrl.rules.address.regularExpression"
+                    data-ng-blur="$ctrl.onFieldBlur($ctrl.formCtrl.address)"
+                />
+            </oui-field>
+            <!-- /input[name="address"] -->
+        </div>
+
+        <div class="col-lg" data-ng-if="$ctrl.signUpFormCtrl.rules.area">
+            <!-- area -->
+            <oui-field
+                data-label="{{ 'sign_up_details_field_' + ($ctrl.signUpFormCtrl.model.country.includes('AU', 'US', 'WE', 'IN') ? 'state' : $ctrl.signUpFormCtrl.model.country === 'CA' ? 'province' : 'area') | translate }}"
             >
                 <label class="oui-select">
                     <select
-                        id="language"
-                        name="language"
+                        id="area"
+                        name="area"
                         class="oui-select__input"
-                        data-ng-options="language.value as language.label for language in $ctrl.signUpFormCtrl.rules.language.in"
-                        data-ng-model="$ctrl.signUpFormCtrl.model.language"
-                        data-ng-required="$ctrl.signUpFormCtrl.rules.language.mandatory"
-                        data-ng-disabled="$ctrl.signUpFormCtrl.rules.language.in.length === 0"
-                        data-ng-blur="$ctrl.onFieldBlur($ctrl.formCtrl.language)"
+                        data-ng-options="area.value as area.label for area in $ctrl.signUpFormCtrl.rules.area.in"
+                        data-ng-model="$ctrl.signUpFormCtrl.model.area"
+                        data-ng-required="$ctrl.signUpFormCtrl.rules.area.mandatory"
+                        data-ng-change="$ctrl.onAreaChange()"
+                        data-ng-blur="$ctrl.onFieldBlur($ctrl.formCtrl.area)"
                     >
                     </select>
                     <span
@@ -124,12 +217,12 @@
                     </span>
                 </label>
             </oui-field>
-            <!-- /select[name="language"] -->
+            <!-- /select[name="area"] -->
         </div>
     </div>
 
     <div class="row">
-        <div class="col-lg-6">
+        <div class="col-lg">
             <!-- zip -->
             <oui-field
                 data-label="{{ 'sign_up_details_field_zip' | translate }}"
@@ -157,8 +250,10 @@
             </oui-field>
             <!-- /input[name="zip"] -->
         </div>
+    </div>
 
-        <div class="col-lg-6">
+    <div class="row">
+        <div class="col-lg">
             <!-- city -->
             <oui-field
                 data-label="{{ 'sign_up_details_field_city' | translate }}"
@@ -177,52 +272,4 @@
             <!-- /input[name="city"] -->
         </div>
     </div>
-
-    <div class="row">
-        <div class="col-lg">
-            <!-- address -->
-            <oui-field
-                data-label="{{ 'sign_up_details_field_address' | translate }}"
-            >
-                <input
-                    type="text"
-                    class="oui-input"
-                    name="address"
-                    id="address"
-                    data-ng-model="$ctrl.signUpFormCtrl.model.address"
-                    data-ng-required="$ctrl.signUpFormCtrl.rules.address.mandatory"
-                    data-ng-pattern="$ctrl.signUpFormCtrl.rules.address.regularExpression"
-                    data-ng-blur="$ctrl.onFieldBlur($ctrl.formCtrl.address)"
-                />
-            </oui-field>
-            <!-- /input[name="address"] -->
-        </div>
-
-        <div class="col-lg" data-ng-if="$ctrl.signUpFormCtrl.rules.area">
-            <!-- area -->
-            <oui-field
-                data-label="{{ 'sign_up_details_field_' + ($ctrl.signUpFormCtrl.model.country.includes('AU', 'US', 'WE', 'IN') ? 'state' : $ctrl.signUpFormCtrl.model.country === 'CA' ? 'province' : 'area') | translate }}"
-            >
-                <label class="oui-select">
-                    <select
-                        id="area"
-                        name="area"
-                        class="oui-select__input"
-                        data-ng-options="area.value as area.label for area in $ctrl.signUpFormCtrl.rules.area.in"
-                        data-ng-model="$ctrl.signUpFormCtrl.model.area"
-                        data-ng-required="$ctrl.signUpFormCtrl.rules.area.mandatory"
-                        data-ng-change="$ctrl.onAreaChange()"
-                        data-ng-blur="$ctrl.onFieldBlur($ctrl.formCtrl.area)"
-                    >
-                    </select>
-                    <span
-                        class="oui-icon oui-icon-chevron-down bg-transparent"
-                        aria-hidden="true"
-                    >
-                    </span>
-                </label>
-            </oui-field>
-            <!-- /select[name="area"] -->
-        </div>
-    </div>
 </div>
diff --git a/packages/manager/modules/sign-up/src/form/details/details.scss b/packages/manager/modules/sign-up/src/form/details/details.scss
@@ -1,5 +1,11 @@
 .sign-up-form-details {
   .oui-field {
+    margin-bottom: 0.625rem;
+
+    .oui-field__header {
+      padding-left: 0.625rem;
+    }
+
     .oui-input-group.zip-group {
       box-shadow: -1px 0 0 rgba(40, 89, 192, 0.2),
         1px 0 0 rgba(40, 89, 192, 0.2);