ordering-components-external 13.1.5 → 13.1.7

package/example/components/BaseComponentUI/index.js

@@ -1,34 +1,34 @@
-import React from 'react'
-
-export const BaseComponentUI = (props) => {
-  const {
-    beforeComponents,
-    afterComponents,
-    beforeElements,
-    afterElements
-  } = props
-
-  return (
-    <>
-      {beforeElements.map((BeforeElement, i) => (
-        <React.Fragment key={i}>
-          {BeforeElement}
-        </React.Fragment>
-      ))}
-
-      {beforeComponents.map(
-        (BeforeComponent, i) => <BeforeComponent key={i} {...props} />
-      )}
-
-      {afterComponents.map(
-        (AfterComponent, i) => <AfterComponent key={i} {...props} />
-      )}
-
-      {afterElements.map((AfterElement, i) => (
-        <React.Fragment key={i}>
-          {AfterElement}
-        </React.Fragment>
-      ))}
-    </>
-  )
-}
+import React from 'react'
+
+export const BaseComponentUI = (props) => {
+  const {
+    beforeComponents,
+    afterComponents,
+    beforeElements,
+    afterElements
+  } = props
+
+  return (
+    <>
+      {beforeElements.map((BeforeElement, i) => (
+        <React.Fragment key={i}>
+          {BeforeElement}
+        </React.Fragment>
+      ))}
+
+      {beforeComponents.map(
+        (BeforeComponent, i) => <BeforeComponent key={i} {...props} />
+      )}
+
+      {afterComponents.map(
+        (AfterComponent, i) => <AfterComponent key={i} {...props} />
+      )}
+
+      {afterElements.map((AfterElement, i) => (
+        <React.Fragment key={i}>
+          {AfterElement}
+        </React.Fragment>
+      ))}
+    </>
+  )
+}

package/example/components/BusinessBasicInformationUI/index.js

