{offerDetails.productName}
\n \n {offerText}\n {offerDetails.lenskartPrice}\n \n {offerDetails.marketPrice}\n \n
\n \n );\n}\n","import React from 'react';\nimport {\n checkCurrentWhatsappStatus,\n setCurrentWhatsappStatus,\n} from '../actionCreators/gupshupWhatsapp';\nimport { setToastMessage } from '../actionCreators/common';\nimport { connect } from 'react-redux';\nimport './GupshupWhatsapp.scss';\n\nconst toggleStylePages = ['Success', 'OrderList'];\n\nclass GupshupWhatsapp extends React.PureComponent {\n constructor(props) {\n super(props);\n const { page, checkCurrentWhatsappStatus, isOptWhatsApp, WHATSAPP_OPTIN } = props;\n const toggleStyle = toggleStylePages.includes(page);\n if (toggleStyle) checkCurrentWhatsappStatus();\n this.state = {\n isUserOptInForWhatsapp: toggleStyle ? isOptWhatsApp : WHATSAPP_OPTIN.toggle === 'ON',\n };\n this.setWhatsappOptIn = this.setWhatsappOptIn.bind(this);\n this.newStyle = !!this.props.newStyle;\n }\n\n componentDidUpdate(prevProps) {\n const { setToastMessage, isOptWhatsApp, isUserAction, error, dataLocale } = this.props;\n const {\n YOU_WILL_START_RECEIVING_UPDATE,\n YOU_WILL_NOT_RECEIVE_UPDATES,\n UNABLE_TO_SERVE_YOUR_REQUEST,\n } = dataLocale;\n if (prevProps.isOptWhatsApp !== isOptWhatsApp && isUserAction) {\n ('#if CLIENT_TYPE === \"mobile\"'); // eslint-disable-line\n setToastMessage({\n message: (isOptWhatsApp && YOU_WILL_START_RECEIVING_UPDATE) || YOU_WILL_NOT_RECEIVE_UPDATES,\n timeout: 5000,\n });\n ('#endif'); // eslint-disable-line\n }\n if (prevProps.error !== error && error && isUserAction) {\n ('#if CLIENT_TYPE === \"mobile\"'); // eslint-disable-line\n setToastMessage({ warning: true, message: UNABLE_TO_SERVE_YOUR_REQUEST, timeout: 3000 });\n ('#endif'); // eslint-disable-line\n }\n }\n\n setWhatsappOptIn() {\n const { isUserOptInForWhatsapp } = this.state;\n const { isOptWhatsApp, setCurrentWhatsappStatus, checkBoxStatus, page } = this.props;\n const toggleStyle = toggleStylePages.includes(page);\n if (toggleStyle) {\n setCurrentWhatsappStatus(!isOptWhatsApp);\n } else {\n this.setState({ isUserOptInForWhatsapp: !isUserOptInForWhatsapp }, () => {\n checkBoxStatus(this.state.isUserOptInForWhatsapp);\n });\n }\n }\n\n render() {\n const {\n page,\n isOptWhatsApp,\n WHATSAPP_OPTIN,\n dataLocale: { RECEIVE_ORDER_UPDATES_WHATSAPP },\n } = this.props;\n const { isUserOptInForWhatsapp } = this.state;\n const toggleStyle = toggleStylePages.includes(page);\n return (\n \n
\n \n {WHATSAPP_OPTIN.message || RECEIVE_ORDER_UPDATES_WHATSAPP}\n \n \n \n \n
\n \n \n ) : (\n \n {!this.newStyle ? (\n
\n \n {WHATSAPP_OPTIN.message || RECEIVE_ORDER_UPDATES_WHATSAPP}\n \n \n
\n \n )}\n \n \n {\n hideLogin();\n }}\n loginValue={openTab}\n showPassCallback={() => {\n _gaq.push(['_trackEvent', 'SIGNUP POPUP', 'Forget Password', this.pageInfo]);\n _gaq.push(['ninja._trackEvent', 'SIGNUP POPUP', 'Forget Password', this.pageInfo]);\n }}\n showSignUp={this.showSignUp}\n />\n )}\n
\n \n );\n }\n}\n\nconst mapStateToProps = state => ({\n registerError: state.auth.registerError,\n register: state.auth.register,\n redisCommonData: state.common.redisCommonData,\n login: state.common.login,\n loginError: state.auth.loginError,\n user: state.auth.user,\n loading: state.auth.loading,\n userInputValidate: state.auth.userInputValidate,\n oTPSent: state.auth.oTPSent,\n userInputErr: state.auth.userInputErr,\n forgotpassError: state.auth.forgotpassError,\n emailStatus: state.auth.emailStatus,\n username: state.auth.username,\n oTPLoginSuccess: state.auth.oTPLoginSuccess,\n social: state.auth.social,\n socialError: state.auth.socialError,\n location: state.router.location,\n userInfo: state.common.userInfo?.result,\n dataLocale: state.locale,\n});\n\nfunction mapDispatchToProps(dispatch) {\n return {\n registerActions: bindActionCreators(registerActions, dispatch),\n commonActions: bindActionCreators(commonActions, dispatch),\n };\n}\n\nexport default connect(mapStateToProps, mapDispatchToProps)(Auth);\n","import React, { Component } from 'react';\nimport { connect } from 'react-redux';\nimport PropTypes from 'prop-types';\nimport SocialLogin from './SocialLogin';\nimport './LoginTab.scss';\nimport '../../../theme/form-style-label-animation.scss';\nimport { Form, Field } from 'react-final-form';\nimport GupshupWhatsapp from '../../../CommonComponents/GupshupWhatsapp';\nimport CountryCodeInput from '../../../CommonComponents/CountryCodeInput/CountryCodeInput';\nimport { setCurrentWhatsappStatus } from '../../../actionCreators/gupshupWhatsapp';\nimport { langCodeAllowed } from '../../../locales';\nimport BannerPdpDetail from './BannerPdpDetail';\nimport config from '../../../config';\nimport { pushDataLayerEvent } from '../../../utils/DataLayer';\nimport { emailCriteriaFulfilled, onlyNumbersEntered } from '../../../utils/helper';\nimport { phoneCodeToShow } from '../../../helpers/countryConfig';\nimport ForgotPassword from './ForgotPassword';\n\nclass LoginTab extends Component {\n static propTypes = {\n showPassCallback: PropTypes.func,\n hideLogin: PropTypes.func,\n userInfo: PropTypes.object,\n login: PropTypes.bool,\n loginError: PropTypes.string,\n user: PropTypes.object,\n registerActions: PropTypes.any,\n commonActions: PropTypes.any,\n redisCommonData: PropTypes.object,\n userInputValidate: PropTypes.object,\n oTPSent: PropTypes.any,\n userInputErr: PropTypes.object,\n oTPLoginSuccess: PropTypes.any,\n loginFromCL: PropTypes.bool,\n };\n\n constructor(props, context) {\n const { redisCommonData, localeInfo } = props;\n const { phoneCode } = langCodeAllowed[localeInfo.countryCode];\n let WHATSAPP_OPTIN = redisCommonData.WHATSAPP_OPTIN\n ? JSON.parse(redisCommonData.WHATSAPP_OPTIN)\n : {};\n WHATSAPP_OPTIN = (WHATSAPP_OPTIN.Desktop && WHATSAPP_OPTIN.Desktop.Login) || {};\n super(props, context);\n this.errorUsername = null;\n this.otpResent = '';\n this.errorPassword = null;\n this.emailValid = false;\n this.phoneValid = false;\n this.triggerOfferGa = true;\n this.toggleBlock = false;\n this.username = '';\n this.state = {\n showEditText: false,\n showForgotPass: false,\n whatsappOptin: WHATSAPP_OPTIN,\n isUserOptInForWhatsapp: WHATSAPP_OPTIN.toggle === 'ON',\n isCaptchaVerified: false,\n captchaResponse: null,\n showCountryCode: false,\n currentPhoneCodeSelected: phoneCode,\n };\n this.getCheckBoxStatus = this.getCheckBoxStatus.bind(this);\n this.verifyCaptchaCallback = this.verifyCaptchaCallback.bind(this);\n this.renderCaptcha = this.renderCaptcha.bind(this);\n this.changePhoneCode = this.changePhoneCode.bind(this);\n }\n\n componentDidMount() {\n const { registerActions } = this.props;\n registerActions.resetAuthData();\n if (this.props.isCaptchaRequired) {\n this.renderCaptcha();\n }\n }\n\n componentDidUpdate(prevProps) {\n const {\n userInputValidate,\n oTPSent,\n oTPLoginSuccess,\n user,\n commonActions,\n hideLogin,\n loginFromCL,\n setCurrentWhatsappStatus,\n isDesktopPdp,\n showSignUp,\n hasPlacedOrder,\n } = this.props;\n const { isUserOptInForWhatsapp } = this.state;\n // If => user entered mobile/email is not there in mobile login db\n // else if => user enterd mobile is there in mobile login db then send OTP to user mobile\n // else if => user entered email is there in mobile login db the show password field for user\n if (\n prevProps.userInputValidate !== userInputValidate &&\n userInputValidate &&\n userInputValidate.result.accounts.length === 0 &&\n window.dtm.LenskartRewamp\n ) {\n window.dtm.LenskartRewamp.loginPopup.load.loginPopupAccountNotFound();\n } else if (\n prevProps.userInputValidate !== userInputValidate &&\n userInputValidate &&\n userInputValidate.result.accounts.length > 0 &&\n userInputValidate.result.data.validBlock === 'mobile'\n ) {\n this.fnSendValidateOtp(userInputValidate.result, 'SEND_OTP');\n }\n // OTP sent to the user for mobile login valid user and counter of showing edit/resed otp started.\n if (prevProps.oTPSent !== oTPSent && oTPSent === true) {\n this.setTimeout();\n }\n if (\n (!prevProps.user && user) ||\n (prevProps.oTPLoginSuccess !== oTPLoginSuccess && oTPLoginSuccess === true)\n ) {\n if (window.dtm.LenskartRewamp) window?.dtm?.LenskartRewamp?.loginSuccess?.success();\n if (\n userInputValidate.result &&\n userInputValidate.result.data &&\n userInputValidate.result.data.validBlock === 'mobile'\n ) {\n setCurrentWhatsappStatus(isUserOptInForWhatsapp);\n }\n // Offer Modal : User has placed the order, Authmodal should hide\n if ((hideLogin && !isDesktopPdp) || hasPlacedOrder) hideLogin();\n // Offer Modal : User didn't placed order, Show signup tab to get campaign data\n if (isDesktopPdp && !hasPlacedOrder) {\n showSignUp();\n }\n commonActions.getUserInfo();\n commonActions.shortlist('', 'get', '?attributes=true');\n if (!loginFromCL)\n _gaq.push([\n '_trackEvent',\n 'SIGNUP POPUP',\n 'Login Success',\n `page: ${document.location.pathname}${document.location.search}`,\n ]);\n _gaq.push([\n 'ninja._trackEvent',\n 'SIGNUP POPUP',\n 'Login Success',\n `page: ${document.location.pathname}${document.location.search}`,\n ]);\n if (window.prevUrl) window.history.back();\n }\n if (\n prevProps.isCaptchaRequired !== this.props.isCaptchaRequired &&\n this.props.isCaptchaRequired\n ) {\n this.renderCaptcha();\n } else if (\n prevProps.isCaptchaRequired === this.props.isCaptchaRequired &&\n this.props.isCaptchaRequired &&\n this.state.isCaptchaVerified &&\n prevProps.oTPSent !== this.props.oTPSent\n ) {\n this.resetCaptcha();\n } else if (\n prevProps.isCaptchaRequired !== this.props.isCaptchaRequired &&\n !this.props.isCaptchaRequired\n ) {\n this.setCaptcha(null);\n }\n const offerFlow = sessionStorage.getItem('offerSelected');\n if (this.phoneValid && offerFlow && this.triggerOfferGa) {\n const offerGtm = {\n event: 'lead form',\n pageName: 'otp lead',\n pageType: 'lead form',\n category: '',\n channel: '',\n subSection1: '',\n PageUrl: window?.location.href || '',\n LkUserType: 'lkNew',\n loginStatus: 'guest',\n };\n pushDataLayerEvent(offerGtm);\n this.triggerOfferGa = false;\n }\n if (this.username !== this.props.username) this.username = this.props.username;\n }\n\n componentWillUnmount() {\n if (window.secondsTimer) {\n clearInterval(window.secondsTimer);\n }\n }\n\n setTimeout = () => {\n const otpInput = document.querySelector('.otpPasswordField');\n if (otpInput) {\n otpInput.focus();\n }\n const { redisCommonData } = this.props;\n let timer = redisCommonData.timerForWalletResendOTP / 1000;\n window.secondsTimer = setInterval(() => {\n if (timer > ('0' || '00' || 0)) {\n timer -= 1;\n if (timer < ('10' || 10)) {\n timer = `0${timer}`;\n }\n }\n if (timer === ('00' || 0)) {\n this.setState({\n showEditText: true,\n });\n this.resetTimeOUt();\n }\n if (document.getElementById('otpTimer') && !isNaN(timer))\n document.getElementById('otpTimer').innerHTML = `00:${timer}`;\n }, 1000);\n };\n\n setCaptcha = response => {\n this.setState({\n captchaResponse: response,\n });\n };\n\n getCheckBoxStatus(userWhatsappOptinStatus) {\n this.setState({ isUserOptInForWhatsapp: userWhatsappOptinStatus });\n }\n\n forgotPassword = () => {\n const { showPassCallback } = this.props;\n showPassCallback();\n this.setState({ showForgotPass: true });\n if (window.dtm.LenskartRewamp)\n window.dtm.LenskartRewamp.checkout.load.loginForgotPassword('account');\n };\n\n verifyCaptchaCallback = response => {\n if (response.length !== 0) {\n this.setState({\n isCaptchaVerified: true,\n captchaResponse: response,\n });\n }\n };\n\n handleLogin = value => {\n const { emailValid, phoneValid } = this;\n const { registerActions, userInputValidate, localeInfo } = this.props;\n const { currentPhoneCodeSelected } = this.state;\n const { maxMobileNumberLength, minMobileNumberLength } =\n langCodeAllowed[localeInfo.countryCode];\n const data = {\n username: value.emailOrPhone,\n };\n\n if (!this.props.oTPSent) {\n value.otppassword = '';\n }\n if (!this.props.userInputValidate) {\n value.password = '';\n }\n if (value.password) data.password = value.password;\n if (value.otppassword) data.code = value.otppassword;\n // Below code to check the valid block with regEx for email and mobile number\n\n if (isNaN(data.username) && !emailValid) {\n data.validBlock = 'email';\n data.phoneCode = currentPhoneCodeSelected;\n registerActions.validateUserInput(data);\n } else if (\n !phoneValid &&\n data.username &&\n data.username.length <= maxMobileNumberLength &&\n data.username.length >= minMobileNumberLength\n ) {\n window.timeOutTimer = null;\n data.validBlock = 'mobile';\n data.phoneCode = currentPhoneCodeSelected;\n registerActions.validateUserInput(data);\n }\n if (\n phoneValid &&\n value.otppassword !== '' &&\n (userInputValidate.result.type === 'SEND_OTP' ||\n userInputValidate.result.type === 'VALIDATE_OTP')\n ) {\n this.fnSendValidateOtp(data, 'VALIDATE_OTP');\n }\n // Below code is to check if user has entered emailId then validate and let user login\n if (emailValid && value.password !== '') {\n this.doLogin(data, 'emailValid');\n }\n if (\n !phoneValid &&\n data.username &&\n (data.username.length > maxMobileNumberLength || data.username.length < minMobileNumberLength)\n ) {\n this.isMobileEmail(data.username);\n }\n };\n\n editValue = type => {\n const { registerActions } = this.props;\n this.resetTimeOUt();\n registerActions.resetMobileLoginProps();\n if (type !== 'resend-otp') {\n this.emailValid = false;\n this.phoneValid = false;\n this.toggleBlock = false;\n this.setState({ showEditText: false });\n this.errorPassword = null;\n this.otpResent = '';\n }\n if (window.dtm.LenskartRewamp)\n window.dtm.LenskartRewamp.loginPopup.load.loginPopupEditEmailNumber('email');\n };\n\n makeLoginApiCall = (data, errorPassword, errorEmail, validBlock) => {\n const { registerActions } = this.props;\n this.otpResent = '';\n if (\n (validBlock === 'emailValid' && !errorEmail) ||\n (validBlock === 'phoneValid' && !errorEmail)\n ) {\n registerActions.authenticateUser(data);\n }\n };\n\n doLogin = (data, validBlock) => {\n const { errorPassword, errorEmail } = this;\n this.otpResent = '';\n if (validBlock === 'emailValid') {\n this.errorPassword = null;\n this.resetTimeOUt();\n this.makeLoginApiCall(data, errorPassword, errorEmail, validBlock);\n }\n };\n\n fnSendValidateOtp = (data, type, occurence) => {\n const { registerActions } = this.props;\n const { currentPhoneCodeSelected } = this.state;\n if (window.dtm.LenskartRewamp) {\n if (occurence === 'Resend') {\n window.dtm.LenskartRewamp.loginPopup.load.loginPopupResendOtp(data.data.username);\n } else if (type !== 'VALIDATE_OTP') {\n window.dtm.LenskartRewamp.loginPopup.load.loginPopupEnterOtp(data.data.username);\n }\n }\n data.type = type;\n data.phoneCode = currentPhoneCodeSelected;\n data.captchaKey = this.state.captchaResponse;\n data.occurence = occurence;\n registerActions.sendValidateOtp(data);\n };\n\n resetTimeOUt = () => {\n clearInterval(window.secondsTimer);\n };\n required = value => (value ? undefined : this.props.dataLocale.THIS_IS_REQUIRED_FIELD);\n isMobileEmail = value => {\n const { localeInfo, dataLocale } = this.props;\n const { regex, maxMobileNumberLength, minMobileNumberLength } =\n langCodeAllowed[localeInfo.countryCode];\n let error = null;\n if (\n (!regex.test(value) ||\n (value &&\n (value.length > maxMobileNumberLength || value.length < minMobileNumberLength))) &&\n !emailCriteriaFulfilled(value)\n ) {\n error = dataLocale.PLEASE_ENTER_VALID_EMAIL_MOBILE;\n }\n if (\n value &&\n (emailCriteriaFulfilled(value) ||\n !onlyNumbersEntered(value) ||\n value.length > maxMobileNumberLength)\n ) {\n this.setState({\n showCountryCode: false,\n });\n } else if (!value) {\n this.setState({\n showCountryCode: false,\n });\n } else {\n this.setState({\n showCountryCode: true,\n });\n }\n return error;\n };\n\n resetCaptcha = () => {\n window.grecaptcha.reset();\n this.setState({\n isCaptchaVerified: false,\n captchaResponse: null,\n });\n };\n\n changePhoneCode = code => {\n this.setState({ currentPhoneCodeSelected: code });\n };\n\n renderCaptcha = () => {\n window.grecaptcha.render('recaptcha', {\n sitekey: config.siteKey,\n theme: 'light',\n callback: this.verifyCaptchaCallback,\n 'expired-callback': this.resetCaptcha,\n });\n this.setState({\n isCaptchaVerified: false,\n });\n };\n\n render() {\n const {\n redisCommonData,\n userInputValidate,\n oTPSent,\n otpType,\n loginError,\n userInputErr,\n username,\n loading,\n loginFromCL,\n localeInfo,\n dataLocale,\n bannerImg,\n isDesktopPdp,\n productData,\n productOfferDetails,\n isCaptchaRequired,\n } = this.props;\n const {\n VERIFY,\n EDIT_EMAIL,\n OTP,\n ACCOUNT_DOES_NOT_EXIST,\n MOBILE_EMAIL_TEXT,\n BACK,\n WE_HAVE_SENT_AN_OTP,\n HYPHEN,\n PLEASE_ENTER_OTP,\n EDIT_NUMBER,\n A_NEW_OTP_SENT,\n RESEND,\n PLEASE_ENTER_PASSWORD,\n EMAIL_ADDRESS,\n FORGOT_PASSWORD,\n PASSWORD,\n PROCEED,\n BANNER,\n LOGO,\n } = dataLocale;\n const { showEditText, whatsappOptin, showCountryCode, currentPhoneCodeSelected } = this.state;\n const { timerForWalletResendOTP, AVAILABLE_NEIGHBOUR_COUNTRIES } = redisCommonData;\n const countryConfig = AVAILABLE_NEIGHBOUR_COUNTRIES\n ? phoneCodeToShow(JSON.parse(AVAILABLE_NEIGHBOUR_COUNTRIES))\n : {};\n // const isIndia = localeInfo.countryCode === 'in';\n const showDownArrow = localeInfo.countryCode !== 'ae';\n if (\n userInputValidate != null &&\n userInputValidate.result.accounts.length > 0 &&\n userInputValidate.result.data.validBlock === 'email'\n ) {\n this.emailValid = true;\n this.toggleBlock = true;\n this.errorUsername = null;\n this.phoneValid = false;\n }\n if (userInputValidate && userInputValidate.result.accounts.length === 0) {\n this.errorUsername = ACCOUNT_DOES_NOT_EXIST;\n }\n\n // OTP sent to the user for mobile login valid user and counter of showing edit/resed otp started.\n if (oTPSent && oTPSent === true) {\n this.errorUsername = null;\n this.emailValid = false;\n this.phoneValid = true;\n this.toggleBlock = true;\n }\n\n if (userInputErr !== null && userInputErr.message && userInputValidate === null) {\n this.errorUsername = userInputErr.message;\n this.otpResent = '';\n }\n\n // User entered OTP does not match\n if (typeof oTPSent !== 'boolean' && oTPSent.error) {\n this.errorPassword = oTPSent.error.message;\n this.otpResent = '';\n }\n\n if (loginError) {\n this.errorPassword = loginError.message;\n this.otpResent = '';\n if (!loginFromCL)\n _gaq.push([\n '_trackEvent',\n 'SIGNUP POPUP',\n 'Login Failure',\n `page: ${document.location.pathname}${document.location.search}`,\n ]);\n _gaq.push([\n 'ninja._trackEvent',\n 'SIGNUP POPUP',\n 'Login Failure',\n `page: ${document.location.pathname}${document.location.search}`,\n ]);\n }\n return !this.state.showForgotPass ? (\n \n \n X\n \n
\n {((!isOffer && openTab !== 'forgotpasswod') || (isOffer && !login)) && (\n - \n {allowSignUp && (\n
{SIGN_UP}
\n \n )}\n {SIGN_IN}
\n \n \n {!loginFromCL && (\n
\n )}\n \n \n \n {isDesktopPdp ? (\n
\n )}\n \n (\n \n
\n );\n }}\n \n {(userInputValidate || userInputErr) && this.errorUsername && (\n - \n
- \n
\n {({ input, meta }) => {\n return (\n \n\n {(meta.error && meta.touched) ||\n (oTPSent.error && oTPSent.error.message && otpType === 'SEND_OTP' && (\n \n {meta.error || oTPSent.error.message}\n \n ))}\n
{this.errorUsername}
\n )}\n \n \n\n {this.phoneValid && (\n - \n
- \n \n {WE_HAVE_SENT_AN_OTP} {currentPhoneCodeSelected} {HYPHEN} {username}{' '}\n
- \n
\n {({ input, meta }) => (\n
{this.errorPassword}
\n )}\n {this.otpResent !== '' && (\n {this.otpResent}
\n )}\n \n \n )}\n {this.emailValid && (\n - \n
- \n
\n {({ input, meta }) => (\n \n \n - \n
\n {({ input, meta }) => (\n \n {!loginFromCL && (\n{this.errorPassword}\n )}\n \n
\n
\n \n )}\n onSubmit={this.handleLogin}\n />\n \n \n ) : (\n \n {!loading ? (\n \n {PROCEED}\n \n ) : (\n
\n {whatsappOptin.showWidget && localeInfo.countryCode !== 'sg' && (\n