https://virginmobile.sa/join/static/js/33.e9d290b2.chunk.js

1(this.webpackJsonpvm_ksa_web_onboarding_app=this.webpackJsonpvm_ksa_web_onboarding_app||[]).push([[33],{1182:function(e,t,a){"use strict";var r=a(0);const s=a.n(r).a.createContext({mnpNumber:"",updateMnpNumber:e=>{}});t.a=s},521:function(e,t,a){"use strict";a.r(t),a.d(t,"default",(function(){return x}));var r=a(0),s=a.n(r),n=a(1),o=a(3),l=a(22),i=a(2),p=a(4),c=a(53);var u=()=>s.a.createElement("div",{className:"operator-select-skeleton"},s.a.createElement(c.a,{width:"360px",height:"50px"}));class m extends r.Component{constructor(){super(...arguments),this.state={selected:null,selected_friendly:"",list_by_id:null,list:[]}}componentDidMount(){n.a.getOrfetch("phone_operators",l.a.fetchMnpOperators).then(e=>{e.data?(n.a.set("phone_operators",e.data),this.setState({list:e.data,list_by_id:p.a.arrayToObject(e.data,"Id")})):(n.a.set("phone_operators",e),this.setState({list:e,list_by_id:p.a.arrayToObject(e,"Id")}))}).catch(e=>{}),this.setState({selected:this.props.default?this.props.default:""})}select(e){e.target.value?this.setState({selected:e.target.value,selected_friendly:this.state.list_by_id[e.target.value].Operator}):this.setState({selected:null,selected_friendly:""}),this.props.updateFieled(e,"form","select")}render(){let e=s.a.createElement(u,null),t=this.state.list,a=[];if(t.length){for(var r=0;r<t.length;r++)a.push(s.a.createElement("option",{key:r,value:t[r].Id},t[r].Operator));a.unshift(s.a.createElement("option",{key:"1_1",value:""},i.a.keys["scr_17.0_MNP_form_tab_select_operator"]))}return a.length&&(e=s.a.createElement("div",{className:"field-container"},s.a.createElement("label",null,this.props.label),s.a.createElement("select",{className:"storefront-search-input select-component",name:"operator_id",onChange:e=>this.select(e)},a))),e}}var d=a(1182),h=a(14),_=a(106),v=a.n(_),b=a(172),f=a(7);class E extends r.Component{constructor(){super(...arguments),this.state={form:null,loading:!0},this.fields={operator_id:{default:"",value:"",type:"text",required:!0},mnp_number:{default:"",value:"",type:"text",required:!0,country:"SA"},contact_number:{default:"",value:"",type:"text",required:!1,dependency:"selected_country_contact"},selected_country_contact:{default:"SA",value:"SA",type:"country",required:!0,dependent:"contact_number"}},this.inputDigits=function(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:14;const a=/^[0-9\b]+$/;return""===e.target.value||e.target.value.length<=t&&a.test(e.target.value)},this.commonRecordFirebaseEvent=e=>{let{event_label:t="",interaction_type:a="",...r}=e;const s={event_category:"onboarding_mnp",event_screen:"onboarding_mnp_form",event_label:t,interaction_type:a,...r};f.a.commonFunction(s)}}componentDidMount(){this.commonRecordFirebaseEvent({event_label:"landing",interaction_type:"view"})}render(){let e="",t="scr_17.0_MNP_form_",a=o.a.legal_link;a=a.replace("%lang%",i.a.activeLang);let r=s.a.createElement(s.a.Fragment,null,s.a.createElement(h.a,{title:i.a.keys[t+"title"],desc:i.a.keys[t+"desc"]}),s.a.createElement(d.a.Consumer,null,e=>s.a.createElement("div",{className:"field-container"},s.a.createElement("label",null,i.a.keys[t+"mobile_number"]),s.a.createElement("input",{type:"tel",name:"mnp_number",id:"mnp_number",value:this.props.state.mnp_number.value,className:"storefront-search-input "+(!this.props.state.mnp_number.tuched||this.props.state.mnp_number.tuched&&this.props.state.mnp_number.validation?"":"error"),placeholder:i.a.keys["scr_17.0_MNP_form_mob_num_placeholder"]||"Ex. +966 123 456",onChange:t=>{this.inputDigits(t)&&(this.props.updateFieled(t,"form","phone"),e.updateMnpNumber(t.target.value))}}),s.a.createElement("div",{className:"hint-section"},s.a.createElement("img",{src:v.a,alt:"hint"}),s.a.createElement("p",null,i.a.keys[t+"hint"])))),s.a.createElement(m,{form_id:"operator_id",label:i.a.keys["scr_17.0_MNP_form_tab_select_operator"],default:this.props.state.operator_id.value,field_name:"operator_id",updateFieled:this.props.updateFieled}),s.a.createElement("div",{className:"field-container"},s.a.createElement("label",null,i.a.keys["scr_17.0_MNP_form_contact_num_label"]||"Contact Number"),s.a.createElement(b.a,null,s.a.createElement("input",{type:"tel",name:"contact_number",id:"c

1ontact_number",className:"storefront-search-input "+(!this.props.state.contact_number.tuched||this.props.state.contact_number.tuched&&this.props.state.contact_number.validation?"":"error"),placeholder:i.a.keys[t+"contact_number"],value:this.props.state.contact_number.value,onChange:e=>{this.inputDigits(e,9)&&this.props.updateFieled(e,"form","phone")}}))),s.a.createElement("div",{className:"bottom-section"},s.a.createElement("p",{className:"please-confirm-text"},i.a.keys[t+"please_confirm"]),s.a.createElement("div",{className:"checkbox-container storefront-checkbox "+(p.a.isSafari()?"safari":"")},s.a.createElement("input",{type:"checkbox",name:"validId",checked:this.props.state.validId.value,onChange:e=>{this.props.updateFieled(e,"form","checkbox")}}),s.a.createElement("label",null,i.a.keys[t+"valid_text"])),s.a.createElement("div",{className:"checkbox-container storefront-checkbox "+(p.a.isSafari()?"safari":"")},s.a.createElement("input",{type:"checkbox",name:"terms",checked:this.props.state.terms.value,onChange:e=>{this.props.updateFieled(e,"form","checkbox")}}),s.a.createElement("label",null,i.a.keys[t+"read_and_agree"]," ",s.a.createElement("span",null,s.a.createElement("a",{href:a,target:"_blank",rel:"noopener noreferrer"},i.a.keys[t+"legal_stuff"]))))));return e=s.a.createElement("div",{className:"bring-number-card-container"},r,s.a.createElement("button",{className:"common-button "+(this.props.state.formValid?"":"diabled"),onClick:()=>{var e,t,a,r,s,n,o,l,i;this.commonRecordFirebaseEvent({event_label:"next",interaction_type:"click",mnp_number:(null===(e=this.props.state)||void 0===e||null===(t=e.mnp_number)||void 0===t?void 0:t.value)||"",operator_name:(null===(a=this.props.state)||void 0===a?void 0:a.operator_id.value)||"",legal_stuff:(null===(r=this.props.state)||void 0===r||null===(s=r.terms)||void 0===s?void 0:s.value)||"",mnp_status:(null===(n=this.props.state)||void 0===n||null===(o=n.validId)||void 0===o?void 0:o.value)||"",contact_number:(null===(l=this.props.state)||void 0===l||null===(i=l.contact_number)||void 0===i?void 0:i.value)||""}),this.props.submit()}},i.a.keys["17.2_B_MNP_Status_continue"])),e}}var g=a(223),y=a(12);class k extends r.Component{constructor(){super(...arguments),this.state={form:null,loading:!0,sendOtpLoading:!1},this.last_otp_request=null,this.requestNewOtp=()=>{this.setState({sendOtpLoading:!0}),this.props.handleClearError(),this.last_otp_request||(this.last_otp_request=setTimeout(()=>{this.last_otp_request=null,this.setState({sendOtpLoading:!1})},5e3),l.a.requestMnpOtp())},this.inputDigits=(e,t)=>""===e.target.value||e.target.value.length<=t&&/^[0-9\b]+$/.test(e.target.value)}render(){return this.state.sendOtpLoading?s.a.createElement(y.a,null):s.a.createElement(g.a,{onSubmit:this.props.submit,isFormValid:this.props.state.formValid,requestNewOtp:this.requestNewOtp,otpError:this.props.otpError,handleOtpForm:this.props.handleOtpForm,handleOtpError:this.props.handleOtpError,title:"stm_otp_title",desc:"stm_otp_desc",translationNeeded:!0})}}var S=a(89),F=a.n(S),N=a(65),C=a(75);class O extends r.Component{constructor(){var e;super(...arguments),e=this,this.phoneUtil=F.a.PhoneNumberUtil.getInstance(),this.state={numberScreenStatus:null,show_mnp_otp_form:!1,loading:!1,otpError:!1,form:{formValid:!1,mnp_number:{value:"",tuched:!1,validation:!1,rules:o.a.formats.phonenumber,required:!0,type:"phone"},operator_id:{value:"",tuched:!1,validation:!1,rules:o.a.formats.notEmpty,required:!0},country_select:{value:"SA",iso:966,tuched:!1,validation:!1,rules:o.a.formats.country,required:!1,type:"country"},contact_number:{value:"",tuched:!1,validation:!1,rules:o.a.formats.notEmpty,required:!1,type:"phone",dependency:"country_select"},validId:{value:"",tuched:!1,validation:!1,rules:o.a.formats.notEmpty,required:!0,type:"checkbox",dependency:"country_select"},terms:{value:"",tuched:!1,validation:!1,rules:o.a.formats.notEmpty,required:!0,type:"checkbox",dependency:"country_select"}},otpForm:{formValid:!1,otp:{value:"",tuched:!1,validation:!1,rules:o.a.formats.otpCode,required:!0}},showMsg:null},this.updateFieled=function(t,a){let r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"text",s={},n=t.target,l=Object.keys(e.state[a]);

1for(let c of l)if("object"===typeof e.state[a][c]){if(Array.isArray(e.state[a][c])?s[c]=e.state[a][c].slice():s[c]={...e.state[a][c]},n.name===c){s[c].value="select"===r?n.selectedOptions[0].value:"checkbox"===r?n.checked:n.value,s[c].tuched=!0;let t,a=s[c].required;if(a&&!s[c].value)t=!1;else{t=!0;let r=s[c].value;if("phone"===s[c].type){let n=o.a.formats.phonenumber.test(r);if("contact_number"===c&&(n=o.a.formats.phonenumberContact.test(r)),r.length>6&&n){let a=s[c].dependency,n=null;if(a)if("country"===s[a].type)n=N.a.Countries[s[a].value],s[a].iso=n.CountryCode.substring(1);else{let e=s[a].value;n=N.a.Countries[e],s[a].iso=n.CountryCode.substring(1)}else n=N.a.Countries.SA;if(n&&n.ISO_2Code){let a=e.phoneUtil.parse(r,n.ISO_2Code);t=e.phoneUtil.isValidNumber(a)}else t=o.a.formats.phonenumber.test(r)}else t=0===r.length&&!a}}s[c].validation=t}}else s[c]=e.state[a][c];let i=l.slice(1),p=!0;for(let e of i)p=s[e].required&&s[e].validation||!s[e].required&&s[e].tuched&&s[e].validation?p&&!0:s[e].required||s[e].tuched?p&&!1:p&&!0;s.formValid=p,e.setState({[a]:s})},this.mnpFormSubmit=()=>{l.a.keepMnpRequestInfo(this.state.form),this.setState({loading:!0}),l.a.requestMnpOtp().then(e=>{n.a.set("move_to_mnp_otp",!0),this.setState({loading:!1})}).catch(e=>{n.a.clear("mnp_info"),this.setState({loading:!1})}),n.a.set("choose_mnp",!0,!0)},this.otpFormSubmit=()=>{this.setState({loading:!0}),n.a.clear("promotionErrorStatus"),n.a.set("promotionErrorStatus",!0,!0),l.a.submitMnpRequestAndNext(this.state.otpForm).then(e=>{e?(n.a.clear("mnp_info"),n.a.clear("move_to_mnp_otp")):this.setState({otpError:!0,loading:!1,show_mnp_otp_form:!0}),n.a.clear("promotionErrorStatus")}).catch(()=>{n.a.clear("promotionErrorStatus"),this.setState({loading:!1})})},this.subscriptions=[],this.handleOtpForm=e=>{const t={...this.state};6===e.length?t.otpForm.formValid=!0:t.otpForm.formValid=!1,t.otpForm.otp.value=e,this.setState({state:t,otpError:!1})},this.handleChooseAgain=()=>{this.setState({show_mnp_otp_form:!1})},this.handleOtpError=e=>{this.setState({otpError:e})},this.handleClearError=()=>{this.setState({otpError:!1})}}componentWillUnmount(){if(this.subscriptions)for(let e of this.subscriptions)e.unsubscribe()}componentDidMount(){this.subscriptions.push(n.a.get_obsrv("move_to_mnp_otp").subscribe(e=>{this.setState({show_mnp_otp_form:e})})),n.a.get("mnp_info",!0)&&n.a.set("move_to_mnp_otp",!0)}render(){let e=s.a.createElement("div",null,s.a.createElement("div",{className:"left-column"},s.a.createElement("div",{className:"storefront-two-col-pg"},s.a.createElement("div",{className:"mnp-wrapper"},s.a.createElement(s.a.Fragment,null,this.state.show_mnp_otp_form?s.a.createElement(k,{updateFieled:this.updateFieled,state:this.state.otpForm,submit:this.otpFormSubmit,otpError:this.state.otpError,handleOtpForm:this.handleOtpForm,handleOtpError:this.handleOtpError,handleClearError:this.handleClearError}):s.a.createElement(E,{updateFieled:this.updateFieled,state:this.state.form,submit:this.mnpFormSubmit}))),s.a.createElement(C.a,null))));return this.state.loading&&(e=s.a.createElement(y.a,null)),this.state.showMsg&&(e=this.state.showMsg),e}}class x extends r.Component{constructor(){super(...arguments),this.subscriptions=[]}componentDidMount(){window.scrollTo({top:0,behavior:"smooth"}),this.subscriptions.push(i.a.getKeysObsrv().subscribe(e=>{this.forceUpdate()}))}render(){return s.a.createElement(O,null)}}}}]);
2//# sourceMappingURL=33.e9d290b2.chunk.js.map