@seamlessdocs/payment-modals 1.0.38

package/src/Components/SelectPaymentModal/index.jsx

@@ -0,0 +1,117 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import Modal from '../Modal';
+import bankAccount from '../../assets/img/bank-account.svg';
+import creditCard from '../../assets/img/credit-card.svg';
+import backIcon from '../../assets/img/back.svg';
+
+import styles from './SelectPaymentModal.module.css';
+
+const SelectPaymentModal = ({
+  isPaymentRequired,
+  onPayByBank,
+  onPayByCreditCard,
+  onClose,
+  bankAccountValue,
+  bankAccountFeeValue,
+  creditCardValue,
+  creditCardFeeValue,
+  onSkipPayment,
+  isCreditCardFeeEnable,
+  isBankAccountFeeEnable
+}) => {
+  return (
+    <Modal className={styles.modalContainer}>
+      <div
+        className={styles.backTextContainer}
+        onClick={onClose}
+        onKeyDown={onClose}
+        role="button"
+        tabIndex="0"
+      >
+        <img className={styles.backIcon} src={backIcon} alt="back" />
+        Back to form
+      </div>
+      <div className={styles.modal}>
+        <div className={styles.header}>Select payment method</div>
+
+        <div className={styles.contentContainer}>
+          <div className={styles.paymentTypeContainer}>
+            <div className={styles.achType}>
+              <img src={bankAccount} alt="bank account logo" />
+            </div>
+            <div className={styles.paymentTypeLabel}>Bank Account</div>
+            <p className={styles.paymentValue}>
+              {isCreditCardFeeEnable && (
+                <>
+                  <currency>$</currency>
+                  <money>{Number(bankAccountValue).toFixed(2)}</money>
+                  {' + '}
+                  <currency>$</currency>
+                  <money>{Number(bankAccountFeeValue).toFixed(2)}</money>
+                  {' = '}
+                </>
+              )}
+              <currency>$</currency>
+              <money>{Number(bankAccountValue + bankAccountFeeValue).toFixed(2)}</money>
+            </p>
+            <button type="button" className={styles.payButton} onClick={onPayByBank}>
+              Pay
+            </button>
+          </div>
+          <div className={styles.paymentTypeContainer}>
+            <img className={styles.creditCardIcon} src={creditCard} alt="credit card logo" />
+            <div className={styles.paymentTypeLabel}>Credit Card</div>
+            <p className={styles.paymentValue}>
+              {isBankAccountFeeEnable && (
+                <>
+                  <currency>$</currency>
+                  <money>{Number(creditCardValue).toFixed(2)}</money>
+                  {' + '}
+                  <currency>$</currency>
+                  <money>{Number(creditCardFeeValue).toFixed(2)}</money>
+                  {' = '}
+                </>
+              )}
+              <currency>$</currency>
+              <money>{Number(creditCardValue + creditCardFeeValue).toFixed(2)}</money>
+            </p>
+            <button type="button" className={styles.payButton} onClick={onPayByCreditCard}>
+              Pay
+            </button>
+          </div>
+        </div>
+
+        {!isPaymentRequired && (
+          <button type="button" className={styles.withoutPaymentBtn} onClick={onSkipPayment}>
+            Submit without paying
+          </button>
+        )}
+      </div>
+    </Modal>
+  );
+};
+
+SelectPaymentModal.propTypes = {
+  isPaymentRequired: PropTypes.bool,
+  onPayByBank: PropTypes.func.isRequired,
+  onPayByCreditCard: PropTypes.func.isRequired,
+  onSkipPayment: PropTypes.func,
+  onClose: PropTypes.func.isRequired,
+  bankAccountValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+  bankAccountFeeValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+  creditCardValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+  creditCardFeeValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+  isCreditCardFeeEnable: PropTypes.bool,
+  isBankAccountFeeEnable: PropTypes.bool
+};
+
+SelectPaymentModal.defaultProps = {
+  isPaymentRequired: false,
+  onSkipPayment: () => {},
+  isCreditCardFeeEnable: false,
+  isBankAccountFeeEnable: false
+};
+
+export default SelectPaymentModal;

package/src/Components/SuccessModal/SuccessModal.module.css

