ordering-components-external 13.1.7 → 13.1.8

package/example/components/StripeElementsFormUI/CardFormUI/style.css

@@ -1,118 +1,118 @@
-form.stripe {
-  max-width: 800px;
-  margin: 30px auto 100px;
-  display: flex;
-  flex-direction: column;
-}
-
-.form-row label {
-  color: #6b7c93;
-  font-weight: 300;
-  letter-spacing: 0.025em;
-  margin-top: 16px;
-  display: block;
-}
-
-form.stripe button {
-  white-space: nowrap;
-  border: 0;
-  outline: 0;
-  display: inline-block;
-  height: 40px;
-  line-height: 40px;
-  padding: 0 14px;
-  box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
-  color: #fff;
-  border-radius: 4px;
-  font-size: 15px;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.025em;
-  background-color: #6772e5;
-  text-decoration: none;
-  -webkit-transition: all 150ms ease;
-  transition: all 150ms ease;
-  margin-top: 10px;
-}
-
-form.stripe button:hover {
-  color: #fff;
-  cursor: pointer;
-  background-color: #7795f8;
-  transform: translateY(-1px);
-  box-shadow: 0 7px 14px rgba(50, 50, 93, 0.1), 0 3px 6px rgba(0, 0, 0, 0.08);
-}
-
-form.stripe button[disabled] {
-  opacity: 0.6;
-}
-
-.form-row input {
-  display: block;
-  border: none;
-  font-size: 18px;
-  margin: 10px 0 20px 0;
-  max-width: 100%;
-  padding: 10px 14px;
-  box-shadow: rgba(50, 50, 93, 0.14902) 0px 1px 3px,
-    rgba(0, 0, 0, 0.0196078) 0px 1px 0px;
-  border-radius: 4px;
-  background: white;
-  color: #424770;
-  letter-spacing: 0.025em;
-  width: 500px;
-}
-
-.form-row input::placeholder {
-  color: #aab7c4;
-}
-
-.result,
-.error {
-  font-size: 16px;
-  font-weight: bold;
-  margin-top: 10px;
-  margin-bottom: 20px;
-}
-
-.error {
-  color: #e4584c;
-}
-
-.result {
-  color: #666ee8;
-}
-
-/* 
-The StripeElement class is applied to the Element container by default.
-More info: https://stripe.com/docs/stripe-js/reference#element-options
-*/
-
-.StripeElement,
-.StripeElementIdeal {
-  display: block;
-  margin: 10px 0 20px 0;
-  max-width: 500px;
-  padding: 10px 14px;
-  box-shadow: rgba(50, 50, 93, 0.14902) 0px 1px 3px,
-    rgba(0, 0, 0, 0.0196078) 0px 1px 0px;
-  border-radius: 4px;
-  background: white;
-}
-
-.StripeElement--focus,
-.StripeElementIdeal--focus {
-  box-shadow: rgba(50, 50, 93, 0.109804) 0px 4px 6px,
-    rgba(0, 0, 0, 0.0784314) 0px 1px 3px;
-  -webkit-transition: all 150ms ease;
-  transition: all 150ms ease;
-}
-
-.StripeElement.loading {
-  height: 41.6px;
-  opacity: 0.6;
-}
-
-.StripeElementIdeal {
-  padding: 0;
-}
+form.stripe {
+  max-width: 800px;
+  margin: 30px auto 100px;
+  display: flex;
+  flex-direction: column;
+}
+
+.form-row label {
+  color: #6b7c93;
+  font-weight: 300;
+  letter-spacing: 0.025em;
+  margin-top: 16px;
+  display: block;
+}
+
+form.stripe button {
+  white-space: nowrap;
+  border: 0;
+  outline: 0;
+  display: inline-block;
+  height: 40px;
+  line-height: 40px;
+  padding: 0 14px;
+  box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
+  color: #fff;
+  border-radius: 4px;
+  font-size: 15px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.025em;
+  background-color: #6772e5;
+  text-decoration: none;
+  -webkit-transition: all 150ms ease;
+  transition: all 150ms ease;
+  margin-top: 10px;
+}
+
+form.stripe button:hover {
+  color: #fff;
+  cursor: pointer;
+  background-color: #7795f8;
+  transform: translateY(-1px);
+  box-shadow: 0 7px 14px rgba(50, 50, 93, 0.1), 0 3px 6px rgba(0, 0, 0, 0.08);
+}
+
+form.stripe button[disabled] {
+  opacity: 0.6;
+}
+
+.form-row input {
+  display: block;
+  border: none;
+  font-size: 18px;
+  margin: 10px 0 20px 0;
+  max-width: 100%;
+  padding: 10px 14px;
+  box-shadow: rgba(50, 50, 93, 0.14902) 0px 1px 3px,
+    rgba(0, 0, 0, 0.0196078) 0px 1px 0px;
+  border-radius: 4px;
+  background: white;
+  color: #424770;
+  letter-spacing: 0.025em;
+  width: 500px;
+}
+
+.form-row input::placeholder {
+  color: #aab7c4;
+}
+
+.result,
+.error {
+  font-size: 16px;
+  font-weight: bold;
+  margin-top: 10px;
+  margin-bottom: 20px;
+}
+
+.error {
+  color: #e4584c;
+}
+
+.result {
+  color: #666ee8;
+}
+
+/* 
+The StripeElement class is applied to the Element container by default.
+More info: https://stripe.com/docs/stripe-js/reference#element-options
+*/
+
+.StripeElement,
+.StripeElementIdeal {
+  display: block;
+  margin: 10px 0 20px 0;
+  max-width: 500px;
+  padding: 10px 14px;
+  box-shadow: rgba(50, 50, 93, 0.14902) 0px 1px 3px,
+    rgba(0, 0, 0, 0.0196078) 0px 1px 0px;
+  border-radius: 4px;
+  background: white;
+}
+
+.StripeElement--focus,
+.StripeElementIdeal--focus {
+  box-shadow: rgba(50, 50, 93, 0.109804) 0px 4px 6px,
+    rgba(0, 0, 0, 0.0784314) 0px 1px 3px;
+  -webkit-transition: all 150ms ease;
+  transition: all 150ms ease;
+}
+
+.StripeElement.loading {
+  height: 41.6px;
+  opacity: 0.6;
+}
+
+.StripeElementIdeal {
+  padding: 0;
+}

