ordering-components-external 13.2.11 → 13.2.13

package/example/components/SingleBusinessCardUI/index.js

@@ -1,82 +1,82 @@
-import React, { useEffect, useState } from 'react'
-import PropTypes from 'prop-types'
-import { useBusiness } from '../../../src/contexts/BusinessContext'
-
-export const SingleBusinessCardUI = ({
-  currentTime,
-  logo,
-  name,
-  timetoOpen,
-  timeToclose,
-  minimum,
-  deliveryPrice,
-  description,
-  distance,
-  deliveryTime,
-  pickupTime,
-  reviews
-}) => {
-  const [{ filterValues }] = useBusiness()
-  const [isBusinessClose, setIsBusinessClose] = useState(false)
-
-  const formatDate = (time) => {
-    const formatHour = time.hour < 10 ? `0${time.hour}` : time.hour
-    const formatMinute = time.minute < 10 ? `0${time.minute}` : time.minute
-    return `${formatHour}:${formatMinute}`
-  }
-
-  const formatTimeToClose = formatDate(timeToclose)
-
-  useEffect(() => {
-    const currentHour = currentTime.split(':')[0]
-    const currentMinute = currentTime.split(':')[1]
-    const hour = formatTimeToClose.split(':')[0]
-    const minute = formatTimeToClose.split(':')[1]
-
-    const result = currentHour > hour || (currentHour === hour && currentMinute >= minute)
-    setIsBusinessClose(result)
-  }, [currentTime])
-
-  return (
-    <>
-      <div className='single-business-card'>
-        <br />
-        <span>{isBusinessClose && 'Close'}</span>
-        <img
-          src={logo}
-          alt='logo'
-          width='70'
-          height='70'
-        />
-        <h1>{name}</h1>
-        <p>{`${formatDate(timetoOpen)} - ${formatDate(timeToclose)}`}</p>
-        <p>Minimun order: ${minimum}.00</p>
-        <p>Delivery Fee: ${deliveryPrice}.00</p>
-        <p>Description: {description}</p>
-        <p>Distance: {distance} KM</p>
-        {filterValues.business_type === 'delivery_time' ? (
-          <p>Delivery time: {deliveryTime}</p>
-        ) : (
-          <p>Pickup time: {pickupTime}</p>
-        )}
-        <p>Reviews: {reviews.total}</p>
-        <hr />
-      </div>
-    </>
-  )
-}
-
-SingleBusinessCardUI.propTypes = {
-  currentTime: PropTypes.string,
-  logo: PropTypes.string,
-  name: PropTypes.string,
-  timetoOpen: PropTypes.object,
-  timeToclose: PropTypes.object,
-  minimum: PropTypes.number,
-  deliveryPrice: PropTypes.number,
-  description: PropTypes.string,
-  distance: PropTypes.number,
-  deliveryTime: PropTypes.string,
-  pickupTime: PropTypes.string,
-  reviews: PropTypes.number
-}
+import React, { useEffect, useState } from 'react'
+import PropTypes from 'prop-types'
+import { useBusiness } from '../../../src/contexts/BusinessContext'
+
+export const SingleBusinessCardUI = ({
+  currentTime,
+  logo,
+  name,
+  timetoOpen,
+  timeToclose,
+  minimum,
+  deliveryPrice,
+  description,
+  distance,
+  deliveryTime,
+  pickupTime,
+  reviews
+}) => {
+  const [{ filterValues }] = useBusiness()
+  const [isBusinessClose, setIsBusinessClose] = useState(false)
+
+  const formatDate = (time) => {
+    const formatHour = time.hour < 10 ? `0${time.hour}` : time.hour
+    const formatMinute = time.minute < 10 ? `0${time.minute}` : time.minute
+    return `${formatHour}:${formatMinute}`
+  }
+
+  const formatTimeToClose = formatDate(timeToclose)
+
+  useEffect(() => {
+    const currentHour = currentTime.split(':')[0]
+    const currentMinute = currentTime.split(':')[1]
+    const hour = formatTimeToClose.split(':')[0]
+    const minute = formatTimeToClose.split(':')[1]
+
+    const result = currentHour > hour || (currentHour === hour && currentMinute >= minute)
+    setIsBusinessClose(result)
+  }, [currentTime])
+
+  return (
+    <>
+      <div className='single-business-card'>
+        <br />
+        <span>{isBusinessClose && 'Close'}</span>
+        <img
+          src={logo}
+          alt='logo'
+          width='70'
+          height='70'
+        />
+        <h1>{name}</h1>
+        <p>{`${formatDate(timetoOpen)} - ${formatDate(timeToclose)}`}</p>
+        <p>Minimun order: ${minimum}.00</p>
+        <p>Delivery Fee: ${deliveryPrice}.00</p>
+        <p>Description: {description}</p>
+        <p>Distance: {distance} KM</p>
+        {filterValues.business_type === 'delivery_time' ? (
+          <p>Delivery time: {deliveryTime}</p>
+        ) : (
+          <p>Pickup time: {pickupTime}</p>
+        )}
+        <p>Reviews: {reviews.total}</p>
+        <hr />
+      </div>
+    </>
+  )
+}
+
+SingleBusinessCardUI.propTypes = {
+  currentTime: PropTypes.string,
+  logo: PropTypes.string,
+  name: PropTypes.string,
+  timetoOpen: PropTypes.object,
+  timeToclose: PropTypes.object,
+  minimum: PropTypes.number,
+  deliveryPrice: PropTypes.number,
+  description: PropTypes.string,
+  distance: PropTypes.number,
+  deliveryTime: PropTypes.string,
+  pickupTime: PropTypes.string,
+  reviews: PropTypes.number
+}