@@ -1,118 +1,118 @@
-import React, { useState } from 'react'
-import { Popup } from '../../../src/components/Popup'
-import { ModalUI } from '../ModalUI'
-
-export const BusinessBasicInformationUI = (props) => {
-  const {
-    businessState,
-    beforeComponents,
-    afterComponents,
-    beforeElements,
-    afterElements
-  } = props
-
-  const { business, loading, error } = businessState
-
-  const [modalIsOpen, setIsOpen] = useState(false)
-
-  const customStyles = {
-    content: {
-      padding: '20px',
-      margin: '10px 30px',
-      overflow: 'auto',
-      backgroundColor: '#D1D1D1'
-    }
-  }
-
-  const openModal = () => {
-    setIsOpen(true)
-  }
-
-  const closeModal = () => {
-    setIsOpen(false)
-  }
-
-  return (
-    <>
-      {beforeElements.map((BeforeElement, i) => (
-        <React.Fragment key={i}>
-          {BeforeElement}
-        </React.Fragment>
-      ))}
-
-      {beforeComponents.map(
-        (BeforeComponent, i) => <BeforeComponent key={i} {...props} />
-      )}
-
-      {business && Object.values(business).length > 0 && (
-        <div className='bus-basic'>
-          <div className='header'>
-            {business?.header && (
-              <img src={business?.header} alt='header' width='500' height='200' />
-            )}
-            {business?.logo && (
-              <img src={business?.logo} alt='logo' width='62' height='62' />
-            )}
-          </div>
-          <div className='information-block'>
-            <h1>{business?.name}</h1>
-            <p>{business?.description}</p>
-            <p>{business?.reviews?.total} ratings</p>
-            <button onClick={openModal}>
-              More information
-            </button>
-          </div>
-        </div>
-      )}
-
-      {loading && (
-        <p>Loading...</p>
-      )}
-
-      {error && error.length > 0 && (
-        error.map((e, i) => (
-          <p key={i}>ERROR: [{e}]</p>
-        ))
-      )}
-
-      {!loading && Object.values(business).length === 0 && (
-        <p>business not found</p>
-      )}
-
-      <Popup
-        className='modal-info'
-        UIComponent={ModalUI}
-        open={modalIsOpen}
-        onAccept={() => closeModal()}
-        onClose={() => closeModal()}
-        style={customStyles}
-        title='Example Modal'
-      >
-        <button onClick={closeModal}>close</button>
-        <div>
-          <img src={business?.header} alt='header' width='500' height='200' /><br />
-          <img src={business?.logo} alt='logo' width='62' height='62' />
-          <h1>{business?.name}</h1>
-          <p>Description: {business?.description}</p>
-          <p>{business?.today}</p>
-          <p>Delivery Fee: {business?.delivery_price}</p>
-          <p>Minimum order: {business?.minimum}</p>
-          <p>Distance: {business?.distance}</p>
-          <p>Order type time:</p>
-          <p>Delivery Time: {business?.delivery_time}</p>
-          <p>Pickup Time: {business?.pickup_time}</p>
-        </div>
-      </Popup>
-
-      {afterComponents.map(
-        (AfterComponent, i) => <AfterComponent key={i} {...props} />
-      )}
-
-      {afterElements.map((AfterElement, i) => (
-        <React.Fragment key={i}>
-          {AfterElement}
-        </React.Fragment>
-      ))}
-    </>
-  )
-}
+import React, { useState } from 'react'
+import { Popup } from '../../../src/components/Popup'
+import { ModalUI } from '../ModalUI'
+
+export const BusinessBasicInformationUI = (props) => {
+  const {
+    businessState,
+    beforeComponents,
+    afterComponents,
+    beforeElements,
+    afterElements
+  } = props
+
+  const { business, loading, error } = businessState
+
+  const [modalIsOpen, setIsOpen] = useState(false)
+
+  const customStyles = {
+    content: {
+      padding: '20px',
+      margin: '10px 30px',
+      overflow: 'auto',
+      backgroundColor: '#D1D1D1'
+    }
+  }
+
+  const openModal = () => {
+    setIsOpen(true)
+  }
+
+  const closeModal = () => {
+    setIsOpen(false)
+  }
+
+  return (
+    <>
+      {beforeElements.map((BeforeElement, i) => (
+        <React.Fragment key={i}>
+          {BeforeElement}
+        </React.Fragment>
+      ))}
+
+      {beforeComponents.map(
+        (BeforeComponent, i) => <BeforeComponent key={i} {...props} />
+      )}
+
+      {business && Object.values(business).length > 0 && (
+        <div className='bus-basic'>
+          <div className='header'>
+            {business?.header && (
+              <img src={business?.header} alt='header' width='500' height='200' />
+            )}
+            {business?.logo && (
+              <img src={business?.logo} alt='logo' width='62' height='62' />
+            )}
+          </div>
+          <div className='information-block'>
+            <h1>{business?.name}</h1>
+            <p>{business?.description}</p>
+            <p>{business?.reviews?.total} ratings</p>
+            <button onClick={openModal}>
+              More information
+            </button>
+          </div>
+        </div>
+      )}
+
+      {loading && (
+        <p>Loading...</p>
+      )}
+
+      {error && error.length > 0 && (
+        error.map((e, i) => (
+          <p key={i}>ERROR: [{e}]</p>
+        ))
+      )}
+
+      {!loading && Object.values(business).length === 0 && (
+        <p>business not found</p>
+      )}
+
+      <Popup
+        className='modal-info'
+        UIComponent={ModalUI}
+        open={modalIsOpen}
+        onAccept={() => closeModal()}
+        onClose={() => closeModal()}
+        style={customStyles}
+        title='Example Modal'
+      >
+        <button onClick={closeModal}>close</button>
+        <div>
+          <img src={business?.header} alt='header' width='500' height='200' /><br />
+          <img src={business?.logo} alt='logo' width='62' height='62' />
+          <h1>{business?.name}</h1>
+          <p>Description: {business?.description}</p>
+          <p>{business?.today}</p>
+          <p>Delivery Fee: {business?.delivery_price}</p>
+          <p>Minimum order: {business?.minimum}</p>
+          <p>Distance: {business?.distance}</p>
+          <p>Order type time:</p>
+          <p>Delivery Time: {business?.delivery_time}</p>
+          <p>Pickup Time: {business?.pickup_time}</p>
+        </div>
+      </Popup>
+
+      {afterComponents.map(
+        (AfterComponent, i) => <AfterComponent key={i} {...props} />
+      )}
+
+      {afterElements.map((AfterElement, i) => (
+        <React.Fragment key={i}>
+          {AfterElement}
+        </React.Fragment>
+      ))}
+    </>
+  )
+}