@@ -0,0 +1,34 @@
+.modal {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 50px 20px 0;
+}
+
+.successIcon {
+  width: 46px;
+  height: 46px;
+}
+
+.header {
+  padding-top: 25px;
+  font-size: 33px;
+  font-weight: 600;
+  text-align: center;
+}
+
+.subHeader {
+  font-size: 14px;
+  padding-top: 24px;
+}
+
+.processingGif {
+  width: 60px;
+  margin-top: 25px;
+}
+
+@media (max-width: 420px) {
+  .header {
+    padding-top: 35px;
+  }
+}

package/src/Components/SuccessModal/index.jsx

@@ -0,0 +1,23 @@
+import React from 'react';
+
+import Modal from '../Modal';
+import successIcon from '../../assets/img/success.svg';
+import processingGif from '../../assets/img/processing.gif';
+import styles from './SuccessModal.module.css';
+
+const SuccessModal = ({ description }) => {
+  return (
+    <Modal>
+      <div className={styles.modal}>
+        <img src={successIcon} alt="success" className={styles.successIcon} />
+        <div className={styles.header}>Payment processed!</div>
+        <div className={styles.subHeader}>
+          {description || 'Money has been charged to your card'}
+        </div>
+        <img src={processingGif} alt="processing" className={styles.processingGif} />
+      </div>
+    </Modal>
+  );
+};
+
+export default SuccessModal;

package/src/OpenViewStyles.css

@@ -0,0 +1,16 @@
+#payment-modal {
+  font-family: Arial;
+}
+
+#spreedly-wrapper .company-name,
+.spreedly-label {
+  color: #322c2c !important;
+}
+
+#spreedly-wrapper .item-price {
+  color: #0052b2 !important;
+}
+
+#spreedly-wrapper .spreedly-button {
+  background: #0052b2 !important;
+}

package/src/assets/img/back.svg

@@ -0,0 +1,3 @@
+<svg width="15" height="12" viewBox="0 0 15 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15 6.01173C15 5.76811 14.8981 5.53446 14.7167 5.3622C14.5353 5.18993 14.2893 5.09315 14.0328 5.09315H3.42444L7.35631 1.61172C7.45437 1.53073 7.53423 1.43181 7.59114 1.32086C7.64805 1.20991 7.68084 1.08921 7.68754 0.965966C7.69424 0.842719 7.67472 0.719453 7.63015 0.603527C7.58558 0.487601 7.51687 0.381393 7.42813 0.291245C7.33938 0.201096 7.23241 0.128855 7.11361 0.0788349C6.99482 0.0288147 6.86662 0.00204069 6.73669 0.000112172C6.60676 -0.00181635 6.47775 0.0211401 6.35736 0.0676103C6.23698 0.11408 6.12769 0.183112 6.03601 0.270583L0.307479 5.33887C0.210456 5.42482 0.133091 5.52881 0.0801943 5.64436C0.0272973 5.75992 0 5.88458 0 6.01058C0 6.13659 0.0272973 6.26125 0.0801943 6.37681C0.133091 6.49236 0.210456 6.59635 0.307479 6.6823L6.03601 11.7529C6.2236 11.9192 6.47306 12.0079 6.7295 11.9995C6.98595 11.9911 7.22838 11.8863 7.40346 11.7081C7.57855 11.53 7.67194 11.293 7.66309 11.0495C7.65425 10.806 7.5439 10.5757 7.35631 10.4095L3.42444 6.93032H14.0328C14.2893 6.93032 14.5353 6.83354 14.7167 6.66127C14.8981 6.489 15 6.25536 15 6.01173Z" fill="white"/>
+</svg>

package/src/assets/img/bank-account.svg

