tf-checkout-react 1.0.99 → 1.0.100-beta.2

package/src/components/loginModal/index.tsx

@@ -1,209 +1,171 @@
-import React, { FC, useState } from 'react'
-import { AxiosError } from 'axios'
-import {
-  authorize,
-  getAccessToken,
-  getProfileData,
-  handleSetAccessToken,
-} from '../../api'
-import _get from 'lodash/get'
-import { Field, Form, Formik } from 'formik'
-import { requiredValidator } from '../../validators'
-import { TextField } from '@mui/material'
-import Modal from '@mui/material/Modal'
-import Box from '@mui/material/Box'
-import './style.css'
-import { CONFIGS } from '../../utils'
-import axios from 'axios'
-
-interface Props {
-  onClose: () => void;
-  onLogin: () => void;
-  alreadyHasUser?: boolean;
-  userExpired?: boolean;
-  onAuthorizeSuccess?: (res: any) => void;
-  onAuthorizeError?: (e: AxiosError) => void;
-  onGetProfileDataSuccess?: (res: any) => void;
-  onGetProfileDataError?: (e: AxiosError) => void;
-  modalClassname?: string;
-}
-
-const style: React.CSSProperties = {
-  position: 'absolute',
-  top: '50%',
-  left: '50%',
-  transform: 'translate(-50%, -50%)',
-  minWidth: 480,
-  backgroundColor: '#e3e3e3',
-  border: '1px solid white',
-  outline: 'none',
-}
-
-export const LoginModal: FC<Props> = ({
-  onClose,
-  onLogin,
-  alreadyHasUser = false,
-  userExpired = false,
-  onAuthorizeSuccess = () => {},
-  onAuthorizeError = () => {},
-  onGetProfileDataSuccess = () => {},
-  onGetProfileDataError = () => {},
-  modalClassname = '',
-}) => {
-  const [error, setError] = useState('')
-  const handleForgotPassword = () => {
-    if (typeof window !== 'undefined') {
-      window.open(`${CONFIGS.BASE_URL}/password-restore/`)
-    }
-  }
-  return (
-    <Modal
-      open={true}
-      onClose={onClose}
-      aria-labelledby="modal-modal-title"
-      aria-describedby="modal-modal-description"
-      className={`login-modal ${modalClassname}`}
-    >
-      <Box style={style}>
-        <div>
-          <Formik
-            initialValues={{ email: '', password: '' }}
-            onSubmit={async ({ email, password }) => {
-              try {
-                const bodyFormData = new FormData()
-                bodyFormData.append('email', email)
-                bodyFormData.append('password', password)
-
-                const resAutorize = await authorize(bodyFormData)
-                const bodyFormDataToken = new FormData()
-                bodyFormDataToken.append('code', resAutorize.data.data.code)
-                bodyFormDataToken.append('scope', 'profile')
-                bodyFormDataToken.append('grant_type', 'authorization_code')
-                bodyFormDataToken.append(
-                  'client_id',
-                  CONFIGS.CLIENT_ID || 'e9d8f8922797b4621e562255afe90dbf'
-                )
-                bodyFormDataToken.append(
-                  'client_secret',
-                  CONFIGS.CLIENT_SECRET ||
-                    'b89c191eff22fdcf84ac9bfd88d005355a151ec2c83b26b9'
-                )
-
-                let resAccessToken = null
-
-                try {
-                  resAccessToken = await getAccessToken(bodyFormDataToken)
-                  onAuthorizeSuccess(resAccessToken.data)
-                } catch (e) {
-                  if (axios.isAxiosError(e)) {
-                    onAuthorizeError(e)
-                  }
-                  return
-                }
-
-                const accessToken = _get(resAccessToken, 'data.access_token')
-                handleSetAccessToken(accessToken)
-
-                let profileResponse = null
-
-                try {
-                  profileResponse = await getProfileData(accessToken)
-                  onGetProfileDataSuccess(profileResponse.data)
-                } catch (e) {
-                  if (axios.isAxiosError(e)) {
-                    onGetProfileDataError(e)
-                  }
-                  return
-                }
-
-                const profileSpecifiedData = _get(profileResponse, 'data.data')
-                const profileDataObj = {
-                  id: profileSpecifiedData.id,
-                  first_name: profileSpecifiedData.firstName,
-                  last_name: profileSpecifiedData.lastName,
-                  email: profileSpecifiedData.email,
-                }
-                if (typeof window !== 'undefined') {
-                  window.localStorage.setItem(
-                    'user_data',
-                    JSON.stringify(profileDataObj)
-                  )
-                  window.localStorage.setItem('access_token', accessToken)
-                  const event = new window.CustomEvent('tf-login')
-                  window.document.dispatchEvent(event)
-                }
-                onLogin()
-              } catch (e) {
-                if (axios.isAxiosError(e)) {
-                  const error = e?.response?.data?.message || 'Error'
-                  setError(error)
-                } else if (e instanceof Error) {
-                  setError(e?.message || 'Error')
-                }
-              }
-            }}
-          >
-            {props => (
-              <Form onSubmit={props.handleSubmit}>
-                <div className="modal-title">Login</div>
-                <img
-                  className="login-logo-tff"
-                  src="https://www.ticketfairy.com/resources/images/logo-ttf-black.svg"
-                  alt=""
-                />
-                <div className="server_auth__error">{error}</div>
-                {alreadyHasUser && (
-                  <p className="info-text-for-login">
-                    It appears this email is already attached to an account.
-                    Please log in here to complete your registration.
-                  </p>
-                )}
-                {userExpired && (
-                  <p className="info-text-for-login">
-                    Your session has expired, please log in again.
-                  </p>
-                )}
-                <div className="login-modal-body">
-                  <div className="login-modal-body__email">
-                    <Field name={'email'} validate={requiredValidator}>
-                      {({ field, meta }: { [key: string]: any }) => (
-                        <TextField
-                          label={'Email'}
-                          type={'email'}
-                          fullWidth
-                          error={!!meta.error && meta.touched}
-                          helperText={meta.touched && meta.error}
-                          {...field}
-                        />
-                      )}
-                    </Field>
-                  </div>
-                  <div className="login-modal-body__password">
-                    <Field name={'password'} validate={requiredValidator}>
-                      {({ field, meta }: { [key: string]: any }) => (
-                        <TextField
-                          label="Password"
-                          type="password"
-                          fullWidth
-                          error={!!meta.error && meta.touched}
-                          helperText={meta.touched && meta.error}
-                          {...field}
-                        />
-                      )}
-                    </Field>
-                  </div>
-                  <div className="login-action-button">
-                    <button type="submit">Login</button>
-                  </div>
-                  <div className='forgot-password'>
-                    <span onClick={handleForgotPassword}>Forgot password?</span>
-                  </div>
-                </div>
-              </Form>
-            )}
-          </Formik>
-        </div>
-      </Box>
-    </Modal>
-  )
-}
+import React, { FC, useState } from 'react'
+import { AxiosError } from 'axios'
+import {
+  authorize,
+  getProfileData,
+} from '../../api'
+import _get from 'lodash/get'
+import { Field, Form, Formik } from 'formik'
+import { requiredValidator } from '../../validators'
+import { TextField } from '@mui/material'
+import Modal from '@mui/material/Modal'
+import Box from '@mui/material/Box'
+import './style.css'
+import { CONFIGS } from '../../utils'
+import axios from 'axios'
+
+interface Props {
+  onClose: () => void;
+  onLogin: () => void;
+  alreadyHasUser?: boolean;
+  userExpired?: boolean;
+  onAuthorizeSuccess?: (res: any) => void;
+  onAuthorizeError?: (e: AxiosError) => void;
+  onGetProfileDataSuccess?: (res: any) => void;
+  onGetProfileDataError?: (e: AxiosError) => void;
+  modalClassname?: string;
+}
+
+const style: React.CSSProperties = {
+  position: 'absolute',
+  top: '50%',
+  left: '50%',
+  transform: 'translate(-50%, -50%)',
+  minWidth: 480,
+  backgroundColor: '#e3e3e3',
+  border: '1px solid white',
+  outline: 'none',
+}
+
+export const LoginModal: FC<Props> = ({
+  onClose,
+  onLogin,
+  alreadyHasUser = false,
+  userExpired = false,
+  onGetProfileDataSuccess = () => {},
+  onGetProfileDataError = () => {},
+  modalClassname = '',
+}) => {
+  const [error, setError] = useState('')
+  const handleForgotPassword = () => {
+    if (typeof window !== 'undefined') {
+      window.open(`${CONFIGS.BASE_URL}/password-restore/`)
+    }
+  }
+  return (
+    <Modal
+      open={true}
+      onClose={onClose}
+      aria-labelledby="modal-modal-title"
+      aria-describedby="modal-modal-description"
+      className={`login-modal ${modalClassname}`}
+    >
+      <Box style={style}>
+        <div>
+          <Formik
+            initialValues={{ email: '', password: '' }}
+            onSubmit={async ({ email, password }) => {
+              try {
+                const body = { email, password }
+                await authorize(body)
+                let profileResponse = null
+                try {
+                  profileResponse = await getProfileData()
+                  onGetProfileDataSuccess(profileResponse.data)
+                } catch (e) {
+                  if (axios.isAxiosError(e)) {
+                    onGetProfileDataError(e)
+                  }
+                  return
+                }
+
+                const profileSpecifiedData = _get(profileResponse, 'data.data')
+                const profileDataObj = {
+                  id: profileSpecifiedData.id,
+                  first_name: profileSpecifiedData.firstName,
+                  last_name: profileSpecifiedData.lastName,
+                  email: profileSpecifiedData.email,
+                }
+                if (typeof window !== 'undefined') {
+                  window.localStorage.setItem(
+                    'user_data',
+                    JSON.stringify(profileDataObj)
+                  )
+                  const event = new window.CustomEvent('tf-login')
+                  window.document.dispatchEvent(event)
+                }
+                onLogin()
+              } catch (e) {
+                if (axios.isAxiosError(e)) {
+                  const error = e?.response?.data?.message || 'Error'
+                  setError(error)
+                } else if (e instanceof Error) {
+                  setError(e?.message || 'Error')
+                }
+              }
+            }}
+          >
+            {props => (
+              <Form onSubmit={props.handleSubmit}>
+                <div className="modal-title">Login</div>
+                <img
+                  className="login-logo-tff"
+                  src="https://www.ticketfairy.com/resources/images/logo-ttf-black.svg"
+                  alt=""
+                />
+                <div className="server_auth__error">{error}</div>
+                {alreadyHasUser && (
+                  <p className="info-text-for-login">
+                    It appears this email is already attached to an account.
+                    Please log in here to complete your registration.
+                  </p>
+                )}
+                {userExpired && (
+                  <p className="info-text-for-login">
+                    Your session has expired, please log in again.
+                  </p>
+                )}
+                <div className="login-modal-body">
+                  <div className="login-modal-body__email">
+                    <Field name={'email'} validate={requiredValidator}>
+                      {({ field, meta }: { [key: string]: any }) => (
+                        <TextField
+                          label={'Email'}
+                          type={'email'}
+                          fullWidth
+                          error={!!meta.error && meta.touched}
+                          helperText={meta.touched && meta.error}
+                          {...field}
+                        />
+                      )}
+                    </Field>
+                  </div>
+                  <div className="login-modal-body__password">
+                    <Field name={'password'} validate={requiredValidator}>
+                      {({ field, meta }: { [key: string]: any }) => (
+                        <TextField
+                          label="Password"
+                          type="password"
+                          fullWidth
+                          error={!!meta.error && meta.touched}
+                          helperText={meta.touched && meta.error}
+                          {...field}
+                        />
+                      )}
+                    </Field>
+                  </div>
+                  <div className="login-action-button">
+                    <button type="submit">Login</button>
+                  </div>
+                  <div className='forgot-password'>
+                    <span onClick={handleForgotPassword}>Forgot password?</span>
+                  </div>
+                </div>
+              </Form>
+            )}
+          </Formik>
+        </div>
+      </Box>
+    </Modal>
+  )
+}