package/example/components/BusinessControllerUI/index.js

@@ -1,89 +1,89 @@
-import React from 'react'
-
-export const BusinessControllerUI = (props) => {
-  const {
-    orderState,
-    isBusinessClose,
-    getBusinessOffer,
-    business,
-    formatDate,
-    formatNumber,
-    handleClick,
-    beforeComponents,
-    afterComponents,
-    beforeElements,
-    afterElements
-  } = props
-
-  return (
-    <>
-      {beforeElements.map((BeforeElement, i) => (
-        <React.Fragment key={i}>
-          {BeforeElement}
-        </React.Fragment>
-      ))}
-
-      {beforeComponents.map(
-        (BeforeComponent, i) => <BeforeComponent key={i} {...props} />
-      )}
-
-      {business && business.id ? (
-        <div style={{ border: '1px solid gray', width: '300px', padding: '10px 20px' }} className='single-business-card' onClick={() => handleClick(business)}>
-          <br />
-          {business.featured && (
-            <span style={{ border: '1px solid green', width: '30px', background: 'green', color: 'white' }}>FEATURED</span>
-          )}<br />
-          {isBusinessClose && (
-            <span style={{ border: '1px solid gray', width: '30px', background: 'gray' }}>CLOSE</span>
-          )}<br />
-          {getBusinessOffer(business.offers) && (
-            <span style={{ border: '1px solid gray', width: '30px', background: 'green', color: 'white' }}>{getBusinessOffer(business.offers)}</span>
-          )}
-          <br />
-          <br />
-          <img
-            src={business.header}
-            alt='logo'
-            width='285'
-            height='125'
-          />
-          <img
-            src={business.logo}
-            alt='logo'
-            width='70'
-            height='70'
-          />
-          <h1>{business.name}</h1>
-          <p>{formatDate(business?.today?.lapses[0]?.open)} - {formatDate(business?.today?.lapses[0]?.close)}</p>
-          <p>Minimun order: ${business.minimum}.00</p>
-          <p>Delivery Fee: ${business.deliveryPrice}.00</p>
-          <p>Description: {business.description}</p>
-          <p>Distance: {formatNumber(business.distance) || 0} KM</p>
-          {orderState.options.type === 1 ? (
-            <p>Delivery time: {business.delivery_time}</p>
-          ) : (
-            <p>Pickup time: {business.pickup_time}</p>
-          )}
-          {Array(parseInt(business.reviews?.total)).fill(1).map((el, i) =>
-            <i key={i}>⭐</i>
-          )}
-          &nbsp;{business.reviews?.total} ratings
-        </div>
-      ) : (
-        <div style={{ border: '1px solid gray', width: '300px', padding: '10px 20px' }} className='single-business-card'>
-          &nbsp;
-        </div>
-      )}
-
-      {afterComponents.map(
-        (AfterComponent, i) => <AfterComponent key={i} {...props} />
-      )}
-
-      {afterElements.map((AfterElement, i) => (
-        <React.Fragment key={i}>
-          {AfterElement}
-        </React.Fragment>
-      ))}
-    </>
-  )
-}
+import React from 'react'
+
+export const BusinessControllerUI = (props) => {
+  const {
+    orderState,
+    isBusinessClose,
+    getBusinessOffer,
+    business,
+    formatDate,
+    formatNumber,
+    handleClick,
+    beforeComponents,
+    afterComponents,
+    beforeElements,
+    afterElements
+  } = props
+
+  return (
+    <>
+      {beforeElements.map((BeforeElement, i) => (
+        <React.Fragment key={i}>
+          {BeforeElement}
+        </React.Fragment>
+      ))}
+
+      {beforeComponents.map(
+        (BeforeComponent, i) => <BeforeComponent key={i} {...props} />
+      )}
+
+      {business && business.id ? (
+        <div style={{ border: '1px solid gray', width: '300px', padding: '10px 20px' }} className='single-business-card' onClick={() => handleClick(business)}>
+          <br />
+          {business.featured && (
+            <span style={{ border: '1px solid green', width: '30px', background: 'green', color: 'white' }}>FEATURED</span>
+          )}<br />
+          {isBusinessClose && (
+            <span style={{ border: '1px solid gray', width: '30px', background: 'gray' }}>CLOSE</span>
+          )}<br />
+          {getBusinessOffer(business.offers) && (
+            <span style={{ border: '1px solid gray', width: '30px', background: 'green', color: 'white' }}>{getBusinessOffer(business.offers)}</span>
+          )}
+          <br />
+          <br />
+          <img
+            src={business.header}
+            alt='logo'
+            width='285'
+            height='125'
+          />
+          <img
+            src={business.logo}
+            alt='logo'
+            width='70'
+            height='70'
+          />
+          <h1>{business.name}</h1>
+          <p>{formatDate(business?.today?.lapses[0]?.open)} - {formatDate(business?.today?.lapses[0]?.close)}</p>
+          <p>Minimun order: ${business.minimum}.00</p>
+          <p>Delivery Fee: ${business.deliveryPrice}.00</p>
+          <p>Description: {business.description}</p>
+          <p>Distance: {formatNumber(business.distance) || 0} KM</p>
+          {orderState.options.type === 1 ? (
+            <p>Delivery time: {business.delivery_time}</p>
+          ) : (
+            <p>Pickup time: {business.pickup_time}</p>
+          )}
+          {Array(parseInt(business.reviews?.total)).fill(1).map((el, i) =>
+            <i key={i}>⭐</i>
+          )}
+          &nbsp;{business.reviews?.total} ratings
+        </div>
+      ) : (
+        <div style={{ border: '1px solid gray', width: '300px', padding: '10px 20px' }} className='single-business-card'>
+          &nbsp;
+        </div>
+      )}
+
+      {afterComponents.map(
+        (AfterComponent, i) => <AfterComponent key={i} {...props} />
+      )}
+
+      {afterElements.map((AfterElement, i) => (
+        <React.Fragment key={i}>
+          {AfterElement}
+        </React.Fragment>
+      ))}
+    </>
+  )
+}