@@ -0,0 +1,7 @@
+<svg width="30" height="29" viewBox="0 0 30 29" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1.49855 28.9959H27.9909C28.7903 28.9959 29.4445 28.3417 29.4445 27.5422C29.4445 26.7428 28.7903 26.0886 27.9909 26.0886H1.49855C0.699053 26.0886 0.0449219 26.7428 0.0449219 27.5422C0.0812625 28.3781 0.735394 28.9959 1.49855 28.9959Z" fill="#FFA41C"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13.3822 24.5986H16.1441C16.3621 24.5986 16.5075 24.4533 16.5075 24.2352V11.9521C16.5075 11.734 16.3621 11.5887 16.1441 11.5887H13.3822C13.1642 11.5887 13.0188 11.734 13.0188 11.9521V24.2352C13.0188 24.4533 13.2005 24.5986 13.3822 24.5986Z" fill="#2C2F32"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M22.5399 24.5986H25.3018C25.5198 24.5986 25.6652 24.4533 25.6652 24.2352V11.9521C25.6652 11.734 25.5198 11.5887 25.3018 11.5887H22.5399C22.3219 11.5887 22.1765 11.734 22.1765 11.9521V24.2352C22.1765 24.4533 22.3582 24.5986 22.5399 24.5986Z" fill="#2C2F32"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4.55115 24.5986H7.31304C7.53108 24.5986 7.67644 24.4533 7.67644 24.2352V11.9521C7.67644 11.734 7.53108 11.5887 7.31304 11.5887H4.55115C4.33311 11.5887 4.18774 11.734 4.18774 11.9521V24.2352C4.18774 24.4533 4.36945 24.5986 4.55115 24.5986Z" fill="#2C2F32"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M27.6638 8.42709L15.7441 0.57752C15.1626 0.177773 14.3631 0.177773 13.7817 0.57752L1.86196 8.42709C1.0988 8.93586 1.46221 10.0988 2.33438 10.0988H27.1187C28.0635 10.0988 28.3906 8.93586 27.6638 8.42709Z" fill="#2C2F32"/>
+</svg>

package/src/assets/img/credit-card.svg

@@ -0,0 +1,36 @@
+<svg width="82" height="64" viewBox="0 0 82 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle opacity="0.14" cx="52.6286" cy="29.1711" r="28.6643" fill="#FFA41C"/>
+<circle opacity="0.4" cx="52.6285" cy="29.171" r="20.7269" fill="#FFA41C"/>
+<g filter="url(#filter0_d)">
+<path d="M5.75169 39.5842L5.75172 39.5841C7.08033 32.8467 8.4752 26.1258 9.87115 19.3997C10.1725 17.9477 10.4739 16.4954 10.7747 15.0427C11.2766 12.6186 13.6725 11.0446 16.0974 11.5467L59.119 20.4548C61.5432 20.9567 63.1177 23.3528 62.6158 25.7769L57.5435 50.2736C57.0416 52.6977 54.645 54.2715 52.2208 53.7696L9.19923 44.8615C6.7229 44.3488 5.26495 42.0483 5.75169 39.5842Z" fill="#549FF8" stroke="#0052B2"/>
+<path d="M52.6509 40.1063L43.4963 38.2107C43.443 38.1997 43.3909 38.2338 43.3798 38.287L42.6565 41.7805C42.6455 41.8337 42.6797 41.8858 42.733 41.8968L51.8877 43.7924C51.9409 43.8034 51.9931 43.7692 52.0041 43.7161L52.7274 40.2225C52.7384 40.1694 52.7042 40.1173 52.6509 40.1063Z" fill="#FFA41C"/>
+<path d="M49.8584 28.4455L40.7038 26.5499C40.6505 26.5389 40.5984 26.5731 40.5874 26.6263L39.864 30.1198C39.853 30.173 39.8873 30.225 39.9405 30.2361L49.0952 32.1316C49.1485 32.1426 49.2006 32.1085 49.2116 32.0553L49.935 28.5618C49.946 28.5086 49.9117 28.4565 49.8584 28.4455Z" fill="#FFA41C"/>
+<path d="M53.7514 34.7909L39.6041 31.8616C39.5508 31.8506 39.4987 31.8847 39.4877 31.9379L38.7635 35.4353C38.7525 35.4885 38.7868 35.5405 38.8401 35.5515L52.9874 38.4809C53.0407 38.4919 53.0928 38.4577 53.1038 38.4046L53.828 34.9072C53.839 34.854 53.8047 34.802 53.7514 34.7909Z" fill="#FFA41C"/>
+</g>
+<g filter="url(#filter1_d)">
+<path d="M10.178 49.3864L10.178 49.3862C8.98069 42.6243 7.85113 35.8537 6.7207 29.078C6.47666 27.6152 6.23258 26.1522 5.98777 24.689C5.57927 22.2475 7.24394 19.9137 9.68631 19.5051L53.0182 12.2552C55.4599 11.8467 57.7942 13.5114 58.2027 15.9529L62.3308 40.6263C62.7393 43.0679 61.074 45.4018 58.6323 45.8103L15.3004 53.0601C12.8062 53.4774 10.6151 51.8598 10.178 49.3864Z" fill="white" stroke="#D5D7DA"/>
+<path d="M54.0928 32.9158L44.8721 34.4585C44.8185 34.4675 44.7822 34.5182 44.7912 34.5717L45.3799 38.0904C45.3889 38.144 45.4396 38.1801 45.4933 38.1712L54.714 36.6285C54.7676 36.6195 54.8039 36.5688 54.7949 36.5152L54.2062 32.9965C54.1972 32.9429 54.1465 32.9068 54.0928 32.9158Z" fill="#FFA41C"/>
+<path d="M47.2733 23.0536L38.0526 24.5964C37.9989 24.6053 37.9627 24.656 37.9717 24.7096L38.5604 28.2283C38.5693 28.2819 38.6201 28.318 38.6738 28.309L47.8944 26.7663C47.9481 26.7574 47.9843 26.7067 47.9754 26.6531L47.3867 23.1344C47.3777 23.0808 47.3269 23.0447 47.2733 23.0536Z" fill="#FFA41C"/>
+<path d="M53.1966 27.5621L38.9473 29.9462C38.8936 29.9552 38.8574 30.0059 38.8664 30.0595L39.4557 33.582C39.4647 33.6356 39.5155 33.6718 39.5691 33.6628L53.8184 31.2787C53.8721 31.2697 53.9083 31.219 53.8994 31.1655L53.31 27.6429C53.3011 27.5893 53.2503 27.5532 53.1966 27.5621Z" fill="#FFA41C"/>
+</g>
+<defs>
+<filter id="filter0_d" x="0.195801" y="10.0421" width="67.9239" height="53.2315" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+<feOffset dy="4"/>
+<feGaussianBlur stdDeviation="2"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
+</filter>
+<filter id="filter1_d" x="0.666412" y="10.9365" width="66.983" height="51.4429" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+<feOffset dy="4"/>
+<feGaussianBlur stdDeviation="2"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
+</filter>
+</defs>
+</svg>