package/src/components/loginModal/style.css

@@ -1,72 +1,72 @@
-.modal-title {
-  padding-left: 25px;
-  background-color: #fff;
-  height: 49px;
-  display: flex;
-  align-items: center;
-  font-family: Inter;
-  font-weight: 700;
-  font-size: 18px;
-  line-height: 22px;
-  position: relative;
-}
-
-.login-modal-body {
-  padding: 15px 25px;
-}
-
-.login-modal-body input {
-  background: white !important;
-}
-
-.login-modal-body__email {
-  margin-bottom: 20px;
-}
-
-.login-modal-body__password {
-  margin-bottom: 20px;
-}
-
-.login-action-button button {
-  padding: 10px;
-  width: 100%;
-  margin: 10px 0;
-  border: none;
-  border-radius: 0;
-  height: 45px;
-  font-weight: 600;
-  font-size: 26px;
-  line-height: 18px;
-  color: white;
-  cursor: pointer;
-  outline: none;
-  background-color: #212529;
-}
-.login-action-button button:hover {
-  background-color: #505050;
-  border-color: #505050;
-}
-
-.server_auth__error {
-    color: red;
-    padding-left: 25px;
-    padding-top: 15px;
-    font-size: 12px;
-    font-family: Inter;
-    font-style: normal;
-}
-
-.info-text-for-login {
-    font-size: 14px;
-    padding-left: 10px;
-    margin-bottom: 4px;
-}
-.forgot-password {
-  text-align: center;
-}
-.forgot-password span {
-  cursor: pointer;
-}
-.forgot-password span:hover {
-  text-decoration: underline;
+.modal-title {
+  padding-left: 25px;
+  background-color: #fff;
+  height: 49px;
+  display: flex;
+  align-items: center;
+  font-family: Inter;
+  font-weight: 700;
+  font-size: 18px;
+  line-height: 22px;
+  position: relative;
+}
+
+.login-modal-body {
+  padding: 15px 25px;
+}
+
+.login-modal-body input {
+  background: white !important;
+}
+
+.login-modal-body__email {
+  margin-bottom: 20px;
+}
+
+.login-modal-body__password {
+  margin-bottom: 20px;
+}
+
+.login-action-button button {
+  padding: 10px;
+  width: 100%;
+  margin: 10px 0;
+  border: none;
+  border-radius: 0;
+  height: 45px;
+  font-weight: 600;
+  font-size: 26px;
+  line-height: 18px;
+  color: white;
+  cursor: pointer;
+  outline: none;
+  background-color: #212529;
+}
+.login-action-button button:hover {
+  background-color: #505050;
+  border-color: #505050;
+}
+
+.server_auth__error {
+    color: red;
+    padding-left: 25px;
+    padding-top: 15px;
+    font-size: 12px;
+    font-family: Inter;
+    font-style: normal;
+}
+
+.info-text-for-login {
+    font-size: 14px;
+    padding-left: 10px;
+    margin-bottom: 4px;
+}
+.forgot-password {
+  text-align: center;
+}
+.forgot-password span {
+  cursor: pointer;
+}
+.forgot-password span:hover {
+  text-decoration: underline;
 }