@seamlessdocs/payment-modals 1.0.38

package/src/Components/ChooseModal/ChooseModal.module.css

@@ -0,0 +1,114 @@
+.modal {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 50px 20px 0;
+}
+
+.logo {
+  width: 40px;
+  height: 26px;
+}
+
+.header {
+  padding-top: 30px;
+  font-size: 33px;
+  font-weight: 600;
+  text-align: center;
+}
+
+.description {
+  font-size: 14px;
+  padding-top: 18px;
+  text-align: center;
+  text-transform: lowercase;
+}
+
+.description::first-letter {
+  text-transform: uppercase;
+}
+
+.buttons {
+  display: flex;
+  justify-content: center;
+  padding-top: 35px;
+  width: 100%;
+}
+
+.submitButton,
+.payButton {
+  box-sizing: border-box;
+  width: 50%;
+  height: 40px;
+  line-height: 40px;
+  margin: 0px 22px;
+  border-radius: 3px;
+  font-size: 15px;
+  text-align: center;
+  cursor: pointer;
+}
+
+.submitButton {
+  border: 1px solid;
+  color: #0052b2;
+  margin-right: 6px;
+}
+
+.payButton {
+  background-color: #0052b2;
+  color: #fff;
+  margin-left: 6px;
+}
+
+.backText {
+  padding-top: 35px;
+  font-size: 12px;
+  color: #2c2f32;
+  text-align: center;
+}
+
+.backLink {
+  color: #2c2f32;
+  text-decoration: underline;
+  cursor: pointer;
+}
+
+@media (max-width: 520px) {
+  .modal {
+    padding-top: 35px;
+  }
+
+  .header {
+    font-size: 30px;
+    padding-top: 25px;
+  }
+
+  .description {
+    padding-top: 15px;
+  }
+
+  .buttons {
+    flex-direction: column;
+    padding-top: 25px;
+  }
+
+  .submitButton,
+  .payButton {
+    margin: 0;
+    width: 100%;
+  }
+
+  .payButton {
+    margin-top: 15px;
+  }
+
+  .backText {
+    padding-top: 20px;
+  }
+}
+
+@media (max-width: 360px) {
+  .header {
+    font-size: 24px;
+  }
+}

package/src/Components/ChooseModal/index.jsx

@@ -0,0 +1,34 @@
+/* eslint-disable react/no-danger */
+import React from 'react';
+
+import Modal from '../Modal';
+import logo from '../../assets/img/logo.svg';
+import styles from './ChooseModal.module.css';
+
+const ChooseModal = ({ title, description, withPayText, onWithPay, onWithoutPay, onClose }) => {
+  return (
+    <Modal>
+      <div className={styles.modal}>
+        <img src={logo} alt="logo" className={styles.logo} />
+        <div className={styles.header}>{title}</div>
+        <div className={styles.description} dangerouslySetInnerHTML={{ __html: description }} />
+        <div className={styles.buttons}>
+          <div className={styles.submitButton} onClick={onWithoutPay}>
+            Submit without Paying
+          </div>
+          <div className={styles.payButton} onClick={onWithPay}>
+            {withPayText}
+          </div>
+        </div>
+        <div className={styles.backText}>
+          Go{' '}
+          <span className={styles.backLink} onClick={onClose}>
+            back to form
+          </span>
+        </div>
+      </div>
+    </Modal>
+  );
+};
+
+export default ChooseModal;

package/src/Components/EmptyModal/index.jsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+const EmptyModal = () => {
+  return <div />;
+};
+
+export default EmptyModal;

package/src/Components/ErrorModal/ErrorModal.module.css

@@ -0,0 +1,64 @@
+.modal {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 46px 30px 0;
+}
+
+.errorIcon {
+  width: 41px;
+  height: 36px;
+}
+
+.header {
+  padding-top: 25px;
+  font-size: 33px;
+  font-weight: 600;
+  text-align: center;
+}
+
+.description {
+  font-size: 14px;
+  padding-top: 24px;
+}
+
+.buttons {
+  display: flex;
+  justify-content: center;
+  padding-top: 30px;
+  width: 100%;
+}
+
+.buttons > div {
+  box-sizing: border-box;
+  height: 40px;
+  line-height: 40px;
+  border-radius: 3px;
+  font-size: 15px;
+  text-align: center;
+  cursor: pointer;
+}
+
+.skipButton {
+  padding: 0 28px;
+  color: #2c2f32;
+}
+
+.retryButton {
+  padding: 0 60px;
+  background-color: #0052b2;
+  color: #fff;
+}
+
+.backText {
+  padding-top: 33px;
+  font-size: 12px;
+  color: #2c2f32;
+  text-align: center;
+}
+
+.backLink {
+  color: #2c2f32;
+  text-decoration: underline;
+  cursor: pointer;
+}

