ordering-components-external 13.2.13 → 13.2.14

package/example/components/PaymentOptionsUI/index.js

@@ -1,169 +1,169 @@
-import React from 'react'
-
-import { PaymentOptionCash } from '../../../src/components/PaymentOptionCash'
-import { PaymentOptionCashUI } from '../PaymentOptionCashUI'
-
-import { PaymentOptionStripe } from '../../../src/components/PaymentOptionStripe'
-import { PaymentOptionStripeUI } from '../PaymentOptionStripeUI'
-
-import { Popup } from '../../../src/components/Popup'
-import { ModalUI } from '../ModalUI'
-import { StripeElementsForm } from '../../../src/components/StripeElementsForm'
-import { StripeElementsFormUI } from '../StripeElementsFormUI'
-import { StripeRedirectForm } from '../../../src/components/PaymentOptionStripeRedirect/StripeRedirectForm'
-import { StripeRedirectFormUI } from '../StripeRedirectFormUI'
-import { useSession } from '../../../src/contexts/SessionContext'
-
-export const PaymentOptionsUI = (props) => {
-  const {
-    orderTotal,
-    paymethodSelected,
-    paymethodData,
-    paymethodsList,
-    handlePaymethodClick,
-    handlePaymethodDataChange,
-    beforeComponents,
-    afterComponents,
-    beforeElements,
-    afterElements
-  } = props
-
-  const [{ user }] = useSession()
-
-  return (
-    <>
-      {beforeElements.map((BeforeElement, i) => (
-        <React.Fragment key={i}>
-          {BeforeElement}
-        </React.Fragment>
-      ))}
-
-      {beforeComponents.map(
-        (BeforeComponent, i) => <BeforeComponent key={i} {...props} />
-      )}
-
-      <div className='payment-options'>
-        <strong>Payment Method</strong><br /><br />
-        {!paymethodsList.loading && !paymethodsList.error ? (
-          <div style={{ marginBottom: '20px' }}>
-            {paymethodsList.paymethods.length > 0 ? (
-              paymethodsList.paymethods.sort((a, b) => a.id - b.id).map(paymethod => (
-                <button
-                  key={paymethod.id}
-                  value={paymethod.id}
-                  style={{ padding: '5px', marginRight: '5px' }}
-                  onClick={() => handlePaymethodClick(paymethod)}
-                >
-                  {paymethod.name} {paymethodSelected?.id === paymethod.id && <i>✔️</i>}
-                </button>
-              ))
-            ) : (
-              <p>❌ Not Found ❌</p>
-            )}
-          </div>
-        ) : (
-          <div>
-            {paymethodsList.error && paymethodsList.error.length > 0 ? (
-              paymethodsList.error.map((e, i) => (
-                <p key={i}>ERROR: [{e}]</p>
-              ))
-            ) : (
-              <p>Loading...</p>
-            )}
-          </div>
-        )}
-      </div>
-
-      {paymethodSelected?.gateway === 'cash' && (
-        <PaymentOptionCash
-          UIComponent={PaymentOptionCashUI}
-          paymethod={paymethodSelected}
-          orderTotal={orderTotal}
-          businessId={props.businessId}
-          onChangeData={handlePaymethodDataChange}
-        />
-      )}
-
-      {/* Stripe direct */}
-      <Popup
-        className='modal-info'
-        UIComponent={ModalUI}
-        open={paymethodSelected?.gateway === 'stripe_direct' && !paymethodData.id}
-        onCancel={() => handlePaymethodClick(null)}
-        onClose={() => handlePaymethodClick(null)}
-        title='Add card'
-      >
-        <button onClick={() => handlePaymethodClick(null)}>x</button>
-        {paymethodSelected?.gateway === 'stripe_direct' && (
-          <div>
-            <StripeElementsForm
-              UIComponent={StripeElementsFormUI}
-              businessId={props.businessId}
-              publicKey={paymethodSelected.credentials.publishable}
-              handleSource={handlePaymethodDataChange}
-            />
-          </div>
-        )}
-      </Popup>
-
-      {/* Stripe */}
-      <Popup
-        className='modal-info'
-        UIComponent={ModalUI}
-        open={['stripe', 'stripe_connect'].includes(paymethodSelected?.gateway) && !paymethodData.id}
-        onCancel={() => handlePaymethodClick(null)}
-        onClose={() => handlePaymethodClick(null)}
-        title='Select a card'
-      >
-        <button onClick={() => handlePaymethodClick(null)}>x</button>
-        {['stripe', 'stripe_connect'].includes(paymethodSelected?.gateway) && (
-          <div>
-            <PaymentOptionStripe
-              UIComponent={PaymentOptionStripeUI}
-              paymethod={paymethodSelected}
-              businessId={props.businessId}
-              publicKey={paymethodSelected.credentials.publishable}
-              payType={paymethodsList?.name}
-              handleSelectCard={handlePaymethodDataChange}
-            />
-          </div>
-        )}
-      </Popup>
-
-      {/* Stripe Redirect */}
-      <Popup
-        className='modal-info'
-        // style={customStyles}
-        UIComponent={ModalUI}
-        open={['stripe_redirect'].includes(paymethodSelected?.gateway) && !paymethodData.type}
-        onAccept={() => handlePaymethodClick(null)}
-        onClose={() => handlePaymethodClick(null)}
-        title='Stripe Redirect'
-      >
-        <button onClick={() => handlePaymethodClick(null)}>x</button>
-        <div>
-          {/* <Elements stripe={loadStripe(props.stripePK)}> */}
-          <StripeRedirectForm
-            UIComponent={StripeRedirectFormUI}
-            businessId={props.businessId}
-            user={user}
-            currency={props.currency}
-            paymethods={[{ name: 'Bancontact', value: 'bancontact' }]}
-            handleStripeRedirect={handlePaymethodDataChange}
-          />
-          {/* </Elements> */}
-        </div>
-      </Popup>
-
-      {afterComponents.map(
-        (AfterComponent, i) => <AfterComponent key={i} {...props} />
-      )}
-
-      {afterElements.map((AfterElement, i) => (
-        <React.Fragment key={i}>
-          {AfterElement}
-        </React.Fragment>
-      ))}
-    </>
-  )
-}
+import React from 'react'
+
+import { PaymentOptionCash } from '../../../src/components/PaymentOptionCash'
+import { PaymentOptionCashUI } from '../PaymentOptionCashUI'
+
+import { PaymentOptionStripe } from '../../../src/components/PaymentOptionStripe'
+import { PaymentOptionStripeUI } from '../PaymentOptionStripeUI'
+
+import { Popup } from '../../../src/components/Popup'
+import { ModalUI } from '../ModalUI'
+import { StripeElementsForm } from '../../../src/components/StripeElementsForm'
+import { StripeElementsFormUI } from '../StripeElementsFormUI'
+import { StripeRedirectForm } from '../../../src/components/PaymentOptionStripeRedirect/StripeRedirectForm'
+import { StripeRedirectFormUI } from '../StripeRedirectFormUI'
+import { useSession } from '../../../src/contexts/SessionContext'
+
+export const PaymentOptionsUI = (props) => {
+  const {
+    orderTotal,
+    paymethodSelected,
+    paymethodData,
+    paymethodsList,
+    handlePaymethodClick,
+    handlePaymethodDataChange,
+    beforeComponents,
+    afterComponents,
+    beforeElements,
+    afterElements
+  } = props
+
+  const [{ user }] = useSession()
+
+  return (
+    <>
+      {beforeElements.map((BeforeElement, i) => (
+        <React.Fragment key={i}>
+          {BeforeElement}
+        </React.Fragment>
+      ))}
+
+      {beforeComponents.map(
+        (BeforeComponent, i) => <BeforeComponent key={i} {...props} />
+      )}
+
+      <div className='payment-options'>
+        <strong>Payment Method</strong><br /><br />
+        {!paymethodsList.loading && !paymethodsList.error ? (
+          <div style={{ marginBottom: '20px' }}>
+            {paymethodsList.paymethods.length > 0 ? (
+              paymethodsList.paymethods.sort((a, b) => a.id - b.id).map(paymethod => (
+                <button
+                  key={paymethod.id}
+                  value={paymethod.id}
+                  style={{ padding: '5px', marginRight: '5px' }}
+                  onClick={() => handlePaymethodClick(paymethod)}
+                >
+                  {paymethod.name} {paymethodSelected?.id === paymethod.id && <i>✔️</i>}
+                </button>
+              ))
+            ) : (
+              <p>❌ Not Found ❌</p>
+            )}
+          </div>
+        ) : (
+          <div>
+            {paymethodsList.error && paymethodsList.error.length > 0 ? (
+              paymethodsList.error.map((e, i) => (
+                <p key={i}>ERROR: [{e}]</p>
+              ))
+            ) : (
+              <p>Loading...</p>
+            )}
+          </div>
+        )}
+      </div>
+
+      {paymethodSelected?.gateway === 'cash' && (
+        <PaymentOptionCash
+          UIComponent={PaymentOptionCashUI}
+          paymethod={paymethodSelected}
+          orderTotal={orderTotal}
+          businessId={props.businessId}
+          onChangeData={handlePaymethodDataChange}
+        />
+      )}
+
+      {/* Stripe direct */}
+      <Popup
+        className='modal-info'
+        UIComponent={ModalUI}
+        open={paymethodSelected?.gateway === 'stripe_direct' && !paymethodData.id}
+        onCancel={() => handlePaymethodClick(null)}
+        onClose={() => handlePaymethodClick(null)}
+        title='Add card'
+      >
+        <button onClick={() => handlePaymethodClick(null)}>x</button>
+        {paymethodSelected?.gateway === 'stripe_direct' && (
+          <div>
+            <StripeElementsForm
+              UIComponent={StripeElementsFormUI}
+              businessId={props.businessId}
+              publicKey={paymethodSelected.credentials.publishable}
+              handleSource={handlePaymethodDataChange}
+            />
+          </div>
+        )}
+      </Popup>
+
+      {/* Stripe */}
+      <Popup
+        className='modal-info'
+        UIComponent={ModalUI}
+        open={['stripe', 'stripe_connect'].includes(paymethodSelected?.gateway) && !paymethodData.id}
+        onCancel={() => handlePaymethodClick(null)}
+        onClose={() => handlePaymethodClick(null)}
+        title='Select a card'
+      >
+        <button onClick={() => handlePaymethodClick(null)}>x</button>
+        {['stripe', 'stripe_connect'].includes(paymethodSelected?.gateway) && (
+          <div>
+            <PaymentOptionStripe
+              UIComponent={PaymentOptionStripeUI}
+              paymethod={paymethodSelected}
+              businessId={props.businessId}
+              publicKey={paymethodSelected.credentials.publishable}
+              payType={paymethodsList?.name}
+              handleSelectCard={handlePaymethodDataChange}
+            />
+          </div>
+        )}
+      </Popup>
+
+      {/* Stripe Redirect */}
+      <Popup
+        className='modal-info'
+        // style={customStyles}
+        UIComponent={ModalUI}
+        open={['stripe_redirect'].includes(paymethodSelected?.gateway) && !paymethodData.type}
+        onAccept={() => handlePaymethodClick(null)}
+        onClose={() => handlePaymethodClick(null)}
+        title='Stripe Redirect'
+      >
+        <button onClick={() => handlePaymethodClick(null)}>x</button>
+        <div>
+          {/* <Elements stripe={loadStripe(props.stripePK)}> */}
+          <StripeRedirectForm
+            UIComponent={StripeRedirectFormUI}
+            businessId={props.businessId}
+            user={user}
+            currency={props.currency}
+            paymethods={[{ name: 'Bancontact', value: 'bancontact' }]}
+            handleStripeRedirect={handlePaymethodDataChange}
+          />
+          {/* </Elements> */}
+        </div>
+      </Popup>
+
+      {afterComponents.map(
+        (AfterComponent, i) => <AfterComponent key={i} {...props} />
+      )}
+
+      {afterElements.map((AfterElement, i) => (
+        <React.Fragment key={i}>
+          {AfterElement}
+        </React.Fragment>
+      ))}
+    </>
+  )
+}

