ordering-components-external 13.2.12 → 13.2.13

package/example/components/MainSearchUI/index.js

@@ -1,131 +1,131 @@
-import React from 'react'
-import { useForm } from 'react-hook-form'
-import { AddressForm } from '../../../src/components/AddressForm'
-import { AddressFormUI } from '../../components/AddressFormUI'
-
-import { OrderTypeControl } from '../../../src/components/OrderTypeControl'
-import { OrderTypeControlUI } from '../../components/OrderTypeControlUI'
-
-export const MainSearchUI = (props) => {
-  const { register } = useForm()
-
-  const orderTypes = [
-    { value: 1 },
-    { value: 2 },
-    { value: 3 },
-    { value: 4 },
-    { value: 5 }
-  ]
-
-  const {
-    orderState,
-    allListValues,
-    isFormErrors,
-    searchByAddress,
-    handleFindBusiness,
-    handleChangeValue,
-    beforeComponents,
-    afterComponents,
-    beforeElements,
-    afterElements
-  } = props
-
-  const addressFormProps = {
-    /**
-     * UI Component, this must be containt all graphic elements and use parent props
-     */
-    UIComponent: AddressFormUI,
-    /**
-     * Enable to get checkout fields to show/hide fields from Ordering API
-     */
-    useValidationFileds: true
-  }
-
-  return (
-    <>
-      {beforeElements.map((BeforeElement, i) => (
-        <React.Fragment key={i}>
-          {BeforeElement}
-        </React.Fragment>
-      ))}
-
-      {beforeComponents.map(
-        (BeforeComponent, i) => <BeforeComponent key={i} {...props} />
-      )}
-      <OrderTypeControl
-        UIComponent={OrderTypeControlUI}
-        orderTypes={orderTypes}
-      />
-      <br />
-      <hr />
-      {searchByAddress ? (
-        <>
-          <input type='text' defaultValue={orderState.options.address?.address || ''} readOnly onClick={() => console.log('focus')} />
-          <AddressForm {...addressFormProps} address={null} />
-        </>
-      ) : (
-        <div>
-          <span>Select a country: </span>
-          <select
-            name='country'
-            ref={register({
-              required: 'Country is required'
-            })}
-            onChange={(e) => handleChangeValue(e.target)}
-          >
-            <option value={null}>select a country</option>
-            {allListValues?.countries?.length && allListValues?.countries.map(country => (
-              <option key={country.id} value={country.id}>{country.name}</option>
-            ))}
-          </select>
-          <br />
-
-          <span>Select a city: </span>
-          <select
-            name='cityId'
-            ref={register({
-              required: 'City is required'
-            })}
-            onChange={(e) => handleChangeValue(e.target)}
-          >
-            <option value={null}>select a city</option>
-            {allListValues.cities?.length && allListValues.cities.map(city => (
-              <option key={city.id} value={city.id}>{city.name}</option>
-            ))}
-          </select><br />
-
-          {allListValues.citiesOptions?.length > 0 && allListValues.citiesOptions?.map(option => (
-            <div key={option.id}>
-              <span>Select a city option: </span>
-              <select
-                name='dropdownOptionId'
-                ref={register({
-                  required: 'City option is required'
-                })}
-                onChange={(e) => handleChangeValue(e.target)}
-              >
-                <option value={null}>select a city option</option>
-                {allListValues.citiesOptions?.length && allListValues.citiesOptions.map(city => (
-                  <option key={city.id} value={city.city_id}>{city.name}</option>
-                ))}
-              </select><br />
-            </div>
-          ))}
-          {isFormErrors && <i style={{ color: '#c10000' }}>This fields are required</i>}
-          <br />
-        </div>)}
-      <br />
-      <button onClick={() => handleFindBusiness()}>Save</button>
-
-      {afterComponents.map(
-        (AfterComponent, i) => <AfterComponent key={i} {...props} />
-      )}
-
-      {afterElements.map((AfterElement, i) => (
-        <React.Fragment key={i}>
-          {AfterElement}
-        </React.Fragment>
-      ))}
-    </>
-  )
-}
+import React from 'react'
+import { useForm } from 'react-hook-form'
+import { AddressForm } from '../../../src/components/AddressForm'
+import { AddressFormUI } from '../../components/AddressFormUI'
+
+import { OrderTypeControl } from '../../../src/components/OrderTypeControl'
+import { OrderTypeControlUI } from '../../components/OrderTypeControlUI'
+
+export const MainSearchUI = (props) => {
+  const { register } = useForm()
+
+  const orderTypes = [
+    { value: 1 },
+    { value: 2 },
+    { value: 3 },
+    { value: 4 },
+    { value: 5 }
+  ]
+
+  const {
+    orderState,
+    allListValues,
+    isFormErrors,
+    searchByAddress,
+    handleFindBusiness,
+    handleChangeValue,
+    beforeComponents,
+    afterComponents,
+    beforeElements,
+    afterElements
+  } = props
+
+  const addressFormProps = {
+    /**
+     * UI Component, this must be containt all graphic elements and use parent props
+     */
+    UIComponent: AddressFormUI,
+    /**
+     * Enable to get checkout fields to show/hide fields from Ordering API
+     */
+    useValidationFileds: true
+  }
+
+  return (
+    <>
+      {beforeElements.map((BeforeElement, i) => (
+        <React.Fragment key={i}>
+          {BeforeElement}
+        </React.Fragment>
+      ))}
+
+      {beforeComponents.map(
+        (BeforeComponent, i) => <BeforeComponent key={i} {...props} />
+      )}
+      <OrderTypeControl
+        UIComponent={OrderTypeControlUI}
+        orderTypes={orderTypes}
+      />
+      <br />
+      <hr />
+      {searchByAddress ? (
+        <>
+          <input type='text' defaultValue={orderState.options.address?.address || ''} readOnly onClick={() => console.log('focus')} />
+          <AddressForm {...addressFormProps} address={null} />
+        </>
+      ) : (
+        <div>
+          <span>Select a country: </span>
+          <select
+            name='country'
+            ref={register({
+              required: 'Country is required'
+            })}
+            onChange={(e) => handleChangeValue(e.target)}
+          >
+            <option value={null}>select a country</option>
+            {allListValues?.countries?.length && allListValues?.countries.map(country => (
+              <option key={country.id} value={country.id}>{country.name}</option>
+            ))}
+          </select>
+          <br />
+
+          <span>Select a city: </span>
+          <select
+            name='cityId'
+            ref={register({
+              required: 'City is required'
+            })}
+            onChange={(e) => handleChangeValue(e.target)}
+          >
+            <option value={null}>select a city</option>
+            {allListValues.cities?.length && allListValues.cities.map(city => (
+              <option key={city.id} value={city.id}>{city.name}</option>
+            ))}
+          </select><br />
+
+          {allListValues.citiesOptions?.length > 0 && allListValues.citiesOptions?.map(option => (
+            <div key={option.id}>
+              <span>Select a city option: </span>
+              <select
+                name='dropdownOptionId'
+                ref={register({
+                  required: 'City option is required'
+                })}
+                onChange={(e) => handleChangeValue(e.target)}
+              >
+                <option value={null}>select a city option</option>
+                {allListValues.citiesOptions?.length && allListValues.citiesOptions.map(city => (
+                  <option key={city.id} value={city.city_id}>{city.name}</option>
+                ))}
+              </select><br />
+            </div>
+          ))}
+          {isFormErrors && <i style={{ color: '#c10000' }}>This fields are required</i>}
+          <br />
+        </div>)}
+      <br />
+      <button onClick={() => handleFindBusiness()}>Save</button>
+
+      {afterComponents.map(
+        (AfterComponent, i) => <AfterComponent key={i} {...props} />
+      )}
+
+      {afterElements.map((AfterElement, i) => (
+        <React.Fragment key={i}>
+          {AfterElement}
+        </React.Fragment>
+      ))}
+    </>
+  )
+}

