fix(sign-up): clean phone by adding prefix if not present (#1317)

* fix(sign-up): clean phone by adding prefix if not present

* fix(sign-up): set sessionStorage value for tracking

* fix(sign-up): phone number clean and validation

* fix(sign-up): change logo again

* build(sign-up): remove img assets

* fix(sign-up): phone number clean

* fix(sign-up): add some router param to allow auto state refresh

Author: Jisay

packages/manager/apps/sign-up/src/assets/img/logo-ovh.svg

@@ -23,11 +23,14 @@ export const HOME_PAGE = {
   WS: 'https://www.ovh.com/us/es/',
 };
 
+export const OVH_LOGO = 'https://eu.api.ovh.com/images/com-square-bichro.png';
+
 export const SANITIZATION = {
   regex: /^\s*(?:(?:(?:https?|ftp|file|blob):\/\/(?:(?:(?:[^./?#]+\.)*(?:ovh|(?:ovhcloud(?=\.com))|(?:ovhtelecom(?=\.fr))|(?:ovh-hosting(?=\.fi))|soyoustart|kimsufi|runabove)\.(?: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|[\w-]+\.uxci(-ca|-us)?\.ovh)(?::\d+)?)|data:image)(?:\/|$)/i,
 };
 
 export default {
   HOME_PAGE,
+  OVH_LOGO,
   SANITIZATION,
 };

packages/manager/apps/sign-up/src/constants.js

@@ -1,6 +1,9 @@
 import get from 'lodash/get';
 
-import { HOME_PAGE } from './constants';
+import {
+  HOME_PAGE,
+  OVH_LOGO,
+} from './constants';
 
 export default class SignUpCtrl {
   /* @ngInject */
@@ -10,6 +13,7 @@ export default class SignUpCtrl {
 
     // other attributes used in view
     this.logoUrl = null;
+    this.logoSrc = OVH_LOGO;
   }
 
   /* ============================

packages/manager/apps/sign-up/src/index.controller.js

@@ -13,8 +13,9 @@
             <div class="py-3 py-md-5 px-3">
                 <a class="d-inline-block pb-3 pb-md-5"
                    data-ng-href="{{ $ctrl.logoUrl }}">
-                    <img src="assets/img/logo-ovh.svg"
-                         alt="OVHcloud - Innovation for freedom" />
+                    <img data-ng-src="{{ $ctrl.logoSrc }}"
+                         alt="OVHcloud - Innovation for freedom"
+                         class="app-logo" />
                 </a>
                 <div class="row justify-content-lg-center">
                     <div class="col-lg-8 app-content">

packages/manager/apps/sign-up/src/index.html

@@ -5,6 +5,10 @@
 @import '~bootstrap4/scss/_grid.scss';
 @import '~bootstrap4/scss/mixins/_breakpoints';
 
+.app-logo {
+  height: 70px;
+}
+
 .app-content {
   position: relative;
 }

packages/manager/apps/sign-up/src/index.scss

@@ -6,7 +6,7 @@ import signupFormComponent from './form/component';
 
 export const state = {
   name: 'sign-up',
-  url: '/?lang',
+  url: '/?lang&ovhSubsidiary&ovhCompany&callback&onsuccess',
   component: signupFormComponent.name,
   resolve: {
     getRedirectLocation: /* @ngInject */ $location => (nic) => {
@@ -55,6 +55,11 @@ export const state = {
     finishSignUp: /* @ngInject */ ($window, getRedirectLocation, me, signUp) => () => 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);

packages/manager/apps/sign-up/src/routing.js

@@ -12,7 +12,7 @@ module.exports = (env = {}) => {
     assets: {
       files: [
         { from: path.resolve(__dirname, '../../../../node_modules/flag-icon-css/flags/4x3'), to: 'flag-icon-css/flags/4x3' },
-        { from: path.resolve(__dirname, 'src/assets/img'), to: 'assets/img' },
+        // { from: path.resolve(__dirname, 'src/assets/img'), to: 'assets/img' },
       ],
     },
   }, process.env.REGION ? Object.assign(env, { region: process.env.REGION }) : env);

packages/manager/apps/sign-up/webpack.config.js

@@ -40,20 +40,20 @@ export default class SignUpDetailsCtrl {
 
   static cleanPhoneNumber(phoneNumberParam, phonePrefix) {
     let phoneNumber = phoneNumberParam;
-    if (phoneNumberParam) {
+    if (phoneNumber) {
       phoneNumber = phoneNumber.replace(/\s/g, '');
       phoneNumber = phoneNumber.replace(/(?:-)(\d)/g, '$1'); // remove "-" char preceding a digit
       phoneNumber = phoneNumber.replace(/(?:\.)(\d)/g, '$1'); // remove "." char preceding a digit
       phoneNumber = phoneNumber.replace(/(?:\()(\d+)(?:\))/g, '$1'); // remove parenthesis around digits
 
       if (phonePrefix) {
         const alternativePhonePrefix = `00${phonePrefix.replace('+', '')}`;
-        if (startsWith(phoneNumberParam, alternativePhonePrefix)) {
+        if (startsWith(phoneNumber, alternativePhonePrefix)) {
           // check if input value begin with 00${prefix}
-          phoneNumber = `+${phonePrefix}${phoneNumberParam.slice(alternativePhonePrefix.length)}`;
-        } else if (startsWith(phoneNumberParam, '0')) {
-          // or by only a trailing 0
-          phoneNumber = `+${phonePrefix}${phoneNumberParam.slice(1)}`;
+          phoneNumber = `+${phonePrefix}${phoneNumber.slice(alternativePhonePrefix.length)}`;
+        } else if (!startsWith(phoneNumber, `+${phonePrefix}`)) {
+          // or not by the phonePrefix
+          phoneNumber = `+${phonePrefix}${phoneNumber}`;
         }
       }
     }