package/example/components/PhoneAutocompleteUI/index.js

@@ -1,67 +1,67 @@
-import React, { useState, useEffect, useRef } from 'react'
-import './styles.css'
-
-export const PhoneAutocompleteUI = (props) => {
-  const {
-    beforeElements,
-    beforeComponents,
-    afterComponents,
-    afterElements,
-    phone,
-    onChangeNumber
-  } = props
-
-  const [showError, setShowError] = useState(false)
-
-  const inputAutocomplete = useRef()
-
-  useEffect(() => {
-    if (inputAutocomplete?.current?.value?.length !== 10) {
-      setShowError(true)
-    } else {
-      setShowError(false)
-    }
-  }, [inputAutocomplete?.current?.value])
-
-  return (
-    <>
-      {beforeElements.map((BeforeElement, i) => (
-        <React.Fragment key={i}>
-          {BeforeElement}
-        </React.Fragment>
-      ))}
-
-      {beforeComponents.map(
-        (BeforeComponent, i) => <BeforeComponent key={i} {...props} />
-      )}
-      <form autoComplete='off'>
-        <div className='phone-autocomplete'>
-          <input
-            name='phone-input'
-            id='phone-input'
-            placeholder='Phone'
-            className='phone-autocomplete-input'
-            type='text'
-            pattern='[0-9]*'
-            onInput={onChangeNumber}
-            value={phone}
-            maxLength='10'
-            onChange={() => {}}
-            ref={inputAutocomplete}
-          />
-          <button id='phone-button' className='phone-button' type='button'>Phone Button</button>
-        </div>
-        {showError && <a style={{ color: 'red' }}>The Phone / Mobile must be 10 characters</a>}
-      </form>
-      {afterComponents.map(
-        (AfterComponent, i) => <AfterComponent key={i} {...props} />
-      )}
-
-      {afterElements.map((AfterElement, i) => (
-        <React.Fragment key={i}>
-          {AfterElement}
-        </React.Fragment>
-      ))}
-    </>
-  )
-}
+import React, { useState, useEffect, useRef } from 'react'
+import './styles.css'
+
+export const PhoneAutocompleteUI = (props) => {
+  const {
+    beforeElements,
+    beforeComponents,
+    afterComponents,
+    afterElements,
+    phone,
+    onChangeNumber
+  } = props
+
+  const [showError, setShowError] = useState(false)
+
+  const inputAutocomplete = useRef()
+
+  useEffect(() => {
+    if (inputAutocomplete?.current?.value?.length !== 10) {
+      setShowError(true)
+    } else {
+      setShowError(false)
+    }
+  }, [inputAutocomplete?.current?.value])
+
+  return (
+    <>
+      {beforeElements.map((BeforeElement, i) => (
+        <React.Fragment key={i}>
+          {BeforeElement}
+        </React.Fragment>
+      ))}
+
+      {beforeComponents.map(
+        (BeforeComponent, i) => <BeforeComponent key={i} {...props} />
+      )}
+      <form autoComplete='off'>
+        <div className='phone-autocomplete'>
+          <input
+            name='phone-input'
+            id='phone-input'
+            placeholder='Phone'
+            className='phone-autocomplete-input'
+            type='text'
+            pattern='[0-9]*'
+            onInput={onChangeNumber}
+            value={phone}
+            maxLength='10'
+            onChange={() => {}}
+            ref={inputAutocomplete}
+          />
+          <button id='phone-button' className='phone-button' type='button'>Phone Button</button>
+        </div>
+        {showError && <a style={{ color: 'red' }}>The Phone / Mobile must be 10 characters</a>}
+      </form>
+      {afterComponents.map(
+        (AfterComponent, i) => <AfterComponent key={i} {...props} />
+      )}
+
+      {afterElements.map((AfterElement, i) => (
+        <React.Fragment key={i}>
+          {AfterElement}
+        </React.Fragment>
+      ))}
+    </>
+  )
+}