package/src/assets/img/error-icon.svg

@@ -0,0 +1 @@
+<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><circle fill="#D0021B" cx="8" cy="8" r="8"/><circle fill="#FFF" cx="8" cy="8" r="7"/><path d="M7 10v2h2l-.01-2H7zm2.056-4.264V3.031H7.045v2.705l.691 3.696h.521l.799-3.696z" fill="#D0011B"/></g></svg>

package/src/assets/img/error.svg

@@ -0,0 +1,3 @@
+<svg width="42" height="38" viewBox="0 0 42 38" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M41.3961 33.333L34.7841 21.8841C33.4972 19.7096 31.4559 16.1152 30.169 13.8964L23.6014 2.49189C22.3145 0.317482 20.2733 0.317482 18.9864 2.49189L12.4188 13.9408C11.1319 16.1152 9.09059 19.7096 7.80369 21.9284L1.19172 33.333C-0.0951754 35.5074 0.969841 37.3268 3.49925 37.3268H39.0885C41.6179 37.3268 42.6386 35.5074 41.3961 33.333ZM22.5808 30.6704C22.2258 30.9811 21.782 31.1586 21.2939 31.1586C20.8058 31.1586 20.362 30.9811 20.007 30.6704C19.652 30.3598 19.4745 29.916 19.4745 29.3392C19.4745 28.851 19.652 28.4073 20.007 28.0523C20.362 27.6973 20.8058 27.5198 21.2939 27.5198C21.782 27.5198 22.2258 27.6973 22.5808 28.0523C22.9358 28.4073 23.1133 28.8067 23.1133 29.3392C23.1133 29.916 22.9358 30.3598 22.5808 30.6704ZM23.0245 17.3134L22.492 23.2597C22.4477 23.9697 22.3145 24.5022 22.137 24.9016C21.9595 25.301 21.6489 25.4785 21.2051 25.4785C20.7614 25.4785 20.4508 25.301 20.3176 24.946C20.1401 24.591 20.007 24.0141 19.9626 23.2597L19.5632 17.4909C19.4745 16.3815 19.4745 15.5383 19.4745 15.0502C19.4745 14.3846 19.652 13.8521 20.007 13.4971C20.362 13.142 20.8058 12.9202 21.3826 12.9202C22.0927 12.9202 22.5364 13.142 22.7583 13.6302C22.9802 14.1183 23.1133 14.7839 23.1133 15.7158C23.1133 16.2483 23.0689 16.7809 23.0245 17.3134Z" fill="#AD1100"/>
+</svg>