package/example/components/BusinessInformationUI/BusinessOptionUI/index.js

@@ -1,83 +1,83 @@
-import React from 'react'
-
-import { GoogleMapsMap } from '../../../../src/components/GoogleMaps'
-import { useConfig } from '../../../../src/contexts/ConfigContext'
-
-const daysOfWeek = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']
-
-export const BusinessOptionUI = (props) => {
-  const {
-    label,
-    contentData,
-    optionToShow,
-    locationData,
-    formatUrlVideo,
-    openingTime,
-    name,
-    handleClickOption,
-    beforeComponents,
-    afterComponents,
-    beforeElements,
-    afterElements
-  } = props
-
-  const [{ configs }] = useConfig()
-
-  return (
-    <>
-      {beforeElements.map((BeforeElement, i) => (
-        <React.Fragment key={i}>
-          {BeforeElement}
-        </React.Fragment>
-      ))}
-
-      {beforeComponents.map(
-        (BeforeComponent, i) => <BeforeComponent key={i} {...props} />
-      )}
-
-      <button onClick={() => handleClickOption(label)} name={name}>{label}</button>
-      <hr />
-      {(optionToShow === label && label !== 'Business Location') && (
-        <>
-          {contentData.map((item, i) => (
-            <div key={i}>
-              {label === 'Business Opening Time' && (
-                <p>{daysOfWeek[i]} {openingTime(item.lapses[0])}</p>
-              )}
-              {label === 'Photo Gallery' && (
-                <img src={item.file} alt={`photo-${i}`} width='191' height='128' />
-              )}
-              {label === 'Video Gallery' && (
-                <iframe src={formatUrlVideo(item.video)} width='560' height='315' frameBorder='0' allow='autoplay; encrypted-media' allowFullScreen />
-              )}
-            </div>
-          ))}
-        </>
-      )}
-      {optionToShow === 'Business Location' && label === 'Business Location' && (
-        <>
-          <span>{locationData.address}</span>
-          <span>{locationData.address_notes}</span>
-          <GoogleMapsMap
-            apiKey={configs?.google_maps_api_key?.value}
-            location={locationData.location}
-            mapControls={locationData.googleMapsControls}
-            maxLimitLocation={500}
-            setErrors={(e) => { console.log(e) }}
-          />
-        </>
-      )}
-      <hr />
-
-      {afterComponents.map(
-        (AfterComponent, i) => <AfterComponent key={i} {...props} />
-      )}
-
-      {afterElements.map((AfterElement, i) => (
-        <React.Fragment key={i}>
-          {AfterElement}
-        </React.Fragment>
-      ))}
-    </>
-  )
-}
+import React from 'react'
+
+import { GoogleMapsMap } from '../../../../src/components/GoogleMaps'
+import { useConfig } from '../../../../src/contexts/ConfigContext'
+
+const daysOfWeek = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']
+
+export const BusinessOptionUI = (props) => {
+  const {
+    label,
+    contentData,
+    optionToShow,
+    locationData,
+    formatUrlVideo,
+    openingTime,
+    name,
+    handleClickOption,
+    beforeComponents,
+    afterComponents,
+    beforeElements,
+    afterElements
+  } = props
+
+  const [{ configs }] = useConfig()
+
+  return (
+    <>
+      {beforeElements.map((BeforeElement, i) => (
+        <React.Fragment key={i}>
+          {BeforeElement}
+        </React.Fragment>
+      ))}
+
+      {beforeComponents.map(
+        (BeforeComponent, i) => <BeforeComponent key={i} {...props} />
+      )}
+
+      <button onClick={() => handleClickOption(label)} name={name}>{label}</button>
+      <hr />
+      {(optionToShow === label && label !== 'Business Location') && (
+        <>
+          {contentData.map((item, i) => (
+            <div key={i}>
+              {label === 'Business Opening Time' && (
+                <p>{daysOfWeek[i]} {openingTime(item.lapses[0])}</p>
+              )}
+              {label === 'Photo Gallery' && (
+                <img src={item.file} alt={`photo-${i}`} width='191' height='128' />
+              )}
+              {label === 'Video Gallery' && (
+                <iframe src={formatUrlVideo(item.video)} width='560' height='315' frameBorder='0' allow='autoplay; encrypted-media' allowFullScreen />
+              )}
+            </div>
+          ))}
+        </>
+      )}
+      {optionToShow === 'Business Location' && label === 'Business Location' && (
+        <>
+          <span>{locationData.address}</span>
+          <span>{locationData.address_notes}</span>
+          <GoogleMapsMap
+            apiKey={configs?.google_maps_api_key?.value}
+            location={locationData.location}
+            mapControls={locationData.googleMapsControls}
+            maxLimitLocation={500}
+            setErrors={(e) => { console.log(e) }}
+          />
+        </>
+      )}
+      <hr />
+
+      {afterComponents.map(
+        (AfterComponent, i) => <AfterComponent key={i} {...props} />
+      )}
+
+      {afterElements.map((AfterElement, i) => (
+        <React.Fragment key={i}>
+          {AfterElement}
+        </React.Fragment>
+      ))}
+    </>
+  )
+}