package/example/components/MenuControlUI/index.js

@@ -1,103 +1,103 @@
-import React from 'react'
-import DatePicker from 'react-datepicker'
-import moment from 'moment'
-
-import 'react-datepicker/dist/react-datepicker.css'
-
-const daysOfWeek = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']
-
-export const MenuControlUI = (props) => {
-  const {
-    dateSelected,
-    menuLapsesList,
-    futureDaysToShow,
-    business,
-    startDate,
-    isDisabledDay,
-    scheduleSelected,
-    menuSelected,
-    handleMenuSelected,
-    handleDate,
-    beforeComponents,
-    afterComponents,
-    beforeElements,
-    afterElements
-  } = props
-
-  return (
-    <div className='menu-control'>
-      {beforeElements.map((BeforeElement, i) => (
-        <React.Fragment key={i}>
-          {BeforeElement}
-        </React.Fragment>
-      ))}
-
-      {beforeComponents.map(
-        (BeforeComponent, i) => <BeforeComponent key={i} {...props} />
-      )}
-
-      {business && Object.keys(business).length > 0 && (
-        <>
-          DATE SELECTED: {dateSelected}
-          <h1>Preorder</h1>
-
-          <img src={business.logo} alt='logo' width='80' height='80' />
-          <span style={{ marginLeft: '5px' }}>{business.name}</span>
-
-          <h3>1. Choose the menu you would like to see: </h3>
-
-          {business?.menus?.length > 0 && business?.menus?.map((menu, i) => (
-            <div
-              key={i}
-              style={{ border: '1px solid black', padding: '10px', width: '480px', marginBottom: '10px' }}
-              onClick={() => handleMenuSelected(menu)}
-            >
-              <div style={{ display: 'flex', justifyContent: 'space-between' }}>
-                <p>{menu.name}</p>
-                {menu.id === menuSelected && <strong>✅</strong>}
-              </div>
-              {menu.schedule?.length > 0 && menu.schedule?.map((item, i) => (
-                <button key={i} disabled={!item.enabled}>
-                  {daysOfWeek[i]}
-                </button>
-              ))}
-            </div>
-          ))}
-
-          <br />
-          {scheduleSelected && (
-            <>
-              <h3>2. Select your delivery time: </h3>
-              <DatePicker
-                selected={startDate}
-                minDate={moment().toDate()}
-                showTimeSelect
-                filterDate={isDisabledDay}
-                timeIntervals={15}
-                timeFormat='HH:mm'
-                dateFormat='MMMM d, yyyy HH:mm'
-                includeDates={futureDaysToShow()}
-                includeTimes={menuLapsesList()}
-                placeholderText='Select a date'
-                onChange={date => handleDate(date)}
-              />
-            </>
-          )}
-          <br />
-          <br />
-          <button onClick={() => props.onSendMenuInfo()}>Go to Menu</button>
-        </>
-      )}
-
-      {afterComponents.map(
-        (AfterComponent, i) => <AfterComponent key={i} {...props} />
-      )}
-
-      {afterElements.map((AfterElement, i) => (
-        <React.Fragment key={i}>
-          {AfterElement}
-        </React.Fragment>
-      ))}
-    </div>
-  )
-}
+import React from 'react'
+import DatePicker from 'react-datepicker'
+import moment from 'moment'
+
+import 'react-datepicker/dist/react-datepicker.css'
+
+const daysOfWeek = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']
+
+export const MenuControlUI = (props) => {
+  const {
+    dateSelected,
+    menuLapsesList,
+    futureDaysToShow,
+    business,
+    startDate,
+    isDisabledDay,
+    scheduleSelected,
+    menuSelected,
+    handleMenuSelected,
+    handleDate,
+    beforeComponents,
+    afterComponents,
+    beforeElements,
+    afterElements
+  } = props
+
+  return (
+    <div className='menu-control'>
+      {beforeElements.map((BeforeElement, i) => (
+        <React.Fragment key={i}>
+          {BeforeElement}
+        </React.Fragment>
+      ))}
+
+      {beforeComponents.map(
+        (BeforeComponent, i) => <BeforeComponent key={i} {...props} />
+      )}
+
+      {business && Object.keys(business).length > 0 && (
+        <>
+          DATE SELECTED: {dateSelected}
+          <h1>Preorder</h1>
+
+          <img src={business.logo} alt='logo' width='80' height='80' />
+          <span style={{ marginLeft: '5px' }}>{business.name}</span>
+
+          <h3>1. Choose the menu you would like to see: </h3>
+
+          {business?.menus?.length > 0 && business?.menus?.map((menu, i) => (
+            <div
+              key={i}
+              style={{ border: '1px solid black', padding: '10px', width: '480px', marginBottom: '10px' }}
+              onClick={() => handleMenuSelected(menu)}
+            >
+              <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+                <p>{menu.name}</p>
+                {menu.id === menuSelected && <strong>✅</strong>}
+              </div>
+              {menu.schedule?.length > 0 && menu.schedule?.map((item, i) => (
+                <button key={i} disabled={!item.enabled}>
+                  {daysOfWeek[i]}
+                </button>
+              ))}
+            </div>
+          ))}
+
+          <br />
+          {scheduleSelected && (
+            <>
+              <h3>2. Select your delivery time: </h3>
+              <DatePicker
+                selected={startDate}
+                minDate={moment().toDate()}
+                showTimeSelect
+                filterDate={isDisabledDay}
+                timeIntervals={15}
+                timeFormat='HH:mm'
+                dateFormat='MMMM d, yyyy HH:mm'
+                includeDates={futureDaysToShow()}
+                includeTimes={menuLapsesList()}
+                placeholderText='Select a date'
+                onChange={date => handleDate(date)}
+              />
+            </>
+          )}
+          <br />
+          <br />
+          <button onClick={() => props.onSendMenuInfo()}>Go to Menu</button>
+        </>
+      )}
+
+      {afterComponents.map(
+        (AfterComponent, i) => <AfterComponent key={i} {...props} />
+      )}
+
+      {afterElements.map((AfterElement, i) => (
+        <React.Fragment key={i}>
+          {AfterElement}
+        </React.Fragment>
+      ))}
+    </div>
+  )
+}