package/src/assets/img/loader.svg

@@ -0,0 +1,3 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M54.3286 54.4398C54.2592 54.5064 54.1843 54.5673 54.1048 54.6216H58.3C58.7636 54.6216 59.2082 54.8057 59.5361 55.1335C59.8639 55.4613 60.048 55.906 60.048 56.3696C60.048 56.8332 59.8639 57.2778 59.5361 57.6056C59.2082 57.9334 58.7636 58.1176 58.3 58.1176H49.9097C49.4461 58.1176 49.0014 57.9334 48.6736 57.6056C48.3458 57.2778 48.1617 56.8332 48.1617 56.3696V47.9792C48.1617 47.5156 48.3458 47.071 48.6736 46.7432C49.0014 46.4153 49.4461 46.2312 49.9097 46.2312C50.3732 46.2312 50.8179 46.4153 51.1457 46.7432C51.4735 47.071 51.6576 47.5156 51.6576 47.9792V52.1744L51.8394 51.9786C55.8015 48.0199 58.5006 42.9753 59.5956 37.4826C60.6905 31.9899 60.132 26.2958 57.9908 21.1205C55.8496 15.9452 52.2218 11.5211 47.5661 8.40764C42.9105 5.29417 37.4362 3.63121 31.8354 3.62905C31.3718 3.62905 30.9272 3.44488 30.5994 3.11707C30.2716 2.78926 30.0874 2.34465 30.0874 1.88105C30.0874 1.41745 30.2716 0.972845 30.5994 0.645033C30.9272 0.31722 31.3718 0.133057 31.8354 0.133057C38.1268 0.133985 44.2767 2.00032 49.5076 5.4961C54.7384 8.99187 58.8153 13.9601 61.2228 19.7727C63.6303 25.5853 64.2603 31.9812 63.0332 38.1518C61.806 44.3224 58.7768 49.9906 54.3286 54.4398ZM0.0218748 31.9466C0.0218748 40.384 3.37365 48.4759 9.33984 54.4421C15.306 60.4083 23.3979 63.7601 31.8354 63.7601C32.299 63.7601 32.7436 63.5759 33.0714 63.2481C33.3992 62.9203 33.5834 62.4757 33.5834 62.0121C33.5834 61.5485 33.3992 61.1039 33.0714 60.7761C32.7436 60.4483 32.299 60.2641 31.8354 60.2641C26.2343 60.2647 20.7588 58.6042 16.1014 55.4927C11.4441 52.3812 7.81407 47.9584 5.67054 42.7836C3.527 37.6089 2.96621 31.9147 4.0591 26.4213C5.15199 20.9278 7.84946 15.8818 11.8104 11.9215C11.8663 11.8656 11.9292 11.7957 11.9921 11.7188V15.914C11.9921 16.3776 12.1763 16.8222 12.5041 17.15C12.8319 17.4778 13.2765 17.662 13.7401 17.662C14.2037 17.662 14.6483 17.4778 14.9762 17.15C15.304 16.8222 15.4881 16.3776 15.4881 15.914V7.52358C15.4881 7.05998 15.304 6.61537 14.9762 6.28756C14.6483 5.95975 14.2037 5.77558 13.7401 5.77558H5.34976C4.88617 5.77558 4.44156 5.95975 4.11374 6.28756C3.78593 6.61537 3.60177 7.05998 3.60177 7.52358C3.60177 7.98718 3.78593 8.43179 4.11374 8.7596C4.44156 9.08741 4.88617 9.27157 5.34976 9.27157H9.54495C9.46946 9.3282 9.3971 9.38888 9.3282 9.45337C6.36709 12.4013 4.01994 15.9071 2.42253 19.768C0.825118 23.6289 0.00916443 27.7683 0.0218748 31.9466Z" fill="#FFA41C"/>
+</svg>

package/src/assets/img/lock-icon.svg

@@ -0,0 +1,3 @@
+<svg width="10" height="14" viewBox="0 0 10 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0.675591 5.59488H1.05659V4.08158C1.05659 2.21743 2.66893 0.706482 4.65857 0.706482C6.64768 0.706482 8.26056 2.21743 8.26056 4.08158V4.83794V5.59429H8.56747C8.90349 5.59429 9.17759 5.89989 9.17759 6.27249V12.7224C9.17759 13.095 8.90296 13.4 8.56747 13.4H0.675591C0.339575 13.4 0.0649414 13.0944 0.0649414 12.7224V6.27249C0.0649414 5.89989 0.339575 5.59488 0.675591 5.59488ZM7.07894 5.59488V4.83794V4.08158C7.07894 2.97731 5.99523 2.08167 4.6591 2.08167C3.32244 2.08167 2.23873 2.97731 2.23873 4.08158V5.59488H7.07894Z" fill="#D4DDEC"/>
+</svg>