package/example/components/PhoneAutocompleteUI/styles.css

@@ -1,49 +1,49 @@
-* { box-sizing: border-box; }
-body {
-  font: 16px Arial;
-}
-.phone-autocomplete {
-  /*the container must be positioned relative:*/
-  position: relative;
-  display: inline-block;
-}
-.phone-autocomplete-input {
-  border: 1px solid transparent;
-  background-color: #f1f1f1;
-  padding: 10px;
-  font-size: 16px;
-}
-.phone-autocomplete-input input[type=text] {
-  background-color: #f1f1f1;
-  width: 100%;
-}
-.phone-autocomplete-input input[type=submit] {
-  background-color: DodgerBlue;
-  color: #fff;
-}
-.autocomplete-items {
-  position: absolute;
-  border: 1px solid #d4d4d4;
-  border-bottom: none;
-  border-top: none;
-  z-index: 99;
-  /*position the autocomplete items to be the same width as the container:*/
-  top: 100%;
-  left: 0;
-  right: 0;
-}
-.autocomplete-items div {
-  padding: 10px;
-  cursor: pointer;
-  background-color: #fff;
-  border-bottom: 1px solid #d4d4d4;
-}
-.autocomplete-items div:hover {
-  /*when hovering an item:*/
-  background-color: #e9e9e9;
-}
-.autocomplete-active {
-  /*when navigating through the items using the arrow keys:*/
-  background-color: DodgerBlue !important;
-  color: #ffffff;
-}
+* { box-sizing: border-box; }
+body {
+  font: 16px Arial;
+}
+.phone-autocomplete {
+  /*the container must be positioned relative:*/
+  position: relative;
+  display: inline-block;
+}
+.phone-autocomplete-input {
+  border: 1px solid transparent;
+  background-color: #f1f1f1;
+  padding: 10px;
+  font-size: 16px;
+}
+.phone-autocomplete-input input[type=text] {
+  background-color: #f1f1f1;
+  width: 100%;
+}
+.phone-autocomplete-input input[type=submit] {
+  background-color: DodgerBlue;
+  color: #fff;
+}
+.autocomplete-items {
+  position: absolute;
+  border: 1px solid #d4d4d4;
+  border-bottom: none;
+  border-top: none;
+  z-index: 99;
+  /*position the autocomplete items to be the same width as the container:*/
+  top: 100%;
+  left: 0;
+  right: 0;
+}
+.autocomplete-items div {
+  padding: 10px;
+  cursor: pointer;
+  background-color: #fff;
+  border-bottom: 1px solid #d4d4d4;
+}
+.autocomplete-items div:hover {
+  /*when hovering an item:*/
+  background-color: #e9e9e9;
+}
+.autocomplete-active {
+  /*when navigating through the items using the arrow keys:*/
+  background-color: DodgerBlue !important;
+  color: #ffffff;
+}