@cleartrip/ct-platform-login-module 3.4.1 → 3.5.1-beta.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,2 +1,724 @@
|
|
|
1
|
-
"use strict";var e=require("tslib"),t=require("react/jsx-runtime"),i=require("react"),n=require("@cleartrip/ct-design-toast"),o=require("@cleartrip/ct-design-spacer"),a=require("@cleartrip/ct-platform-drawer"),r=require("@cleartrip/ct-design-theme"),l=require("@cleartrip/ct-platform-constants"),s=require("@cleartrip/ct-platform-utils"),c=require("@cleartrip/ct-design-field"),d=require("@cleartrip/ct-design-spinner"),_=require("@cleartrip/ct-design-typography"),u=require("@cleartrip/ct-design-alert-callout"),g=require("@cleartrip/ct-design-icons"),p=require("classnames"),m=require("@cleartrip/ct-design-button"),f=require("@cleartrip/ct-design-divider"),x=require("@cleartrip/ct-platform-assets"),v=require("swiper/react"),h=require("swiper");function N(e){return e&&e.__esModule?e:{default:e}}var A=N(p),C=N(h);function T(e,t){void 0===t&&(t={});var i=t.insertAt;if(e&&"undefined"!=typeof document){var n=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===i&&n.firstChild?n.insertBefore(o,n.firstChild):n.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}var E={mobileinput_footertext:"index-module_mobileinput_footertext__jPQ-g","mobileinput-seperator":"index-module_mobileinput-seperator__7Ewok",mobileinput_seperatortext:"index-module_mobileinput_seperatortext__-KDOp",slider_carousel_wrapper:"index-module_slider_carousel_wrapper__0SuGB",login_form:"index-module_login_form__tpSDz",nonUtilsSelector_toast:"index-module_nonUtilsSelector_toast__lvWmB",login_otp_error:"index-module_login_otp_error__o3y2L",login_otp_input:"index-module_login_otp_input__L-3P8",footer_text:"index-module_footer_text__nkeJv","swiper-custom-pagination":"index-module_swiper-custom-pagination__Ma1gV",otp_box_wrapper:"index-module_otp_box_wrapper__sM2Ba",otp_container:"index-module_otp_container__1CE4N",swiper:"index-module_swiper__r5-8U","swiper-slide":"index-module_swiper-slide__Zchn0"};T(".index-module_mobileinput_footertext__jPQ-g a{color:#0f6bff;text-decoration:none}.index-module_mobileinput-seperator__7Ewok{position:relative}.index-module_mobileinput_seperatortext__-KDOp{background:#fff;left:0;margin:0 auto;position:absolute;right:0;text-align:center;top:-10px;width:40px}.index-module_slider_carousel_wrapper__0SuGB{border-top-left-radius:16px;border-top-right-radius:16px;width:100dvw}.index-module_login_form__tpSDz{background-color:#fff;padding-left:16px;padding-right:16px}.index-module_nonUtilsSelector_toast__lvWmB{bottom:12px!important;margin-bottom:12px;margin:0 auto!important;padding:12px 16px!important;width:calc(100% - 48px)!important;z-index:2000}.index-module_login_otp_error__o3y2L{padding-top:4px}.index-module_login_otp_input__L-3P8{font-size:24px!important;font-style:normal;font-weight:600!important;height:56px!important;line-height:28px;padding:auto;text-align:center;width:56px!important}.index-module_footer_text__nkeJv{color:grey!important;font-size:12px!important}.index-module_swiper-custom-pagination__Ma1gV{--swiper-theme-color:#fff;--swiper-pagination-color:#fff;--swiper-pagination-bullet-inactive-color:#999;--swiper-pagination-bullet-inactive-opacity:1}.index-module_swiper-custom-pagination__Ma1gV *>span{height:6px;width:6px}.index-module_otp_box_wrapper__sM2Ba{margin-right:8px}.index-module_otp_container__1CE4N{display:flex;flex-direction:column;margin-top:24px}.index-module_swiper__r5-8U{height:100%;width:100%}.index-module_swiper__r5-8U .index-module_swiper-slide__Zchn0{height:auto}.index-module_swiper-slide__Zchn0 img{display:block;height:100%;object-fit:fill;width:100%}");var S="index-module_loader__container__VX-VO",b="index-module_three-dots-loader__i7R-R";T('.index-module_loader__container__VX-VO{align-items:center;background:#fff;border-radius:32px;box-shadow:0 8px 24px 0 rgba(26,26,26,.1);display:flex;height:34px;justify-content:center;left:50%;padding:12px;position:absolute;top:50%;transform:translate(-50%,-50%);width:66px}.index-module_loader__container__VX-VO .index-module_three-dots-loader__i7R-R{animation:index-module_three-dots-loader__i7R-R 1s linear infinite alternate;animation-delay:.5s;background-color:#1a1a1a;border-radius:5px;height:8px;position:relative;width:8px}.index-module_loader__container__VX-VO .index-module_three-dots-loader__i7R-R:after,.index-module_loader__container__VX-VO .index-module_three-dots-loader__i7R-R:before{content:"";display:inline-block;position:absolute;top:0}.index-module_loader__container__VX-VO .index-module_three-dots-loader__i7R-R:before{animation:index-module_three-dots-loader__i7R-R 1s infinite alternate;animation-delay:0s;background-color:#1a1a1a;border-radius:5px;height:8px;left:-15px;width:8px}.index-module_loader__container__VX-VO .index-module_three-dots-loader__i7R-R:after{animation:index-module_three-dots-loader__i7R-R 1s infinite alternate;animation-delay:1s;background-color:#1a1a1a;border-radius:5px;height:8px;left:15px;width:8px}@keyframes index-module_three-dots-loader__i7R-R{0%{background-color:#1a1a1a}50%,to{background-color:grey}}');var O,y=function(){return t.jsx("div",e.__assign({className:S},{children:t.jsx("div",{className:b})}))};!function(e){e[e.DETECTING=0]="DETECTING",e[e.FAILED=1]="FAILED",e[e.DETECTED=2]="DETECTED"}(O||(O={}));var w=function(n){var a=n.mobileNumber,r=n.errorCallout,p=n.ravenPayload,m=n.otpInputHeight,f=n.skipProfileFlow,x=n.otpResendDisabled,v=n.hotelsLoyaltyFlow,h=n.getOTP,N=n.setCtaDisabled,A=n.setErrorCallout,C=n.setMobileNumber,T=n.setShowMobilePage,S=n.handleLoginSuccess,b=n.handleLoginFailure,w=i.useRef(Array(4).fill(null)),I=i.useState(O.DETECTING),j=I[0],D=I[1],P=i.useState(l.LOGIN_CONSTANTS.OTP_COUNTDOWN),k=P[0],R=P[1],F=i.useState(""),G=F[0],L=F[1],B=i.useState(!0),Q=B[0],U=B[1],q=i.useState(!1),X=q[0],M=q[1],V=i.useState(""),z=V[0],K=V[1],J=i.useState(!0),W=J[0],Z=J[1],H=i.useState(!1),Y=H[0],$=H[1],ee=i.useRef(),te=i.useRef(),ie="CT";i.useEffect((function(){ne();var t=s.getRavenEventProps();s.ravenSDKTrigger("u_login_click",e.__assign({action_name:"login_otp_screen_opened",login_form:null==t?void 0:t.loginForm,login_type:"native",vertical:null==t?void 0:t.vertical,page_name:null==t?void 0:t.pageName},p))}),[]),i.useEffect((function(){s.isIOSApp()&&Z(!1)}),[]),i.useEffect((function(){ne()}),[]),i.useEffect((function(){Y||(w.current[0].focus(),w.current[0].click())}),[Y]),i.useEffect((function(){0===k&&U(!1)}),[k]),i.useEffect((function(){var e;return Q&&k>0&&(e=setInterval((function(){R((function(e){return e-1}))}),1e3)),function(){clearInterval(e)}}),[Q,k]);var ne=i.useCallback((function(){return e.__awaiter(void 0,void 0,void 0,(function(){var t;return e.__generator(this,(function(e){switch(e.label){case 0:return e.trys.push([0,2,,3]),[4,s.autoReadOtp()];case 1:return t=e.sent(),L(t),D(O.DETECTED),(null==t?void 0:t.length)===l.LOGIN_CONSTANTS.OTP_LENGTH&&ae&&ae(t,!0),[3,3];case 2:return"NOT_SUPPORTED"===e.sent()&&Z(!1),[3,3];case 3:return[2]}}))}))}),[W]),oe=i.useCallback((function(t){var i=s.getRavenEventProps();s.ravenSDKTrigger("u_login_error",e.__assign({action_name:"otp_incorrect",login_form:null==i?void 0:i.loginForm,login_type:"native",vertical:null==i?void 0:i.vertical,page_name:null==i?void 0:i.pageName},p));var n=null==t?void 0:t.message;"OTP_VALIDATE_LIMIT_EXCEEDED"!==n&&L(""),w.current[0].focus(),w.current[0].click();var o=l.LOGIN_CONSTANTS[n],a="string"==typeof o?o:l.LOGIN_CONSTANTS.INVALID_OTP;K(a)}),[w]),ae=i.useCallback((function(t,i){return e.__awaiter(void 0,void 0,void 0,(function(){var n,o,r,c,d;return e.__generator(this,(function(_){switch(_.label){case 0:return _.trys.push([0,2,,3]),n=s.getRavenEventProps(),s.ravenSDKTrigger("u_login_click",e.__assign({action_name:"otp_entered",login_form:null==n?void 0:n.loginForm,login_type:"native",entry_type:i?"autodetected":"manual_entry",vertical:null==n?void 0:n.vertical,page_name:null==n?void 0:n.pageName},p)),t===ee.current&&te.current&&te.current-Date.now()<=100?[2]:(ee.current=t,te.current=Date.now(),v&&$(!0),[4,s.validateOtp(a,t)]);case 1:return o=_.sent(),r=o.status,c=o.action,200!==Number(r)||s.isEmpty(c)?(v&&$(!1),b(ie)):(M(!0),K(""),s.updateNativeOnLogin(),"SIGNUP"===c?(f||(window.location.href=l.NAVIGATION_ROUTES.PERSONAL_DETAILS+"?onboardingFlow=true"),S(ie,!0)):S(ie)),[3,3];case 2:return d=_.sent(),v&&$(!1),b(ie),oe(d),[3,3];case 3:return[2]}}))}))}),[ee,te,M,D,K,oe]),re=function(){return e.__awaiter(void 0,void 0,void 0,(function(){var t,i,n,o,a;return e.__generator(this,(function(e){switch(e.label){case 0:return[4,navigator.clipboard.readText()];case 1:return(t=e.sent())&&s.isNumeric(t)&&(i=t.slice(0,l.LOGIN_CONSTANTS.OTP_LENGTH).split(""),null===(o=w.current[l.LOGIN_CONSTANTS.OTP_LENGTH-1])||void 0===o||o.focus(),null===(a=w.current[l.LOGIN_CONSTANTS.OTP_LENGTH-1])||void 0===a||a.click(),n=i.join(""),L(n),n.length===l.LOGIN_CONSTANTS.OTP_LENGTH&&ae(n,!1)),[2]}}))}))},le=i.useCallback((function(e,t){var i,n;A(""),""!==e.target.value&&t<w.current.length-1&&(null===(i=w.current[t+1])||void 0===i||i.focus(),null===(n=w.current[t+1])||void 0===n||n.click());var o=w.current.map((function(e){return s.isHTMLInputElement(e)?e.value:""})).join("").slice(0,4);L(o),o.length===l.LOGIN_CONSTANTS.OTP_LENGTH&&ae(o,!1)}),[L,ae]),se=i.useCallback((function(e,t){var i,n,o;"Backspace"===e.key&&t>0&&""===(null===(i=w.current[t])||void 0===i?void 0:i.value)&&(e.preventDefault(),null===(n=w.current[t-1])||void 0===n||n.focus(),null===(o=w.current[t-1])||void 0===o||o.click())}),[w]),ce=i.useCallback((function(){R(l.LOGIN_CONSTANTS.OTP_COUNTDOWN),U(!0),h(a);var t=s.getRavenEventProps();s.ravenSDKTrigger("u_login_error",e.__assign({action_name:"resend_otp_clicked",login_form:null==t?void 0:t.loginForm,login_type:"native",vertical:null==t?void 0:t.vertical,page_name:null==t?void 0:t.pageName},p))}),[R,U]),de=i.useCallback((function(){N(!0),T(!0),C("")}),[T]);return t.jsxs("div",e.__assign({className:"flex flex-column bg-neutral-100",style:{height:m}},{children:[r&&t.jsx(u.AlertCallout,{variant:"error",textNode:r,prefixIconNode:t.jsx(g.InfoIcon,{fill:"red"}),style:{color:"#ffff",backgroundColor:"#db201e"},className:"fs-12"}),t.jsxs("div",e.__assign({className:"flex flex-bottom"},{children:[t.jsxs(_.Typography,e.__assign({variant:"HM1",color:"heading"},{children:[l.LOGIN_CONSTANTS.OTP_TEXT," ",t.jsx("br",{}),a]})),t.jsx("div",e.__assign({className:"pl-2",onClick:de},{children:t.jsx(g.Edit,{})}))]})),t.jsxs("div",e.__assign({className:E.otp_container},{children:[t.jsxs("div",e.__assign({className:"flex",style:v?{width:"max-content",position:"relative"}:{}},{children:[e.__spreadArray([],Array(l.LOGIN_CONSTANTS.OTP_LENGTH),!0).map((function(i,n){return t.jsx("div",e.__assign({className:E.otp_box_wrapper},{children:t.jsx(c.FieldV2,{prompt:{hasError:!!z},type:"number",placeholder:"",value:G[n],max:1,inputMode:"numeric",className:E.login_otp_input,variant:"md",ref:function(e){e&&(w.current[n]=e)},onKeyDown:function(e){return se(e,n)},onChange:function(e){return le(e,n)},onPaste:re,autoFocus:0===n,disabled:!(!v||!Y)})}),n)})),v&&Y&&t.jsx(y,{})]})),!!z&&t.jsx(_.Typography,e.__assign({variant:"P1",color:"warning",className:E.login_otp_error},{children:z}))]})),t.jsx(o.Spacer,{className:"pt-2"}),j===O.DETECTING&&!X&&W&&k>l.LOGIN_CONSTANTS.RESEND_OTP_COUNTDOWN&&t.jsxs("div",e.__assign({className:"flex flex-middle"},{children:[t.jsx(d.Spinner,{width:"20px",height:"20px",borderColor:"#11a670",className:"bg-neutral-900 bc-black"}),t.jsx(_.Typography,e.__assign({variant:"B3",className:"fs-12 fw-500 ml-1 c-neutral-700"},{children:l.LOGIN_CONSTANTS.AUTO_DETECTING_TEXT}))]})),j===O.DETECTING&&k<=l.LOGIN_CONSTANTS.RESEND_OTP_COUNTDOWN&&W&&!X&&t.jsx(t.Fragment,{children:t.jsxs("div",e.__assign({className:"flex"},{children:[t.jsx(_.Typography,e.__assign({variant:"B3",className:"fs-12 fw-500 c-neutral-700 "},{children:l.LOGIN_CONSTANTS.OTP_RESEND_TEXT})),t.jsx(o.Spacer,{className:"ml-1"}),x?t.jsx(_.Typography,e.__assign({className:"color-neutral-200 fw-500",variant:"B3"},{children:l.LOGIN_CONSTANTS.RESEND_CTA})):t.jsxs(t.Fragment,{children:[0===k&&t.jsx(t.Fragment,{children:t.jsx(_.Typography,e.__assign({isClickable:!0,variant:"B3",onClick:ce,color:"link",className:"\n fs-12 fw-500 c-pointer"},{children:l.LOGIN_CONSTANTS.RESEND_CTA}))}),k>0&&t.jsx(_.Typography,e.__assign({color:"disabled",variant:"B3"},{children:" Resend ("+k+"s)"}))]})]}))}),!z&&X&&t.jsx(t.Fragment,{children:t.jsxs("div",e.__assign({className:"flex flex-middle"},{children:[t.jsx(g.CheckCircle,{}),t.jsx(_.Typography,e.__assign({variant:"P1",color:"success",className:"fs-12"},{children:j===O.DETECTED?l.LOGIN_CONSTANTS.AUTO_DETECTED_TEXT:l.LOGIN_CONSTANTS.VERIFIED_MESSAGE}))]}))}),t.jsx(o.Spacer,{className:"mt-24"})]}))},I={loader:"index-module_loader__63LeU","With-full-opacity":"index-module_With-full-opacity__ZSY-U",loader__content:"index-module_loader__content__Q6kJl",loader__spinner:"index-module_loader__spinner__6B3AR","loader-rotate":"index-module_loader-rotate__efcf3",loader__heading:"index-module_loader__heading__7YZ3N",loader__text:"index-module_loader__text__1QcLi"};T(".index-module_loader__63LeU{align-items:center;background-color:hsla(0,0%,100%,.95);bottom:0;display:flex;justify-content:center;left:0;position:fixed;right:0;top:0;z-index:0}.index-module_loader__63LeU.index-module_With-full-opacity__ZSY-U{background-color:#fff}.index-module_loader__content__Q6kJl{max-width:280px;text-align:center}.index-module_loader__spinner__6B3AR{animation:index-module_loader-rotate__efcf3 .8s linear infinite;border:2px solid rgba(51,102,204,.3);border-radius:50%;border-top-color:#36c;display:inline-block;height:30px;margin-bottom:10px;position:relative;width:30px}.index-module_loader__heading__7YZ3N{color:#000;font-size:18px;font-weight:600;margin-bottom:5px}.index-module_loader__text__1QcLi{color:rgba(0,0,0,.8);font-size:16px;line-height:1.5}");var j=function(i){var n=i.title,o=i.message,a=i.className;return t.jsx("div",e.__assign({className:"".concat(I.utilswrapper," utilswrapper")},{children:t.jsx("div",e.__assign({className:A.default(I.loader,a)},{children:t.jsxs("div",e.__assign({className:I.loader__content},{children:[t.jsx("div",{className:I.loader__spinner}),t.jsx("h5",e.__assign({className:I.loader__heading},{children:n})),t.jsx("p",e.__assign({className:I.loader__text},{children:o}))]}))}))}))},D=function(n){var o=n.sendingOtp,a=n.ctaDisabled,r=n.getOTP,d=n.setErrorCallout,p=n.errorCallout,v=n.mobileNumber,h=n.setMobileInputHeight,N=n.setMobileNumber,A=n.fallbackUri,C=n.skipProfileFlow,T=n.currentPageUri,S=n.ravenPayload,b=n.hotelsLoyaltyFlow,O=i.useState(s.isFKSSOEnabled)[0],y=i.useState(!1),w=y[0],I=y[1],j=i.useRef(null),D=i.useRef(null);i.useEffect((function(){if(D.current){var e=D.current.clientHeight;h(e)}}),[D.current]),i.useEffect((function(){var e;return j.current&&(e=setTimeout((function(){var e;null===(e=j.current)||void 0===e||e.focus()}),100)),function(){clearTimeout(e)}}),[]),i.useEffect((function(){s.isAndroidApp()&&R()}),[]);var P=i.useCallback((function(){return e.__awaiter(void 0,void 0,void 0,(function(){var t,i;return e.__generator(this,(function(n){switch(n.label){case 0:return n.trys.push([0,2,,3]),t=s.getRavenEventProps(),s.ravenSDKTrigger("u_login_click",e.__assign({action_name:"login_with_flipkart_clicked",login_form:null==t?void 0:t.loginForm,login_type:"fk_sso",vertical:null==t?void 0:t.vertical,page_name:null==t?void 0:t.pageName},S)),I(!0),[4,s.handleFKSSO(A,C?T:l.NAVIGATION_ROUTES.PERSONAL_DETAILS+"?onboardingFlow=true",T)];case 1:return i=n.sent(),b||I(!1),s.isPwa()&&(window.location.href=i),[3,3];case 2:return n.sent(),I(!1),[3,3];case 3:return[2]}}))}))}),[]),k=i.useCallback((function(t,i){void 0===i&&(i=!1),d("");var n=t.target.value||"";if(n=n.replace(s.MULTI_SPACE," ").trimStart(),N(n),s.isValidMobileNumber(t.target.value)){r(n);var o=s.getRavenEventProps();s.ravenSDKTrigger("u_login_click",e.__assign({action_name:"get_otp_clicked",login_form:null==o?void 0:o.loginForm,login_type:"native",entry_type:"auto_click",vertical:null==o?void 0:o.vertical,page_name:null==o?void 0:o.pageName},S)),i?s.ravenSDKTrigger("u_login_click",e.__assign({action_name:"phone_number_autodetected",login_form:null==o?void 0:o.loginForm,login_type:"native",entry_type:"autodetected",vertical:null==o?void 0:o.vertical,page_name:null==o?void 0:o.pageName},S)):s.ravenSDKTrigger("u_login_click",e.__assign({action_name:"phone_number_entered",login_form:null==o?void 0:o.loginForm,login_type:"native",entry_type:"manual_entry",vertical:null==o?void 0:o.vertical,page_name:null==o?void 0:o.pageName},S))}}),[N]),R=i.useCallback((function(){return e.__awaiter(void 0,void 0,void 0,(function(){var t,i;return e.__generator(this,(function(e){switch(e.label){case 0:return[4,s.showMobileNumberHint()];case 1:return t=e.sent(),i={target:{value:t}},t&&k(i,!0),[2]}}))}))}),[k]),F=i.useCallback((function(){var t=s.getRavenEventProps();s.ravenSDKTrigger("u_login_click",e.__assign({action_name:"policy_click",login_form:null==t?void 0:t.loginForm,login_type:"native",vertical:null==t?void 0:t.vertical,page_name:null==t?void 0:t.pageName},S)),window.location.href=l.NAVIGATION_ROUTES.PRIVACY_POLICY}),[]),G=i.useCallback((function(){var t=s.getRavenEventProps();s.ravenSDKTrigger("u_login_click",e.__assign({action_name:"tnc_click",login_form:null==t?void 0:t.loginForm,login_type:"native",vertical:null==t?void 0:t.vertical,page_name:null==t?void 0:t.pageName},S)),window.location.href=l.NAVIGATION_ROUTES.TERMS}),[]);return t.jsxs("div",e.__assign({className:"flex flex-column",ref:D},{children:[p&&t.jsx(u.AlertCallout,{variant:"error",textNode:p,prefixIconNode:t.jsx(g.InfoIcon,{fill:"red"}),style:{color:"#ffff",backgroundColor:"#db201e"},className:"fs-12"}),t.jsx(_.Typography,e.__assign({variant:"HM1",color:"heading",className:"mb-4 fs-24"},{children:l.LOGIN_CONSTANTS.LOGIN_TO_CT})),t.jsx("label",e.__assign({style:{visibility:"hidden",width:"0.1px",height:"0.1px"},htmlFor:"phonenumber"},{children:"Phone number"})),t.jsx(c.PhoneField,{onChange:k,value:v,name:"phonenumber",placeholder:"",inputMode:"numeric",ref:j,min:0,max:10,autoFocus:!0,countryCode:l.LOGIN_CONSTANTS.COUNTRY_CODE}),t.jsx(m.Button,e.__assign({color:"primary",size:"medium",minWidth:"160px",disabled:a,loading:o,className:"my-6",onClick:function(){return r(v)}},{children:l.LOGIN_CONSTANTS.GET_OTP})),O&&t.jsxs(t.Fragment,{children:[t.jsxs("div",e.__assign({className:"my-6 p-relative"},{children:[t.jsx(f.Divider,{}),t.jsx("span",e.__assign({className:"".concat(E.mobileinput_seperatortext)},{children:"or"}))]})),t.jsx(m.Button,e.__assign({variant:"outline",size:"medium",className:"my-6",loading:w,onClick:P,showLeftIcon:!w,LeftIcon:t.jsx("img",{src:x.FlipkartLogo})},{children:l.LOGIN_CONSTANTS.FK_LOGIN_CTA}))]}),t.jsxs("div",e.__assign({className:"pt-8 pb-6"},{children:[t.jsx(f.Divider,{}),t.jsxs("div",e.__assign({className:"flex flex-middle \n flex-center flex-wrap pt-2"},{children:[t.jsx(_.Typography,e.__assign({variant:"P1",className:E.footer_text},{children:l.LOGIN_CONSTANTS.FOOTER_TEXT})),t.jsx(_.Typography,e.__assign({variant:"P1",color:"link",className:"pl-1 fs-12",isClickable:!0,onClick:F},{children:l.LOGIN_CONSTANTS.PRIVACY_CTA})),t.jsx(_.Typography,e.__assign({className:"px-1 fs-12 c-neutral-700",variant:"P1"},{children:"& "})),t.jsx(_.Typography,e.__assign({variant:"P1",color:"link",isClickable:!0,onClick:G,className:"fs-12"},{children:l.LOGIN_CONSTANTS.TNC_CTA}))]}))]}))]}))};const P="data:image/png;base64,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",k=[{src:"https://fastui.cltpstatic.com/image/upload/offermgmt/images/carousel1.png",placeholder:P},{src:"https://fastui.cltpstatic.com/image/upload/offermgmt/images/carousel2.png",placeholder:P},{src:"https://fastui.cltpstatic.com/image/upload/offermgmt/images/carousel3.png",placeholder:P}];var R=function(n){var o=n.src,a=n.placeholderSrc,r=n.onLoad,l=e.__rest(n,["src","placeholderSrc","onLoad"]),s=i.useState(a||o),c=s[0],d=s[1],_=i.useRef(r);return i.useEffect((function(){_.current=r}),[r]),i.useEffect((function(){var e=new Image;e.onload=function(){d(o),_.current&&_.current()},e.src=o}),[o]),t.jsx("img",e.__assign({src:c},l))},F="index-module_slides__container__9XVd4",G="index-module_slides__container--imageContainer__q0RuP";T(".index-module_slides__container__9XVd4{align-items:center;box-sizing:border-box;display:flex;gap:1.5rem;height:197px;justify-content:center;width:100%}.index-module_slides__container--imageContainer__q0RuP{align-self:flex-start;margin-top:2rem;width:128px}");var L=function(i){var n=i.textData,o=i.bgColor,a=i.imageUrl,r=i.altText;return t.jsxs("div",e.__assign({className:F,style:{backgroundColor:o}},{children:[t.jsx("div",e.__assign({className:G},{children:t.jsx(R,{width:128,height:128,alt:r,src:a})})),t.jsx("div",{children:null==n?void 0:n.map((function(i,n){return t.jsx(_.Typography,e.__assign({variant:_.TypographyVariant.HM2,style:{color:i.textColor,lineHeight:"24px"}},{children:i.text}),n)}))})]}))},B=function(){return[t.jsx(L,{bgColor:"#4F8EF0",imageUrl:"https://fastui.cltpstatic.com/image/upload/f_auto,q_auto,w_128,h_128,dpr_2/offermgmt/images/banner/Login%20Frame.png",altText:"Dhonicampaign_icon",textData:[{text:"Use code CTMAHI",textColor:"#fff"},{text:"& get flat 777 off,",textColor:"#fff"},{text:"on your first",textColor:"#032529"},{text:"flight booking",textColor:"#032529"}]},1),t.jsx(L,{bgColor:"#FF8D71",imageUrl:"https://fastui.cltpstatic.com/image/upload/f_auto,w_128,h_128,dpr_2/offermgmt/images/loginSheetMyntra.webp",altText:"loyality_benefits_icon",textData:[{text:"Loyalty benefits",textColor:"#fff"},{text:"and discounts",textColor:"#fff"},{text:"for Flipkart and",textColor:"#331005"},{text:"Myntra members",textColor:"#331005"}]},2),t.jsx(L,{bgColor:"#FFC142",imageUrl:"https://fastui.cltpstatic.com/image/upload/f_auto,w_128,h_128,dpr_2/offermgmt/images/loginSheetCoupon.webp",altText:"CTLogin_icon",textData:[{text:"Flat 25% off",textColor:"#fff"},{text:"on your first",textColor:"#fff"},{text:"hotel booking",textColor:"#fff"},{text:"Code: CTMAHI",textColor:"#332504"}]},3),t.jsx(L,{bgColor:"#61C149",imageUrl:"https://fastui.cltpstatic.com/image/upload/f_auto,w_128,h_128,dpr_2/offermgmt/images/loginSheetWallet.webp",altText:"EarnAndRedeem_icon",textData:[{text:"Earn and",textColor:"#fff"},{text:"redeem up to",textColor:"#fff"},{text:"650 Flipkart",textColor:"#13270F"},{text:"Supercoins",textColor:"#13270F"}]},4)]};C.default.use([h.Autoplay,h.Navigation,h.Pagination]);var Q=function(n){var o=n.customSlides,a=n.carouselImages,r=i.useMemo((function(){return s.isEmpty(a)?k:a}),[a]);return t.jsx("div",e.__assign({className:" o-hidden p-relative ".concat(E.slider_carousel_wrapper)},{children:t.jsx(v.Swiper,e.__assign({autoplay:!0,slidesPerView:1,navigation:!1,loop:!0,pagination:{clickable:!0},className:"".concat(E.swiper," ").concat(E["swiper-custom-pagination"]),lazy:{loadPrevNextAmount:1}},{children:a&&a.length>0?null==r?void 0:r.map((function(i,n){return t.jsx(v.SwiperSlide,e.__assign({className:E["swiper-slide"]},{children:t.jsx(t.Fragment,{children:n<1?t.jsx(R,{src:i.src,placeholderSrc:i.placeholder,alt:"Slide ".concat(n+1),rel:"preload",fetchPriority:"high"}):t.jsx(R,{src:i.src,placeholderSrc:i.placeholder,alt:"Slide ".concat(n+1),loading:"lazy",className:"lazy"})})}),n)})):o&&o.length>0?null==o?void 0:o.map((function(i,n){return t.jsx(v.SwiperSlide,e.__assign({className:E["swiper-slide"]},{children:i}),n)})):B().length&&B().map((function(i,n){return t.jsx(v.SwiperSlide,e.__assign({className:E["swiper-slide"]},{children:i}),n)}))}))}))};exports.LoginModule=function(c){var d=c.fallbackUri,_=c.isDrawerOpen,u=c.skipProfileFlow,g=c.showCarousel,p=void 0===g||g,m=c.ravenPayload,f=void 0===m?{}:m,x=c.handleLoginClose,v=c.onAuthSuccess,h=c.onAuthFailure,N=c.customSlides,A=c.carouselImages,C=void 0===A?[]:A,T=c.hotelsLoyaltyFlow,S=void 0!==T&&T,b=c.closeOnOutsideClick,O=void 0!==b&&b,y=c.sendUserInsights,I=void 0===y||y,P=i.useState(!0),k=P[0],R=P[1],F=i.useState(!0),G=F[0],L=F[1],B=i.useState(!1),U=B[0],q=B[1],X=i.useState(_),M=X[0],V=X[1],z=i.useState(""),K=z[0],J=z[1],W=i.useState(0),Z=W[0],H=W[1],Y=i.useState(!1),$=Y[0],ee=Y[1],te=i.useState(""),ie=te[0],ne=te[1],oe=i.useState(!1),ae=oe[0],re=oe[1],le=i.useState(!1),se=le[0],ce=le[1],de=i.useState((function(){return s.getCurrentPathName()}))[0],_e=function(){ce(!0)};i.useEffect((function(){window&&(window.showSigninLoaderScreen=_e);var e=s.getQueryParam("fkSSOstatus"),t="FK";"signin"===e&&(s.isAndroidApp()&&s.updateNativeAndroidOnSignIn(),ge(t)),"signup"===e&&(s.isAndroidApp()&&s.updateNativeAndroidOnSignIn(),ge(t,!0)),"failure"===e&&pe(t)}),[]);var ue=i.useCallback((function(t){return e.__awaiter(void 0,void 0,void 0,(function(){var i,n,o,a;return e.__generator(this,(function(e){switch(e.label){case 0:return e.trys.push([0,2,,3]),L(!1),q(!0),s.triggerOTPListener(),[4,s.sendLoginOtp(t)];case 1:return i=e.sent(),"SUCCESS"===(i||{}).status&&(R(!1),q(!1)),[3,3];case 2:return n=e.sent(),console.error(n),o=(n||{}).message,q(!1),a=o&&l.LOGIN_CONSTANTS[o],ne(String(a||l.LOGIN_CONSTANTS.GENERIC_ERROR_MESSAGE)),"OTP_SEND_LIMIT_EXCEEDED"===o&&ee(!0),[3,3];case 3:return[2]}}))}))}),[k,R]),ge=i.useCallback((function(t,i){var n=s.getRavenEventProps(),o=e.__assign({action_name:"login_successful",login_form:null==n?void 0:n.loginForm,login_type:"native",login_new:i?"sign_up":"sign_in",vertical:null==n?void 0:n.vertical,page_name:null==n?void 0:n.pageName},f);I?s.sendEventWithUserInsights("u_login_success",o):s.ravenSDKTrigger("u_login_success",o),S?v(me):(v(),i&&!u||(me(),re(!0)))}),[f,u,S,I]),pe=i.useCallback((function(e){h(e)}),[]),me=function(t){null==t||t.stopPropagation(),V(!1),J(""),L(!0);var i=s.getRavenEventProps();s.ravenSDKTrigger("u_login_click",e.__assign({action_name:"login_prompt_dismissed",login_form:null==i?void 0:i.loginForm,login_type:"native",vertical:null==i?void 0:i.vertical,page_name:null==i?void 0:i.pageName},f)),x&&"function"==typeof x&&x()};return i.useEffect((function(){if(_){R(!0),V(!0);var t=s.getRavenEventProps();s.ravenSDKTrigger("u_login_popup",e.__assign({action_name:"login_prompt_opened",login_form:null==t?void 0:t.loginForm,login_type:"native",vertical:null==t?void 0:t.vertical,page_name:null==t?void 0:t.pageName},f))}else V(!1)}),[_]),t.jsx(r.ThemeProvider,{children:t.jsxs(t.Fragment,{children:[t.jsx(a.Drawer,e.__assign({direction:"bottom",isOpen:M,showClose:!0,overlay:!0,handleClose:me,onClose:function(){},closeOnOutsideClick:O},{children:t.jsx("div",e.__assign({className:"".concat(E.utilswrapper," utilswrapper")},{children:t.jsxs("div",e.__assign({style:{maxHeight:"calc(100dvh - 60px)",overflowY:"auto",borderRadius:"16px 16px 0 0"}},{children:[p&&t.jsx(Q,{customSlides:N,carouselImages:C}),t.jsxs("div",e.__assign({className:E.login_form},{children:[t.jsx("div",{children:t.jsx(o.Spacer,{className:"pt-6"})}),k?t.jsx(D,{device:"PWA",ctaDisabled:G,sendingOtp:U,getOTP:ue,mobileNumber:K,setMobileNumber:J,setMobileInputHeight:H,fallbackUri:d,skipProfileFlow:u,currentPageUri:de,setErrorCallout:ne,errorCallout:ie,ravenPayload:f,hotelsLoyaltyFlow:S}):t.jsx(w,{mobileNumber:K,getOTP:ue,setCtaDisabled:L,setShowMobilePage:R,handleLoginSuccess:ge,handleLoginFailure:pe,otpInputHeight:Z,setMobileNumber:J,setErrorCallout:ne,errorCallout:ie,otpResendDisabled:$,ravenPayload:f,skipProfileFlow:u,hotelsLoyaltyFlow:S})]}))]}))}))})),ae&&t.jsx(n.Toast,{text:"Logged in successfully!",show:ae,className:"".concat(E.nonUtilsSelector_toast),closeTimeout:2e3}),se&&t.jsx(j,{title:"Please wait",message:"Signing in...",className:"z-10 bg-white"})]})})};
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var tslib = require('tslib');
|
|
4
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
5
|
+
var react = require('react');
|
|
6
|
+
var ctDesignToast = require('@cleartrip/ct-design-toast');
|
|
7
|
+
var ctDesignSpacer = require('@cleartrip/ct-design-spacer');
|
|
8
|
+
var ctPlatformDrawer = require('@cleartrip/ct-platform-drawer');
|
|
9
|
+
var ctDesignTheme = require('@cleartrip/ct-design-theme');
|
|
10
|
+
var ctPlatformConstants = require('@cleartrip/ct-platform-constants');
|
|
11
|
+
var ctPlatformUtils = require('@cleartrip/ct-platform-utils');
|
|
12
|
+
var ctDesignField = require('@cleartrip/ct-design-field');
|
|
13
|
+
var ctDesignSpinner = require('@cleartrip/ct-design-spinner');
|
|
14
|
+
var ctDesignTypography = require('@cleartrip/ct-design-typography');
|
|
15
|
+
var ctDesignAlertCallout = require('@cleartrip/ct-design-alert-callout');
|
|
16
|
+
var ctDesignIcons = require('@cleartrip/ct-design-icons');
|
|
17
|
+
var classNames = require('classnames');
|
|
18
|
+
var ctDesignButton = require('@cleartrip/ct-design-button');
|
|
19
|
+
var ctDesignDivider = require('@cleartrip/ct-design-divider');
|
|
20
|
+
var ctPlatformAssets = require('@cleartrip/ct-platform-assets');
|
|
21
|
+
var react$1 = require('swiper/react');
|
|
22
|
+
var SwiperCore = require('swiper');
|
|
23
|
+
|
|
24
|
+
function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
|
|
25
|
+
|
|
26
|
+
var classNames__default = /*#__PURE__*/_interopDefault(classNames);
|
|
27
|
+
var SwiperCore__default = /*#__PURE__*/_interopDefault(SwiperCore);
|
|
28
|
+
|
|
29
|
+
function styleInject(css, ref) {
|
|
30
|
+
if (ref === void 0) ref = {};
|
|
31
|
+
var insertAt = ref.insertAt;
|
|
32
|
+
if (!css || typeof document === 'undefined') {
|
|
33
|
+
return;
|
|
34
|
+
}
|
|
35
|
+
var head = document.head || document.getElementsByTagName('head')[0];
|
|
36
|
+
var style = document.createElement('style');
|
|
37
|
+
style.type = 'text/css';
|
|
38
|
+
if (insertAt === 'top') {
|
|
39
|
+
if (head.firstChild) {
|
|
40
|
+
head.insertBefore(style, head.firstChild);
|
|
41
|
+
} else {
|
|
42
|
+
head.appendChild(style);
|
|
43
|
+
}
|
|
44
|
+
} else {
|
|
45
|
+
head.appendChild(style);
|
|
46
|
+
}
|
|
47
|
+
if (style.styleSheet) {
|
|
48
|
+
style.styleSheet.cssText = css;
|
|
49
|
+
} else {
|
|
50
|
+
style.appendChild(document.createTextNode(css));
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
var css_248z$3 = ".index-module_mobileinput_footertext__jPQ-g a{color:#0f6bff;text-decoration:none}.index-module_mobileinput-seperator__7Ewok{position:relative}.index-module_mobileinput_seperatortext__-KDOp{background:#fff;left:0;margin:0 auto;position:absolute;right:0;text-align:center;top:-10px;width:40px}.index-module_slider_carousel_wrapper__0SuGB{border-top-left-radius:16px;border-top-right-radius:16px;width:100dvw}.index-module_login_form__tpSDz{background-color:#fff;padding-left:16px;padding-right:16px}.index-module_nonUtilsSelector_toast__lvWmB{bottom:12px!important;margin-bottom:12px;margin:0 auto!important;padding:12px 16px!important;width:calc(100% - 48px)!important;z-index:2000}.index-module_login_otp_error__o3y2L{padding-top:4px}.index-module_login_otp_input__L-3P8{font-size:24px!important;font-style:normal;font-weight:600!important;height:56px!important;line-height:28px;padding:auto;text-align:center;width:56px!important}.index-module_footer_text__nkeJv{color:grey!important;font-size:12px!important}.index-module_swiper-custom-pagination__Ma1gV{--swiper-theme-color:#fff;--swiper-pagination-color:#fff;--swiper-pagination-bullet-inactive-color:#999;--swiper-pagination-bullet-inactive-opacity:1}.index-module_swiper-custom-pagination__Ma1gV *>span{height:6px;width:6px}.index-module_otp_box_wrapper__sM2Ba{margin-right:8px}.index-module_otp_container__1CE4N{display:flex;flex-direction:column;margin-top:24px}.index-module_swiper__r5-8U{height:100%;width:100%}.index-module_swiper__r5-8U .index-module_swiper-slide__Zchn0{height:auto}.index-module_swiper-slide__Zchn0 img{display:block;height:100%;object-fit:fill;width:100%}";
|
|
55
|
+
var styles$1 = {"mobileinput_footertext":"index-module_mobileinput_footertext__jPQ-g","mobileinput-seperator":"index-module_mobileinput-seperator__7Ewok","mobileinput_seperatortext":"index-module_mobileinput_seperatortext__-KDOp","slider_carousel_wrapper":"index-module_slider_carousel_wrapper__0SuGB","login_form":"index-module_login_form__tpSDz","nonUtilsSelector_toast":"index-module_nonUtilsSelector_toast__lvWmB","login_otp_error":"index-module_login_otp_error__o3y2L","login_otp_input":"index-module_login_otp_input__L-3P8","footer_text":"index-module_footer_text__nkeJv","swiper-custom-pagination":"index-module_swiper-custom-pagination__Ma1gV","otp_box_wrapper":"index-module_otp_box_wrapper__sM2Ba","otp_container":"index-module_otp_container__1CE4N","swiper":"index-module_swiper__r5-8U","swiper-slide":"index-module_swiper-slide__Zchn0"};
|
|
56
|
+
styleInject(css_248z$3);
|
|
57
|
+
|
|
58
|
+
var css_248z$2 = ".index-module_loader__container__VX-VO{align-items:center;background:#fff;border-radius:32px;box-shadow:0 8px 24px 0 rgba(26,26,26,.1);display:flex;height:34px;justify-content:center;left:50%;padding:12px;position:absolute;top:50%;transform:translate(-50%,-50%);width:66px}.index-module_loader__container__VX-VO .index-module_three-dots-loader__i7R-R{animation:index-module_three-dots-loader__i7R-R 1s linear infinite alternate;animation-delay:.5s;background-color:#1a1a1a;border-radius:5px;height:8px;position:relative;width:8px}.index-module_loader__container__VX-VO .index-module_three-dots-loader__i7R-R:after,.index-module_loader__container__VX-VO .index-module_three-dots-loader__i7R-R:before{content:\"\";display:inline-block;position:absolute;top:0}.index-module_loader__container__VX-VO .index-module_three-dots-loader__i7R-R:before{animation:index-module_three-dots-loader__i7R-R 1s infinite alternate;animation-delay:0s;background-color:#1a1a1a;border-radius:5px;height:8px;left:-15px;width:8px}.index-module_loader__container__VX-VO .index-module_three-dots-loader__i7R-R:after{animation:index-module_three-dots-loader__i7R-R 1s infinite alternate;animation-delay:1s;background-color:#1a1a1a;border-radius:5px;height:8px;left:15px;width:8px}@keyframes index-module_three-dots-loader__i7R-R{0%{background-color:#1a1a1a}50%,to{background-color:grey}}";
|
|
59
|
+
var Styles$1 = {"loader__container":"index-module_loader__container__VX-VO","three-dots-loader":"index-module_three-dots-loader__i7R-R"};
|
|
60
|
+
styleInject(css_248z$2);
|
|
61
|
+
|
|
62
|
+
var ThreeDotsLoader = function () {
|
|
63
|
+
return (jsxRuntime.jsx("div", tslib.__assign({ className: Styles$1['loader__container'] }, { children: jsxRuntime.jsx("div", { className: Styles$1['three-dots-loader'] }) })));
|
|
64
|
+
};
|
|
65
|
+
|
|
66
|
+
var AutoDetectState;
|
|
67
|
+
(function (AutoDetectState) {
|
|
68
|
+
AutoDetectState[AutoDetectState["DETECTING"] = 0] = "DETECTING";
|
|
69
|
+
AutoDetectState[AutoDetectState["FAILED"] = 1] = "FAILED";
|
|
70
|
+
AutoDetectState[AutoDetectState["DETECTED"] = 2] = "DETECTED";
|
|
71
|
+
})(AutoDetectState || (AutoDetectState = {}));
|
|
72
|
+
var OtpInput = function (_a) {
|
|
73
|
+
var mobileNumber = _a.mobileNumber, errorCallout = _a.errorCallout, ravenPayload = _a.ravenPayload, otpInputHeight = _a.otpInputHeight, skipProfileFlow = _a.skipProfileFlow, otpResendDisabled = _a.otpResendDisabled, hotelsLoyaltyFlow = _a.hotelsLoyaltyFlow, getOTP = _a.getOTP, setCtaDisabled = _a.setCtaDisabled, setErrorCallout = _a.setErrorCallout, setMobileNumber = _a.setMobileNumber, setShowMobilePage = _a.setShowMobilePage, handleLoginSuccess = _a.handleLoginSuccess, handleLoginFailure = _a.handleLoginFailure;
|
|
74
|
+
var inputRefs = react.useRef(Array(4).fill(null));
|
|
75
|
+
var _b = react.useState(AutoDetectState.DETECTING), autoDetecting = _b[0], setAutoDetecting = _b[1];
|
|
76
|
+
var _c = react.useState(ctPlatformConstants.LOGIN_CONSTANTS.OTP_COUNTDOWN), countdown = _c[0], setCountdown = _c[1];
|
|
77
|
+
var _d = react.useState(''), otp = _d[0], setOtp = _d[1];
|
|
78
|
+
var _f = react.useState(true), countdownEnabled = _f[0], setCountdownEnabled = _f[1];
|
|
79
|
+
var _g = react.useState(false), verifiedOtp = _g[0], setVerifiedOtp = _g[1];
|
|
80
|
+
var _h = react.useState(''), otpErrorMessage = _h[0], setOtpErrorMessage = _h[1];
|
|
81
|
+
var _j = react.useState(true), enableAutoDetect = _j[0], setEnableAutoDetect = _j[1];
|
|
82
|
+
var _k = react.useState(false), showOtpVerificationLoader = _k[0], setShowOtpVerificationLoader = _k[1];
|
|
83
|
+
var lastOtpRequest = react.useRef();
|
|
84
|
+
var lastOtpRequestTimeStamp = react.useRef();
|
|
85
|
+
var loginMethod = 'CT';
|
|
86
|
+
react.useEffect(function () {
|
|
87
|
+
autoDetect();
|
|
88
|
+
var eventProps = ctPlatformUtils.getRavenEventProps();
|
|
89
|
+
ctPlatformUtils.ravenSDKTrigger('u_login_click', tslib.__assign({ action_name: 'login_otp_screen_opened', login_form: eventProps === null || eventProps === void 0 ? void 0 : eventProps.loginForm, login_type: 'native', vertical: eventProps === null || eventProps === void 0 ? void 0 : eventProps.vertical, page_name: eventProps === null || eventProps === void 0 ? void 0 : eventProps.pageName }, ravenPayload));
|
|
90
|
+
}, []);
|
|
91
|
+
react.useEffect(function () {
|
|
92
|
+
if (ctPlatformUtils.isIOSApp()) {
|
|
93
|
+
setEnableAutoDetect(false);
|
|
94
|
+
}
|
|
95
|
+
}, []);
|
|
96
|
+
react.useEffect(function () {
|
|
97
|
+
autoDetect();
|
|
98
|
+
}, []);
|
|
99
|
+
react.useEffect(function () {
|
|
100
|
+
if (!showOtpVerificationLoader) {
|
|
101
|
+
inputRefs.current[0].focus();
|
|
102
|
+
inputRefs.current[0].click();
|
|
103
|
+
}
|
|
104
|
+
}, [showOtpVerificationLoader]);
|
|
105
|
+
react.useEffect(function () {
|
|
106
|
+
if (countdown === 0) {
|
|
107
|
+
setCountdownEnabled(false);
|
|
108
|
+
}
|
|
109
|
+
}, [countdown]);
|
|
110
|
+
react.useEffect(function () {
|
|
111
|
+
var interval;
|
|
112
|
+
if (countdownEnabled && countdown > 0) {
|
|
113
|
+
interval = setInterval(function () {
|
|
114
|
+
setCountdown(function (prevCountdown) { return prevCountdown - 1; });
|
|
115
|
+
}, 1000);
|
|
116
|
+
}
|
|
117
|
+
return function () {
|
|
118
|
+
clearInterval(interval);
|
|
119
|
+
};
|
|
120
|
+
}, [countdownEnabled, countdown]);
|
|
121
|
+
var autoDetect = react.useCallback(function () { return tslib.__awaiter(void 0, void 0, void 0, function () {
|
|
122
|
+
var otp_1, _e_1;
|
|
123
|
+
return tslib.__generator(this, function (_a) {
|
|
124
|
+
switch (_a.label) {
|
|
125
|
+
case 0:
|
|
126
|
+
_a.trys.push([0, 2, , 3]);
|
|
127
|
+
return [4, ctPlatformUtils.autoReadOtp()];
|
|
128
|
+
case 1:
|
|
129
|
+
otp_1 = _a.sent();
|
|
130
|
+
setOtp(otp_1);
|
|
131
|
+
setAutoDetecting(AutoDetectState.DETECTED);
|
|
132
|
+
if ((otp_1 === null || otp_1 === void 0 ? void 0 : otp_1.length) === ctPlatformConstants.LOGIN_CONSTANTS.OTP_LENGTH &&
|
|
133
|
+
handleOtpComplete) {
|
|
134
|
+
handleOtpComplete(otp_1, true);
|
|
135
|
+
}
|
|
136
|
+
return [3, 3];
|
|
137
|
+
case 2:
|
|
138
|
+
_e_1 = _a.sent();
|
|
139
|
+
if (_e_1 === 'NOT_SUPPORTED') {
|
|
140
|
+
setEnableAutoDetect(false);
|
|
141
|
+
}
|
|
142
|
+
return [3, 3];
|
|
143
|
+
case 3: return [2];
|
|
144
|
+
}
|
|
145
|
+
});
|
|
146
|
+
}); }, [enableAutoDetect]);
|
|
147
|
+
var handleOtpValidationError = react.useCallback(function (e) {
|
|
148
|
+
var eventProps = ctPlatformUtils.getRavenEventProps();
|
|
149
|
+
ctPlatformUtils.ravenSDKTrigger('u_login_error', tslib.__assign({ action_name: 'otp_incorrect', login_form: eventProps === null || eventProps === void 0 ? void 0 : eventProps.loginForm, login_type: 'native', vertical: eventProps === null || eventProps === void 0 ? void 0 : eventProps.vertical, page_name: eventProps === null || eventProps === void 0 ? void 0 : eventProps.pageName }, ravenPayload));
|
|
150
|
+
var message = e === null || e === void 0 ? void 0 : e.message;
|
|
151
|
+
if (message !== 'OTP_VALIDATE_LIMIT_EXCEEDED') {
|
|
152
|
+
setOtp('');
|
|
153
|
+
}
|
|
154
|
+
inputRefs.current[0].focus();
|
|
155
|
+
inputRefs.current[0].click();
|
|
156
|
+
var messageValue = ctPlatformConstants.LOGIN_CONSTANTS[message];
|
|
157
|
+
var toastMessage = typeof messageValue === 'string'
|
|
158
|
+
? messageValue
|
|
159
|
+
: ctPlatformConstants.LOGIN_CONSTANTS.INVALID_OTP;
|
|
160
|
+
setOtpErrorMessage(toastMessage);
|
|
161
|
+
}, [inputRefs]);
|
|
162
|
+
var handleOtpComplete = react.useCallback(function (otp, autodetected) { return tslib.__awaiter(void 0, void 0, void 0, function () {
|
|
163
|
+
var eventProps, response, status_1, action, e_1;
|
|
164
|
+
return tslib.__generator(this, function (_a) {
|
|
165
|
+
switch (_a.label) {
|
|
166
|
+
case 0:
|
|
167
|
+
_a.trys.push([0, 2, , 3]);
|
|
168
|
+
eventProps = ctPlatformUtils.getRavenEventProps();
|
|
169
|
+
ctPlatformUtils.ravenSDKTrigger('u_login_click', tslib.__assign({ action_name: 'otp_entered', login_form: eventProps === null || eventProps === void 0 ? void 0 : eventProps.loginForm, login_type: 'native', entry_type: !autodetected ? 'manual_entry' : 'autodetected', vertical: eventProps === null || eventProps === void 0 ? void 0 : eventProps.vertical, page_name: eventProps === null || eventProps === void 0 ? void 0 : eventProps.pageName }, ravenPayload));
|
|
170
|
+
if (otp === lastOtpRequest.current &&
|
|
171
|
+
lastOtpRequestTimeStamp.current &&
|
|
172
|
+
lastOtpRequestTimeStamp.current - Date.now() <= 100) {
|
|
173
|
+
return [2];
|
|
174
|
+
}
|
|
175
|
+
lastOtpRequest.current = otp;
|
|
176
|
+
lastOtpRequestTimeStamp.current = Date.now();
|
|
177
|
+
if (hotelsLoyaltyFlow) {
|
|
178
|
+
setShowOtpVerificationLoader(true);
|
|
179
|
+
}
|
|
180
|
+
return [4, ctPlatformUtils.validateOtp(mobileNumber, otp)];
|
|
181
|
+
case 1:
|
|
182
|
+
response = _a.sent();
|
|
183
|
+
status_1 = response.status, action = response.action;
|
|
184
|
+
if (Number(status_1) === 200 && !ctPlatformUtils.isEmpty(action)) {
|
|
185
|
+
setVerifiedOtp(true);
|
|
186
|
+
setOtpErrorMessage('');
|
|
187
|
+
ctPlatformUtils.updateNativeOnLogin();
|
|
188
|
+
if (action === 'SIGNUP') {
|
|
189
|
+
if (!skipProfileFlow) {
|
|
190
|
+
window.location.href =
|
|
191
|
+
ctPlatformConstants.NAVIGATION_ROUTES.PERSONAL_DETAILS +
|
|
192
|
+
'?onboardingFlow=true';
|
|
193
|
+
}
|
|
194
|
+
handleLoginSuccess(loginMethod, true);
|
|
195
|
+
}
|
|
196
|
+
else {
|
|
197
|
+
handleLoginSuccess(loginMethod);
|
|
198
|
+
}
|
|
199
|
+
}
|
|
200
|
+
else {
|
|
201
|
+
if (hotelsLoyaltyFlow) {
|
|
202
|
+
setShowOtpVerificationLoader(false);
|
|
203
|
+
}
|
|
204
|
+
handleLoginFailure(loginMethod);
|
|
205
|
+
}
|
|
206
|
+
return [3, 3];
|
|
207
|
+
case 2:
|
|
208
|
+
e_1 = _a.sent();
|
|
209
|
+
if (hotelsLoyaltyFlow) {
|
|
210
|
+
setShowOtpVerificationLoader(false);
|
|
211
|
+
}
|
|
212
|
+
handleLoginFailure(loginMethod);
|
|
213
|
+
handleOtpValidationError(e_1);
|
|
214
|
+
return [3, 3];
|
|
215
|
+
case 3: return [2];
|
|
216
|
+
}
|
|
217
|
+
});
|
|
218
|
+
}); }, [
|
|
219
|
+
lastOtpRequest,
|
|
220
|
+
lastOtpRequestTimeStamp,
|
|
221
|
+
setVerifiedOtp,
|
|
222
|
+
setAutoDetecting,
|
|
223
|
+
setOtpErrorMessage,
|
|
224
|
+
handleOtpValidationError,
|
|
225
|
+
]);
|
|
226
|
+
var handleOnPaste = function () { return tslib.__awaiter(void 0, void 0, void 0, function () {
|
|
227
|
+
var clipboardData, pastedArr, pastedString;
|
|
228
|
+
var _a, _b;
|
|
229
|
+
return tslib.__generator(this, function (_c) {
|
|
230
|
+
switch (_c.label) {
|
|
231
|
+
case 0: return [4, navigator.clipboard.readText()];
|
|
232
|
+
case 1:
|
|
233
|
+
clipboardData = _c.sent();
|
|
234
|
+
if (clipboardData && ctPlatformUtils.isNumeric(clipboardData)) {
|
|
235
|
+
pastedArr = clipboardData
|
|
236
|
+
.slice(0, ctPlatformConstants.LOGIN_CONSTANTS.OTP_LENGTH)
|
|
237
|
+
.split('');
|
|
238
|
+
(_a = inputRefs.current[ctPlatformConstants.LOGIN_CONSTANTS.OTP_LENGTH - 1]) === null || _a === void 0 ? void 0 : _a.focus();
|
|
239
|
+
(_b = inputRefs.current[ctPlatformConstants.LOGIN_CONSTANTS.OTP_LENGTH - 1]) === null || _b === void 0 ? void 0 : _b.click();
|
|
240
|
+
pastedString = pastedArr.join('');
|
|
241
|
+
setOtp(pastedString);
|
|
242
|
+
if (pastedString.length === ctPlatformConstants.LOGIN_CONSTANTS.OTP_LENGTH) {
|
|
243
|
+
handleOtpComplete(pastedString, false);
|
|
244
|
+
}
|
|
245
|
+
}
|
|
246
|
+
return [2];
|
|
247
|
+
}
|
|
248
|
+
});
|
|
249
|
+
}); };
|
|
250
|
+
var handleInput = react.useCallback(function (event, index) {
|
|
251
|
+
var _a, _b;
|
|
252
|
+
setErrorCallout('');
|
|
253
|
+
var value = event.target.value;
|
|
254
|
+
if (value !== '' && index < inputRefs.current.length - 1) {
|
|
255
|
+
(_a = inputRefs.current[index + 1]) === null || _a === void 0 ? void 0 : _a.focus();
|
|
256
|
+
(_b = inputRefs.current[index + 1]) === null || _b === void 0 ? void 0 : _b.click();
|
|
257
|
+
}
|
|
258
|
+
var inputValues = inputRefs.current.map(function (ref) {
|
|
259
|
+
if (ctPlatformUtils.isHTMLInputElement(ref)) {
|
|
260
|
+
return ref.value;
|
|
261
|
+
}
|
|
262
|
+
return '';
|
|
263
|
+
});
|
|
264
|
+
var otpValue = inputValues.join('').slice(0, 4);
|
|
265
|
+
setOtp(otpValue);
|
|
266
|
+
if (otpValue.length === ctPlatformConstants.LOGIN_CONSTANTS.OTP_LENGTH) {
|
|
267
|
+
handleOtpComplete(otpValue, false);
|
|
268
|
+
}
|
|
269
|
+
}, [setOtp, handleOtpComplete]);
|
|
270
|
+
var handleKeyDown = react.useCallback(function (e, index) {
|
|
271
|
+
var _a, _b, _c;
|
|
272
|
+
if (e.key === 'Backspace' &&
|
|
273
|
+
index > 0 &&
|
|
274
|
+
((_a = inputRefs.current[index]) === null || _a === void 0 ? void 0 : _a.value) === '') {
|
|
275
|
+
e.preventDefault();
|
|
276
|
+
(_b = inputRefs.current[index - 1]) === null || _b === void 0 ? void 0 : _b.focus();
|
|
277
|
+
(_c = inputRefs.current[index - 1]) === null || _c === void 0 ? void 0 : _c.click();
|
|
278
|
+
}
|
|
279
|
+
}, [inputRefs]);
|
|
280
|
+
var onResendOtpClick = react.useCallback(function () {
|
|
281
|
+
setCountdown(ctPlatformConstants.LOGIN_CONSTANTS.OTP_COUNTDOWN);
|
|
282
|
+
setCountdownEnabled(true);
|
|
283
|
+
getOTP(mobileNumber);
|
|
284
|
+
var eventProps = ctPlatformUtils.getRavenEventProps();
|
|
285
|
+
ctPlatformUtils.ravenSDKTrigger('u_login_error', tslib.__assign({ action_name: 'resend_otp_clicked', login_form: eventProps === null || eventProps === void 0 ? void 0 : eventProps.loginForm, login_type: 'native', vertical: eventProps === null || eventProps === void 0 ? void 0 : eventProps.vertical, page_name: eventProps === null || eventProps === void 0 ? void 0 : eventProps.pageName }, ravenPayload));
|
|
286
|
+
}, [setCountdown, setCountdownEnabled]);
|
|
287
|
+
var onEditCLick = react.useCallback(function () {
|
|
288
|
+
setCtaDisabled(true);
|
|
289
|
+
setShowMobilePage(true);
|
|
290
|
+
setMobileNumber('');
|
|
291
|
+
}, [setShowMobilePage]);
|
|
292
|
+
return (jsxRuntime.jsxs("div", tslib.__assign({ className: 'flex flex-column bg-neutral-100', style: { height: otpInputHeight } }, { children: [errorCallout && (jsxRuntime.jsx(ctDesignAlertCallout.AlertCallout, { variant: 'error', textNode: errorCallout, prefixIconNode: jsxRuntime.jsx(ctDesignIcons.InfoIcon, { fill: 'red' }), style: {
|
|
293
|
+
color: '#ffff',
|
|
294
|
+
backgroundColor: '#db201e',
|
|
295
|
+
}, className: 'fs-12' })), jsxRuntime.jsxs("div", tslib.__assign({ className: 'flex flex-bottom' }, { children: [jsxRuntime.jsxs(ctDesignTypography.Typography, tslib.__assign({ variant: 'HM1', color: 'heading' }, { children: [ctPlatformConstants.LOGIN_CONSTANTS.OTP_TEXT, " ", jsxRuntime.jsx("br", {}), mobileNumber] })), jsxRuntime.jsx("div", tslib.__assign({ className: 'pl-2', onClick: onEditCLick }, { children: jsxRuntime.jsx(ctDesignIcons.Edit, {}) }))] })), jsxRuntime.jsxs("div", tslib.__assign({ className: styles$1.otp_container }, { children: [jsxRuntime.jsxs("div", tslib.__assign({ className: 'flex', style: hotelsLoyaltyFlow
|
|
296
|
+
? { width: 'max-content', position: 'relative' }
|
|
297
|
+
: {} }, { children: [tslib.__spreadArray([], Array(ctPlatformConstants.LOGIN_CONSTANTS.OTP_LENGTH), true).map(function (_, i) { return (jsxRuntime.jsx("div", tslib.__assign({ className: styles$1.otp_box_wrapper }, { children: jsxRuntime.jsx(ctDesignField.FieldV2, { prompt: {
|
|
298
|
+
hasError: !!otpErrorMessage,
|
|
299
|
+
}, type: 'number', placeholder: '', value: otp[i], max: 1, inputMode: 'numeric', className: styles$1.login_otp_input, variant: 'md', ref: function (ref) {
|
|
300
|
+
if (ref) {
|
|
301
|
+
inputRefs.current[i] = ref;
|
|
302
|
+
}
|
|
303
|
+
}, onKeyDown: function (e) { return handleKeyDown(e, i); }, onChange: function (e) { return handleInput(e, i); }, onPaste: handleOnPaste, autoFocus: i === 0, disabled: hotelsLoyaltyFlow &&
|
|
304
|
+
showOtpVerificationLoader
|
|
305
|
+
? true
|
|
306
|
+
: false }) }), i)); }), hotelsLoyaltyFlow && showOtpVerificationLoader && (jsxRuntime.jsx(ThreeDotsLoader, {}))] })), !!otpErrorMessage && (jsxRuntime.jsx(ctDesignTypography.Typography, tslib.__assign({ variant: 'P1', color: 'warning', className: styles$1.login_otp_error }, { children: otpErrorMessage })))] })), jsxRuntime.jsx(ctDesignSpacer.Spacer, { className: 'pt-2' }), autoDetecting === AutoDetectState.DETECTING &&
|
|
307
|
+
!verifiedOtp &&
|
|
308
|
+
enableAutoDetect &&
|
|
309
|
+
countdown >
|
|
310
|
+
ctPlatformConstants.LOGIN_CONSTANTS.RESEND_OTP_COUNTDOWN && (jsxRuntime.jsxs("div", tslib.__assign({ className: 'flex flex-middle' }, { children: [jsxRuntime.jsx(ctDesignSpinner.Spinner, { width: '20px', height: '20px', borderColor: '#11a670', className: 'bg-neutral-900 bc-black' }), jsxRuntime.jsx(ctDesignTypography.Typography, tslib.__assign({ variant: 'B3', className: 'fs-12 fw-500 ml-1 c-neutral-700' }, { children: ctPlatformConstants.LOGIN_CONSTANTS.AUTO_DETECTING_TEXT }))] }))), autoDetecting === AutoDetectState.DETECTING &&
|
|
311
|
+
countdown <= ctPlatformConstants.LOGIN_CONSTANTS.RESEND_OTP_COUNTDOWN &&
|
|
312
|
+
enableAutoDetect &&
|
|
313
|
+
!verifiedOtp && (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs("div", tslib.__assign({ className: 'flex' }, { children: [jsxRuntime.jsx(ctDesignTypography.Typography, tslib.__assign({ variant: 'B3', className: 'fs-12 fw-500 c-neutral-700 ' }, { children: ctPlatformConstants.LOGIN_CONSTANTS.OTP_RESEND_TEXT })), jsxRuntime.jsx(ctDesignSpacer.Spacer, { className: 'ml-1' }), otpResendDisabled ? (jsxRuntime.jsx(ctDesignTypography.Typography, tslib.__assign({ className: 'color-neutral-200 fw-500', variant: 'B3' }, { children: ctPlatformConstants.LOGIN_CONSTANTS.RESEND_CTA }))) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [countdown === 0 && (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(ctDesignTypography.Typography, tslib.__assign({ isClickable: true, variant: 'B3', onClick: onResendOtpClick, color: 'link', className: '\n fs-12 fw-500 c-pointer' }, { children: ctPlatformConstants.LOGIN_CONSTANTS.RESEND_CTA })) })), countdown > 0 && (jsxRuntime.jsx(ctDesignTypography.Typography, tslib.__assign({ color: 'disabled', variant: 'B3' }, { children: ' Resend (' + countdown + 's)' })))] }))] })) })), !otpErrorMessage && verifiedOtp && (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs("div", tslib.__assign({ className: 'flex flex-middle' }, { children: [jsxRuntime.jsx(ctDesignIcons.CheckCircle, {}), jsxRuntime.jsx(ctDesignTypography.Typography, tslib.__assign({ variant: 'P1', color: 'success', className: 'fs-12' }, { children: autoDetecting === AutoDetectState.DETECTED
|
|
314
|
+
? ctPlatformConstants.LOGIN_CONSTANTS.AUTO_DETECTED_TEXT
|
|
315
|
+
: ctPlatformConstants.LOGIN_CONSTANTS.VERIFIED_MESSAGE }))] })) })), jsxRuntime.jsx(ctDesignSpacer.Spacer, { className: 'mt-24' })] })));
|
|
316
|
+
};
|
|
317
|
+
|
|
318
|
+
var css_248z$1 = ".index-module_loader__63LeU{align-items:center;background-color:hsla(0,0%,100%,.95);bottom:0;display:flex;justify-content:center;left:0;position:fixed;right:0;top:0;z-index:0}.index-module_loader__63LeU.index-module_With-full-opacity__ZSY-U{background-color:#fff}.index-module_loader__content__Q6kJl{max-width:280px;text-align:center}.index-module_loader__spinner__6B3AR{animation:index-module_loader-rotate__efcf3 .8s linear infinite;border:2px solid rgba(51,102,204,.3);border-radius:50%;border-top-color:#36c;display:inline-block;height:30px;margin-bottom:10px;position:relative;width:30px}.index-module_loader__heading__7YZ3N{color:#000;font-size:18px;font-weight:600;margin-bottom:5px}.index-module_loader__text__1QcLi{color:rgba(0,0,0,.8);font-size:16px;line-height:1.5}";
|
|
319
|
+
var Styles = {"loader":"index-module_loader__63LeU","With-full-opacity":"index-module_With-full-opacity__ZSY-U","loader__content":"index-module_loader__content__Q6kJl","loader__spinner":"index-module_loader__spinner__6B3AR","loader-rotate":"index-module_loader-rotate__efcf3","loader__heading":"index-module_loader__heading__7YZ3N","loader__text":"index-module_loader__text__1QcLi"};
|
|
320
|
+
styleInject(css_248z$1);
|
|
321
|
+
|
|
322
|
+
var Loader = function (_a) {
|
|
323
|
+
var title = _a.title, message = _a.message, className = _a.className;
|
|
324
|
+
return (jsxRuntime.jsx("div", tslib.__assign({ className: "".concat(Styles['utilswrapper'], " utilswrapper") }, { children: jsxRuntime.jsx("div", tslib.__assign({ className: classNames__default.default(Styles['loader'], className) }, { children: jsxRuntime.jsxs("div", tslib.__assign({ className: Styles['loader__content'] }, { children: [jsxRuntime.jsx("div", { className: Styles['loader__spinner'] }), jsxRuntime.jsx("h5", tslib.__assign({ className: Styles['loader__heading'] }, { children: title })), jsxRuntime.jsx("p", tslib.__assign({ className: Styles['loader__text'] }, { children: message }))] })) })) })));
|
|
325
|
+
};
|
|
326
|
+
|
|
327
|
+
var MobileInput = function (_a) {
|
|
328
|
+
var sendingOtp = _a.sendingOtp, ctaDisabled = _a.ctaDisabled, getOTP = _a.getOTP, setErrorCallout = _a.setErrorCallout, errorCallout = _a.errorCallout, mobileNumber = _a.mobileNumber, setMobileInputHeight = _a.setMobileInputHeight, setMobileNumber = _a.setMobileNumber, fallbackUri = _a.fallbackUri, skipProfileFlow = _a.skipProfileFlow, currentPageUri = _a.currentPageUri, ravenPayload = _a.ravenPayload, hotelsLoyaltyFlow = _a.hotelsLoyaltyFlow;
|
|
329
|
+
var fkSSOEnabled = react.useState(ctPlatformUtils.isFKSSOEnabled)[0];
|
|
330
|
+
var _b = react.useState(false), fkButtonLoading = _b[0], setFkButtonLoading = _b[1];
|
|
331
|
+
var inputRef = react.useRef(null);
|
|
332
|
+
var mobileViewRef = react.useRef(null);
|
|
333
|
+
react.useEffect(function () {
|
|
334
|
+
if (mobileViewRef.current) {
|
|
335
|
+
var height = mobileViewRef.current.clientHeight;
|
|
336
|
+
setMobileInputHeight(height);
|
|
337
|
+
}
|
|
338
|
+
}, [mobileViewRef.current]);
|
|
339
|
+
react.useEffect(function () {
|
|
340
|
+
var timeout;
|
|
341
|
+
if (inputRef.current) {
|
|
342
|
+
timeout = setTimeout(function () {
|
|
343
|
+
var _a;
|
|
344
|
+
(_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
|
|
345
|
+
}, 100);
|
|
346
|
+
}
|
|
347
|
+
return function () {
|
|
348
|
+
clearTimeout(timeout);
|
|
349
|
+
};
|
|
350
|
+
}, []);
|
|
351
|
+
react.useEffect(function () {
|
|
352
|
+
if (ctPlatformUtils.isAndroidApp()) {
|
|
353
|
+
autoDetectMobileNumber();
|
|
354
|
+
}
|
|
355
|
+
}, []);
|
|
356
|
+
var handleFKSSOClick = react.useCallback(function () { return tslib.__awaiter(void 0, void 0, void 0, function () {
|
|
357
|
+
var eventProps, redirectUrl;
|
|
358
|
+
return tslib.__generator(this, function (_a) {
|
|
359
|
+
switch (_a.label) {
|
|
360
|
+
case 0:
|
|
361
|
+
_a.trys.push([0, 2, , 3]);
|
|
362
|
+
eventProps = ctPlatformUtils.getRavenEventProps();
|
|
363
|
+
ctPlatformUtils.ravenSDKTrigger('u_login_click', tslib.__assign({ action_name: 'login_with_flipkart_clicked', login_form: eventProps === null || eventProps === void 0 ? void 0 : eventProps.loginForm, login_type: 'fk_sso', vertical: eventProps === null || eventProps === void 0 ? void 0 : eventProps.vertical, page_name: eventProps === null || eventProps === void 0 ? void 0 : eventProps.pageName }, ravenPayload));
|
|
364
|
+
setFkButtonLoading(true);
|
|
365
|
+
return [4, ctPlatformUtils.handleFKSSO(fallbackUri, skipProfileFlow
|
|
366
|
+
? currentPageUri
|
|
367
|
+
: ctPlatformConstants.NAVIGATION_ROUTES.PERSONAL_DETAILS +
|
|
368
|
+
'?onboardingFlow=true', currentPageUri)];
|
|
369
|
+
case 1:
|
|
370
|
+
redirectUrl = _a.sent();
|
|
371
|
+
if (!hotelsLoyaltyFlow) {
|
|
372
|
+
setFkButtonLoading(false);
|
|
373
|
+
}
|
|
374
|
+
if (ctPlatformUtils.isPwa()) {
|
|
375
|
+
window.location.href = redirectUrl;
|
|
376
|
+
}
|
|
377
|
+
return [3, 3];
|
|
378
|
+
case 2:
|
|
379
|
+
_a.sent();
|
|
380
|
+
setFkButtonLoading(false);
|
|
381
|
+
return [3, 3];
|
|
382
|
+
case 3: return [2];
|
|
383
|
+
}
|
|
384
|
+
});
|
|
385
|
+
}); }, []);
|
|
386
|
+
var handleInputChange = react.useCallback(function (event, autoDetected) {
|
|
387
|
+
if (autoDetected === void 0) { autoDetected = false; }
|
|
388
|
+
setErrorCallout('');
|
|
389
|
+
var value = event.target.value || '';
|
|
390
|
+
value = value.replace(ctPlatformUtils.MULTI_SPACE, ' ').trimStart();
|
|
391
|
+
setMobileNumber(value);
|
|
392
|
+
var validMobileNo = ctPlatformUtils.isValidMobileNumber(event.target.value);
|
|
393
|
+
if (validMobileNo) {
|
|
394
|
+
getOTP(value);
|
|
395
|
+
var eventProps = ctPlatformUtils.getRavenEventProps();
|
|
396
|
+
ctPlatformUtils.ravenSDKTrigger('u_login_click', tslib.__assign({ action_name: 'get_otp_clicked', login_form: eventProps === null || eventProps === void 0 ? void 0 : eventProps.loginForm, login_type: 'native', entry_type: 'auto_click', vertical: eventProps === null || eventProps === void 0 ? void 0 : eventProps.vertical, page_name: eventProps === null || eventProps === void 0 ? void 0 : eventProps.pageName }, ravenPayload));
|
|
397
|
+
if (!autoDetected) {
|
|
398
|
+
ctPlatformUtils.ravenSDKTrigger('u_login_click', tslib.__assign({ action_name: 'phone_number_entered', login_form: eventProps === null || eventProps === void 0 ? void 0 : eventProps.loginForm, login_type: 'native', entry_type: 'manual_entry', vertical: eventProps === null || eventProps === void 0 ? void 0 : eventProps.vertical, page_name: eventProps === null || eventProps === void 0 ? void 0 : eventProps.pageName }, ravenPayload));
|
|
399
|
+
}
|
|
400
|
+
else {
|
|
401
|
+
ctPlatformUtils.ravenSDKTrigger('u_login_click', tslib.__assign({ action_name: 'phone_number_autodetected', login_form: eventProps === null || eventProps === void 0 ? void 0 : eventProps.loginForm, login_type: 'native', entry_type: 'autodetected', vertical: eventProps === null || eventProps === void 0 ? void 0 : eventProps.vertical, page_name: eventProps === null || eventProps === void 0 ? void 0 : eventProps.pageName }, ravenPayload));
|
|
402
|
+
}
|
|
403
|
+
}
|
|
404
|
+
}, [setMobileNumber]);
|
|
405
|
+
var autoDetectMobileNumber = react.useCallback(function () { return tslib.__awaiter(void 0, void 0, void 0, function () {
|
|
406
|
+
var autoDetectedNumber, simulatedEvent;
|
|
407
|
+
return tslib.__generator(this, function (_a) {
|
|
408
|
+
switch (_a.label) {
|
|
409
|
+
case 0: return [4, ctPlatformUtils.showMobileNumberHint()];
|
|
410
|
+
case 1:
|
|
411
|
+
autoDetectedNumber = _a.sent();
|
|
412
|
+
simulatedEvent = {
|
|
413
|
+
target: {
|
|
414
|
+
value: autoDetectedNumber,
|
|
415
|
+
},
|
|
416
|
+
};
|
|
417
|
+
if (autoDetectedNumber) {
|
|
418
|
+
handleInputChange(simulatedEvent, true);
|
|
419
|
+
}
|
|
420
|
+
return [2];
|
|
421
|
+
}
|
|
422
|
+
});
|
|
423
|
+
}); }, [handleInputChange]);
|
|
424
|
+
var handlePrivacyPolicyClick = react.useCallback(function () {
|
|
425
|
+
var eventProps = ctPlatformUtils.getRavenEventProps();
|
|
426
|
+
ctPlatformUtils.ravenSDKTrigger('u_login_click', tslib.__assign({ action_name: 'policy_click', login_form: eventProps === null || eventProps === void 0 ? void 0 : eventProps.loginForm, login_type: 'native', vertical: eventProps === null || eventProps === void 0 ? void 0 : eventProps.vertical, page_name: eventProps === null || eventProps === void 0 ? void 0 : eventProps.pageName }, ravenPayload));
|
|
427
|
+
window.location.href = ctPlatformConstants.NAVIGATION_ROUTES.PRIVACY_POLICY;
|
|
428
|
+
}, []);
|
|
429
|
+
var handleTermsOfUseClick = react.useCallback(function () {
|
|
430
|
+
var eventProps = ctPlatformUtils.getRavenEventProps();
|
|
431
|
+
ctPlatformUtils.ravenSDKTrigger('u_login_click', tslib.__assign({ action_name: 'tnc_click', login_form: eventProps === null || eventProps === void 0 ? void 0 : eventProps.loginForm, login_type: 'native', vertical: eventProps === null || eventProps === void 0 ? void 0 : eventProps.vertical, page_name: eventProps === null || eventProps === void 0 ? void 0 : eventProps.pageName }, ravenPayload));
|
|
432
|
+
window.location.href = ctPlatformConstants.NAVIGATION_ROUTES.TERMS;
|
|
433
|
+
}, []);
|
|
434
|
+
return (jsxRuntime.jsxs("div", tslib.__assign({ className: 'flex flex-column', ref: mobileViewRef }, { children: [errorCallout && (jsxRuntime.jsx(ctDesignAlertCallout.AlertCallout, { variant: 'error', textNode: errorCallout, prefixIconNode: jsxRuntime.jsx(ctDesignIcons.InfoIcon, { fill: 'red' }), style: {
|
|
435
|
+
color: '#ffff',
|
|
436
|
+
backgroundColor: '#db201e',
|
|
437
|
+
}, className: 'fs-12' })), jsxRuntime.jsx(ctDesignTypography.Typography, tslib.__assign({ variant: 'HM1', color: 'heading', className: 'mb-4 fs-24' }, { children: ctPlatformConstants.LOGIN_CONSTANTS.LOGIN_TO_CT })), jsxRuntime.jsx("label", tslib.__assign({ style: {
|
|
438
|
+
visibility: 'hidden',
|
|
439
|
+
width: '0.1px',
|
|
440
|
+
height: '0.1px',
|
|
441
|
+
}, htmlFor: 'phonenumber' }, { children: "Phone number" })), jsxRuntime.jsx(ctDesignField.PhoneField, { onChange: handleInputChange, value: mobileNumber, name: 'phonenumber', placeholder: '', inputMode: 'numeric', ref: inputRef, min: 0, max: 10, autoFocus: true, countryCode: ctPlatformConstants.LOGIN_CONSTANTS.COUNTRY_CODE }), jsxRuntime.jsx(ctDesignButton.Button, tslib.__assign({ color: 'primary', size: 'medium', minWidth: '160px', disabled: ctaDisabled, loading: sendingOtp, className: 'my-6', onClick: function () { return getOTP(mobileNumber); } }, { children: ctPlatformConstants.LOGIN_CONSTANTS.GET_OTP })), fkSSOEnabled && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", tslib.__assign({ className: 'my-6 p-relative' }, { children: [jsxRuntime.jsx(ctDesignDivider.Divider, {}), jsxRuntime.jsx("span", tslib.__assign({ className: "".concat(styles$1.mobileinput_seperatortext) }, { children: "or" }))] })), jsxRuntime.jsx(ctDesignButton.Button, tslib.__assign({ variant: 'outline', size: 'medium', className: 'my-6', loading: fkButtonLoading, onClick: handleFKSSOClick, showLeftIcon: !fkButtonLoading, LeftIcon: jsxRuntime.jsx("img", { src: ctPlatformAssets.FlipkartLogo }) }, { children: ctPlatformConstants.LOGIN_CONSTANTS.FK_LOGIN_CTA }))] })), jsxRuntime.jsxs("div", tslib.__assign({ className: 'pt-8 pb-6' }, { children: [jsxRuntime.jsx(ctDesignDivider.Divider, {}), jsxRuntime.jsxs("div", tslib.__assign({ className: 'flex flex-middle \n flex-center flex-wrap pt-2' }, { children: [jsxRuntime.jsx(ctDesignTypography.Typography, tslib.__assign({ variant: 'P1', className: styles$1.footer_text }, { children: ctPlatformConstants.LOGIN_CONSTANTS.FOOTER_TEXT })), jsxRuntime.jsx(ctDesignTypography.Typography, tslib.__assign({ variant: 'P1', color: 'link', className: 'pl-1 fs-12', isClickable: true, onClick: handlePrivacyPolicyClick }, { children: ctPlatformConstants.LOGIN_CONSTANTS.PRIVACY_CTA })), jsxRuntime.jsx(ctDesignTypography.Typography, tslib.__assign({ className: 'px-1 fs-12 c-neutral-700', variant: 'P1' }, { children: '& ' })), jsxRuntime.jsx(ctDesignTypography.Typography, tslib.__assign({ variant: 'P1', color: 'link', isClickable: true, onClick: handleTermsOfUseClick, className: 'fs-12' }, { children: ctPlatformConstants.LOGIN_CONSTANTS.TNC_CTA }))] }))] }))] })));
|
|
442
|
+
};
|
|
443
|
+
|
|
444
|
+
const imagePlaceHolderURI =
|
|
445
|
+
// eslint-disable-next-line max-len
|
|
446
|
+
'data:image/png;base64,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';
|
|
447
|
+
const ImageUrls = [{
|
|
448
|
+
src: 'https://fastui.cltpstatic.com/image/upload/offermgmt/images/carousel1.png',
|
|
449
|
+
placeholder: imagePlaceHolderURI
|
|
450
|
+
}, {
|
|
451
|
+
src: 'https://fastui.cltpstatic.com/image/upload/offermgmt/images/carousel2.png',
|
|
452
|
+
placeholder: imagePlaceHolderURI
|
|
453
|
+
}, {
|
|
454
|
+
src: 'https://fastui.cltpstatic.com/image/upload/offermgmt/images/carousel3.png',
|
|
455
|
+
placeholder: imagePlaceHolderURI
|
|
456
|
+
}];
|
|
457
|
+
|
|
458
|
+
var ImageWithPlaceholder = function (_a) {
|
|
459
|
+
var src = _a.src, placeholderSrc = _a.placeholderSrc, onLoad = _a.onLoad, props = tslib.__rest(_a, ["src", "placeholderSrc", "onLoad"]);
|
|
460
|
+
var _b = react.useState(placeholderSrc || src), imgSrc = _b[0], setImgSrc = _b[1];
|
|
461
|
+
var onLoadRef = react.useRef(onLoad);
|
|
462
|
+
react.useEffect(function () {
|
|
463
|
+
onLoadRef.current = onLoad;
|
|
464
|
+
}, [onLoad]);
|
|
465
|
+
react.useEffect(function () {
|
|
466
|
+
var img = new Image();
|
|
467
|
+
img.onload = function () {
|
|
468
|
+
setImgSrc(src);
|
|
469
|
+
if (onLoadRef.current) {
|
|
470
|
+
onLoadRef.current();
|
|
471
|
+
}
|
|
472
|
+
};
|
|
473
|
+
img.src = src;
|
|
474
|
+
}, [src]);
|
|
475
|
+
return jsxRuntime.jsx("img", tslib.__assign({ src: imgSrc }, props));
|
|
476
|
+
};
|
|
477
|
+
|
|
478
|
+
var css_248z = ".index-module_slides__container__9XVd4{align-items:center;box-sizing:border-box;display:flex;gap:1.5rem;height:197px;justify-content:center;width:100%}.index-module_slides__container--imageContainer__q0RuP{align-self:flex-start;margin-top:2rem;width:128px}";
|
|
479
|
+
var styles = {"slides__container":"index-module_slides__container__9XVd4","slides__container--imageContainer":"index-module_slides__container--imageContainer__q0RuP"};
|
|
480
|
+
styleInject(css_248z);
|
|
481
|
+
|
|
482
|
+
var Slide = function (_a) {
|
|
483
|
+
var textData = _a.textData, bgColor = _a.bgColor, imageUrl = _a.imageUrl, altText = _a.altText;
|
|
484
|
+
return (jsxRuntime.jsxs("div", tslib.__assign({ className: styles['slides__container'], style: {
|
|
485
|
+
backgroundColor: bgColor,
|
|
486
|
+
} }, { children: [jsxRuntime.jsx("div", tslib.__assign({ className: styles['slides__container--imageContainer'] }, { children: jsxRuntime.jsx(ImageWithPlaceholder, { width: 128, height: 128, alt: altText, src: imageUrl }) })), jsxRuntime.jsx("div", { children: textData === null || textData === void 0 ? void 0 : textData.map(function (item, index) {
|
|
487
|
+
return (jsxRuntime.jsx(ctDesignTypography.Typography, tslib.__assign({ variant: ctDesignTypography.TypographyVariant.HM2, style: {
|
|
488
|
+
color: item.textColor,
|
|
489
|
+
lineHeight: '24px',
|
|
490
|
+
} }, { children: item.text }), index));
|
|
491
|
+
}) })] })));
|
|
492
|
+
};
|
|
493
|
+
var getSlides = function () {
|
|
494
|
+
return [
|
|
495
|
+
jsxRuntime.jsx(Slide, { bgColor: '#4F8EF0', imageUrl: 'https://fastui.cltpstatic.com/image/upload/f_auto,q_auto,w_128,h_128,dpr_2/offermgmt/images/banner/Login%20Frame.png', altText: 'Dhonicampaign_icon', textData: [
|
|
496
|
+
{
|
|
497
|
+
text: 'Use code CTMAHI',
|
|
498
|
+
textColor: '#fff',
|
|
499
|
+
},
|
|
500
|
+
{
|
|
501
|
+
text: '& get flat 777 off,',
|
|
502
|
+
textColor: '#fff',
|
|
503
|
+
},
|
|
504
|
+
{
|
|
505
|
+
text: 'on your first',
|
|
506
|
+
textColor: '#032529',
|
|
507
|
+
},
|
|
508
|
+
{
|
|
509
|
+
text: 'flight booking',
|
|
510
|
+
textColor: '#032529',
|
|
511
|
+
},
|
|
512
|
+
] }, 1),
|
|
513
|
+
jsxRuntime.jsx(Slide, { bgColor: '#FF8D71', imageUrl: 'https://fastui.cltpstatic.com/image/upload/f_auto,w_128,h_128,dpr_2/offermgmt/images/loginSheetMyntra.webp', altText: 'loyality_benefits_icon', textData: [
|
|
514
|
+
{
|
|
515
|
+
text: 'Loyalty benefits',
|
|
516
|
+
textColor: '#fff',
|
|
517
|
+
},
|
|
518
|
+
{
|
|
519
|
+
text: 'and discounts',
|
|
520
|
+
textColor: '#fff',
|
|
521
|
+
},
|
|
522
|
+
{
|
|
523
|
+
text: 'for Flipkart and',
|
|
524
|
+
textColor: '#331005',
|
|
525
|
+
},
|
|
526
|
+
{
|
|
527
|
+
text: 'Myntra members',
|
|
528
|
+
textColor: '#331005',
|
|
529
|
+
},
|
|
530
|
+
] }, 2),
|
|
531
|
+
jsxRuntime.jsx(Slide, { bgColor: '#FFC142', imageUrl: 'https://fastui.cltpstatic.com/image/upload/f_auto,w_128,h_128,dpr_2/offermgmt/images/loginSheetCoupon.webp', altText: 'CTLogin_icon', textData: [
|
|
532
|
+
{
|
|
533
|
+
text: 'Flat 25% off',
|
|
534
|
+
textColor: '#fff',
|
|
535
|
+
},
|
|
536
|
+
{
|
|
537
|
+
text: 'on your first',
|
|
538
|
+
textColor: '#fff',
|
|
539
|
+
},
|
|
540
|
+
{
|
|
541
|
+
text: 'hotel booking',
|
|
542
|
+
textColor: '#fff',
|
|
543
|
+
},
|
|
544
|
+
{
|
|
545
|
+
text: 'Code: CTMAHI',
|
|
546
|
+
textColor: '#332504',
|
|
547
|
+
},
|
|
548
|
+
] }, 3),
|
|
549
|
+
jsxRuntime.jsx(Slide, { bgColor: '#61C149', imageUrl: 'https://fastui.cltpstatic.com/image/upload/f_auto,w_128,h_128,dpr_2/offermgmt/images/loginSheetWallet.webp', altText: 'EarnAndRedeem_icon', textData: [
|
|
550
|
+
{
|
|
551
|
+
text: 'Earn and',
|
|
552
|
+
textColor: '#fff',
|
|
553
|
+
},
|
|
554
|
+
{
|
|
555
|
+
text: 'redeem up to',
|
|
556
|
+
textColor: '#fff',
|
|
557
|
+
},
|
|
558
|
+
{
|
|
559
|
+
text: '650 Flipkart',
|
|
560
|
+
textColor: '#13270F',
|
|
561
|
+
},
|
|
562
|
+
{
|
|
563
|
+
text: 'Supercoins',
|
|
564
|
+
textColor: '#13270F',
|
|
565
|
+
},
|
|
566
|
+
] }, 4),
|
|
567
|
+
];
|
|
568
|
+
};
|
|
569
|
+
|
|
570
|
+
SwiperCore__default.default.use([SwiperCore.Autoplay, SwiperCore.Navigation, SwiperCore.Pagination]);
|
|
571
|
+
var CarouselWrapper = function (_a) {
|
|
572
|
+
var customSlides = _a.customSlides, carouselImages = _a.carouselImages;
|
|
573
|
+
var imageUrls = react.useMemo(function () {
|
|
574
|
+
if (!ctPlatformUtils.isEmpty(carouselImages))
|
|
575
|
+
return carouselImages;
|
|
576
|
+
return ImageUrls;
|
|
577
|
+
}, [carouselImages]);
|
|
578
|
+
return (jsxRuntime.jsx("div", tslib.__assign({ className: " o-hidden p-relative ".concat(styles$1.slider_carousel_wrapper) }, { children: jsxRuntime.jsx(react$1.Swiper, tslib.__assign({ autoplay: true, slidesPerView: 1, navigation: false, loop: true, pagination: { clickable: true }, className: "".concat(styles$1['swiper'], " ").concat(styles$1['swiper-custom-pagination']), lazy: {
|
|
579
|
+
loadPrevNextAmount: 1,
|
|
580
|
+
} }, { children: carouselImages && carouselImages.length > 0
|
|
581
|
+
? imageUrls === null || imageUrls === void 0 ? void 0 : imageUrls.map(function (item, index) {
|
|
582
|
+
return (jsxRuntime.jsx(react$1.SwiperSlide, tslib.__assign({ className: styles$1['swiper-slide'] }, { children: jsxRuntime.jsx(jsxRuntime.Fragment, { children: index < 1 ? (jsxRuntime.jsx(ImageWithPlaceholder, { src: item.src, placeholderSrc: item.placeholder, alt: "Slide ".concat(index + 1), rel: 'preload', fetchPriority: 'high' })) : (jsxRuntime.jsx(ImageWithPlaceholder, { src: item.src, placeholderSrc: item.placeholder, alt: "Slide ".concat(index + 1), loading: 'lazy', className: 'lazy' })) }) }), index));
|
|
583
|
+
})
|
|
584
|
+
: customSlides && customSlides.length > 0
|
|
585
|
+
? customSlides === null || customSlides === void 0 ? void 0 : customSlides.map(function (item, index) {
|
|
586
|
+
return (jsxRuntime.jsx(react$1.SwiperSlide, tslib.__assign({ className: styles$1['swiper-slide'] }, { children: item }), index));
|
|
587
|
+
})
|
|
588
|
+
: getSlides().length &&
|
|
589
|
+
getSlides().map(function (item, index) {
|
|
590
|
+
return (jsxRuntime.jsx(react$1.SwiperSlide, tslib.__assign({ className: styles$1['swiper-slide'] }, { children: item }), index));
|
|
591
|
+
}) })) })));
|
|
592
|
+
};
|
|
593
|
+
|
|
594
|
+
var LoginModule = function (_a) {
|
|
595
|
+
var fallbackUri = _a.fallbackUri, isDrawerOpen = _a.isDrawerOpen, skipProfileFlow = _a.skipProfileFlow, _b = _a.showCarousel, showCarousel = _b === void 0 ? true : _b, _c = _a.ravenPayload, ravenPayload = _c === void 0 ? {} : _c, handleLoginClose = _a.handleLoginClose, onAuthSuccess = _a.onAuthSuccess, onAuthFailure = _a.onAuthFailure, customSlides = _a.customSlides, _d = _a.carouselImages, carouselImages = _d === void 0 ? [] : _d, _e = _a.hotelsLoyaltyFlow, hotelsLoyaltyFlow = _e === void 0 ? false : _e, _f = _a.closeOnOutsideClick, closeOnOutsideClick = _f === void 0 ? false : _f, _g = _a.sendUserInsights, sendUserInsights = _g === void 0 ? true : _g;
|
|
596
|
+
var _h = react.useState(true), showMobilePage = _h[0], setShowMobilePage = _h[1];
|
|
597
|
+
var _j = react.useState(true), ctaDisabled = _j[0], setCtaDisabled = _j[1];
|
|
598
|
+
var _k = react.useState(false), sendingOtp = _k[0], setSendingOtp = _k[1];
|
|
599
|
+
var _l = react.useState(isDrawerOpen), showLoginForm = _l[0], setShowLoginForm = _l[1];
|
|
600
|
+
var _m = react.useState(''), mobileNumber = _m[0], setMobileNumber = _m[1];
|
|
601
|
+
var _o = react.useState(0), mobileInputHeight = _o[0], setMobileInputHeight = _o[1];
|
|
602
|
+
var _p = react.useState(false), otpResendDisabled = _p[0], setOtpResendDisabled = _p[1];
|
|
603
|
+
var _q = react.useState(''), errorCallout = _q[0], setErrorCallout = _q[1];
|
|
604
|
+
var _r = react.useState(false), showSuccess = _r[0], setShowSuccess = _r[1];
|
|
605
|
+
var _s = react.useState(false), showSigninLoader = _s[0], setShowSigninLoader = _s[1];
|
|
606
|
+
var currentPageUri = react.useState(function () { return ctPlatformUtils.getCurrentPathName(); })[0];
|
|
607
|
+
var showSigninLoaderScreen = function () {
|
|
608
|
+
setShowSigninLoader(true);
|
|
609
|
+
};
|
|
610
|
+
react.useEffect(function () {
|
|
611
|
+
if (window) {
|
|
612
|
+
window['showSigninLoaderScreen'] = showSigninLoaderScreen;
|
|
613
|
+
}
|
|
614
|
+
var queryValue = ctPlatformUtils.getQueryParam('fkSSOstatus');
|
|
615
|
+
var loginMethod = 'FK';
|
|
616
|
+
if (queryValue === 'signin') {
|
|
617
|
+
if (ctPlatformUtils.isAndroidApp()) {
|
|
618
|
+
ctPlatformUtils.updateNativeAndroidOnSignIn();
|
|
619
|
+
}
|
|
620
|
+
handleLoginSuccess(loginMethod);
|
|
621
|
+
}
|
|
622
|
+
if (queryValue === 'signup') {
|
|
623
|
+
if (ctPlatformUtils.isAndroidApp()) {
|
|
624
|
+
ctPlatformUtils.updateNativeAndroidOnSignIn();
|
|
625
|
+
}
|
|
626
|
+
handleLoginSuccess(loginMethod, true);
|
|
627
|
+
}
|
|
628
|
+
if (queryValue === 'failure') {
|
|
629
|
+
handleLoginFailure(loginMethod);
|
|
630
|
+
}
|
|
631
|
+
}, []);
|
|
632
|
+
var getOTP = react.useCallback(function (mobileNumber) { return tslib.__awaiter(void 0, void 0, void 0, function () {
|
|
633
|
+
var res, status_1, err_1, message, errorMessage;
|
|
634
|
+
return tslib.__generator(this, function (_a) {
|
|
635
|
+
switch (_a.label) {
|
|
636
|
+
case 0:
|
|
637
|
+
_a.trys.push([0, 2, , 3]);
|
|
638
|
+
setCtaDisabled(false);
|
|
639
|
+
setSendingOtp(true);
|
|
640
|
+
ctPlatformUtils.triggerOTPListener();
|
|
641
|
+
return [4, ctPlatformUtils.sendLoginOtp(mobileNumber)];
|
|
642
|
+
case 1:
|
|
643
|
+
res = _a.sent();
|
|
644
|
+
status_1 = (res || {}).status;
|
|
645
|
+
if (status_1 === 'SUCCESS') {
|
|
646
|
+
setShowMobilePage(false);
|
|
647
|
+
setSendingOtp(false);
|
|
648
|
+
}
|
|
649
|
+
return [3, 3];
|
|
650
|
+
case 2:
|
|
651
|
+
err_1 = _a.sent();
|
|
652
|
+
console.error(err_1);
|
|
653
|
+
message = (err_1 || {}).message;
|
|
654
|
+
setSendingOtp(false);
|
|
655
|
+
errorMessage = message && ctPlatformConstants.LOGIN_CONSTANTS[message];
|
|
656
|
+
if (errorMessage) {
|
|
657
|
+
setErrorCallout(String(errorMessage));
|
|
658
|
+
}
|
|
659
|
+
else {
|
|
660
|
+
setErrorCallout(String(ctPlatformConstants.LOGIN_CONSTANTS.GENERIC_ERROR_MESSAGE));
|
|
661
|
+
}
|
|
662
|
+
if (message === 'OTP_SEND_LIMIT_EXCEEDED') {
|
|
663
|
+
setOtpResendDisabled(true);
|
|
664
|
+
}
|
|
665
|
+
return [3, 3];
|
|
666
|
+
case 3: return [2];
|
|
667
|
+
}
|
|
668
|
+
});
|
|
669
|
+
}); }, [showMobilePage, setShowMobilePage]);
|
|
670
|
+
var handleLoginSuccess = react.useCallback(function (loginMethod, action) {
|
|
671
|
+
var eventProps = ctPlatformUtils.getRavenEventProps();
|
|
672
|
+
var payload = tslib.__assign({ action_name: 'login_successful', login_form: eventProps === null || eventProps === void 0 ? void 0 : eventProps.loginForm, login_type: 'native', login_new: action ? 'sign_up' : 'sign_in', vertical: eventProps === null || eventProps === void 0 ? void 0 : eventProps.vertical, page_name: eventProps === null || eventProps === void 0 ? void 0 : eventProps.pageName }, ravenPayload);
|
|
673
|
+
if (sendUserInsights) {
|
|
674
|
+
ctPlatformUtils.sendEventWithUserInsights('u_login_success', payload);
|
|
675
|
+
}
|
|
676
|
+
else {
|
|
677
|
+
ctPlatformUtils.ravenSDKTrigger('u_login_success', payload);
|
|
678
|
+
}
|
|
679
|
+
if (hotelsLoyaltyFlow) {
|
|
680
|
+
onAuthSuccess(handleDrawerClose);
|
|
681
|
+
}
|
|
682
|
+
else {
|
|
683
|
+
onAuthSuccess();
|
|
684
|
+
if (action && !skipProfileFlow) ;
|
|
685
|
+
else {
|
|
686
|
+
handleDrawerClose();
|
|
687
|
+
setShowSuccess(true);
|
|
688
|
+
}
|
|
689
|
+
}
|
|
690
|
+
}, [ravenPayload, skipProfileFlow, hotelsLoyaltyFlow, sendUserInsights]);
|
|
691
|
+
var handleLoginFailure = react.useCallback(function (loginMethod) {
|
|
692
|
+
onAuthFailure(loginMethod);
|
|
693
|
+
}, []);
|
|
694
|
+
var handleDrawerClose = function (evt) {
|
|
695
|
+
evt === null || evt === void 0 ? void 0 : evt.stopPropagation();
|
|
696
|
+
setShowLoginForm(false);
|
|
697
|
+
setMobileNumber('');
|
|
698
|
+
setCtaDisabled(true);
|
|
699
|
+
var eventProps = ctPlatformUtils.getRavenEventProps();
|
|
700
|
+
ctPlatformUtils.ravenSDKTrigger('u_login_click', tslib.__assign({ action_name: 'login_prompt_dismissed', login_form: eventProps === null || eventProps === void 0 ? void 0 : eventProps.loginForm, login_type: 'native', vertical: eventProps === null || eventProps === void 0 ? void 0 : eventProps.vertical, page_name: eventProps === null || eventProps === void 0 ? void 0 : eventProps.pageName }, ravenPayload));
|
|
701
|
+
if (handleLoginClose && typeof handleLoginClose === 'function') {
|
|
702
|
+
handleLoginClose();
|
|
703
|
+
}
|
|
704
|
+
};
|
|
705
|
+
react.useEffect(function () {
|
|
706
|
+
if (isDrawerOpen) {
|
|
707
|
+
setShowMobilePage(true);
|
|
708
|
+
setShowLoginForm(true);
|
|
709
|
+
var eventProps = ctPlatformUtils.getRavenEventProps();
|
|
710
|
+
ctPlatformUtils.ravenSDKTrigger('u_login_popup', tslib.__assign({ action_name: 'login_prompt_opened', login_form: eventProps === null || eventProps === void 0 ? void 0 : eventProps.loginForm, login_type: 'native', vertical: eventProps === null || eventProps === void 0 ? void 0 : eventProps.vertical, page_name: eventProps === null || eventProps === void 0 ? void 0 : eventProps.pageName }, ravenPayload));
|
|
711
|
+
}
|
|
712
|
+
else {
|
|
713
|
+
setShowLoginForm(false);
|
|
714
|
+
}
|
|
715
|
+
}, [isDrawerOpen]);
|
|
716
|
+
return (jsxRuntime.jsx(ctDesignTheme.ThemeProvider, { children: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ctPlatformDrawer.Drawer, tslib.__assign({ direction: 'bottom', isOpen: showLoginForm, showClose: true, overlay: true, handleClose: handleDrawerClose, onClose: function () { }, closeOnOutsideClick: closeOnOutsideClick }, { children: jsxRuntime.jsx("div", tslib.__assign({ className: "".concat(styles$1['utilswrapper'], " utilswrapper") }, { children: jsxRuntime.jsxs("div", tslib.__assign({ style: {
|
|
717
|
+
maxHeight: 'calc(100dvh - 60px)',
|
|
718
|
+
overflowY: 'auto',
|
|
719
|
+
borderRadius: '16px 16px 0 0',
|
|
720
|
+
} }, { children: [showCarousel && (jsxRuntime.jsx(CarouselWrapper, { customSlides: customSlides, carouselImages: carouselImages })), jsxRuntime.jsxs("div", tslib.__assign({ className: styles$1['login_form'] }, { children: [jsxRuntime.jsx("div", { children: jsxRuntime.jsx(ctDesignSpacer.Spacer, { className: 'pt-6' }) }), showMobilePage ? (jsxRuntime.jsx(MobileInput, { device: 'PWA', ctaDisabled: ctaDisabled, sendingOtp: sendingOtp, getOTP: getOTP, mobileNumber: mobileNumber, setMobileNumber: setMobileNumber, setMobileInputHeight: setMobileInputHeight, fallbackUri: fallbackUri, skipProfileFlow: skipProfileFlow, currentPageUri: currentPageUri, setErrorCallout: setErrorCallout, errorCallout: errorCallout, ravenPayload: ravenPayload, hotelsLoyaltyFlow: hotelsLoyaltyFlow })) : (jsxRuntime.jsx(OtpInput, { mobileNumber: mobileNumber, getOTP: getOTP, setCtaDisabled: setCtaDisabled, setShowMobilePage: setShowMobilePage, handleLoginSuccess: handleLoginSuccess, handleLoginFailure: handleLoginFailure, otpInputHeight: mobileInputHeight, setMobileNumber: setMobileNumber, setErrorCallout: setErrorCallout, errorCallout: errorCallout, otpResendDisabled: otpResendDisabled, ravenPayload: ravenPayload, skipProfileFlow: skipProfileFlow, hotelsLoyaltyFlow: hotelsLoyaltyFlow }))] }))] })) })) })), showSuccess && (jsxRuntime.jsx(ctDesignToast.Toast, { text: 'Logged in successfully!', show: showSuccess, className: "".concat(styles$1.nonUtilsSelector_toast), closeTimeout: 2000 })), showSigninLoader && (jsxRuntime.jsx(Loader, { title: 'Please wait', message: 'Signing in...', className: 'z-10 bg-white' }))] }) }));
|
|
721
|
+
};
|
|
722
|
+
|
|
723
|
+
exports.LoginModule = LoginModule;
|
|
2
724
|
//# sourceMappingURL=ct-platform-login-module.cjs.js.map
|