package/src/Components/ErrorModal/index.jsx

@@ -0,0 +1,35 @@
+import React from 'react';
+
+import Modal from '../Modal';
+import errorIcon from '../../assets/img/error.svg';
+import styles from './ErrorModal.module.css';
+
+const ErrorModal = ({ isOptional, errorText, onSkip, onRetry, onClose }) => {
+  return (
+    <Modal>
+      <div className={styles.modal}>
+        <img src={errorIcon} alt="error" className={styles.errorIcon} />
+        <div className={styles.header}>Error processing payment</div>
+        <div className={styles.description}>{errorText || 'Payment failed'}</div>
+        <div className={styles.buttons}>
+          {isOptional && (
+            <div className={styles.skipButton} onClick={onSkip}>
+              Skip
+            </div>
+          )}
+          <div className={styles.retryButton} onClick={onRetry}>
+            Retry
+          </div>
+        </div>
+        <div className={styles.backText}>
+          Go{' '}
+          <span className={styles.backLink} onClick={onClose}>
+            back to form
+          </span>
+        </div>
+      </div>
+    </Modal>
+  );
+};
+
+export default ErrorModal;

package/src/Components/ErrorOptionalModal/index.jsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+import ErrorModal from '../ErrorModal';
+
+const ErrorOptionalModal = ({ callbacks }) => {
+  return <ErrorModal callbacks={callbacks} isOptional />;
+};
+
+export default ErrorOptionalModal;

package/src/Components/Modal/Modal.module.css

@@ -0,0 +1,29 @@
+.modalContainer {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.8);
+  z-index: 1000;
+}
+
+.modal {
+  position: absolute;
+  max-width: 550px;
+  width: 90%;
+  top: 84px;
+  left: 50%;
+  transform: translateX(-50%);
+  background: #fff;
+  border-radius: 6px;
+  color: #322c2c;
+  padding-bottom: 30px;
+}
+
+@media (max-height: 530px) {
+  .modal {
+    top: 50%;
+    transform: translate(-50%, -50%);
+  }
+}

package/src/Components/Modal/index.jsx

@@ -0,0 +1,13 @@
+import React from 'react';
+
+import styles from './Modal.module.css';
+
+const Modal = props => {
+  return (
+    <div className={styles.modalContainer}>
+      <div className={`${styles.modal} ${props.className}`}>{props.children}</div>
+    </div>
+  );
+};
+
+export default Modal;

package/src/Components/PayNowModal/index.jsx

@@ -0,0 +1,27 @@
+import React, { useEffect } from 'react';
+
+const PayNowModal = () => {
+  useEffect(() => {
+    window.SpreedlyExpress.init(
+      'C7cRfNJGODKh4Iu5Ox3PToKjniY',
+      {
+        amount: '$24.24',
+        company_name: `Food 'n Stuff`,
+        sidebar_top_description: 'This is where you can buy all your food and most of your stuff',
+        sidebar_bottom_description: `2 ground beef <br> 2 crows`,
+        full_name: '',
+        close_label: 'Back to Form'
+      },
+      {
+        email: 'customer@gmail.com'
+      }
+    );
+    window.SpreedlyExpress.openView();
+    return () => {
+      window.SpreedlyExpress.unload();
+    };
+  }, []);
+  return <div />;
+};
+
+export default PayNowModal;

package/src/Components/ProcessingModal/ProcessingModal.module.css