package/src/assets/img/logo.svg

@@ -0,0 +1,6 @@
+<svg width="41" height="28" viewBox="0 0 41 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3.87924 0.89624H36.6903C38.7453 0.89624 40.4268 2.57723 40.4268 4.63226V23.3151C40.4268 25.3701 38.7453 27.0511 36.6903 27.0511H3.87924C1.77759 27.0511 0.204472 25.4162 0.185499 23.3438C0.126412 17.1061 0.142675 10.8711 0.142675 4.63226C0.142675 2.57723 1.82367 0.89624 3.87924 0.89624Z" fill="#0052B2"/>
+<path d="M34.9359 16.6204H27.954C27.9133 16.6204 27.8804 16.6532 27.8804 16.6938V19.3582C27.8804 19.3987 27.9133 19.4316 27.954 19.4316H34.9359C34.9765 19.4316 35.0095 19.3987 35.0095 19.3582V16.6938C35.0095 16.6532 34.9765 16.6204 34.9359 16.6204Z" fill="white"/>
+<path d="M31.1278 8.51562H24.1458C24.1052 8.51562 24.0723 8.5485 24.0723 8.58906V11.2534C24.0723 11.294 24.1052 11.3269 24.1458 11.3269H31.1278C31.1684 11.3269 31.2013 11.294 31.2013 11.2534V8.58906C31.2013 8.5485 31.1684 8.51562 31.1278 8.51562Z" fill="white"/>
+<path d="M34.9355 12.5667H24.1458C24.1052 12.5667 24.0723 12.5995 24.0723 12.6401V15.3074C24.0723 15.348 24.1052 15.3809 24.1458 15.3809H34.9355C34.9761 15.3809 35.0091 15.348 35.0091 15.3074V12.6401C35.0091 12.5995 34.9761 12.5667 34.9355 12.5667Z" fill="white"/>
+</svg>

package/src/assets/img/success.svg

@@ -0,0 +1,4 @@
+<svg width="47" height="47" viewBox="0 0 47 47" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="23.3887" cy="23.4095" r="22.8777" fill="#FFA41C"/>
+<path d="M36.3988 15.6647L20.9093 31.1543L18.2348 33.838L15.5511 31.1543L12.8766 28.4798L10.3786 25.9725L13.053 23.298L18.2348 28.4798L33.7244 12.981L36.3988 15.6647Z" fill="#2C2F32"/>
+</svg>

package/src/assets/img/valid-icon.svg

@@ -0,0 +1 @@
+<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><circle fill="#47C471" cx="8" cy="8" r="8"/><circle fill="#FFF" cx="8" cy="8" r="7"/><path d="M12.468 4.946a.173.173 0 0 0 0-.241L11.3 4.538a.173.173 0 0 0-.24 0l-4.575 4.24L4.94 7.224a.173.173 0 0 0-.241 0L3.532 8.39a.173.173 0 0 0 0 .24s1.794 1.063 2.834 2.834c.02.035.074.046.12.046 2.303-2.88 5.982-6.564 5.982-6.564z" fill="#35A64B"/></g></svg>

package/src/index.jsx

