ordering-components-external 13.2.13 → 13.2.14

package/example/components/MessagesUI/index.js

@@ -1,162 +1,162 @@
-import React from 'react'
-
-export const MessagesUI = (props) => {
-  const {
-    beforeComponents,
-    afterComponents,
-    beforeElements,
-    afterElements,
-    canRead,
-    setMessage,
-    setCanRead,
-    handleSend,
-    sendMessage,
-    messages,
-    setImage,
-    image
-  } = props
-  const onChangeMessage = e => {
-    setMessage(e.target.value)
-  }
-  const removeImage = e => {
-    const input = document.getElementById('chat_image')
-    input.value = ''
-    setImage(null)
-  }
-  const handleCanRead = e => {
-    setCanRead({
-      ...canRead,
-      [e.target.name]: e.target.checked
-    })
-  }
-  const onChangeImage = e => {
-    const files = Array.from(e.target.files)
-    if (files.length > 0) {
-      const reader = new FileReader()
-      reader.readAsDataURL(files[0])
-      reader.onload = () => {
-        const img = new Image()
-        img.onload = () => {
-          setImage(reader.result)
-        }
-        img.src = reader.result
-      }
-      reader.onerror = error => {
-        console.log(error)
-      }
-      setImage(files[0])
-    }
-  }
-  const getRole = level => {
-    switch (level) {
-      case 0:
-        return 'admin'
-      case 2:
-        return 'business'
-      case 4:
-        return 'driver'
-      default:
-        return 'Customer'
-    }
-  }
-  return (
-    <>
-      {beforeElements.map((BeforeElement, i) => (
-        <React.Fragment key={i}>
-          {BeforeElement}
-        </React.Fragment>
-      ))}
-
-      {beforeComponents.map(
-        (BeforeComponent, i) => <BeforeComponent key={i} {...props} />
-      )}
-      <h1>CHAT</h1>
-      {
-        messages.loading &&
-          <>
-            <span>Loading Messages...</span>
-            <br />
-            <br />
-          </>
-      }
-      {
-        messages.error &&
-          <>
-            <h1 style={{ color: 'red' }}>{messages.error}</h1>
-            <br />
-          </>
-      }
-      {
-        messages?.messages?.map(message => (
-          <div key={message.id}>
-            {
-              message.type === 1 && (
-                <p>Change: {message.change.attribute} {
-                  message.change.old &&
-                    <span>
-                    from <strong>{message.change.old}</strong>
-                    </span>
-                } <span>to {message.change.new}</span>
-                </p>)
-            }
-            {
-              message.type === 2 && (
-                <>
-                  <strong>{message.author.name} ({getRole(message.author.level)})</strong><br />
-                  {message.comment}
-                </>
-              )
-            }
-            {
-              message.type === 3 && (
-                <>
-                  <strong>{message.author.name} ({getRole(message.author.level)})</strong><br />
-                  <img src={message.source} />
-                  {message.comment}
-                </>
-              )
-            }
-            <hr />
-          </div>
-        ))
-      }
-      {/* Chat Controller (can see, message, send) */
-        <>
-          <input name='business' type='checkbox' onChange={handleCanRead} defaultChecked={canRead.business} />
-          <label>Business</label>
-          <input name='administrator' type='checkbox' onChange={handleCanRead} defaultChecked={canRead.administrator} />
-          <label>Administrator</label>
-          <input name='driver' type='checkbox' onChange={handleCanRead} defaultChecked={canRead.driver} />
-          <label>Driver</label>
-          <br />
-          <textarea name='message' cols='120' rows='10' onChange={onChangeMessage} />
-          <br />
-          {
-            image && <button onClick={removeImage}>X</button>
-          }
-          <input type='file' name='image' id='chat_image' accept='image/png,image/jpg,image/jpeg' onChange={onChangeImage} />
-          <button onClick={handleSend}>Send</button>
-        </>
-      }
-      {
-        sendMessage.loading && <span>Sending Message...</span>
-      }
-      {
-        sendMessage.error &&
-          <>
-            <br />
-            <span style={{ color: 'red' }}>{sendMessage.error}</span>
-          </>
-      }
-      {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 MessagesUI = (props) => {
+  const {
+    beforeComponents,
+    afterComponents,
+    beforeElements,
+    afterElements,
+    canRead,
+    setMessage,
+    setCanRead,
+    handleSend,
+    sendMessage,
+    messages,
+    setImage,
+    image
+  } = props
+  const onChangeMessage = e => {
+    setMessage(e.target.value)
+  }
+  const removeImage = e => {
+    const input = document.getElementById('chat_image')
+    input.value = ''
+    setImage(null)
+  }
+  const handleCanRead = e => {
+    setCanRead({
+      ...canRead,
+      [e.target.name]: e.target.checked
+    })
+  }
+  const onChangeImage = e => {
+    const files = Array.from(e.target.files)
+    if (files.length > 0) {
+      const reader = new FileReader()
+      reader.readAsDataURL(files[0])
+      reader.onload = () => {
+        const img = new Image()
+        img.onload = () => {
+          setImage(reader.result)
+        }
+        img.src = reader.result
+      }
+      reader.onerror = error => {
+        console.log(error)
+      }
+      setImage(files[0])
+    }
+  }
+  const getRole = level => {
+    switch (level) {
+      case 0:
+        return 'admin'
+      case 2:
+        return 'business'
+      case 4:
+        return 'driver'
+      default:
+        return 'Customer'
+    }
+  }
+  return (
+    <>
+      {beforeElements.map((BeforeElement, i) => (
+        <React.Fragment key={i}>
+          {BeforeElement}
+        </React.Fragment>
+      ))}
+
+      {beforeComponents.map(
+        (BeforeComponent, i) => <BeforeComponent key={i} {...props} />
+      )}
+      <h1>CHAT</h1>
+      {
+        messages.loading &&
+          <>
+            <span>Loading Messages...</span>
+            <br />
+            <br />
+          </>
+      }
+      {
+        messages.error &&
+          <>
+            <h1 style={{ color: 'red' }}>{messages.error}</h1>
+            <br />
+          </>
+      }
+      {
+        messages?.messages?.map(message => (
+          <div key={message.id}>
+            {
+              message.type === 1 && (
+                <p>Change: {message.change.attribute} {
+                  message.change.old &&
+                    <span>
+                    from <strong>{message.change.old}</strong>
+                    </span>
+                } <span>to {message.change.new}</span>
+                </p>)
+            }
+            {
+              message.type === 2 && (
+                <>
+                  <strong>{message.author.name} ({getRole(message.author.level)})</strong><br />
+                  {message.comment}
+                </>
+              )
+            }
+            {
+              message.type === 3 && (
+                <>
+                  <strong>{message.author.name} ({getRole(message.author.level)})</strong><br />
+                  <img src={message.source} />
+                  {message.comment}
+                </>
+              )
+            }
+            <hr />
+          </div>
+        ))
+      }
+      {/* Chat Controller (can see, message, send) */
+        <>
+          <input name='business' type='checkbox' onChange={handleCanRead} defaultChecked={canRead.business} />
+          <label>Business</label>
+          <input name='administrator' type='checkbox' onChange={handleCanRead} defaultChecked={canRead.administrator} />
+          <label>Administrator</label>
+          <input name='driver' type='checkbox' onChange={handleCanRead} defaultChecked={canRead.driver} />
+          <label>Driver</label>
+          <br />
+          <textarea name='message' cols='120' rows='10' onChange={onChangeMessage} />
+          <br />
+          {
+            image && <button onClick={removeImage}>X</button>
+          }
+          <input type='file' name='image' id='chat_image' accept='image/png,image/jpg,image/jpeg' onChange={onChangeImage} />
+          <button onClick={handleSend}>Send</button>
+        </>
+      }
+      {
+        sendMessage.loading && <span>Sending Message...</span>
+      }
+      {
+        sendMessage.error &&
+          <>
+            <br />
+            <span style={{ color: 'red' }}>{sendMessage.error}</span>
+          </>
+      }
+      {afterComponents.map(
+        (AfterComponent, i) => <AfterComponent key={i} {...props} />
+      )}
+
+      {afterElements.map((AfterElement, i) => (
+        <React.Fragment key={i}>
+          {AfterElement}
+        </React.Fragment>
+      ))}
+    </>
+  )
+}

package/example/components/ModalUI/index.js

@@ -1,36 +1,36 @@
-import React from 'react'
-import './style.css'
-
-export const ModalUI = (props) => {
-  const {
-    title,
-    onAccept,
-    onCancel,
-    onClose,
-    children
-  } = props
-
-  return (
-    <div className='popup-dialog'>
-      {
-        title && <h2>{title}</h2>
-      }
-      {children}
-      {
-        (onCancel || onAccept || onClose) && (
-          <div>
-            {
-              onAccept && <button onClick={() => onAccept()}>Accept</button>
-            }
-            {
-              onCancel && <button onClick={() => onCancel()}>Cancel</button>
-            }
-            {
-              onClose && <button onClick={() => onClose()}>Close</button>
-            }
-          </div>
-        )
-      }
-    </div>
-  )
-}
+import React from 'react'
+import './style.css'
+
+export const ModalUI = (props) => {
+  const {
+    title,
+    onAccept,
+    onCancel,
+    onClose,
+    children
+  } = props
+
+  return (
+    <div className='popup-dialog'>
+      {
+        title && <h2>{title}</h2>
+      }
+      {children}
+      {
+        (onCancel || onAccept || onClose) && (
+          <div>
+            {
+              onAccept && <button onClick={() => onAccept()}>Accept</button>
+            }
+            {
+              onCancel && <button onClick={() => onCancel()}>Cancel</button>
+            }
+            {
+              onClose && <button onClick={() => onClose()}>Close</button>
+            }
+          </div>
+        )
+      }
+    </div>
+  )
+}

package/example/components/ModalUI/style.css

@@ -1,6 +1,6 @@
-.popup-dialog {
-  background-color: #fff;
-  padding: 20px;
-  width: 500px;
-  margin: 20px auto;
+.popup-dialog {
+  background-color: #fff;
+  padding: 20px;
+  width: 500px;
+  margin: 20px auto;
 }

package/example/components/MomentOptionUI/index.js

@@ -1,68 +1,68 @@
-import React from 'react'
-
-export const MomentOptionUI = (props) => {
-  const {
-    isAsap,
-    datesList,
-    hoursList,
-    dateSelected,
-    timeSelected,
-    handleAsap,
-    beforeComponents,
-    afterComponents,
-    beforeElements,
-    afterElements
-  } = props
-
-  return (
-    <div className='moment-section'>
-      {beforeElements.map((BeforeElement, i) => (
-        <React.Fragment key={i}>
-          {BeforeElement}
-        </React.Fragment>
-      ))}
-
-      {beforeComponents.map(
-        (BeforeComponent, i) => <BeforeComponent key={i} {...props} />
-      )}
-      Current datetime: {dateSelected} {timeSelected}
-      {(
-        <>
-          <h4>Select a Delivery date with time</h4>
-          <select className='select-date' value={dateSelected || ''} onChange={(e) => props.handleChangeDate(e.target.value)}>
-            <option value='' disabled>Select a date</option>
-            {datesList.length > 0 && datesList.map((date, i) => (
-              <option key={i} value={date}>{date}</option>
-            ))}
-          </select>&nbsp;
-          {dateSelected &&
-            <select className='select-hour' value={timeSelected || ''} onChange={(e) => props.handleChangeTime(e.target.value)}>
-              <option value='' disabled>Select a time</option>
-              {hoursList.length > 0 && hoursList.map((hour, i) => (
-                <option key={i} value={hour.startTime}>{hour.startTime} to {hour.endTime}</option>
-              ))}
-            </select>}
-          <br />
-        </>
-      )}
-
-      <h4>Desired Delivery Time</h4>
-      {isAsap && (
-        <span>✅ ASAP</span>
-      )}&nbsp;
-      <button onClick={() => handleAsap()}>
-        {isAsap ? 'Select a range' : 'As soon as possible'}
-      </button><br /><br />
-
-      {afterComponents.map(
-        (AfterComponent, i) => <AfterComponent key={i} {...props} />
-      )}
-
-      {afterElements.map((AfterElement, i) => (
-        <React.Fragment key={i}>
-          {AfterElement}
-        </React.Fragment>
-      ))}
-    </div>
-  )
-}
+import React from 'react'
+
+export const MomentOptionUI = (props) => {
+  const {
+    isAsap,
+    datesList,
+    hoursList,
+    dateSelected,
+    timeSelected,
+    handleAsap,
+    beforeComponents,
+    afterComponents,
+    beforeElements,
+    afterElements
+  } = props
+
+  return (
+    <div className='moment-section'>
+      {beforeElements.map((BeforeElement, i) => (
+        <React.Fragment key={i}>
+          {BeforeElement}
+        </React.Fragment>
+      ))}
+
+      {beforeComponents.map(
+        (BeforeComponent, i) => <BeforeComponent key={i} {...props} />
+      )}
+      Current datetime: {dateSelected} {timeSelected}
+      {(
+        <>
+          <h4>Select a Delivery date with time</h4>
+          <select className='select-date' value={dateSelected || ''} onChange={(e) => props.handleChangeDate(e.target.value)}>
+            <option value='' disabled>Select a date</option>
+            {datesList.length > 0 && datesList.map((date, i) => (
+              <option key={i} value={date}>{date}</option>
+            ))}
+          </select>&nbsp;
+          {dateSelected &&
+            <select className='select-hour' value={timeSelected || ''} onChange={(e) => props.handleChangeTime(e.target.value)}>
+              <option value='' disabled>Select a time</option>
+              {hoursList.length > 0 && hoursList.map((hour, i) => (
+                <option key={i} value={hour.startTime}>{hour.startTime} to {hour.endTime}</option>
+              ))}
+            </select>}
+          <br />
+        </>
+      )}
+
+      <h4>Desired Delivery Time</h4>
+      {isAsap && (
+        <span>✅ ASAP</span>
+      )}&nbsp;
+      <button onClick={() => handleAsap()}>
+        {isAsap ? 'Select a range' : 'As soon as possible'}
+      </button><br /><br />
+
+      {afterComponents.map(
+        (AfterComponent, i) => <AfterComponent key={i} {...props} />
+      )}
+
+      {afterElements.map((AfterElement, i) => (
+        <React.Fragment key={i}>
+          {AfterElement}
+        </React.Fragment>
+      ))}
+    </div>
+  )
+}

package/example/components/MyOrdersListUI/index.js

@@ -1,51 +1,51 @@
-import React from 'react'
-
-import { SingleOrderCardUI } from '../SingleOrderCardUI'
-import { SingleOrderCard } from '../../../src/components/SingleOrderCard'
-
-export const MyOrdersListUI = (props) => {
-  const {
-    orderType,
-    orders,
-    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} />
-      )}
-
-      <h1 style={{ textTransform: 'capitalize' }}>{orderType} orders</h1>
-
-      {orders.length > 0 && orders.map(order => (
-        <div className='orders' key={order.id} style={{ border: '1px solid gray', padding: '20px', width: '200px' }}>
-          <SingleOrderCard
-            UIComponent={SingleOrderCardUI}
-            order={order}
-            orderType={orderType}
-          />
-        </div>
-      ))}
-
-      {afterComponents.map(
-        (AfterComponent, i) => <AfterComponent key={i} {...props} />
-      )}
-
-      {afterElements.map((AfterElement, i) => (
-        <React.Fragment key={i}>
-          {AfterElement}
-        </React.Fragment>
-      ))}
-    </>
-  )
-}
+import React from 'react'
+
+import { SingleOrderCardUI } from '../SingleOrderCardUI'
+import { SingleOrderCard } from '../../../src/components/SingleOrderCard'
+
+export const MyOrdersListUI = (props) => {
+  const {
+    orderType,
+    orders,
+    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} />
+      )}
+
+      <h1 style={{ textTransform: 'capitalize' }}>{orderType} orders</h1>
+
+      {orders.length > 0 && orders.map(order => (
+        <div className='orders' key={order.id} style={{ border: '1px solid gray', padding: '20px', width: '200px' }}>
+          <SingleOrderCard
+            UIComponent={SingleOrderCardUI}
+            order={order}
+            orderType={orderType}
+          />
+        </div>
+      ))}
+
+      {afterComponents.map(
+        (AfterComponent, i) => <AfterComponent key={i} {...props} />
+      )}
+
+      {afterElements.map((AfterElement, i) => (
+        <React.Fragment key={i}>
+          {AfterElement}
+        </React.Fragment>
+      ))}
+    </>
+  )
+}