package/example/components/SingleOrderCardUI/index.js

@@ -1,52 +1,52 @@
-import React from 'react'
-
-export const SingleOrderCardUI = (props) => {
-  const {
-    orderType,
-    order,
-    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} />
-      )}
-
-      {orderType === 'active' && <h2>VIDEO</h2>}
-      <img src={order.business?.logo} width='100' height='100' /><br />
-      <p>{order.name}</p>
-      <p># {order.id}</p>
-      <p>{order.created_at}</p>
-      {orderType === 'active' && <p>$ {order.total}</p>}
-      <p>{order.status}</p>
-      {orderType === 'active' ? (
-        <button>Open order</button>
-      ) : (
-        <>
-          <button>Reorder</button>
-          <button>Review</button>
-        </>
-      )}
-
-      {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 SingleOrderCardUI = (props) => {
+  const {
+    orderType,
+    order,
+    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} />
+      )}
+
+      {orderType === 'active' && <h2>VIDEO</h2>}
+      <img src={order.business?.logo} width='100' height='100' /><br />
+      <p>{order.name}</p>
+      <p># {order.id}</p>
+      <p>{order.created_at}</p>
+      {orderType === 'active' && <p>$ {order.total}</p>}
+      <p>{order.status}</p>
+      {orderType === 'active' ? (
+        <button>Open order</button>
+      ) : (
+        <>
+          <button>Reorder</button>
+          <button>Review</button>
+        </>
+      )}
+
+      {afterComponents.map(
+        (AfterComponent, i) => <AfterComponent key={i} {...props} />
+      )}
+
+      {afterElements.map((AfterElement, i) => (
+        <React.Fragment key={i}>
+          {AfterElement}
+        </React.Fragment>
+      ))}
+    </>
+  )
+}

package/example/components/SingleProductCardUI/index.js

