@cleartrip/ct-platform-login-form 1.2.0 → 1.2.1-beta.0

package/dist/ct-platform-login-form.esm.js

@@ -1,2 +1,540 @@
-import{__assign as e,__awaiter as n,__generator as i,__spreadArray as o}from"tslib";import{jsx as t,jsxs as r,Fragment as l}from"react/jsx-runtime";import{useRef as a,useState as c,useEffect as d,useCallback as s}from"react";import{getRavenEventProps as u,ravenSDKTrigger as _,isIOSApp as m,autoReadOtp as p,isEmpty as f,updateNativeOnLogin as v,validateOtp as g,isHTMLInputElement as h,isNumeric as x,isFKSSOEnabled as b,isAndroidApp as N,isPwa as y,handleFKSSO as T,MULTI_SPACE as E,isValidMobileNumber as w,showMobileNumberHint as k,triggerOTPListener as C,sendLoginOtp as P,sendEventWithUserInsights as O,handleProfileFetch as D,getQueryParam as L,updateNativeAndroidOnSignIn as R}from"@cleartrip/ct-platform-utils";import{Toast as S}from"@cleartrip/ct-design-toast";import{LOGIN_CONSTANTS as F,NAVIGATION_ROUTES as I}from"@cleartrip/ct-platform-constants";import{FieldV2 as A,PhoneField as U}from"@cleartrip/ct-design-field";import{Spacer as V}from"@cleartrip/ct-design-spacer";import{Spinner as G}from"@cleartrip/ct-design-spinner";import{Typography as M}from"@cleartrip/ct-design-typography";import{AlertCallout as B}from"@cleartrip/ct-design-alert-callout";import{InfoIcon as H,Edit as X,CheckCircle as W}from"@cleartrip/ct-design-icons";import z from"classnames";import{Button as Y}from"@cleartrip/ct-design-button";import{Divider as j}from"@cleartrip/ct-design-divider";import{FlipkartLogo as K}from"@cleartrip/ct-platform-assets";function J(e,n){void 0===n&&(n={});var i=n.insertAt;if(e&&"undefined"!=typeof document){var o=document.head||document.getElementsByTagName("head")[0],t=document.createElement("style");t.type="text/css","top"===i&&o.firstChild?o.insertBefore(t,o.firstChild):o.appendChild(t),t.styleSheet?t.styleSheet.cssText=e:t.appendChild(document.createTextNode(e))}}var Q={mobileinput_seperatortext:"index-module_mobileinput_seperatortext__-KDOp",footer_text:"index-module_footer_text__nkeJv",otp_container:"index-module_otp_container__1CE4N",otp_box_wrapper:"index-module_otp_box_wrapper__sM2Ba",login_otp_input:"index-module_login_otp_input__L-3P8",login_otp_error:"index-module_login_otp_error__o3y2L",nonUtilsSelector_toast:"index-module_nonUtilsSelector_toast__lvWmB"};J(".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_footer_text__nkeJv{color:grey!important;font-size:12px!important}.index-module_otp_container__1CE4N{display:flex;flex-direction:column;margin-top:24px}.index-module_otp_box_wrapper__sM2Ba{margin-right:8px}.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_login_otp_error__o3y2L{padding-top:4px}.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}");var Z="index-module_loader__container__VX-VO",q="index-module_three-dots-loader__i7R-R";J('.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 $,ee=function(){return t("div",e({className:Z},{children:t("div",{className:q})}))};!function(e){e[e.DETECTING=0]="DETECTING",e[e.FAILED=1]="FAILED",e[e.DETECTED=2]="DETECTED"}($||($={}));var ne=function(b){var N=b.mobileNumber,y=b.errorCallout,T=b.ravenPayload,E=b.otpInputHeight,w=b.skipProfileFlow,k=b.otpResendDisabled,C=b.hotelsLoyaltyFlow,P=b.getOTP,O=b.setCtaDisabled,D=b.setErrorCallout,L=b.setMobileNumber,R=b.setShowMobilePage,S=b.handleLoginSuccess,U=b.handleLoginFailure,z=a(Array(4).fill(null)),Y=c($.DETECTING),j=Y[0],K=Y[1],J=c(F.OTP_COUNTDOWN),Z=J[0],q=J[1],ne=c(""),ie=ne[0],oe=ne[1],te=c(!0),re=te[0],le=te[1],ae=c(!1),ce=ae[0],de=ae[1],se=c(""),ue=se[0],_e=se[1],me=c(!0),pe=me[0],fe=me[1],ve=c(!1),ge=ve[0],he=ve[1],xe=a(),be=a(),Ne="CT";d((function(){ye();var n=u();_("u_login_click",e({action_name:"login_otp_screen_opened",login_form:null==n?void 0:n.loginForm,login_type:"native",vertical:null==n?void 0:n.vertical,page_name:null==n?void 0:n.pageName},T))}),[]),d((function(){m()&&fe(!1)}),[]),d((function(){ye()}),[]),d((function(){ge||(z.current[0].focus(),z.current[0].click())}),[ge]),d((function(){0===Z&&le(!1)}),[Z]),d((function(){var e;return re&&Z>0&&(e=setInterval((function(){q((function(e){return e-1}))}),1e3)),function(){clearInterval(e)}}),[re,Z]);var ye=s((function(){return n(void 0,void 0,void 0,(function(){var e;return i(this,(function(n){switch(n.label){case 0:return n.trys.push([0,2,,3]),[4,p()];case 1:return e=n.sent(),oe(e),K($.DETECTED),(null==e?void 0:e.length)===F.OTP_LENGTH&&Ee&&Ee(e,!0),[3,3];case 2:return"NOT_SUPPORTED"===n.sent()&&fe(!1),[3,3];case 3:return[2]}}))}))}),[pe]),Te=s((function(n){var i=u();_("u_login_error",e({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},T));var o=null==n?void 0:n.message;"OTP_VALIDATE_LIMIT_EXCEEDED"!==o&&oe(""),z.current[0].focus(),z.current[0].click();var t=F[o],r="string"==typeof t?t:F.INVALID_OTP;_e(r)}),[z]),Ee=s((function(o,t){return n(void 0,void 0,void 0,(function(){var n,r,l,a,c;return i(this,(function(i){switch(i.label){case 0:return i.trys.push([0,2,,3]),n=u(),_("u_login_click",e({action_name:"otp_entered",login_form:null==n?void 0:n.loginForm,login_type:"native",entry_type:t?"autodetected":"manual_entry",vertical:null==n?void 0:n.vertical,page_name:null==n?void 0:n.pageName},T)),o===xe.current&&be.current&&be.current-Date.now()<=100?[2]:(xe.current=o,be.current=Date.now(),C&&he(!0),[4,g(N,o)]);case 1:return r=i.sent(),l=r.status,a=r.action,200!==Number(l)||f(a)?(C&&he(!1),U(Ne)):(de(!0),_e(""),v(),"SIGNUP"===a?(w||(window.location.href=I.PERSONAL_DETAILS+"?onboardingFlow=true"),S(Ne,!0)):S(Ne)),[3,3];case 2:return c=i.sent(),C&&he(!1),U(Ne),Te(c),[3,3];case 3:return[2]}}))}))}),[xe,be,de,K,_e,Te]),we=function(){return n(void 0,void 0,void 0,(function(){var e,n,o,t,r;return i(this,(function(i){switch(i.label){case 0:return[4,navigator.clipboard.readText()];case 1:return(e=i.sent())&&x(e)&&(n=e.slice(0,F.OTP_LENGTH).split(""),null===(t=z.current[F.OTP_LENGTH-1])||void 0===t||t.focus(),null===(r=z.current[F.OTP_LENGTH-1])||void 0===r||r.click(),o=n.join(""),oe(o),o.length===F.OTP_LENGTH&&Ee(o,!1)),[2]}}))}))},ke=s((function(e,n){var i,o;D(""),""!==e.target.value&&n<z.current.length-1&&(null===(i=z.current[n+1])||void 0===i||i.focus(),null===(o=z.current[n+1])||void 0===o||o.click());var t=z.current.map((function(e){return h(e)?e.value:""})).join("").slice(0,4);oe(t),t.length===F.OTP_LENGTH&&Ee(t,!1)}),[oe,Ee]),Ce=s((function(e,n){var i,o,t;"Backspace"===e.key&&n>0&&""===(null===(i=z.current[n])||void 0===i?void 0:i.value)&&(e.preventDefault(),null===(o=z.current[n-1])||void 0===o||o.focus(),null===(t=z.current[n-1])||void 0===t||t.click())}),[z]),Pe=s((function(){q(F.OTP_COUNTDOWN),le(!0),P(N);var n=u();_("u_login_error",e({action_name:"resend_otp_clicked",login_form:null==n?void 0:n.loginForm,login_type:"native",vertical:null==n?void 0:n.vertical,page_name:null==n?void 0:n.pageName},T))}),[q,le]),Oe=s((function(){O(!0),R(!0),L("")}),[R]);return r("div",e({className:"flex flex-column bg-neutral-100",style:{height:E}},{children:[y&&t(B,{variant:"error",textNode:y,prefixIconNode:t(H,{fill:"red"}),style:{color:"#ffff",backgroundColor:"#db201e"},className:"fs-12"}),r("div",e({className:"flex flex-bottom"},{children:[r(M,e({variant:"HM1",color:"heading"},{children:[F.OTP_TEXT," ",t("br",{}),N]})),t("div",e({className:"pl-2",onClick:Oe},{children:t(X,{})}))]})),r("div",e({className:Q.otp_container},{children:[r("div",e({className:"flex",style:C?{width:"max-content",position:"relative"}:{}},{children:[o([],Array(F.OTP_LENGTH),!0).map((function(n,i){return t("div",e({className:Q.otp_box_wrapper},{children:t(A,{prompt:{hasError:!!ue},type:"number",placeholder:"",value:ie[i],max:1,inputMode:"numeric",className:Q.login_otp_input,variant:"md",ref:function(e){e&&(z.current[i]=e)},onKeyDown:function(e){return Ce(e,i)},onChange:function(e){return ke(e,i)},onPaste:we,autoFocus:0===i,disabled:!(!C||!ge)})}),i)})),C&&ge&&t(ee,{})]})),!!ue&&t(M,e({variant:"P1",color:"warning",className:Q.login_otp_error},{children:ue}))]})),t(V,{className:"pt-2"}),j===$.DETECTING&&!ce&&pe&&Z>F.RESEND_OTP_COUNTDOWN&&r("div",e({className:"flex flex-middle"},{children:[t(G,{width:"20px",height:"20px",borderColor:"#11a670",className:"bg-neutral-900 bc-black"}),t(M,e({variant:"B3",className:"fs-12 fw-500 ml-1 c-neutral-700"},{children:F.AUTO_DETECTING_TEXT}))]})),j===$.DETECTING&&Z<=F.RESEND_OTP_COUNTDOWN&&pe&&!ce&&t(l,{children:r("div",e({className:"flex"},{children:[t(M,e({variant:"B3",className:"fs-12 fw-500  c-neutral-700 "},{children:F.OTP_RESEND_TEXT})),t(V,{className:"ml-1"}),k?t(M,e({className:"color-neutral-200 fw-500",variant:"B3"},{children:F.RESEND_CTA})):r(l,{children:[0===Z&&t(l,{children:t(M,e({isClickable:!0,variant:"B3",onClick:Pe,color:"link",className:"\n                                                fs-12 fw-500 c-pointer"},{children:F.RESEND_CTA}))}),Z>0&&t(M,e({color:"disabled",variant:"B3"},{children:" Resend ("+Z+"s)"}))]})]}))}),!ue&&ce&&t(l,{children:r("div",e({className:"flex flex-middle"},{children:[t(W,{}),t(M,e({variant:"P1",color:"success",className:"fs-12"},{children:j===$.DETECTED?F.AUTO_DETECTED_TEXT:F.VERIFIED_MESSAGE}))]}))}),t(V,{className:"mt-24"})]}))},ie={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"};J(".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 oe=function(n){var i=n.title,o=n.message,l=n.className;return t("div",e({className:"".concat(ie.utilswrapper," utilswrapper")},{children:t("div",e({className:z(ie.loader,l)},{children:r("div",e({className:ie.loader__content},{children:[t("div",{className:ie.loader__spinner}),t("h5",e({className:ie.loader__heading},{children:i})),t("p",e({className:ie.loader__text},{children:o}))]}))}))}))},te=function(o){var m=o.sendingOtp,p=o.ctaDisabled,f=o.getOTP,v=o.setErrorCallout,g=o.errorCallout,h=o.mobileNumber,x=o.setMobileInputHeight,C=o.setMobileNumber,P=o.fallbackUri,O=o.skipProfileFlow,D=o.ravenPayload,L=o.hotelsLoyaltyFlow,R=o.isFkLoginEnabled,S=void 0===R||R,A=o.isPrivacyPolicyVisible,V=void 0===A||A,G=c(b)[0],X=c(!1),W=X[0],z=X[1],J=a(null),Z=a(null);d((function(){if(Z.current){var e=Z.current.clientHeight;x(e)}}),[Z.current]),d((function(){var e;return J.current&&(e=setTimeout((function(){var e;null===(e=J.current)||void 0===e||e.focus()}),100)),function(){clearTimeout(e)}}),[]),d((function(){N()&&ee()}),[]);var q=s((function(){return n(void 0,void 0,void 0,(function(){var n,o;return i(this,(function(i){switch(i.label){case 0:return i.trys.push([0,2,,3]),n=u(),_("u_login_click",e({action_name:"login_with_flipkart_clicked",login_form:null==n?void 0:n.loginForm,login_type:"fk_sso",vertical:null==n?void 0:n.vertical,page_name:null==n?void 0:n.pageName},D)),z(!0),[4,T(P,O)];case 1:return o=i.sent(),L||z(!1),y()&&(window.location.href=o),[3,3];case 2:return i.sent(),z(!1),[3,3];case 3:return[2]}}))}))}),[]),$=s((function(n,i){void 0===i&&(i=!1),v("");var o=n.target.value||"";if(o=o.replace(E," ").trimStart(),C(o),w(n.target.value)){f(o);var t=u();_("u_login_click",e({action_name:"get_otp_clicked",login_form:null==t?void 0:t.loginForm,login_type:"native",entry_type:"auto_click",vertical:null==t?void 0:t.vertical,page_name:null==t?void 0:t.pageName},D)),_("u_login_click",e(i?{action_name:"phone_number_autodetected",login_form:null==t?void 0:t.loginForm,login_type:"native",entry_type:"autodetected",vertical:null==t?void 0:t.vertical,page_name:null==t?void 0:t.pageName}:{action_name:"phone_number_entered",login_form:null==t?void 0:t.loginForm,login_type:"native",entry_type:"manual_entry",vertical:null==t?void 0:t.vertical,page_name:null==t?void 0:t.pageName},D))}}),[C]),ee=s((function(){return n(void 0,void 0,void 0,(function(){var e,n;return i(this,(function(i){switch(i.label){case 0:return[4,k()];case 1:return e=i.sent(),n={target:{value:e}},e&&$(n,!0),[2]}}))}))}),[$]),ne=s((function(){var n=u();_("u_login_click",e({action_name:"policy_click",login_form:null==n?void 0:n.loginForm,login_type:"native",vertical:null==n?void 0:n.vertical,page_name:null==n?void 0:n.pageName},D)),window.location.href=I.PRIVACY_POLICY}),[]),ie=s((function(){var n=u();_("u_login_click",e({action_name:"tnc_click",login_form:null==n?void 0:n.loginForm,login_type:"native",vertical:null==n?void 0:n.vertical,page_name:null==n?void 0:n.pageName},D)),window.location.href=I.TERMS}),[]);return r("div",e({className:"flex flex-column",ref:Z},{children:[g&&t(B,{variant:"error",textNode:g,prefixIconNode:t(H,{fill:"red"}),style:{color:"#ffff",backgroundColor:"#db201e"},className:"fs-12"}),t(M,e({variant:"HM1",color:"heading",className:"mb-4 fs-24"},{children:F.LOGIN_TO_CT})),t("label",e({style:{visibility:"hidden",width:"0.1px",height:"0.1px"},htmlFor:"phonenumber"},{children:"Phone number"})),t(U,{onChange:$,value:h,name:"phonenumber",placeholder:"",inputMode:"numeric",ref:J,min:0,max:10,autoFocus:!0,countryCode:F.COUNTRY_CODE}),t(Y,e({color:"primary",size:"medium",minWidth:"160px",disabled:p,loading:m,className:"my-6",onClick:function(){return f(h)}},{children:F.GET_OTP})),G&&S&&r(l,{children:[r("div",e({className:"my-6 p-relative"},{children:[t(j,{}),t("span",e({className:"".concat(Q.mobileinput_seperatortext)},{children:"or"}))]})),t(Y,e({variant:"outline",size:"medium",className:"my-6",loading:W,onClick:q,showLeftIcon:!W,LeftIcon:t("img",{src:K})},{children:F.FK_LOGIN_CTA}))]}),V&&r("div",e({className:"pt-8 pb-6"},{children:[t(j,{}),r("div",e({className:"flex flex-middle \n                    flex-center flex-wrap pt-2"},{children:[t(M,e({variant:"P1",className:Q.footer_text},{children:F.FOOTER_TEXT})),t(M,e({variant:"P1",color:"link",className:"pl-1 fs-12",isClickable:!0,onClick:ne},{children:F.PRIVACY_CTA})),t(M,e({className:"px-1 fs-12 c-neutral-700",variant:"P1"},{children:"& "})),t(M,e({variant:"P1",color:"link",isClickable:!0,onClick:ie,className:"fs-12"},{children:F.TNC_CTA}))]}))]}))]}))},re=function(o){var l=o.fallbackUri,a=o.isBottomSheet,m=o.skipProfileFlow,p=o.sendUserInsights,f=o.isFkLoginEnabled,v=o.ravenPayload,g=void 0===v?{}:v,h=o.hotelsLoyaltyFlow,x=o.enableProfileFetch,b=o.isPrivacyPolicyVisible,y=o.onAuthSuccess,T=o.onAuthFailure,E=c(!0),w=E[0],k=E[1],I=c(!0),A=I[0],U=I[1],V=c(!1),G=V[0],M=V[1],B=c(""),H=B[0],X=B[1],W=c(0),z=W[0],Y=W[1],j=c(""),K=j[0],J=j[1],Z=c(!1),q=Z[0],$=Z[1],ee=c(!1),ie=ee[0],re=ee[1],le=c(!1),ae=le[0],ce=le[1],de=s((function(e){return n(void 0,void 0,void 0,(function(){var n,o,t,r;return i(this,(function(i){switch(i.label){case 0:return i.trys.push([0,2,,3]),U(!1),M(!0),C(),[4,P(e)];case 1:return n=i.sent(),"SUCCESS"===(n||{}).status&&(k(!1),M(!1)),[3,3];case 2:return o=i.sent(),console.error(o),t=(o||{}).message,M(!1),r=t&&F[t],J(String(r||F.GENERIC_ERROR_MESSAGE)),"OTP_SEND_LIMIT_EXCEEDED"===t&&$(!0),[3,3];case 3:return[2]}}))}))}),[w,k]),se=s((function(n,i){var o=u(),t=e({action_name:"login_successful",login_form:null==o?void 0:o.loginForm,login_type:"native",login_new:i?"sign_up":"sign_in",vertical:null==o?void 0:o.vertical,page_name:null==o?void 0:o.pageName},g);p?O("u_login_success",t):_("u_login_success",t),x&&D(),h||a||i&&!m||re(!0),y(i)}),[g,a,m,p,h,x]),ue=s((function(e){T(e)}),[]),_e=function(){ce(!0)};return d((function(){window&&(window.showSigninLoaderScreen=_e);var e=L("fkSSOstatus"),n="FK";"signin"===e&&(N()&&R(),se(n)),"signup"===e&&(N()&&R(),se(n,!0)),"failure"===e&&ue(n)}),[]),r("div",e({className:"".concat(Q.utilswrapper," utilswrapper")},{children:[ie&&t(S,{text:"Logged in successfully!",show:ie,className:"".concat(Q.nonUtilsSelector_toast),closeTimeout:2e3}),ae&&t(oe,{title:"Please wait",message:"Signing in...",className:"z-10 bg-white"}),w?t(te,{device:"PWA",ctaDisabled:A,sendingOtp:G,getOTP:de,mobileNumber:H,setMobileNumber:X,setMobileInputHeight:Y,fallbackUri:l,skipProfileFlow:m,setErrorCallout:J,errorCallout:K,ravenPayload:g,hotelsLoyaltyFlow:h,isFkLoginEnabled:f,isPrivacyPolicyVisible:b}):t(ne,{mobileNumber:H,getOTP:de,setCtaDisabled:U,setShowMobilePage:k,handleLoginSuccess:se,handleLoginFailure:ue,otpInputHeight:z,setMobileNumber:X,setErrorCallout:J,errorCallout:K,otpResendDisabled:q,ravenPayload:g,skipProfileFlow:m,hotelsLoyaltyFlow:h})]}))};export{re as LoginForm};
+import { __assign, __awaiter, __generator, __spreadArray } from 'tslib';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useRef, useState, useEffect, useCallback } from 'react';
+import { getRavenEventProps, ravenSDKTrigger, isIOSApp, autoReadOtp, isEmpty, updateNativeOnLogin, validateOtp, isHTMLInputElement, isNumeric, isFKSSOEnabled, isAndroidApp, isPwa, handleFKSSO, MULTI_SPACE, isValidMobileNumber, showMobileNumberHint, triggerOTPListener, sendLoginOtp, sendEventWithUserInsights, handleProfileFetch, getQueryParam, updateNativeAndroidOnSignIn } from '@cleartrip/ct-platform-utils';
+import { Toast } from '@cleartrip/ct-design-toast';
+import { LOGIN_CONSTANTS, NAVIGATION_ROUTES } from '@cleartrip/ct-platform-constants';
+import { FieldV2, PhoneField } from '@cleartrip/ct-design-field';
+import { Spacer } from '@cleartrip/ct-design-spacer';
+import { Spinner } from '@cleartrip/ct-design-spinner';
+import { Typography } from '@cleartrip/ct-design-typography';
+import { AlertCallout } from '@cleartrip/ct-design-alert-callout';
+import { InfoIcon, Edit, CheckCircle } from '@cleartrip/ct-design-icons';
+import classNames from 'classnames';
+import { Button } from '@cleartrip/ct-design-button';
+import { Divider } from '@cleartrip/ct-design-divider';
+import { FlipkartLogo } from '@cleartrip/ct-platform-assets';
+
+function styleInject(css, ref) {
+  if (ref === void 0) ref = {};
+  var insertAt = ref.insertAt;
+  if (!css || typeof document === 'undefined') {
+    return;
+  }
+  var head = document.head || document.getElementsByTagName('head')[0];
+  var style = document.createElement('style');
+  style.type = 'text/css';
+  if (insertAt === 'top') {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+
+var css_248z$2 = ".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_footer_text__nkeJv{color:grey!important;font-size:12px!important}.index-module_otp_container__1CE4N{display:flex;flex-direction:column;margin-top:24px}.index-module_otp_box_wrapper__sM2Ba{margin-right:8px}.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_login_otp_error__o3y2L{padding-top:4px}.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}";
+var styles = {"mobileinput_seperatortext":"index-module_mobileinput_seperatortext__-KDOp","footer_text":"index-module_footer_text__nkeJv","otp_container":"index-module_otp_container__1CE4N","otp_box_wrapper":"index-module_otp_box_wrapper__sM2Ba","login_otp_input":"index-module_login_otp_input__L-3P8","login_otp_error":"index-module_login_otp_error__o3y2L","nonUtilsSelector_toast":"index-module_nonUtilsSelector_toast__lvWmB"};
+styleInject(css_248z$2);
+
+var css_248z$1 = ".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 Styles$1 = {"loader__container":"index-module_loader__container__VX-VO","three-dots-loader":"index-module_three-dots-loader__i7R-R"};
+styleInject(css_248z$1);
+
+var ThreeDotsLoader = function () {
+    return (jsx("div", __assign({ className: Styles$1['loader__container'] }, { children: jsx("div", { className: Styles$1['three-dots-loader'] }) })));
+};
+
+var AutoDetectState;
+(function (AutoDetectState) {
+    AutoDetectState[AutoDetectState["DETECTING"] = 0] = "DETECTING";
+    AutoDetectState[AutoDetectState["FAILED"] = 1] = "FAILED";
+    AutoDetectState[AutoDetectState["DETECTED"] = 2] = "DETECTED";
+})(AutoDetectState || (AutoDetectState = {}));
+var OtpInput = function (_a) {
+    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;
+    var inputRefs = useRef(Array(4).fill(null));
+    var _b = useState(AutoDetectState.DETECTING), autoDetecting = _b[0], setAutoDetecting = _b[1];
+    var _c = useState(LOGIN_CONSTANTS.OTP_COUNTDOWN), countdown = _c[0], setCountdown = _c[1];
+    var _d = useState(''), otp = _d[0], setOtp = _d[1];
+    var _f = useState(true), countdownEnabled = _f[0], setCountdownEnabled = _f[1];
+    var _g = useState(false), verifiedOtp = _g[0], setVerifiedOtp = _g[1];
+    var _h = useState(''), otpErrorMessage = _h[0], setOtpErrorMessage = _h[1];
+    var _j = useState(true), enableAutoDetect = _j[0], setEnableAutoDetect = _j[1];
+    var _k = useState(false), showOtpVerificationLoader = _k[0], setShowOtpVerificationLoader = _k[1];
+    var lastOtpRequest = useRef();
+    var lastOtpRequestTimeStamp = useRef();
+    var loginMethod = 'CT';
+    useEffect(function () {
+        autoDetect();
+        var eventProps = getRavenEventProps();
+        ravenSDKTrigger('u_login_click', __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));
+    }, []);
+    useEffect(function () {
+        if (isIOSApp()) {
+            setEnableAutoDetect(false);
+        }
+    }, []);
+    useEffect(function () {
+        autoDetect();
+    }, []);
+    useEffect(function () {
+        if (!showOtpVerificationLoader) {
+            inputRefs.current[0].focus();
+            inputRefs.current[0].click();
+        }
+    }, [showOtpVerificationLoader]);
+    useEffect(function () {
+        if (countdown === 0) {
+            setCountdownEnabled(false);
+        }
+    }, [countdown]);
+    useEffect(function () {
+        var interval;
+        if (countdownEnabled && countdown > 0) {
+            interval = setInterval(function () {
+                setCountdown(function (prevCountdown) { return prevCountdown - 1; });
+            }, 1000);
+        }
+        return function () {
+            clearInterval(interval);
+        };
+    }, [countdownEnabled, countdown]);
+    var autoDetect = useCallback(function () { return __awaiter(void 0, void 0, void 0, function () {
+        var otp_1, _e_1;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    _a.trys.push([0, 2, , 3]);
+                    return [4, autoReadOtp()];
+                case 1:
+                    otp_1 = _a.sent();
+                    setOtp(otp_1);
+                    setAutoDetecting(AutoDetectState.DETECTED);
+                    if ((otp_1 === null || otp_1 === void 0 ? void 0 : otp_1.length) === LOGIN_CONSTANTS.OTP_LENGTH &&
+                        handleOtpComplete) {
+                        handleOtpComplete(otp_1, true);
+                    }
+                    return [3, 3];
+                case 2:
+                    _e_1 = _a.sent();
+                    if (_e_1 === 'NOT_SUPPORTED') {
+                        setEnableAutoDetect(false);
+                    }
+                    return [3, 3];
+                case 3: return [2];
+            }
+        });
+    }); }, [enableAutoDetect]);
+    var handleOtpValidationError = useCallback(function (e) {
+        var eventProps = getRavenEventProps();
+        ravenSDKTrigger('u_login_error', __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));
+        var message = e === null || e === void 0 ? void 0 : e.message;
+        if (message !== 'OTP_VALIDATE_LIMIT_EXCEEDED') {
+            setOtp('');
+        }
+        inputRefs.current[0].focus();
+        inputRefs.current[0].click();
+        var messageValue = LOGIN_CONSTANTS[message];
+        var toastMessage = typeof messageValue === 'string'
+            ? messageValue
+            : LOGIN_CONSTANTS.INVALID_OTP;
+        setOtpErrorMessage(toastMessage);
+    }, [inputRefs]);
+    var handleOtpComplete = useCallback(function (otp, autodetected) { return __awaiter(void 0, void 0, void 0, function () {
+        var eventProps, response, status_1, action, e_1;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    _a.trys.push([0, 2, , 3]);
+                    eventProps = getRavenEventProps();
+                    ravenSDKTrigger('u_login_click', __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));
+                    if (otp === lastOtpRequest.current &&
+                        lastOtpRequestTimeStamp.current &&
+                        lastOtpRequestTimeStamp.current - Date.now() <= 100) {
+                        return [2];
+                    }
+                    lastOtpRequest.current = otp;
+                    lastOtpRequestTimeStamp.current = Date.now();
+                    if (hotelsLoyaltyFlow) {
+                        setShowOtpVerificationLoader(true);
+                    }
+                    return [4, validateOtp(mobileNumber, otp)];
+                case 1:
+                    response = _a.sent();
+                    status_1 = response.status, action = response.action;
+                    if (Number(status_1) === 200 && !isEmpty(action)) {
+                        setVerifiedOtp(true);
+                        setOtpErrorMessage('');
+                        updateNativeOnLogin();
+                        if (action === 'SIGNUP') {
+                            if (!skipProfileFlow) {
+                                window.location.href =
+                                    NAVIGATION_ROUTES.PERSONAL_DETAILS +
+                                        '?onboardingFlow=true';
+                            }
+                            handleLoginSuccess(loginMethod, true);
+                        }
+                        else {
+                            handleLoginSuccess(loginMethod);
+                        }
+                    }
+                    else {
+                        if (hotelsLoyaltyFlow) {
+                            setShowOtpVerificationLoader(false);
+                        }
+                        handleLoginFailure(loginMethod);
+                    }
+                    return [3, 3];
+                case 2:
+                    e_1 = _a.sent();
+                    if (hotelsLoyaltyFlow) {
+                        setShowOtpVerificationLoader(false);
+                    }
+                    handleLoginFailure(loginMethod);
+                    handleOtpValidationError(e_1);
+                    return [3, 3];
+                case 3: return [2];
+            }
+        });
+    }); }, [
+        lastOtpRequest,
+        lastOtpRequestTimeStamp,
+        setVerifiedOtp,
+        setAutoDetecting,
+        setOtpErrorMessage,
+        handleOtpValidationError,
+    ]);
+    var handleOnPaste = function () { return __awaiter(void 0, void 0, void 0, function () {
+        var clipboardData, pastedArr, pastedString;
+        var _a, _b;
+        return __generator(this, function (_c) {
+            switch (_c.label) {
+                case 0: return [4, navigator.clipboard.readText()];
+                case 1:
+                    clipboardData = _c.sent();
+                    if (clipboardData && isNumeric(clipboardData)) {
+                        pastedArr = clipboardData
+                            .slice(0, LOGIN_CONSTANTS.OTP_LENGTH)
+                            .split('');
+                        (_a = inputRefs.current[LOGIN_CONSTANTS.OTP_LENGTH - 1]) === null || _a === void 0 ? void 0 : _a.focus();
+                        (_b = inputRefs.current[LOGIN_CONSTANTS.OTP_LENGTH - 1]) === null || _b === void 0 ? void 0 : _b.click();
+                        pastedString = pastedArr.join('');
+                        setOtp(pastedString);
+                        if (pastedString.length === LOGIN_CONSTANTS.OTP_LENGTH) {
+                            handleOtpComplete(pastedString, false);
+                        }
+                    }
+                    return [2];
+            }
+        });
+    }); };
+    var handleInput = useCallback(function (event, index) {
+        var _a, _b;
+        setErrorCallout('');
+        var value = event.target.value;
+        if (value !== '' && index < inputRefs.current.length - 1) {
+            (_a = inputRefs.current[index + 1]) === null || _a === void 0 ? void 0 : _a.focus();
+            (_b = inputRefs.current[index + 1]) === null || _b === void 0 ? void 0 : _b.click();
+        }
+        var inputValues = inputRefs.current.map(function (ref) {
+            if (isHTMLInputElement(ref)) {
+                return ref.value;
+            }
+            return '';
+        });
+        var otpValue = inputValues.join('').slice(0, 4);
+        setOtp(otpValue);
+        if (otpValue.length === LOGIN_CONSTANTS.OTP_LENGTH) {
+            handleOtpComplete(otpValue, false);
+        }
+    }, [setOtp, handleOtpComplete]);
+    var handleKeyDown = useCallback(function (e, index) {
+        var _a, _b, _c;
+        if (e.key === 'Backspace' &&
+            index > 0 &&
+            ((_a = inputRefs.current[index]) === null || _a === void 0 ? void 0 : _a.value) === '') {
+            e.preventDefault();
+            (_b = inputRefs.current[index - 1]) === null || _b === void 0 ? void 0 : _b.focus();
+            (_c = inputRefs.current[index - 1]) === null || _c === void 0 ? void 0 : _c.click();
+        }
+    }, [inputRefs]);
+    var onResendOtpClick = useCallback(function () {
+        setCountdown(LOGIN_CONSTANTS.OTP_COUNTDOWN);
+        setCountdownEnabled(true);
+        getOTP(mobileNumber);
+        var eventProps = getRavenEventProps();
+        ravenSDKTrigger('u_login_error', __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));
+    }, [setCountdown, setCountdownEnabled]);
+    var onEditCLick = useCallback(function () {
+        setCtaDisabled(true);
+        setShowMobilePage(true);
+        setMobileNumber('');
+    }, [setShowMobilePage]);
+    return (jsxs("div", __assign({ className: 'flex flex-column bg-neutral-100', style: { height: otpInputHeight } }, { children: [errorCallout && (jsx(AlertCallout, { variant: 'error', textNode: errorCallout, prefixIconNode: jsx(InfoIcon, { fill: 'red' }), style: {
+                    color: '#ffff',
+                    backgroundColor: '#db201e',
+                }, className: 'fs-12' })), jsxs("div", __assign({ className: 'flex flex-bottom' }, { children: [jsxs(Typography, __assign({ variant: 'HM1', color: 'heading' }, { children: [LOGIN_CONSTANTS.OTP_TEXT, " ", jsx("br", {}), mobileNumber] })), jsx("div", __assign({ className: 'pl-2', onClick: onEditCLick }, { children: jsx(Edit, {}) }))] })), jsxs("div", __assign({ className: styles.otp_container }, { children: [jsxs("div", __assign({ className: 'flex', style: hotelsLoyaltyFlow
+                            ? { width: 'max-content', position: 'relative' }
+                            : {} }, { children: [__spreadArray([], Array(LOGIN_CONSTANTS.OTP_LENGTH), true).map(function (_, i) { return (jsx("div", __assign({ className: styles.otp_box_wrapper }, { children: jsx(FieldV2, { prompt: {
+                                        hasError: !!otpErrorMessage,
+                                    }, type: 'number', placeholder: '', value: otp[i], max: 1, inputMode: 'numeric', className: styles.login_otp_input, variant: 'md', ref: function (ref) {
+                                        if (ref) {
+                                            inputRefs.current[i] = ref;
+                                        }
+                                    }, onKeyDown: function (e) { return handleKeyDown(e, i); }, onChange: function (e) { return handleInput(e, i); }, onPaste: handleOnPaste, autoFocus: i === 0, disabled: hotelsLoyaltyFlow &&
+                                        showOtpVerificationLoader
+                                        ? true
+                                        : false }) }), i)); }), hotelsLoyaltyFlow && showOtpVerificationLoader && (jsx(ThreeDotsLoader, {}))] })), !!otpErrorMessage && (jsx(Typography, __assign({ variant: 'P1', color: 'warning', className: styles.login_otp_error }, { children: otpErrorMessage })))] })), jsx(Spacer, { className: 'pt-2' }), autoDetecting === AutoDetectState.DETECTING &&
+                !verifiedOtp &&
+                enableAutoDetect &&
+                countdown >
+                    LOGIN_CONSTANTS.RESEND_OTP_COUNTDOWN && (jsxs("div", __assign({ className: 'flex flex-middle' }, { children: [jsx(Spinner, { width: '20px', height: '20px', borderColor: '#11a670', className: 'bg-neutral-900 bc-black' }), jsx(Typography, __assign({ variant: 'B3', className: 'fs-12 fw-500 ml-1 c-neutral-700' }, { children: LOGIN_CONSTANTS.AUTO_DETECTING_TEXT }))] }))), autoDetecting === AutoDetectState.DETECTING &&
+                countdown <= LOGIN_CONSTANTS.RESEND_OTP_COUNTDOWN &&
+                enableAutoDetect &&
+                !verifiedOtp && (jsx(Fragment, { children: jsxs("div", __assign({ className: 'flex' }, { children: [jsx(Typography, __assign({ variant: 'B3', className: 'fs-12 fw-500  c-neutral-700 ' }, { children: LOGIN_CONSTANTS.OTP_RESEND_TEXT })), jsx(Spacer, { className: 'ml-1' }), otpResendDisabled ? (jsx(Typography, __assign({ className: 'color-neutral-200 fw-500', variant: 'B3' }, { children: LOGIN_CONSTANTS.RESEND_CTA }))) : (jsxs(Fragment, { children: [countdown === 0 && (jsx(Fragment, { children: jsx(Typography, __assign({ isClickable: true, variant: 'B3', onClick: onResendOtpClick, color: 'link', className: '\n                                                fs-12 fw-500 c-pointer' }, { children: LOGIN_CONSTANTS.RESEND_CTA })) })), countdown > 0 && (jsx(Typography, __assign({ color: 'disabled', variant: 'B3' }, { children: ' Resend (' + countdown + 's)' })))] }))] })) })), !otpErrorMessage && verifiedOtp && (jsx(Fragment, { children: jsxs("div", __assign({ className: 'flex flex-middle' }, { children: [jsx(CheckCircle, {}), jsx(Typography, __assign({ variant: 'P1', color: 'success', className: 'fs-12' }, { children: autoDetecting === AutoDetectState.DETECTED
+                                ? LOGIN_CONSTANTS.AUTO_DETECTED_TEXT
+                                : LOGIN_CONSTANTS.VERIFIED_MESSAGE }))] })) })), jsx(Spacer, { className: 'mt-24' })] })));
+};
+
+var css_248z = ".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 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"};
+styleInject(css_248z);
+
+var Loader = function (_a) {
+    var title = _a.title, message = _a.message, className = _a.className;
+    return (jsx("div", __assign({ className: "".concat(Styles['utilswrapper'], " utilswrapper") }, { children: jsx("div", __assign({ className: classNames(Styles['loader'], className) }, { children: jsxs("div", __assign({ className: Styles['loader__content'] }, { children: [jsx("div", { className: Styles['loader__spinner'] }), jsx("h5", __assign({ className: Styles['loader__heading'] }, { children: title })), jsx("p", __assign({ className: Styles['loader__text'] }, { children: message }))] })) })) })));
+};
+
+var MobileInput = function (_a) {
+    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, ravenPayload = _a.ravenPayload, hotelsLoyaltyFlow = _a.hotelsLoyaltyFlow, _b = _a.isFkLoginEnabled, isFkLoginEnabled = _b === void 0 ? true : _b, _c = _a.isPrivacyPolicyVisible, isPrivacyPolicyVisible = _c === void 0 ? true : _c;
+    var fkSSOEnabled = useState(isFKSSOEnabled)[0];
+    var _d = useState(false), fkButtonLoading = _d[0], setFkButtonLoading = _d[1];
+    var inputRef = useRef(null);
+    var mobileViewRef = useRef(null);
+    useEffect(function () {
+        if (mobileViewRef.current) {
+            var height = mobileViewRef.current.clientHeight;
+            setMobileInputHeight(height);
+        }
+    }, [mobileViewRef.current]);
+    useEffect(function () {
+        var timeout;
+        if (inputRef.current) {
+            timeout = setTimeout(function () {
+                var _a;
+                (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            }, 100);
+        }
+        return function () {
+            clearTimeout(timeout);
+        };
+    }, []);
+    useEffect(function () {
+        if (isAndroidApp()) {
+            autoDetectMobileNumber();
+        }
+    }, []);
+    var handleFKSSOClick = useCallback(function () { return __awaiter(void 0, void 0, void 0, function () {
+        var eventProps, redirectUrl;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    _a.trys.push([0, 2, , 3]);
+                    eventProps = getRavenEventProps();
+                    ravenSDKTrigger('u_login_click', __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));
+                    setFkButtonLoading(true);
+                    return [4, handleFKSSO(fallbackUri, skipProfileFlow)];
+                case 1:
+                    redirectUrl = _a.sent();
+                    if (!hotelsLoyaltyFlow) {
+                        setFkButtonLoading(false);
+                    }
+                    if (isPwa()) {
+                        window.location.href = redirectUrl;
+                    }
+                    return [3, 3];
+                case 2:
+                    _a.sent();
+                    setFkButtonLoading(false);
+                    return [3, 3];
+                case 3: return [2];
+            }
+        });
+    }); }, []);
+    var handleInputChange = useCallback(function (event, autoDetected) {
+        if (autoDetected === void 0) { autoDetected = false; }
+        setErrorCallout('');
+        var value = event.target.value || '';
+        value = value.replace(MULTI_SPACE, ' ').trimStart();
+        setMobileNumber(value);
+        var validMobileNo = isValidMobileNumber(event.target.value);
+        if (validMobileNo) {
+            getOTP(value);
+            var eventProps = getRavenEventProps();
+            ravenSDKTrigger('u_login_click', __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));
+            if (!autoDetected) {
+                ravenSDKTrigger('u_login_click', __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));
+            }
+            else {
+                ravenSDKTrigger('u_login_click', __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));
+            }
+        }
+    }, [setMobileNumber]);
+    var autoDetectMobileNumber = useCallback(function () { return __awaiter(void 0, void 0, void 0, function () {
+        var autoDetectedNumber, simulatedEvent;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0: return [4, showMobileNumberHint()];
+                case 1:
+                    autoDetectedNumber = _a.sent();
+                    simulatedEvent = {
+                        target: {
+                            value: autoDetectedNumber,
+                        },
+                    };
+                    if (autoDetectedNumber) {
+                        handleInputChange(simulatedEvent, true);
+                    }
+                    return [2];
+            }
+        });
+    }); }, [handleInputChange]);
+    var handlePrivacyPolicyClick = useCallback(function () {
+        var eventProps = getRavenEventProps();
+        ravenSDKTrigger('u_login_click', __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));
+        window.location.href = NAVIGATION_ROUTES.PRIVACY_POLICY;
+    }, []);
+    var handleTermsOfUseClick = useCallback(function () {
+        var eventProps = getRavenEventProps();
+        ravenSDKTrigger('u_login_click', __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));
+        window.location.href = NAVIGATION_ROUTES.TERMS;
+    }, []);
+    return (jsxs("div", __assign({ className: 'flex flex-column', ref: mobileViewRef }, { children: [errorCallout && (jsx(AlertCallout, { variant: 'error', textNode: errorCallout, prefixIconNode: jsx(InfoIcon, { fill: 'red' }), style: {
+                    color: '#ffff',
+                    backgroundColor: '#db201e',
+                }, className: 'fs-12' })), jsx(Typography, __assign({ variant: 'HM1', color: 'heading', className: 'mb-4 fs-24' }, { children: LOGIN_CONSTANTS.LOGIN_TO_CT })), jsx("label", __assign({ style: {
+                    visibility: 'hidden',
+                    width: '0.1px',
+                    height: '0.1px',
+                }, htmlFor: 'phonenumber' }, { children: "Phone number" })), jsx(PhoneField, { onChange: handleInputChange, value: mobileNumber, name: 'phonenumber', placeholder: '', inputMode: 'numeric', ref: inputRef, min: 0, max: 10, autoFocus: true, countryCode: LOGIN_CONSTANTS.COUNTRY_CODE }), jsx(Button, __assign({ color: 'primary', size: 'medium', minWidth: '160px', disabled: ctaDisabled, loading: sendingOtp, className: 'my-6', onClick: function () { return getOTP(mobileNumber); } }, { children: LOGIN_CONSTANTS.GET_OTP })), fkSSOEnabled && isFkLoginEnabled && (jsxs(Fragment, { children: [jsxs("div", __assign({ className: 'my-6 p-relative' }, { children: [jsx(Divider, {}), jsx("span", __assign({ className: "".concat(styles.mobileinput_seperatortext) }, { children: "or" }))] })), jsx(Button, __assign({ variant: 'outline', size: 'medium', className: 'my-6', loading: fkButtonLoading, onClick: handleFKSSOClick, showLeftIcon: !fkButtonLoading, LeftIcon: jsx("img", { src: FlipkartLogo }) }, { children: LOGIN_CONSTANTS.FK_LOGIN_CTA }))] })), isPrivacyPolicyVisible && (jsxs("div", __assign({ className: 'pt-8 pb-6' }, { children: [jsx(Divider, {}), jsxs("div", __assign({ className: 'flex flex-middle \n                    flex-center flex-wrap pt-2' }, { children: [jsx(Typography, __assign({ variant: 'P1', className: styles.footer_text }, { children: LOGIN_CONSTANTS.FOOTER_TEXT })), jsx(Typography, __assign({ variant: 'P1', color: 'link', className: 'pl-1 fs-12', isClickable: true, onClick: handlePrivacyPolicyClick }, { children: LOGIN_CONSTANTS.PRIVACY_CTA })), jsx(Typography, __assign({ className: 'px-1 fs-12 c-neutral-700', variant: 'P1' }, { children: '& ' })), jsx(Typography, __assign({ variant: 'P1', color: 'link', isClickable: true, onClick: handleTermsOfUseClick, className: 'fs-12' }, { children: LOGIN_CONSTANTS.TNC_CTA }))] }))] })))] })));
+};
+
+var LoginForm = function (_a) {
+    var fallbackUri = _a.fallbackUri, isLoginModule = _a.isLoginModule, skipProfileFlow = _a.skipProfileFlow, sendUserInsights = _a.sendUserInsights, isFkLoginEnabled = _a.isFkLoginEnabled, _b = _a.ravenPayload, ravenPayload = _b === void 0 ? {} : _b, hotelsLoyaltyFlow = _a.hotelsLoyaltyFlow, enableProfileFetch = _a.enableProfileFetch, isPrivacyPolicyVisible = _a.isPrivacyPolicyVisible, onAuthSuccess = _a.onAuthSuccess, onAuthFailure = _a.onAuthFailure;
+    var _c = useState(true), showMobilePage = _c[0], setShowMobilePage = _c[1];
+    var _d = useState(true), ctaDisabled = _d[0], setCtaDisabled = _d[1];
+    var _e = useState(false), sendingOtp = _e[0], setSendingOtp = _e[1];
+    var _f = useState(''), mobileNumber = _f[0], setMobileNumber = _f[1];
+    var _g = useState(0), mobileInputHeight = _g[0], setMobileInputHeight = _g[1];
+    var _h = useState(''), errorCallout = _h[0], setErrorCallout = _h[1];
+    var _j = useState(false), otpResendDisabled = _j[0], setOtpResendDisabled = _j[1];
+    var _k = useState(false), showSuccess = _k[0], setShowSuccess = _k[1];
+    var _l = useState(false), showSigninLoader = _l[0], setShowSigninLoader = _l[1];
+    var getOTP = useCallback(function (mobileNumber) { return __awaiter(void 0, void 0, void 0, function () {
+        var res, status_1, err_1, message, errorMessage;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    _a.trys.push([0, 2, , 3]);
+                    setCtaDisabled(false);
+                    setSendingOtp(true);
+                    triggerOTPListener();
+                    return [4, sendLoginOtp(mobileNumber)];
+                case 1:
+                    res = _a.sent();
+                    status_1 = (res || {}).status;
+                    if (status_1 === 'SUCCESS') {
+                        setShowMobilePage(false);
+                        setSendingOtp(false);
+                    }
+                    return [3, 3];
+                case 2:
+                    err_1 = _a.sent();
+                    console.error(err_1);
+                    message = (err_1 || {}).message;
+                    setSendingOtp(false);
+                    errorMessage = message && LOGIN_CONSTANTS[message];
+                    if (errorMessage) {
+                        setErrorCallout(String(errorMessage));
+                    }
+                    else {
+                        setErrorCallout(String(LOGIN_CONSTANTS.GENERIC_ERROR_MESSAGE));
+                    }
+                    if (message === 'OTP_SEND_LIMIT_EXCEEDED') {
+                        setOtpResendDisabled(true);
+                    }
+                    return [3, 3];
+                case 3: return [2];
+            }
+        });
+    }); }, [showMobilePage, setShowMobilePage]);
+    var handleLoginSuccess = useCallback(function (loginMethod, isSignUp) {
+        var eventProps = getRavenEventProps();
+        var payload = __assign({ action_name: 'login_successful', login_form: eventProps === null || eventProps === void 0 ? void 0 : eventProps.loginForm, login_type: 'native', login_new: isSignUp ? '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);
+        if (sendUserInsights) {
+            sendEventWithUserInsights('u_login_success', payload);
+        }
+        else {
+            ravenSDKTrigger('u_login_success', payload);
+        }
+        if (enableProfileFetch) {
+            handleProfileFetch();
+        }
+        if (!hotelsLoyaltyFlow &&
+            !isLoginModule &&
+            (!isSignUp || skipProfileFlow)) {
+            setShowSuccess(true);
+        }
+        onAuthSuccess(isSignUp);
+    }, [
+        ravenPayload,
+        isLoginModule,
+        skipProfileFlow,
+        sendUserInsights,
+        hotelsLoyaltyFlow,
+        enableProfileFetch,
+    ]);
+    var handleLoginFailure = useCallback(function (loginMethod) {
+        onAuthFailure(loginMethod);
+    }, []);
+    var showSigninLoaderScreen = function () {
+        setShowSigninLoader(true);
+    };
+    useEffect(function () {
+        if (isLoginModule) {
+            return;
+        }
+        if (window) {
+            window['showSigninLoaderScreen'] = showSigninLoaderScreen;
+        }
+        var queryValue = getQueryParam('fkSSOstatus');
+        var loginMethod = 'FK';
+        if (queryValue === 'signin') {
+            if (isAndroidApp()) {
+                updateNativeAndroidOnSignIn();
+            }
+            handleLoginSuccess(loginMethod);
+        }
+        if (queryValue === 'signup') {
+            if (isAndroidApp()) {
+                updateNativeAndroidOnSignIn();
+            }
+            handleLoginSuccess(loginMethod, true);
+        }
+        if (queryValue === 'failure') {
+            handleLoginFailure(loginMethod);
+        }
+    }, []);
+    return (jsxs("div", __assign({ className: "".concat(styles['utilswrapper'], " utilswrapper") }, { children: [showSuccess && (jsx(Toast, { text: 'Logged in successfully!', show: showSuccess, className: "".concat(styles['nonUtilsSelector_toast']), closeTimeout: 2000 })), showSigninLoader && (jsx(Loader, { title: 'Please wait', message: 'Signing in...', className: 'z-10 bg-white' })), showMobilePage ? (jsx(MobileInput, { device: 'PWA', ctaDisabled: ctaDisabled, sendingOtp: sendingOtp, getOTP: getOTP, mobileNumber: mobileNumber, setMobileNumber: setMobileNumber, setMobileInputHeight: setMobileInputHeight, fallbackUri: fallbackUri, skipProfileFlow: skipProfileFlow, setErrorCallout: setErrorCallout, errorCallout: errorCallout, ravenPayload: ravenPayload, hotelsLoyaltyFlow: hotelsLoyaltyFlow, isFkLoginEnabled: isFkLoginEnabled, isPrivacyPolicyVisible: isPrivacyPolicyVisible })) : (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 }))] })));
+};
+
+export { LoginForm };
 //# sourceMappingURL=ct-platform-login-form.esm.js.map