@@ -0,0 +1,93 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+import ChooseModal from './Components/ChooseModal';
+import ProcessingModal from './Components/ProcessingModal';
+import ErrorModal from './Components/ErrorModal';
+import SuccessModal from './Components/SuccessModal';
+import EmptyModal from './Components/EmptyModal';
+import SelectPaymentModal from './Components/SelectPaymentModal';
+import ACHPaymentModal from './Components/ACHPaymentModal';
+
+import './OpenViewStyles.css';
+
+const handlePaymentModal = {};
+
+handlePaymentModal.chooseModal = settings => {
+  ReactDOM.render(
+    <ChooseModal
+      title={settings.title}
+      description={settings.description}
+      withPayText={settings.withPayText}
+      onWithoutPay={settings.callbacks.withoutPay}
+      onWithPay={settings.callbacks.withPay}
+      onClose={settings.callbacks.close}
+    />,
+    document.getElementById('payment-modal')
+  );
+};
+
+handlePaymentModal.processingModal = () => {
+  ReactDOM.render(<ProcessingModal />, document.getElementById('payment-modal'));
+};
+
+handlePaymentModal.errorModal = settings => {
+  ReactDOM.render(
+    <ErrorModal
+      isOptional={settings.isOptional}
+      errorText={settings.errorText}
+      onSkip={settings.callbacks.skip}
+      onRetry={settings.callbacks.retry}
+      onClose={settings.callbacks.close}
+    />,
+    document.getElementById('payment-modal')
+  );
+};
+
+handlePaymentModal.successModal = settings => {
+  ReactDOM.render(
+    <SuccessModal description={settings.description} />,
+    document.getElementById('payment-modal')
+  );
+};
+
+handlePaymentModal.selectPaymentModal = settings => {
+  ReactDOM.render(
+    <SelectPaymentModal
+      isPaymentRequired={settings.isPaymentRequired}
+      onPayByBank={settings.callbacks.onPayByBank}
+      onPayByCreditCard={settings.callbacks.onPayByCreditCard}
+      onSkipPayment={settings.callbacks.onSkipPayment}
+      onClose={settings.callbacks.onClose}
+      bankAccountValue={settings.bankAccountValue}
+      bankAccountFeeValue={settings.bankAccountFeeValue}
+      creditCardValue={settings.creditCardValue}
+      creditCardFeeValue={settings.creditCardFeeValue}
+      isCreditCardFeeEnable={settings.isCreditCardFeeEnable}
+      isBankAccountFeeEnable={settings.isBankAccountFeeEnable}
+    />,
+    document.getElementById('payment-modal')
+  );
+};
+
+handlePaymentModal.achPaymentModal = settings => {
+  ReactDOM.render(
+    <ACHPaymentModal
+      onPay={settings.callbacks.onPay}
+      onClose={settings.callbacks.onClose}
+      amount={settings.amount}
+      totalAmount={settings.totalAmount}
+      feeAmount={settings.feeAmount}
+      description={settings.description}
+      feeName={settings.feeName}
+    />,
+    document.getElementById('payment-modal')
+  );
+};
+
+handlePaymentModal.none = () => {
+  ReactDOM.render(<EmptyModal />, document.getElementById('payment-modal'));
+};
+
+window.handlePaymentModal = handlePaymentModal;
+export default handlePaymentModal;

package/webpack.config.js

@@ -0,0 +1,78 @@
+const path = require('path');
+
+module.exports = {
+  entry: {
+    main: './src/index.jsx'
+  },
+  output: {
+    filename: 'payment-modals.js',
+    path: '/build',
+    library: 'payment-modals',
+    libraryTarget: 'umd',
+    umdNamedDefine: true
+  },
+  module: {
+    rules: [
+      {
+        test: /\.(js|jsx)$/,
+        exclude: /node_modules/,
+        use: {
+          loader: 'babel-loader'
+        }
+      },
+      {
+        test: /\.css$/,
+        use: [
+          'style-loader',
+          {
+            loader: 'css-loader',
+            options: {
+              importLoaders: 1,
+              modules: true
+            }
+          }
+        ],
+        include: /\.module\.css$/
+      },
+      {
+        test: /\.css$/,
+        use: ['style-loader', 'css-loader'],
+        exclude: /\.module\.css$/
+      },
+      {
+        test: /\.(svg|png|jpg|jpeg|gif)$/,
+        use: {
+          loader: 'url-loader',
+          options: {
+            name: '[path][name].[ext]'
+          }
+        }
+      },
+      {
+        test: /\.(html)$/,
+        use: {
+          loader: 'html-loader',
+          options: {
+            attrs: ['img:src', 'link:href']
+          }
+        }
+      }
+    ]
+  },
+  devServer: {
+    port: 9000,
+    compress: true,
+    open: true,
+    publicPath: '/build/',
+    contentBase: path.join(__dirname, 'build'),
+    historyApiFallback: true
+  },
+  devtool: 'inline-source-map',
+  resolve: {
+    modules: [path.join(__dirname, 'src'), 'node_modules'],
+    extensions: ['.js', '.jsx', '.scss'],
+    alias: {
+      'react-virtualized/List': 'react-virtualized/dist/es/List'
+    }
+  }
+};