@merchi/cart 1.4.4

package/src/styles/globals.scss

@@ -0,0 +1,475 @@
+.merchi-cart-header {
+  display: flex;
+  align-items: center;
+  padding: 1.5rem;
+}
+
+.merchi-cart-header h5 {
+  margin-bottom: 0;
+  line-height: 1.5;
+  font-size: 20px;
+  margin-top: 0px;
+}
+
+.merchi-cart-footer {
+  display: flex;
+  padding: 1rem;
+}
+
+.merchi-cart-body {
+  display: block;
+  min-height: 450px;
+}
+
+.merchi-cart-title {
+  margin-bottom: 2rem;
+}
+
+.merchi-loading-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: var(--bs-height-md, 500px);
+}
+
+.merchi-loading-container-text {
+  font-size: 1.2rem;
+  font-weight: bold;
+  text-align: center;
+}
+
+.merchi-payment-gateway-inactive {
+  height: 300px;
+  background: url('../assets/merchi-swipe-outline.png');
+  background-repeat: no-repeat;
+  background-position: center center;
+  background-size: 276px 215px;
+  margin-top: 100px;
+}
+
+.merchi-tab-panel {
+  display: none;
+}
+
+.merchi-cart-tab-content {
+  padding: 15px;
+}
+
+.merchi-cart-tab-content>.merchi-cart-tab-panel {
+  display: none;
+}
+
+.merchi-cart-tab-content>.active {
+  display: block;
+}
+
+.merchi-cart-total-container {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  border-bottom-right-radius: calc(0.3rem - 1px);
+  border-bottom-left-radius: calc(0.3rem - 1px);
+}
+
+.merchi-cart-total-table {
+  width: 100%;
+  margin-bottom: 20px;
+  max-width: 400px;
+  margin-bottom: 0px;
+}
+
+.merchi-cart-clear-container {
+  display: block;
+  text-align: center;
+}
+
+.merchi-cart-clear-text {
+  font-size: 16px;
+  margin-top: 3rem;
+  margin-bottom: 3rem;
+}
+
+.merchi-cart-item-table-head {
+  border: none;
+  padding: 0.5rem;
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+  text-transform: uppercase;
+  border-bottom: 0px !important;
+}
+
+.merchi-cart-item-table-head-right {
+  border: none;
+  padding: 0.5rem;
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+  text-transform: uppercase;
+  text-align: right;
+  border-bottom: 0px !important;
+}
+
+.merchi-cart-success-message {
+  font-size: 16px;
+  padding-bottom: 4rem;
+  padding-top: 4rem;
+}
+
+/* Merchi checkout */
+.merchi-row {
+  display: flex;
+  flex-direction: column;
+}
+
+@media (min-width: 768px) {
+  .merchi-row {
+    flex-direction: row;
+  }
+
+  .merchi-column {
+    width: 50%;
+    padding-right: 10px;
+  }
+
+  .merchi-column:last-child {
+    padding-left: 10px;
+    padding-right: 0;
+  }
+}
+
+.merchi-collapse {
+  display: none;
+}
+
+.merchi-collapse.show {
+  display: block;
+}
+
+.merchi-nav {
+  display: flex;
+  flex-wrap: wrap;
+  padding-left: 0;
+  margin-bottom: 0;
+  list-style: none;
+}
+
+.merchi-nav-link {
+  cursor: pointer;
+  display: block;
+  border-radius: 0.25rem;
+  padding: 10px 15px;
+  width: 100%;
+  border: 0px;
+}
+
+.merchi-cart-client-info-list {
+  list-style: none;
+  margin-left: 0px;
+  padding-left: 0px;
+}
+
+.merchi-nav-link:hover,
+.merchi-nav-link:focus {
+  text-decoration: none;
+}
+
+.merchi-nav-link.disabled {
+  color: #6c757d;
+  pointer-events: none;
+  cursor: default;
+}
+
+.merchi-nav-tabs {}
+
+.merchi-nav-tabs .merchi-nav-item {
+  margin-bottom: -1px;
+}
+
+button.merchi-nav-link {
+  background: #fff;
+}
+
+.merchi-nav-tabs .merchi-nav-link {
+  border-top-left-radius: 0.25rem;
+  border-top-right-radius: 0.25rem;
+}
+
+.merchi-nav-tabs .merchi-nav-link:hover,
+.merchi-nav-tabs .merchi-nav-link:focus {
+  border-color: #e9ecef #e9ecef #dee2e6;
+}
+
+.merchi-nav-tabs .merchi-nav-link.disabled {
+  color: #6c757d;
+  background-color: transparent;
+  border-color: transparent;
+}
+
+.merchi-nav-tabs .merchi-nav-link.active,
+.merchi-nav-tabs .merchi-nav-item.show .merchi-nav-link {
+  color: #495057;
+  background-color: #fff;
+  border-color: #dee2e6 #dee2e6 #fff;
+}
+
+.merchi-nav-pills .merchi-nav-link {
+  border-radius: 0.25rem;
+}
+
+.merchi-nav-pills .merchi-nav-link.active,
+.merchi-nav-pills .show>.merchi-nav-link {
+  color: #fff;
+  background-color: #303dbf;
+}
+
+.merchi-nav-fill .merchi-nav-item {
+  flex: 1 1 auto;
+  text-align: center;
+}
+
+.merchi-no-cart-items {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 450px;
+}
+
+.merchi-btn-close {
+  background: transparent;
+  border: 0px;
+  cursor: pointer;
+  color: inherit;
+  margin-left: auto;
+}
+
+.merchi-loading-template {
+  height: 500px;
+  background: url('../assets/merchi-monster-loader.gif');
+  background-repeat: no-repeat;
+  background-position: center center;
+  background-size: 150px 150px;
+}
+
+/* Badge.css */
+
+.merchi-cart-badge {
+  display: inline-block;
+  padding: .25em .4em;
+  font-size: 75%;
+  font-weight: 700;
+  line-height: 1;
+  text-align: center;
+  white-space: nowrap;
+  vertical-align: baseline;
+  border-radius: .25rem;
+}
+
+.merchi-cart-modal-alert {
+  align-items: center;
+  display: flex;
+  padding: 15px;
+  border: 1px solid transparent;
+  border-radius: 4px;
+  position: fixed;
+  top: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 1000;
+  max-width: 1140px;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.merchi-form-group {
+  text-align: left;
+}
+
+.merchi-form-group-button {
+  text-align: center;
+  margin-bottom: 15px;
+}
+
+.merchi-content-container {
+  display: flex;
+  justify-content: center;
+  text-align: center;
+}
+
+.merchi-discount-group-container {
+  display: flex;
+  justify-content: center;
+  margin-bottom: 1.5rem;
+  -webkit-box-align: end !important;
+  -ms-flex-align: end !important;
+  align-items: flex-end !important;
+}
+
+.merchi-cart-stripe-input-container {
+  display: flex;
+  -webkit-box-orient: vertical !important;
+  -webkit-box-direction: normal !important;
+  -ms-flex-direction: column !important;
+  flex-direction: column !important;
+  gap: 1rem !important;
+}
+
+.merchi-cart-stripe-input-container img {
+  margin: 0 auto;
+}
+
+.merchi-cart-stripe-input-error {
+  text-align: center;
+  color: #a94442;
+}
+
+.merchi-cart-total-list-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-bottom-right-radius: calc(0.3rem - 1px);
+  border-bottom-left-radius: calc(0.3rem - 1px);
+}
+
+.merchi-customer-checkout__heading {
+  margin: 0 0 1rem;
+  color: #52525b;
+  font-size: 0.8125rem;
+  font-weight: 600;
+  text-transform: uppercase;
+}
+
+.merchi-customer-checkout-options {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  border: 1.5px solid #b8bec8;
+  border-radius: 0.5rem;
+  background: #fff;
+}
+
+.merchi-customer-checkout-option {
+  border-bottom: 1px solid #e4e4e7;
+  background: #fff;
+
+  &:last-child {
+    border-bottom: none;
+  }
+}
+
+.merchi-customer-checkout-option__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  width: 100%;
+  min-height: 3rem;
+  padding: 0.75rem 1rem;
+  border: none;
+  background: #fff;
+  color: #3f3f46;
+  font-size: 0.9375rem;
+  text-align: left;
+  cursor: pointer;
+
+  &:hover,
+  .merchi-customer-checkout-option.is-selected & {
+    background: color-mix(in srgb, var(--color-brand, #303dbf) 8%, #fff);
+  }
+}
+
+.merchi-customer-checkout-option__title {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  flex: 1;
+}
+
+.merchi-customer-checkout-option__label {
+  font-weight: 600;
+}
+
+.merchi-customer-checkout-option__icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2rem;
+  height: 2rem;
+  border-radius: 0.375rem;
+  background: #f4f4f5;
+}
+
+.merchi-customer-checkout-option__icon-svg {
+  width: 1.125rem;
+  height: 1.125rem;
+}
+
+.merchi-customer-checkout-option__icon-svg--whatsapp {
+  color: #25d366;
+}
+
+.merchi-customer-checkout-option__checkbox {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  width: 1.25rem;
+  height: 1.25rem;
+  border: 2px solid #a1a1aa;
+  border-radius: 0.25rem;
+  background: #fff;
+  font-size: 1rem;
+}
+
+.merchi-customer-checkout-option.is-selected .merchi-customer-checkout-option__checkbox {
+  border-color: var(--color-brand, #303dbf);
+  background: var(--color-brand, #303dbf);
+  color: #fff;
+}
+
+.merchi-customer-checkout-option__body {
+  padding: 0.75rem 1rem 1rem;
+  background: #fff;
+}
+
+.merchi-cart-google-suggest-list {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 100%;
+  z-index: 1050;
+  margin: 0.25rem 0 0;
+  padding: 0;
+  list-style: none;
+  background: #fff;
+  color: #18181b;
+  border: 1px solid #dee2e6;
+  border-radius: 0.375rem;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
+  max-height: 280px;
+  overflow-y: auto;
+}
+
+.merchi-cart-google-suggest-list-item {
+  padding: 0.5rem 0.75rem;
+  cursor: pointer;
+  color: #18181b;
+  border-bottom: 1px solid #f4f4f5;
+
+  strong {
+    color: #18181b;
+  }
+
+  .text-muted {
+    color: #71717a !important;
+  }
+
+  &:last-child {
+    border-bottom: none;
+  }
+
+  &:hover,
+  &.active {
+    background: #f4f4f5;
+  }
+}

package/src/tabs/CartNav.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { useCartContext } from '../CartProvider';
+import { tabIdPaymentSuccess } from '../utilities/tabs';
+import NavTab from './NavTab';
+
+function CartNav() {
+  const { classNameCartNav, tabs } = useCartContext();
+  return (
+    <div className={classNameCartNav}>
+      {tabs.filter((tab: any) => tab.tabId !== tabIdPaymentSuccess).
+        map((tab: any, index: number) =>
+          <NavTab {...tab} key={`${index}-tab`} />
+      )}
+    </div>
+  );
+}
+
+export default CartNav;

package/src/tabs/NavTab.tsx

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import { useCartContext } from '../CartProvider';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+
+interface Props {
+  disabled?: boolean;
+  icon: any;
+  name: string;
+  tabId: number;
+}
+
+function NavTab({ disabled, icon, name, tabId }: Props) {
+  const {
+    activeTabIndex,
+    classNameCartTabItem,
+    classNameCartTabItemLink,
+    setActiveTabIndex,
+  } = useCartContext();
+  function toggle() {
+    setActiveTabIndex(tabId);
+  }
+  const active = activeTabIndex === tabId;
+  return (
+    <div className={classNameCartTabItem}>
+      <button
+        className={`${classNameCartTabItemLink} ${active ? 'active' : ''}`}
+        onClick={toggle}
+        disabled={disabled}
+      >
+        <FontAwesomeIcon icon={icon} /> {name}
+      </button>
+    </div>
+  );
+}
+
+export default NavTab;

package/src/types/assets.d.ts

@@ -0,0 +1,4 @@
+declare module "*.png" {
+  const value: any;
+  export = value;
+}

package/src/types/index.ts

@@ -0,0 +1,15 @@
+export interface Alert {
+  icon: any;
+  message: string;
+  show: boolean;
+  title: string;
+  type: "info" | "success" | "danger" | "warning" | undefined;
+}
+
+export interface Tab {
+  disabled: boolean;
+  icon: any;
+  name: string;
+  tabId: number;
+}
+

package/src/types/merchi_product_form/index.d.ts

@@ -0,0 +1 @@
+declare module '@merchi/product-form';

package/src/types/merchi_sdk_ts/index.d.ts

@@ -0,0 +1 @@
+declare module '@merchi/sdk';