@@ -1,47 +1,47 @@
-import React from 'react'
-
-export const SingleProductCardUI = (props) => {
-  const {
-    isSoldOut,
-    images,
-    name,
-    description,
-    price,
-    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} />
-      )}
-
-      <div style={{ border: '1px solid gray', width: '300px', padding: '10px', marginBottom: '10px', display: 'flex', justifyContent: 'space-between', marginRight: '10px' }}>
-        {isSoldOut && <span style={{ background: 'black', color: 'white' }}>Sold Out</span>}<br />
-        <img src={images} alt={name} height='60' width='60' />
-        <span>{name}</span>
-        <span>{description}</span>
-        <span style={{ color: 'green' }}>${price}</span>
-      </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 SingleProductCardUI = (props) => {
+  const {
+    isSoldOut,
+    images,
+    name,
+    description,
+    price,
+    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} />
+      )}
+
+      <div style={{ border: '1px solid gray', width: '300px', padding: '10px', marginBottom: '10px', display: 'flex', justifyContent: 'space-between', marginRight: '10px' }}>
+        {isSoldOut && <span style={{ background: 'black', color: 'white' }}>Sold Out</span>}<br />
+        <img src={images} alt={name} height='60' width='60' />
+        <span>{name}</span>
+        <span>{description}</span>
+        <span style={{ color: 'green' }}>${price}</span>
+      </div>
+
+      {afterComponents.map(
+        (AfterComponent, i) => <AfterComponent key={i} {...props} />
+      )}
+
+      {afterElements.map((AfterElement, i) => (
+        <React.Fragment key={i}>
+          {AfterElement}
+        </React.Fragment>
+      ))}
+    </>
+  )
+}

package/example/components/StripeElementsFormUI/CardFormUI/index.js

@@ -1,51 +1,51 @@
-import React from 'react'
-import { CardElement } from '@stripe/react-stripe-js'
-
-import './style.css'
-
-/**
- * Custom styling can be passed to options when creating an Element
- */
-const CARD_ELEMENT_OPTIONS = {
-  style: {
-    base: {
-      color: '#32325d',
-      fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
-      fontSmoothing: 'antialiased',
-      fontSize: '16px',
-      '::placeholder': {
-        color: '#aab7c4'
-      }
-    },
-    invalid: {
-      color: '#fa755a',
-      iconColor: '#fa755a'
-    }
-  }
-}
-
-export const CardFormUI = (props) => {
-  const {
-    error,
-    loading,
-    handleSubmit,
-    handleChange
-  } = props
-
-  return (
-    <form className='stripe' onSubmit={handleSubmit}>
-      <div className='form-row'>
-        <label htmlFor='card-element'>
-          Credit or debit card
-        </label>
-        <CardElement
-          id='card-element'
-          options={CARD_ELEMENT_OPTIONS}
-          onChange={handleChange}
-        />
-        <div className='card-errors' role='alert'>{error}</div>
-      </div>
-      <button type='submit'>{loading ? 'Loading...' : 'Ok'}</button>
-    </form>
-  )
-}
+import React from 'react'
+import { CardElement } from '@stripe/react-stripe-js'
+
+import './style.css'
+
+/**
+ * Custom styling can be passed to options when creating an Element
+ */
+const CARD_ELEMENT_OPTIONS = {
+  style: {
+    base: {
+      color: '#32325d',
+      fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
+      fontSmoothing: 'antialiased',
+      fontSize: '16px',
+      '::placeholder': {
+        color: '#aab7c4'
+      }
+    },
+    invalid: {
+      color: '#fa755a',
+      iconColor: '#fa755a'
+    }
+  }
+}
+
+export const CardFormUI = (props) => {
+  const {
+    error,
+    loading,
+    handleSubmit,
+    handleChange
+  } = props
+
+  return (
+    <form className='stripe' onSubmit={handleSubmit}>
+      <div className='form-row'>
+        <label htmlFor='card-element'>
+          Credit or debit card
+        </label>
+        <CardElement
+          id='card-element'
+          options={CARD_ELEMENT_OPTIONS}
+          onChange={handleChange}
+        />
+        <div className='card-errors' role='alert'>{error}</div>
+      </div>
+      <button type='submit'>{loading ? 'Loading...' : 'Ok'}</button>
+    </form>
+  )
+}