package/example/components/StripeElementsFormUI/index.js

@@ -1,38 +1,38 @@
-import React from 'react'
-import { loadStripe } from '@stripe/stripe-js'
-import {
-  Elements
-} from '@stripe/react-stripe-js'
-
-import { CardForm } from '../../../src/components/StripeElementsForm/CardForm'
-import { CardFormUI } from './CardFormUI'
-
-export const StripeElementsFormUI = (props) => {
-  const {
-    publicKey,
-    handleSource,
-    businessId,
-    requirements,
-    onNewCard,
-    toSave
-  } = props
-
-  return (
-    <>
-      {publicKey ? (
-        <Elements stripe={loadStripe(publicKey)}>
-          <CardForm
-            UIComponent={CardFormUI}
-            handleSource={handleSource}
-            onNewCard={onNewCard}
-            toSave={toSave}
-            requirements={requirements}
-            businessId={businessId}
-          />
-        </Elements>
-      ) : (
-        <p>Something is wrong :(</p>
-      )}
-    </>
-  )
-}
+import React from 'react'
+import { loadStripe } from '@stripe/stripe-js'
+import {
+  Elements
+} from '@stripe/react-stripe-js'
+
+import { CardForm } from '../../../src/components/StripeElementsForm/CardForm'
+import { CardFormUI } from './CardFormUI'
+
+export const StripeElementsFormUI = (props) => {
+  const {
+    publicKey,
+    handleSource,
+    businessId,
+    requirements,
+    onNewCard,
+    toSave
+  } = props
+
+  return (
+    <>
+      {publicKey ? (
+        <Elements stripe={loadStripe(publicKey)}>
+          <CardForm
+            UIComponent={CardFormUI}
+            handleSource={handleSource}
+            onNewCard={onNewCard}
+            toSave={toSave}
+            requirements={requirements}
+            businessId={businessId}
+          />
+        </Elements>
+      ) : (
+        <p>Something is wrong :(</p>
+      )}
+    </>
+  )
+}

package/example/components/StripeRedirectFormUI/index.js

@@ -1,99 +1,99 @@
-import React from 'react'
-import { useForm } from 'react-hook-form'
-
-const inputStyle = {
-  padding: '8px 10px',
-  marginTop: '8px'
-}
-
-export const StripeRedirectFormUI = (props) => {
-  const {
-    user,
-    paymentMethods,
-    handleSubmitPaymentMethod,
-    beforeComponents,
-    afterComponents,
-    beforeElements,
-    afterElements
-  } = props
-
-  const { handleSubmit, register, errors, formState } = useForm()
-
-  return (
-    <>
-      {beforeElements.map((BeforeElement, i) => (
-        <React.Fragment key={i}>
-          {BeforeElement}
-        </React.Fragment>
-      ))}
-
-      {beforeComponents.map(
-        (BeforeComponent, i) => <BeforeComponent key={i} {...props} />
-      )}
-
-      <form className='stripe' onSubmit={handleSubmit(handleSubmitPaymentMethod)}>
-        <label>Select a payment method</label>
-        <select
-          style={inputStyle}
-          name='type'
-          ref={
-            register({
-              required: true
-            })
-          }
-        >
-          <option value=''>Select a payment method</option>
-          {paymentMethods?.length > 0 && paymentMethods.map((paymethod, i) => (
-            <option key={i} value={paymethod.value}>{paymethod.name}</option>
-          ))}
-        </select>
-        {errors.type && errors.type.type === 'required' && <p style={{ color: 'red', margin: '0px' }}>This field is required</p>}
-        <br />
-
-        <label>Account holder</label>
-        <input
-          style={inputStyle}
-          name='name'
-          defaultValue={user.name}
-          placeholder='Type an Account holder'
-          ref={
-            register({
-              required: true
-            })
-          }
-        />
-        {errors.name && errors.name.type === 'required' && <p style={{ color: 'red', margin: '0px' }}>This field is required</p>}
-        <br />
-
-        <label>Email</label>
-        <input
-          style={inputStyle}
-          name='email'
-          type='email'
-          defaultValue={user.email}
-          placeholder='Type an email'
-          ref={
-            register({
-              required: true
-            })
-          }
-        />
-        {errors.email && errors.email.type === 'required' && <p style={{ color: 'red', margin: '0px' }}>This field is required</p>}
-        <br />
-        <button type='submit' disabled={formState.isSubmitting}>
-          {formState.isSubmitting ? 'Loading...' : 'OK'}
-        </button>
-      </form>
-
-      {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'
+
+const inputStyle = {
+  padding: '8px 10px',
+  marginTop: '8px'
+}
+
+export const StripeRedirectFormUI = (props) => {
+  const {
+    user,
+    paymentMethods,
+    handleSubmitPaymentMethod,
+    beforeComponents,
+    afterComponents,
+    beforeElements,
+    afterElements
+  } = props
+
+  const { handleSubmit, register, errors, formState } = useForm()
+
+  return (
+    <>
+      {beforeElements.map((BeforeElement, i) => (
+        <React.Fragment key={i}>
+          {BeforeElement}
+        </React.Fragment>
+      ))}
+
+      {beforeComponents.map(
+        (BeforeComponent, i) => <BeforeComponent key={i} {...props} />
+      )}
+
+      <form className='stripe' onSubmit={handleSubmit(handleSubmitPaymentMethod)}>
+        <label>Select a payment method</label>
+        <select
+          style={inputStyle}
+          name='type'
+          ref={
+            register({
+              required: true
+            })
+          }
+        >
+          <option value=''>Select a payment method</option>
+          {paymentMethods?.length > 0 && paymentMethods.map((paymethod, i) => (
+            <option key={i} value={paymethod.value}>{paymethod.name}</option>
+          ))}
+        </select>
+        {errors.type && errors.type.type === 'required' && <p style={{ color: 'red', margin: '0px' }}>This field is required</p>}
+        <br />
+
+        <label>Account holder</label>
+        <input
+          style={inputStyle}
+          name='name'
+          defaultValue={user.name}
+          placeholder='Type an Account holder'
+          ref={
+            register({
+              required: true
+            })
+          }
+        />
+        {errors.name && errors.name.type === 'required' && <p style={{ color: 'red', margin: '0px' }}>This field is required</p>}
+        <br />
+
+        <label>Email</label>
+        <input
+          style={inputStyle}
+          name='email'
+          type='email'
+          defaultValue={user.email}
+          placeholder='Type an email'
+          ref={
+            register({
+              required: true
+            })
+          }
+        />
+        {errors.email && errors.email.type === 'required' && <p style={{ color: 'red', margin: '0px' }}>This field is required</p>}
+        <br />
+        <button type='submit' disabled={formState.isSubmitting}>
+          {formState.isSubmitting ? 'Loading...' : 'OK'}
+        </button>
+      </form>
+
+      {afterComponents.map(
+        (AfterComponent, i) => <AfterComponent key={i} {...props} />
+      )}
+
+      {afterElements.map((AfterElement, i) => (
+        <React.Fragment key={i}>
+          {AfterElement}
+        </React.Fragment>
+      ))}
+    </>
+  )
+}

package/example/components/TestComponent/index.js

@@ -1,5 +1,5 @@
-import React from 'react'
-
-export const TestComponent = () => {
-  return <p>Test component Before/After</p>
-}
+import React from 'react'
+
+export const TestComponent = () => {
+  return <p>Test component Before/After</p>
+}

package/example/components/UpsellingPageUI/index.js

@@ -1,26 +1,26 @@
-import React from 'react'
-
-export const UpsellingPageUI = (props) => {
-  const { upsellingProducts, handleFormProduct } = props
-  return (
-    <div style={{ display: 'flex', flexWrap: 'wrap' }} name='product'>
-      {
-        <>
-          {!upsellingProducts.error ? upsellingProducts?.products.map(product => (
-            <div key={product.id} style={{ display: 'flex', flexDirection: 'column', width: '20%', textAlign: 'center', alignItems: 'center', margin: '10px' }}>
-              <img src={product.images} width='100px' />
-              <p>{product.name}</p>
-              <p>${product.price}</p>
-              <button onClick={() => handleFormProduct(product)}>Add</button>
-            </div>
-          )
-          ) : (
-            <p>
-              {upsellingProducts.message}
-            </p>
-          )}
-        </>
-      }
-    </div>
-  )
-}
+import React from 'react'
+
+export const UpsellingPageUI = (props) => {
+  const { upsellingProducts, handleFormProduct } = props
+  return (
+    <div style={{ display: 'flex', flexWrap: 'wrap' }} name='product'>
+      {
+        <>
+          {!upsellingProducts.error ? upsellingProducts?.products.map(product => (
+            <div key={product.id} style={{ display: 'flex', flexDirection: 'column', width: '20%', textAlign: 'center', alignItems: 'center', margin: '10px' }}>
+              <img src={product.images} width='100px' />
+              <p>{product.name}</p>
+              <p>${product.price}</p>
+              <button onClick={() => handleFormProduct(product)}>Add</button>
+            </div>
+          )
+          ) : (
+            <p>
+              {upsellingProducts.message}
+            </p>
+          )}
+        </>
+      }
+    </div>
+  )
+}