tf-checkout-react 1.0.102 → 1.0.103

package/src/components/registerModal/index.tsx

@@ -1,190 +1,190 @@
-import React, { FC } from 'react'
-import { AxiosError } from 'axios'
-import './style.css'
-import { getProfileData, handleSetAccessToken, register } from '../../api'
-import { Field, Form, Formik } from 'formik'
-import { requiredValidator } from '../../validators'
-import { TextField } from '@mui/material'
-import _get from 'lodash/get'
-import { CONFIGS } from '../../utils'
-
-interface Props {
-  onClose: () => void;
-  onRegister: () => void;
-  onGetProfileDataSuccess: (res: any) => void;
-  onGetProfileDataError: (e: AxiosError) => void;
-}
-
-export const RegisterModal: FC<Props> = ({
-  onClose,
-  onGetProfileDataSuccess = () => {},
-  onGetProfileDataError = () => {},
-}) => (
-  <div
-    style={{
-      display: 'flex',
-      position: 'absolute',
-      top: 0,
-      bottom: 0,
-      right: 0,
-      left: 0,
-      backgroundColor: 'white',
-      alignItems: 'center',
-      justifyContent: 'center',
-      zIndex: 10,
-    }}
-  >
-    <Formik
-      initialValues={{
-        firstName: '',
-        lastName: '',
-        email: '',
-        password: '',
-        confirmPassword: '',
-      }}
-      onSubmit={async ({
-        firstName,
-        lastName,
-        email,
-        password,
-        confirmPassword,
-      }) => {
-        const bodyFormData = new FormData()
-        bodyFormData.append('first_name', firstName)
-        bodyFormData.append('last_name', lastName)
-        bodyFormData.append('email', email)
-        bodyFormData.append('password', password)
-        bodyFormData.append('password_confirmation', confirmPassword)
-        bodyFormData.append(
-          'client_id',
-          CONFIGS.CLIENT_ID || 'e9d8f8922797b4621e562255afe90dbf'
-        )
-        bodyFormData.append(
-          'client_secret',
-          CONFIGS.CLIENT_SECRET ||
-            'b89c191eff22fdcf84ac9bfd88d005355a151ec2c83b26b9'
-        )
-        const resRegister = await register(bodyFormData)
-        const access_token = _get(
-          resRegister,
-          'data.data.attributes.access_token'
-        )
-        handleSetAccessToken(access_token)
-
-        let profileResponse = null
-
-        try {
-          profileResponse = await getProfileData(access_token)
-          onGetProfileDataSuccess(profileResponse.data)
-        } catch (e) {
-          onGetProfileDataError(e.response)
-          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('access_token', access_token)
-          window.localStorage.setItem(
-            'user_data',
-            JSON.stringify(profileDataObj)
-          )
-        }
-        onClose()
-      }}
-    >
-      {props => (
-        <Form onSubmit={props.handleSubmit}>
-          <div className="register-container">
-            <div>Create account</div>
-            <button type="button" onClick={onClose}>
-              Close
-            </button>
-            <div className="register-container__twoFields">
-              <div className="is-half">
-                <Field name={'firstName'} validate={requiredValidator()}>
-                  {({ field, meta }: { [key: string]: any }) => (
-                    <TextField
-                      label={'First Name'}
-                      type={'text'}
-                      fullWidth
-                      error={!!meta.error && meta.touched}
-                      helperText={meta.touched && meta.error}
-                      {...field}
-                    />
-                  )}
-                </Field>
-              </div>
-              <div className="is-half">
-                <Field name={'lastName'} validate={requiredValidator()}>
-                  {({ field, meta }: { [key: string]: any }) => (
-                    <TextField
-                      label={'Last Name'}
-                      type={'text'}
-                      fullWidth
-                      error={!!meta.error && meta.touched}
-                      helperText={meta.touched && meta.error}
-                      {...field}
-                    />
-                  )}
-                </Field>
-              </div>
-            </div>
-            <div className="register-container__singleField">
-              <div className="">
-                <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>
-            <div className="register-container__twoFields">
-              <div className="is-half">
-                <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="is-half">
-                <Field name={'confirmPassword'} validate={requiredValidator()}>
-                  {({ field, meta }: { [key: string]: any }) => (
-                    <TextField
-                      label={'Confirm Passwod'}
-                      type={'password'}
-                      fullWidth
-                      error={!!meta.error && meta.touched}
-                      helperText={meta.touched && meta.error}
-                      {...field}
-                    />
-                  )}
-                </Field>
-              </div>
-            </div>
-          </div>
-          <button type="submit">Submit</button>
-        </Form>
-      )}
-    </Formik>
-  </div>
-)
+import React, { FC } from 'react'
+import { AxiosError } from 'axios'
+import './style.css'
+import { getProfileData, handleSetAccessToken, register } from '../../api'
+import { Field, Form, Formik } from 'formik'
+import { requiredValidator } from '../../validators'
+import { TextField } from '@mui/material'
+import _get from 'lodash/get'
+import { CONFIGS } from '../../utils'
+
+interface Props {
+  onClose: () => void;
+  onRegister: () => void;
+  onGetProfileDataSuccess: (res: any) => void;
+  onGetProfileDataError: (e: AxiosError) => void;
+}
+
+export const RegisterModal: FC<Props> = ({
+  onClose,
+  onGetProfileDataSuccess = () => {},
+  onGetProfileDataError = () => {},
+}) => (
+  <div
+    style={{
+      display: 'flex',
+      position: 'absolute',
+      top: 0,
+      bottom: 0,
+      right: 0,
+      left: 0,
+      backgroundColor: 'white',
+      alignItems: 'center',
+      justifyContent: 'center',
+      zIndex: 10,
+    }}
+  >
+    <Formik
+      initialValues={{
+        firstName: '',
+        lastName: '',
+        email: '',
+        password: '',
+        confirmPassword: '',
+      }}
+      onSubmit={async ({
+        firstName,
+        lastName,
+        email,
+        password,
+        confirmPassword,
+      }) => {
+        const bodyFormData = new FormData()
+        bodyFormData.append('first_name', firstName)
+        bodyFormData.append('last_name', lastName)
+        bodyFormData.append('email', email)
+        bodyFormData.append('password', password)
+        bodyFormData.append('password_confirmation', confirmPassword)
+        bodyFormData.append(
+          'client_id',
+          CONFIGS.CLIENT_ID || 'e9d8f8922797b4621e562255afe90dbf'
+        )
+        bodyFormData.append(
+          'client_secret',
+          CONFIGS.CLIENT_SECRET ||
+            'b89c191eff22fdcf84ac9bfd88d005355a151ec2c83b26b9'
+        )
+        const resRegister = await register(bodyFormData)
+        const access_token = _get(
+          resRegister,
+          'data.data.attributes.access_token'
+        )
+        handleSetAccessToken(access_token)
+
+        let profileResponse = null
+
+        try {
+          profileResponse = await getProfileData(access_token)
+          onGetProfileDataSuccess(profileResponse.data)
+        } catch (e) {
+          onGetProfileDataError(e.response)
+          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('access_token', access_token)
+          window.localStorage.setItem(
+            'user_data',
+            JSON.stringify(profileDataObj)
+          )
+        }
+        onClose()
+      }}
+    >
+      {props => (
+        <Form onSubmit={props.handleSubmit}>
+          <div className="register-container">
+            <div>Create account</div>
+            <button type="button" onClick={onClose}>
+              Close
+            </button>
+            <div className="register-container__twoFields">
+              <div className="is-half">
+                <Field name={'firstName'} validate={requiredValidator()}>
+                  {({ field, meta }: { [key: string]: any }) => (
+                    <TextField
+                      label={'First Name'}
+                      type={'text'}
+                      fullWidth
+                      error={!!meta.error && meta.touched}
+                      helperText={meta.touched && meta.error}
+                      {...field}
+                    />
+                  )}
+                </Field>
+              </div>
+              <div className="is-half">
+                <Field name={'lastName'} validate={requiredValidator()}>
+                  {({ field, meta }: { [key: string]: any }) => (
+                    <TextField
+                      label={'Last Name'}
+                      type={'text'}
+                      fullWidth
+                      error={!!meta.error && meta.touched}
+                      helperText={meta.touched && meta.error}
+                      {...field}
+                    />
+                  )}
+                </Field>
+              </div>
+            </div>
+            <div className="register-container__singleField">
+              <div className="">
+                <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>
+            <div className="register-container__twoFields">
+              <div className="is-half">
+                <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="is-half">
+                <Field name={'confirmPassword'} validate={requiredValidator()}>
+                  {({ field, meta }: { [key: string]: any }) => (
+                    <TextField
+                      label={'Confirm Passwod'}
+                      type={'password'}
+                      fullWidth
+                      error={!!meta.error && meta.touched}
+                      helperText={meta.touched && meta.error}
+                      {...field}
+                    />
+                  )}
+                </Field>
+              </div>
+            </div>
+          </div>
+          <button type="submit">Submit</button>
+        </Form>
+      )}
+    </Formik>
+  </div>
+)