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

package/src/components/billing-info-container/style.css

@@ -1,106 +1,106 @@
-.button-container {
-  display: flex;
-  padding: 20px;
-  justify-content: center;
-}
-
-.billing-info-container {
-  max-width: 800px;
-  margin: 0 auto;
-}
-.billing-info-container .is-half {
-  width: 49%;
-}
-
-.billing-info-container p {
-  color: #000;
-}
-
-.billing-info-container .main-header {
-  font-size: 2rem;
-  font-weight: 600;
-}
-
-.billing-info-container__twoFields {
-  display: flex;
-  justify-content: space-between;
-  margin-top: 15px;
-}
-.billing-info-container__singleField {
-  margin-top: 15px;
-}
-button {
-  margin-top: 10px;
-}
-
-.account-actions-block {
-  margin-top: 10px;
-  color: #182026;
-  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
-    Ubuntu, Cantarell, Open Sans, Helvetica Neue, Icons16, sans-serif;
-}
-
-.MuiButtonBase-root.MuiButton-root,
-.MuiButtonBase-root.MuiButton-root:hover,
-.login-register-button {
-  width: 49%;
-  margin-top: 10px;
-  min-height: 46px;
-  background-color: #212529;
-  font-size: 26px;
-  border: #f28051;
-  border-radius: 5px;
-  color: #fff;
-  position: relative;
-  display: block;
-  cursor: pointer;
-  font-family: Inter-Bold;
-  font-weight: 700;
-  text-transform: uppercase;
-  /* font-size: 1rem; */
-  padding: 14px 12px 12px;
-  line-height: 1.15;
-  text-align: center;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  outline: none;
-}
-
-.logo-image-container {
-  width: 49%;
-  margin-top: 5px;
-  text-align: center;
-}
-
-.logo-image-container img {
-  height: 30px;
-}
-
-.login-block {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-
-.login-register-button:hover {
-  background-color: #505050 !important;
-  border-color: #505050 !important;
-}
-
-.login-register-block {
-  display: flex;
-  justify-content: space-between;
-}
-
-@media only screen and (max-width: 820px) {
-  .billing-info-container {
-    width: 90%;
-  }
-  .billing-info-container .main-header {
-    font-size: 1.5rem;
-  }
-}
-
-.email-checking {
-  margin-bottom: 15px;
-}
+.button-container {
+  display: flex;
+  padding: 20px;
+  justify-content: center;
+}
+
+.billing-info-container {
+  max-width: 800px;
+  margin: 0 auto;
+}
+.billing-info-container .is-half {
+  width: 49%;
+}
+
+.billing-info-container p {
+  color: #000;
+}
+
+.billing-info-container .main-header {
+  font-size: 2rem;
+  font-weight: 600;
+}
+
+.billing-info-container__twoFields {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 15px;
+}
+.billing-info-container__singleField {
+  margin-top: 15px;
+}
+button {
+  margin-top: 10px;
+}
+
+.account-actions-block {
+  margin-top: 10px;
+  color: #182026;
+  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
+    Ubuntu, Cantarell, Open Sans, Helvetica Neue, Icons16, sans-serif;
+}
+
+.MuiButtonBase-root.MuiButton-root,
+.MuiButtonBase-root.MuiButton-root:hover,
+.login-register-button {
+  width: 49%;
+  margin-top: 10px;
+  min-height: 46px;
+  background-color: #212529;
+  font-size: 26px;
+  border: #f28051;
+  border-radius: 5px;
+  color: #fff;
+  position: relative;
+  display: block;
+  cursor: pointer;
+  font-family: Inter-Bold;
+  font-weight: 700;
+  text-transform: uppercase;
+  /* font-size: 1rem; */
+  padding: 14px 12px 12px;
+  line-height: 1.15;
+  text-align: center;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  outline: none;
+}
+
+.logo-image-container {
+  width: 49%;
+  margin-top: 5px;
+  text-align: center;
+}
+
+.logo-image-container img {
+  height: 30px;
+}
+
+.login-block {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.login-register-button:hover {
+  background-color: #505050 !important;
+  border-color: #505050 !important;
+}
+
+.login-register-block {
+  display: flex;
+  justify-content: space-between;
+}
+
+@media only screen and (max-width: 820px) {
+  .billing-info-container {
+    width: 90%;
+  }
+  .billing-info-container .main-header {
+    font-size: 1.5rem;
+  }
+}
+
+.email-checking {
+  margin-bottom: 15px;
+}

package/src/components/billing-info-container/utils.ts

@@ -1,223 +1,233 @@
-import _map from 'lodash/map'
-import _get from 'lodash/get'
-import _forEach from 'lodash/forEach'
-import _flatMapDeep from 'lodash/flatMapDeep'
-import _isArray from 'lodash/isArray'
-
-import { CONFIGS } from '../../utils'
-import { IGroupItem } from '../../types'
-import { combineValidators, requiredValidator } from '../../validators'
-import { nanoid } from 'nanoid'
-import { FormikValues } from 'formik'
-
-export interface ILoggedInValues {
-  emailLogged?: string;
-  firstNameLogged?: string;
-  lastNameLogged?: string;
-}
-
-export interface IValues {
-  [key: string]: any;
-}
-
-export const getInitialValues = (
-  data: any = [],
-  propsInitialValues: IValues = {},
-  userValues: any = {}
-): IValues => {
-  const results = _flatMapDeep(data, ({ fields }) =>
-    _map(fields, ({ groupItems }) => _map(groupItems, ({ name }) => name))
-  )
-
-  const initialValues: IValues = {}
-  _forEach(results, item => {
-    initialValues[item] = propsInitialValues[item] || userValues[item] || ''
-  })
-
-  // set logged in user as first ticket holder
-  initialValues['holderFirstName-0'] =
-    propsInitialValues.firstName || userValues.firstName || ''
-  initialValues['holderLastName-0'] =
-    propsInitialValues.lastName || userValues.lastName || ''
-  initialValues['holderEmail-0'] =
-    propsInitialValues.email || userValues.email || ''
-
-  return initialValues
-}
-
-export const createRegisterFormData = (
-  values: IValues = {},
-  checkoutBody: { attributes: { [key: string]: any } }
-): FormData => {
-  const bodyFormData = new FormData()
-  bodyFormData.append('first_name', values.firstName)
-  bodyFormData.append('last_name', values.lastName)
-  bodyFormData.append('email', values.email)
-  bodyFormData.append('password', values.password)
-  bodyFormData.append('password_confirmation', values.confirmPassword)
-  bodyFormData.append(
-    'client_id',
-    CONFIGS.CLIENT_ID || 'e9d8f8922797b4621e562255afe90dbf'
-  )
-  bodyFormData.append(
-    'client_secret',
-    CONFIGS.CLIENT_SECRET || 'b89c191eff22fdcf84ac9bfd88d005355a151ec2c83b26b9'
-  )
-
-  _forEach(checkoutBody.attributes, (item: any, key: string) => {
-    bodyFormData.append(key, item)
-  })
-
-  return bodyFormData
-}
-
-interface ICheckoutBody {
-  attributes: {
-    [key: string]: any;
-  };
-}
-
-interface IUserData {
-  id: string;
-  firstName: string;
-  lastName: string;
-  email: string;
-  city?: string;
-  country?: string;
-  phone?: string;
-  streetAddress?: string;
-  state?: string;
-  zip?: string;
-  zipCode?: string;
-  stateId?: string;
-}
-
-interface IticketHolder {
-  first_name?: string;
-  last_name?: string;
-  phone?: string;
-  email?: string;
-}
-
-export const setLoggedUserData = (data: IUserData) => ({
-  id: data.id,
-  first_name: data.firstName,
-  last_name: data.lastName,
-  email: data.email,
-  confirmEmail: data.email,
-  city: data?.city || '',
-  country: data?.country || '',
-  phone: data?.phone || '',
-  street_address: data?.streetAddress || '',
-  state: data?.stateId || '',
-  zip: data?.zip || data?.zipCode || '',
-})
-
-export const createCheckoutDataBody = (
-  ticketsQuantity: number,
-  values: IValues = {},
-  logedInValues: ILoggedInValues = {},
-  includeDob: boolean = false
-): ICheckoutBody => {
-  const {
-    firstName,
-    lastName,
-    holderAge,
-    confirmEmail,
-    confirmPassword,
-    ...restValues
-  } = values
-
-  const holders = []
-  let ticket_holders: IticketHolder[] = []
-
-  for (let i = 0; i <= ticketsQuantity; i++) {
-    const individualHolder = Object.fromEntries(
-      Object.entries(values).filter(([key, _val]) => key.includes(String(i)))
-    )
-    holders.push(individualHolder)
-  }
-
-  const filteredHolders = holders.filter(
-    holder => Object.entries(holder).length > 0
-  )
-  ticket_holders = filteredHolders.map((item, index) => ({
-    first_name: item[`holderFirstName-${index}`] || '',
-    last_name: item[`holderLastName-${index}`] || '',
-    phone: item[`holderPhone-${index}`] || '',
-    email: item[`holderEmail-${index}`] || '',
-  }))
-
-  const filteredRestValue: { [key: string]: any } = {}
-  _forEach(restValues, (value, key) => {
-    if (!key.includes('holder')) {
-      filteredRestValue[key] = value
-    }
-  })
-
-  const body: ICheckoutBody = {
-    attributes: {
-      ...filteredRestValue,
-      email: restValues.email || logedInValues.emailLogged,
-      confirm_email: restValues.email || logedInValues.emailLogged,
-      first_name: firstName || logedInValues.firstNameLogged,
-      last_name: lastName || logedInValues.lastNameLogged,
-      ticket_holders,
-    },
-  }
-
-  if (includeDob) {
-    const holderAgeDate = new Date(holderAge)
-    body.attributes.dob_day = holderAgeDate.getDate()
-    body.attributes.dob_month = holderAgeDate.getMonth() + 1
-    body.attributes.dob_year = holderAgeDate.getFullYear()
-  }
-  return body
-}
-
-export const getValidateFunctions = (
-  element: IGroupItem,
-  states: Array<{ [key: string]: any }>,
-  values: FormikValues
-) => {
-  const validationFunctions: any[] = []
-
-  if (element.required) {
-    if (
-      element.name !== 'state' ||
-      (element.name === 'state' && states.length)
-    ) {
-      validationFunctions.push(requiredValidator)
-    }
-  }
-
-  if (element.onValidate) {
-    validationFunctions.push(element.onValidate)
-  }
-
-  if (element.name === 'confirmEmail') {
-    const isSameEmail = (confirmEmail?: string) =>
-      values.email !== confirmEmail
-        ? 'Please confirm your email address correctly'
-        : null
-    validationFunctions.push(isSameEmail)
-  }
-
-  return combineValidators(...validationFunctions)
-}
-
-export const assingUniqueIds = (data: any): any => {
-  if (_get(data[0], 'uniqueId')) {
-    return data
-  }
-
-  return _map(data, (item: any) => {
-    _forEach(item, (itemValue: string, key) => {
-      if (_isArray(itemValue)) {
-        item[key] = assingUniqueIds(itemValue)
-      }
-    })
-
-    return { ...item, uniqueId: nanoid() }
-  })
-}
+import _map from 'lodash/map'
+import _get from 'lodash/get'
+import _forEach from 'lodash/forEach'
+import _flatMapDeep from 'lodash/flatMapDeep'
+import _isArray from 'lodash/isArray'
+
+import { CONFIGS } from '../../utils'
+import { IGroupItem } from '../../types'
+import { combineValidators, requiredValidator } from '../../validators'
+import { nanoid } from 'nanoid'
+import { FormikValues } from 'formik'
+
+export interface ILoggedInValues {
+  emailLogged?: string;
+  firstNameLogged?: string;
+  lastNameLogged?: string;
+}
+
+export interface IValues {
+  [key: string]: any;
+}
+
+export const getInitialValues = (
+  data: any = [],
+  propsInitialValues: IValues = {},
+  userValues: any = {}
+): IValues => {
+  const results = _flatMapDeep(data, ({ fields }) =>
+    _map(fields, ({ groupItems }) => _map(groupItems, ({ name }) => name))
+  )
+
+  const initialValues: IValues = {}
+  _forEach(results, item => {
+    initialValues[item] = propsInitialValues[item] || userValues[item] || ''
+  })
+
+  // set logged in user as first ticket holder
+  initialValues['holderFirstName-0'] =
+    propsInitialValues.firstName || userValues.firstName || ''
+  initialValues['holderLastName-0'] =
+    propsInitialValues.lastName || userValues.lastName || ''
+  initialValues['holderEmail-0'] =
+    propsInitialValues.email || userValues.email || ''
+
+  return initialValues
+}
+
+export const createRegisterFormData = (
+  values: IValues = {},
+  checkoutBody: { attributes: { [key: string]: any } }
+): FormData => {
+  const bodyFormData = new FormData()
+  bodyFormData.append('first_name', values.firstName)
+  bodyFormData.append('last_name', values.lastName)
+  bodyFormData.append('email', values.email)
+  bodyFormData.append('password', values.password)
+  bodyFormData.append('password_confirmation', values.confirmPassword)
+  bodyFormData.append(
+    'client_id',
+    CONFIGS.CLIENT_ID || 'e9d8f8922797b4621e562255afe90dbf'
+  )
+  bodyFormData.append(
+    'client_secret',
+    CONFIGS.CLIENT_SECRET || 'b89c191eff22fdcf84ac9bfd88d005355a151ec2c83b26b9'
+  )
+  bodyFormData.append('check_cart_expiration', 'true')
+
+  _forEach(checkoutBody.attributes, (item: any, key: string) => {
+    bodyFormData.append(key, item)
+  })
+
+  return bodyFormData
+}
+
+interface ICheckoutBody {
+  attributes: {
+    [key: string]: any;
+  };
+}
+
+interface IUserData {
+  id: string;
+  firstName: string;
+  lastName: string;
+  email: string;
+  city?: string;
+  country?: string;
+  countryId?: string;
+  phone?: string;
+  streetAddress?: string;
+  state?: string;
+  zip?: string;
+  zipCode?: string;
+  stateId?: string;
+}
+
+interface IticketHolder {
+  first_name?: string;
+  last_name?: string;
+  phone?: string;
+  email?: string;
+}
+
+export const setLoggedUserData = (data: IUserData) => ({
+  id: data.id,
+  first_name: data.firstName,
+  last_name: data.lastName,
+  email: data.email,
+  confirmEmail: data.email,
+  city: data?.city || '',
+  country: data?.countryId || data?.country || '',
+  phone: data?.phone || '',
+  street_address: data?.streetAddress || '',
+  state: data?.stateId || '',
+  zip: data?.zip || data?.zipCode || '',
+})
+
+export const createCheckoutDataBody = (
+  ticketsQuantity: number,
+  values: IValues = {},
+  logedInValues: ILoggedInValues = {},
+  includeDob: boolean = false
+): ICheckoutBody => {
+  const {
+    firstName,
+    lastName,
+    holderAge,
+    confirmEmail,
+    confirmPassword,
+    ...restValues
+  } = values
+
+  const holders = []
+  let ticket_holders: IticketHolder[] = []
+
+  for (let i = 0; i <= ticketsQuantity; i++) {
+    const individualHolder = Object.fromEntries(
+      Object.entries(values).filter(([key, _val]) => key.includes(String(i)))
+    )
+    holders.push(individualHolder)
+  }
+
+  const filteredHolders = holders.filter(
+    holder => Object.entries(holder).length > 0
+  )
+  ticket_holders = filteredHolders.map((item, index) => ({
+    first_name: !index ? item[`holderFirstName-${index}`] || logedInValues.firstNameLogged || '' : item[`holderFirstName-${index}`] || '',
+    last_name: !index ? item[`holderLastName-${index}`] || logedInValues.lastNameLogged || '' : item[`holderLastName-${index}`] || '',
+    phone: item[`holderPhone-${index}`] || '',
+    email: !index ? item[`holderEmail-${index}`] || logedInValues.emailLogged || '' : item[`holderEmail-${index}`] || '',
+  }))
+
+  const filteredRestValue: { [key: string]: any } = {}
+  _forEach(restValues, (value, key) => {
+    if (!key.includes('holder')) {
+      filteredRestValue[key] = value
+    }
+  })
+
+  const body: ICheckoutBody = {
+    attributes: {
+      ...filteredRestValue,
+      email: restValues.email || logedInValues.emailLogged,
+      confirm_email: restValues.email || logedInValues.emailLogged,
+      first_name: firstName || logedInValues.firstNameLogged,
+      last_name: lastName || logedInValues.lastNameLogged,
+      ticket_holders,
+    },
+  }
+
+  if (includeDob) {
+    const holderAgeDate = new Date(holderAge)
+    body.attributes.dob_day = holderAgeDate.getDate()
+    body.attributes.dob_month = holderAgeDate.getMonth() + 1
+    body.attributes.dob_year = holderAgeDate.getFullYear()
+  }
+  return body
+}
+
+export const getValidateFunctions = (
+  element: IGroupItem,
+  states: Array<{ [key: string]: any }>,
+  values: FormikValues
+) => {
+  const validationFunctions: any[] = []
+
+  if (element.required) {
+    if (
+      element.name !== 'state' ||
+      (element.name === 'state' && states.length)
+    ) {
+      validationFunctions.push(requiredValidator)
+    }
+  }
+
+  if (element.onValidate) {
+    validationFunctions.push(element.onValidate)
+  }
+
+  if (element.name === 'confirmEmail') {
+    const isSameEmail = (confirmEmail?: string) =>
+      values.email !== confirmEmail
+        ? 'Please confirm your email address correctly'
+        : null
+    validationFunctions.push(isSameEmail)
+  }
+
+  if (element.name === 'confirmPassword') {
+    const isSame = (confirmPassword?: string) =>
+      values.password !== confirmPassword
+        ? 'Password confirmation does not match'
+        : null
+    validationFunctions.push(isSame)
+  }
+
+  return combineValidators(...validationFunctions)
+}
+
+export const assingUniqueIds = (data: any): any => {
+  if (_get(data[0], 'uniqueId')) {
+    return data
+  }
+
+  return _map(data, (item: any) => {
+    _forEach(item, (itemValue: string, key) => {
+      if (_isArray(itemValue)) {
+        item[key] = assingUniqueIds(itemValue)
+      }
+    })
+
+    return { ...item, uniqueId: nanoid() }
+  })
+}