@@ -0,0 +1,50 @@
+.modal {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 55px 30px 45px;
+}
+
+.processingIcons {
+  position: relative;
+}
+
+.loader {
+  width: 63px;
+  height: 63px;
+  animation-name: torsion;
+  animation-duration: 1.5s;
+  animation-timing-function: linear;
+  animation-iteration-count: infinite;
+}
+
+@keyframes torsion {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.logo {
+  position: absolute;
+  width: 29px;
+  height: 19px;
+  top: calc(50% - 2px);
+  left: calc(50% + 1px);
+  transform: translate(-50%, -50%);
+}
+
+.header {
+  padding-top: 32px;
+  font-size: 33px;
+  font-weight: 600;
+  text-align: center;
+}
+
+.description {
+  font-size: 14px;
+  padding-top: 30px;
+  text-align: center;
+}

package/src/Components/ProcessingModal/index.jsx

@@ -0,0 +1,25 @@
+import React from 'react';
+
+import styles from './ProcessingModal.module.css';
+import Modal from '../Modal';
+import loader from '../../assets/img/loader.svg';
+import logo from '../../assets/img/logo.svg';
+
+const ProcessingModal = () => {
+  return (
+    <Modal>
+      <div className={styles.modal}>
+        <div className={styles.processingIcons}>
+          <img src={loader} alt="loader" className={styles.loader} />
+          <img src={logo} alt="logo" className={styles.logo} />
+        </div>
+        <div className={styles.header}>Processing payment...</div>
+        <div className={styles.description}>
+          IMPORTANT: Please don’t close your browser window yet.
+        </div>
+      </div>
+    </Modal>
+  );
+};
+
+export default ProcessingModal;

package/src/Components/SelectPaymentModal/SelectPaymentModal.module.css

@@ -0,0 +1,212 @@
+.modalContainer {
+  overflow-y: auto;
+
+  box-sizing: border-box;
+  max-width: 600px;
+  max-height: calc(100vh - 150px);
+
+  border-radius: none;
+  background: none;
+}
+
+.modal {
+  display: flex;
+  flex-direction: column;
+
+  padding: 45px 80px 30px 80px;
+
+  border-radius: 6px;
+  background: #fff;
+}
+
+.header {
+  text-align: center;
+
+  font-size: 33px;
+  font-weight: 600;
+}
+
+.withoutPaymentBtn {
+  align-self: center;
+
+  margin-top: 44px;
+
+  cursor: pointer;
+  text-decoration: underline;
+
+  color: #2c2f32;
+  border: none;
+  background: none;
+
+  font-size: 12px;
+}
+
+.contentContainer {
+  display: flex;
+
+  margin-top: 40px;
+}
+
+.paymentTypeContainer {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+
+  box-sizing: border-box;
+  width: 50%;
+  padding: 20px 24px 24px 24px;
+
+  border: 1px solid #e0e1ec;
+  border-radius: 3px;
+  background: #f1f3f4;
+}
+
+.paymentTypeContainer:nth-child(1) {
+  margin-right: 20px;
+}
+
+.achType {
+  position: relative;
+  z-index: 1;
+
+  display: flex;
+  justify-content: center;
+
+  width: 78px;
+  height: 78px;
+
+  text-align: center;
+
+  border-radius: 50%;
+  background-color: #d1e2f6;
+
+  line-height: 78px;
+}
+
+.achType::after {
+  position: absolute;
+  z-index: -1;
+  top: 0;
+  top: calc(78px / 2 - 56px / 2);
+  left: calc(78px / 2 - 56px / 2);
+
+  display: block;
+
+  width: 56px;
+  height: 56px;
+
+  content: ' ';
+
+  border-radius: 50%;
+  background-color: #83b9fa;
+}
+
+.paymentTypeLabel {
+  margin-top: 15px;
+
+  color: #2c2f32;
+
+  font-size: 19px;
+  font-weight: 600;
+  line-height: 23px;
+}
+
+.payButton {
+  width: 100%;
+  margin-top: 21px;
+  padding: 10px 0;
+
+  cursor: pointer;
+
+  color: #2c2f32;
+  border: 1px solid #e8e8e8;
+  border-radius: 3px;
+  background-color: #ffffff;
+  box-shadow: 1px 3px 9px rgba(0, 0, 0, 0.08);
+
+  font-size: 15px;
+  font-weight: bold;
+  line-height: 18px;
+}
+
+.payButton:hover {
+  box-sizing: border-box;
+
+  transition: background-color 200ms linear;
+
+  color: #ffffff;
+  background-color: #0052b2;
+}
+
+.creditCardIcon {
+  margin-top: 10px;
+}
+
+.paymentValue {
+  margin: 11px 0px 0px 0px;
+
+  text-align: center;
+
+  color: #6b6868;
+
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 15px;
+}
+
+.backIcon {
+  margin-right: 8px;
+}
+
+.backTextContainer {
+  display: flex;
+  align-items: center;
+
+  margin-bottom: 10px;
+
+  cursor: pointer;
+
+  color: white;
+
+  font-size: 13px;
+  line-height: 16px;
+}
+
+@media (max-width: 670px) {
+  .contentContainer {
+    flex-direction: column;
+  }
+
+  .paymentTypeContainer {
+    width: 100%;
+  }
+
+  .paymentTypeContainer:nth-child(1) {
+    margin-right: 0;
+    margin-bottom: 20px;
+  }
+}
+
+@media (max-width: 520px) {
+  .modal {
+    padding: 35px 35px 0px 35px;
+  }
+
+  .header {
+    font-size: 26px;
+  }
+
+  .withoutPaymentBtn {
+    margin-top: 25px;
+  }
+
+  .contentContainer {
+    margin-top: 10px;
+  }
+}
+
+@media (max-width: 360px) {
+  .header {
+    font-size: 24px;
+  }
+}