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

package/src/components/registerModal/index.tsx

@@ -1,190 +1,183 @@
-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, 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'
+        )
+        await register(bodyFormData)
+        let profileResponse = null
+
+        try {
+          profileResponse = await getProfileData()
+          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(
+            '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>
+)

package/src/components/rsvpContainer/index.tsx

@@ -0,0 +1,126 @@
+import React, { useState } from 'react'
+import { Field, Form, Formik } from 'formik'
+import Button from '@mui/material/Button'
+import Modal from '@mui/material/Modal'
+import Box from '@mui/material/Box'
+import { CustomField, Loader } from '../common/index'
+import { combineValidators, requiredValidator, emailValidator } from '../../validators'
+import { sendRSVPInfo } from '../../api'
+
+interface IRsvpContainerPage {
+  showSection?: boolean;
+  eventId: number;
+}
+
+interface IRSVPValuesTypes {
+  email: 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',
+  padding: '14px',
+  maxHeight: '85vh',
+  overflow: 'auto'
+}
+
+export const RsvpContainer = ({ showSection = false, eventId }: IRsvpContainerPage) => {
+  const userDataEncoded =
+    typeof window !== 'undefined' ? window.localStorage.getItem('user_data') : ''
+  const parsedData = JSON.parse(userDataEncoded || '{}')
+
+  const [loading, setLoading] = useState(false)
+  const [modal, setModal] = useState({ isOpen: false, text: '' })
+
+  const handleModalClose = () => {
+    setModal({ isOpen: false, text: '' })
+  }
+
+  const handleSubmit = async (values: IRSVPValuesTypes) => {
+    try {
+      setLoading(true)
+
+      const requestData = {
+        data: {
+          email: values.email
+        }
+      }
+      const { data } = await sendRSVPInfo(eventId, requestData)
+
+      setModal({ isOpen: true, text: data.message })
+    } catch (error) {
+      if (error.response.status === 403) {
+        setModal({ isOpen: true, text: error.response.data?.message })
+      }
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  if (!showSection) {
+    return null
+  }
+
+  return (
+    <>
+      <Modal
+        open={modal.isOpen}
+        onClose={handleModalClose}
+        aria-labelledby="modal-modal-title"
+        aria-describedby="modal-modal-description"
+        className="rsvp-modal"
+      >
+        <Box style={style} className="rsvp-modal-box">
+          <div className="rsvp-modal-container">
+            <div className="rsvp-modal-header">{modal.text}</div>
+            <div className="rsvp-modal-button">
+              <button onClick={handleModalClose}>OK</button>
+            </div>
+          </div>
+        </Box>
+      </Modal>
+      <div className="rsvp-container">
+        {loading ? (
+          <Loader />
+        ) : (
+          <>
+            <div className="rsvp-header">RSVP</div>
+            <div className="rsvp-email-container">
+              <Formik
+                initialValues={{
+                  email: parsedData?.email || ''
+                }}
+                onSubmit={handleSubmit}
+                enableReinitialize
+              >
+                <Form>
+                  <div className="rsvp-email-input-container">
+                    <Field
+                      name="email"
+                      label="EMAIL ADDRESS"
+                      type="email"
+                      validate={combineValidators(
+                        (value: string) => requiredValidator(value, 'Please enter your Email'),
+                        (value: string) => emailValidator(value)
+                      )}
+                      component={CustomField}
+                    />
+                  </div>
+                  <div className="rsvp-button-container">
+                    <Button type="submit">RSVP</Button>
+                  </div>
+                </Form>
+              </Formik>
+            </div>
+          </>
+        )}
+      </div>
+    </>
+  )
+}