merchi_cart 0.0.2 → 0.0.3-a

package/README.md

@@ -32,10 +32,10 @@ yarn add merchi_cart
 
 | Name                                          | Type       | Default                                                                     | Description                           |
 |-----------------------------------------------|------------|-----------------------------------------------------------------------------|---------------------------------------|
-| `classNameAlertError`                         | `string?`  | `"alert alert-error alert-dismissible"`                                     | `Class for alert error`               |
-| `classNameAlertInfo`                          | `string?`  | `"alert alert-info alert-dismissible"`                                      | `Class for alert info`                |
-| `classNameAlertSuccess`                       | `string?`  | `"alert alert-success alert-dismissible"`                                   | `Class for alert success`             |
-| `classNameAlertWarning`                       | `string?`  | `"alert alert-warning alert-dismissible"`                                   | `Class for alert warning`             |
+| `classNameAlertError`                         | `string?`  | `"alert alert-danger"`                                                      | `Class for alert error`               |
+| `classNameAlertInfo`                          | `string?`  | `"alert alert-info"`                                                        | `Class for alert info`                |
+| `classNameAlertSuccess`                       | `string?`  | `"alert alert-success"`                                                     | `Class for alert success`             |
+| `classNameAlertWarning`                       | `string?`  | `"alert alert-warning"`                                                     | `Class for alert warning`             |
 | `classNameBtn`                                | `string?`  | `"btn"`                                                                     | `Base class for button elements`      |
 | `classNameBtnBack`                            | `string?`  | `"btn-lg btn-default pull-left"`                                            | `Class for back button`               |
 | `classNameBtnCartClear`                       | `string?`  | `"btn-lg btn-danger mr-auto"`                                               | `Class for clear cart button`         |

package/lib/Cart.js

@@ -22,6 +22,7 @@ import { CartFooter, CartPaymentSettingsInvalid, LoadingTemplate, } from './comp
 import { PanelCartItems, PanelCartShipment, PanelClearCart, PanelClientCheckout, PanelEditCartItem, PanelPaymentSuccess, } from './panels';
 import { tabIdClearCart, tabIdItem, tabIdPaymentSuccess, } from './slices/sliceCart';
 import { actionFetchTheme, initMerchiCart, } from './store';
+import './styles/globals.css';
 function CartComponents() {
     var _a = useCartContext(), domainId = _a.domainId, includeTheme = _a.includeTheme, initialiseCart = _a.initialiseCart;
     var _b = useSelector(function (s) { return s.stateCart; }), activeTab = _b.activeTab, cartSettingsInvalid = _b.cartSettingsInvalid, fetchingCart = _b.fetchingCart;
@@ -30,6 +31,7 @@ function CartComponents() {
             if (includeTheme) {
                 actionFetchTheme(domainId);
             }
+            console.log(domainId, 'whjat os tjos');
             initMerchiCart(domainId);
         }
     }, [domainId, includeTheme, initialiseCart]);
@@ -37,5 +39,5 @@ function CartComponents() {
                         _jsxs(_Fragment, { children: [_jsx(CartFooter, { children: _jsx(CartTotals, {}) }), _jsxs(CartFooter, { children: [_jsx(ButtonClearCart, {}), _jsx(ButtonBack, {}), _jsx(ButtonNextDynamic, {})] })] })] }))] }));
 }
 export default function Cart(props) {
-    return (_jsx(CartProvider, __assign({}, props, { children: _jsxs(Provider, { store: store, children: [_jsx(CartComponents, {}), _jsx(CartHeader, {}), _jsx(CartAlert, {})] }) })));
+    return (_jsx(CartProvider, __assign({}, props, { children: _jsx(Provider, { store: store, children: _jsx(CartComponents, {}) }) })));
 }

package/lib/CartAlert.js

@@ -8,8 +8,8 @@ import { useCartContext } from './CartProvider';
 function CartAlert() {
     var classNameBtnClose = useCartContext().classNameBtnClose;
     var alert = useSelector(function (s) { return s.stateCartAlert; }).alert;
-    var icon = alert.icon, message = alert.message, show = alert.show, Title = alert.Title;
+    var icon = alert.icon, message = alert.message, show = alert.show, title = alert.title;
     return (_jsx(_Fragment, { children: show && (_jsxs(Alert, { alertType: alert.type, children: [icon &&
-                    _jsx(FontAwesomeIcon, { icon: icon }), " ", _jsx("strong", { children: Title }), " ", message, _jsx("button", { type: "button", className: classNameBtnClose, "data-bs-dismiss": "alert", "aria-label": "Close", onClick: closeAlert, children: _jsx(FontAwesomeIcon, { icon: faTimes }) })] })) }));
+                    _jsx(FontAwesomeIcon, { icon: icon }), " ", _jsx("strong", { children: title }), " ", message, _jsx("button", { type: "button", className: classNameBtnClose, "data-bs-dismiss": "alert", "aria-label": "Close", onClick: closeAlert, children: _jsx(FontAwesomeIcon, { icon: faTimes }) })] })) }));
 }
 export default CartAlert;

package/lib/CartProvider.js

@@ -89,7 +89,7 @@ var CartContext = createContext({
 });
 export var useCartContext = function () { return useContext(CartContext); };
 var CartProvider = function (_a) {
-    var children = _a.children, _b = _a.classNameAlertError, classNameAlertError = _b === void 0 ? 'alert alert-error alert-dismissible' : _b, _c = _a.classNameAlertInfo, classNameAlertInfo = _c === void 0 ? 'alert alert-info alert-dismissible' : _c, _d = _a.classNameAlertSuccess, classNameAlertSuccess = _d === void 0 ? 'alert alert-success alert-dismissible' : _d, _e = _a.classNameAlertWarning, classNameAlertWarning = _e === void 0 ? 'alert alert-warning alert-dismissible' : _e, _f = _a.classNameBtn, classNameBtn = _f === void 0 ? 'btn' : _f, _g = _a.classNameBtnBack, classNameBtnBack = _g === void 0 ? 'btn-lg btn-default pull-left' : _g, _h = _a.classNameBtnCartClear, classNameBtnCartClear = _h === void 0 ? 'btn-lg btn-danger mr-auto' : _h, _j = _a.classNameBtnClose, classNameBtnClose = _j === void 0 ? 'btn-close' : _j, _k = _a.classNameBtnDanger, classNameBtnDanger = _k === void 0 ? 'btn btn-md btn-danger' : _k, _l = _a.classNameBtnDefault, classNameBtnDefault = _l === void 0 ? 'btn btn-md btn-default' : _l, _m = _a.classNameBtnDownloadInvoice, classNameBtnDownloadInvoice = _m === void 0 ? 'btn btn-lg btn-primary' : _m, _o = _a.classNameBtnPrimary, classNameBtnPrimary = _o === void 0 ? 'btn btn-md btn-primary' : _o, _p = _a.classNameBtnLink, classNameBtnLink = _p === void 0 ? 'btn-md btn-link' : _p, _q = _a.classNameBtnNext, classNameBtnNext = _q === void 0 ? 'btn-lg btn-primary' : _q, _r = _a.classNameBtnNextComplete, classNameBtnNextComplete = _r === void 0 ? 'btn-lg btn-success' : _r, _s = _a.classNameBtnPay, classNameBtnPay = _s === void 0 ? 'btn-lg btn-primary width-full' : _s, _t = _a.classNameCartBody, classNameCartBody = _t === void 0 ? 'merchi-cart-body' : _t, _u = _a.classNameCartFooter, classNameCartFooter = _u === void 0 ? 'merchi-cart-footer' : _u, // add to sass
+    var children = _a.children, _b = _a.classNameAlertError, classNameAlertError = _b === void 0 ? 'alert alert-danger' : _b, _c = _a.classNameAlertInfo, classNameAlertInfo = _c === void 0 ? 'alert alert-info' : _c, _d = _a.classNameAlertSuccess, classNameAlertSuccess = _d === void 0 ? 'alert alert-success' : _d, _e = _a.classNameAlertWarning, classNameAlertWarning = _e === void 0 ? 'alert alert-warning' : _e, _f = _a.classNameBtn, classNameBtn = _f === void 0 ? 'btn' : _f, _g = _a.classNameBtnBack, classNameBtnBack = _g === void 0 ? 'btn-lg btn-default pull-left' : _g, _h = _a.classNameBtnCartClear, classNameBtnCartClear = _h === void 0 ? 'btn-lg btn-danger mr-auto' : _h, _j = _a.classNameBtnClose, classNameBtnClose = _j === void 0 ? 'btn-close' : _j, _k = _a.classNameBtnDanger, classNameBtnDanger = _k === void 0 ? 'btn btn-md btn-danger' : _k, _l = _a.classNameBtnDefault, classNameBtnDefault = _l === void 0 ? 'btn btn-md btn-default' : _l, _m = _a.classNameBtnDownloadInvoice, classNameBtnDownloadInvoice = _m === void 0 ? 'btn btn-lg btn-primary' : _m, _o = _a.classNameBtnPrimary, classNameBtnPrimary = _o === void 0 ? 'btn btn-md btn-primary' : _o, _p = _a.classNameBtnLink, classNameBtnLink = _p === void 0 ? 'btn-md btn-link' : _p, _q = _a.classNameBtnNext, classNameBtnNext = _q === void 0 ? 'btn-lg btn-primary' : _q, _r = _a.classNameBtnNextComplete, classNameBtnNextComplete = _r === void 0 ? 'btn-lg btn-success' : _r, _s = _a.classNameBtnPay, classNameBtnPay = _s === void 0 ? 'btn-lg btn-primary width-full' : _s, _t = _a.classNameCartBody, classNameCartBody = _t === void 0 ? 'merchi-cart-body' : _t, _u = _a.classNameCartFooter, classNameCartFooter = _u === void 0 ? 'merchi-cart-footer' : _u, // add to sass
     _v = _a.classNameCartFormCheckbox, // add to sass
     classNameCartFormCheckbox = _v === void 0 ? 'form-check-input' : _v, _w = _a.classNameCartFormGroup, classNameCartFormGroup = _w === void 0 ? 'form-group' : _w, _x = _a.classNameCartFormGroupCheckbox, classNameCartFormGroupCheckbox = _x === void 0 ? 'form-check' : _x, _y = _a.classNameCartFormInput, classNameCartFormInput = _y === void 0 ? 'form-control' : _y, _z = _a.classNameCartFormLabelCheckbox, classNameCartFormLabelCheckbox = _z === void 0 ? '' : _z, _0 = _a.classNameCartInputError, classNameCartInputError = _0 === void 0 ? 'text-danger' : _0, _1 = _a.classNameCartNav, classNameCartNav = _1 === void 0 ? 'nav nav-tabs merchi-nav merchi-nav-fill merchi-nav-pills' : _1, _2 = _a.classNameCartRow, classNameCartRow = _2 === void 0 ? 'merchi-row' : _2, _3 = _a.classNameCartRowColumn, classNameCartRowColumn = _3 === void 0 ? 'merchi-column' : _3, _4 = _a.classNameCartTabItem, classNameCartTabItem = _4 === void 0 ? 'nav-item merchi-nav-item' : _4, _5 = _a.classNameCartTabItemLink, classNameCartTabItemLink = _5 === void 0 ? 'nav-link merchi-nav-link' : _5, _6 = _a.classNameCartGoogleSuggestList, classNameCartGoogleSuggestList = _6 === void 0 ? 'list-group m-b-0' : _6, _7 = _a.classNameCartGoogleSuggestListItem, classNameCartGoogleSuggestListItem = _7 === void 0 ? 'list-group-item cursor-pointer' : _7, _8 = _a.classNameCartHeader, classNameCartHeader = _8 === void 0 ? 'merchi-cart-header' : _8, // add to sass
     _9 = _a.classNameCartItemFeatureImage, // add to sass

package/lib/CartTotals.js

@@ -17,9 +17,10 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faCircleNotch } from '@fortawesome/free-solid-svg-icons';
 import { Table } from './components';
 import { useCartContext } from './CartProvider';
-function CartTotal(props) {
-    var attribute = props.attribute;
-    var _a = useSelector(function (s) { return s; }), _b = _a.stateCart, cart = _b.cart, fetchingCart = _b.fetchingCart, loading = _b.loading, _c = _a.stateCartShipment, fetchingShipmentGroups = _c.fetchingShipmentGroups, fetchingShipmentQuote = _c.fetchingShipmentQuote;
+function CartTotal(_a) {
+    var attribute = _a.attribute;
+    var _b = useSelector(function (s) { return s.stateCart; }), cart = _b.cart, fetchingCart = _b.fetchingCart, loading = _b.loading;
+    var _c = useSelector(function (s) { return s.stateCartShipment; }), fetchingShipmentGroups = _c.fetchingShipmentGroups, fetchingShipmentQuote = _c.fetchingShipmentQuote;
     var domain = cart.domain;
     var company = domain ? domain.company : null;
     var currency = company ? company.defaultCurrency : 'AUD';

package/lib/MerchiSDK/request.js

@@ -28,7 +28,11 @@ var __values = (this && this.__values) || function(o) {
 import { getErrorFromCode } from './constants/errors';
 /* this constant are expected to be defined in webpack (or provided as
    globals by some other means. */
-var BACKEND_URI = 'https://api.merchi.co/';
+var BACKEND_URI = window && window.merchiBackendUri
+    ? window.merchiBackendUri
+    : process && process.env.BACKEND_URL
+        ? process.env.BACKEND_URL
+        : 'https://api.staging.merchi.co/';
 var ApiError = /** @class */ (function (_super) {
     __extends(ApiError, _super);
     function ApiError(err) {

package/lib/components/Alert.js

@@ -7,7 +7,7 @@ export default function Alert(_a) {
     if (alertType === 'success') {
         className = classNameAlertSuccess;
     }
-    if (alertType === 'error') {
+    if (alertType === 'danger') {
         className = classNameAlertError;
     }
     if (alertType === 'warning') {

package/lib/components/CartTabPanel.js

@@ -3,9 +3,15 @@ import { useSelector } from 'react-redux';
 import { useCartContext } from '../CartProvider';
 export default function CartTabPanel(_a) {
     var children = _a.children, tabId = _a.tabId;
-    var _b = useSelector(function (s) { return s; }).stateCart, activeTab = _b.activeTab, tabs = _b.tabs;
+    var _b = useSelector(function (s) { return s.stateCart; }), activeTab = _b.activeTab, tabs = _b.tabs;
     var classNameCartTabPanel = useCartContext().classNameCartTabPanel;
     var activeTabValues = tabs[activeTab];
-    var display = tabId === activeTabValues.tabId ? 'block' : 'none';
+    var display = tabId === -1 && activeTab === -1
+        ? 'block'
+        : tabId === -2 && activeTab === -2
+            ? 'block'
+            : activeTabValues && tabId === activeTabValues.tabId
+                ? 'block'
+                : 'none';
     return (_jsx("div", { className: classNameCartTabPanel, style: { display: display }, children: children }));
 }

package/lib/forms/FormShipmentAddressAndNotes.js

@@ -41,7 +41,7 @@ function FormShipmentAddressAndNotes(_a) {
         updateCartShipmentAddress(newAddress);
     }
     return (_jsxs("form", { id: formId, onSubmit: handleSubmit(onSubmit), children: [showHeadings &&
-                _jsx(CheckoutContainer, { children: _jsx(InnerContainer, { paddingBottom: '1rem', children: _jsx(Title, { icon: showIcon ? faMapMarkerAlt : null, Title: 'Delivery / billing address' }) }) }), _jsx(AddressGeoSuggestInput, { defaultAddress: address, hookForm: hookForm, labelGeoSuggest: "Enter your ".concat(deliveryNomenclature ? 'delivery' : 'shipping', " address"), name: 'receiverAddress', updateAddress: updateAddress }), _jsxs("div", { className: classNameCartFormGroup, children: [_jsxs("label", { children: [deliveryNomenclature ? 'Delivery' : 'Shipment', " notes"] }), _jsx("textarea", { className: 'form-control input', defaultValue: notes, name: 'receiverNotes', placeholder: 'Example - Leave at top of stairs', rows: 4, ref: register })] })] }));
+                _jsx(CheckoutContainer, { children: _jsx(InnerContainer, { paddingBottom: '1rem', children: _jsx(Title, { icon: showIcon ? faMapMarkerAlt : null, Title: 'Delivery / billing address' }) }) }), _jsx(AddressGeoSuggestInput, { defaultAddress: address, hookForm: hookForm, labelGeoSuggest: "Enter your ".concat(deliveryNomenclature ? 'delivery' : 'shipping', " address"), name: 'receiverAddress', updateAddress: updateAddress }), _jsxs("div", { className: classNameCartFormGroup, children: [_jsxs("label", { children: [deliveryNomenclature ? 'Delivery' : 'Shipment', " notes"] }), _jsx("textarea", __assign({ className: 'form-control input', defaultValue: notes, placeholder: 'Example - Leave at top of stairs', rows: 4 }, register('receiverNotes')))] })] }));
 }
 export function ActiveFormShipmentAddressAndNotes() {
     var dispatch = useDispatch();

package/lib/panels/PanelCartShipment.js

@@ -7,7 +7,7 @@ import { Alert, CartBody, CartTabPanel, LoadingTemplateSm, ShipmentGroupCard, Ti
 import { tabIdShipment } from '../slices/sliceCart';
 import CartNav from '../tabs/CartNav';
 function PanelCartShipment() {
-    var _a = useSelector(function (s) { return s; }).stateCartShipment, fetchingShipmentGroups = _a.fetchingShipmentGroups, shipmentGroups = _a.shipmentGroups;
+    var _a = useSelector(function (s) { return s.stateCartShipment; }), fetchingShipmentGroups = _a.fetchingShipmentGroups, shipmentGroups = _a.shipmentGroups;
     return (_jsxs(CartTabPanel, { tabId: tabIdShipment, children: [_jsx(CartNav, {}), _jsx(CartBody, { style: { paddingTop: '2rem' }, children: _jsxs("div", { className: 'merchi-cart-tab-content', children: [_jsx(CheckoutContainer, { textAlign: 'left', children: _jsx(InnerContainer, { width: 700, paddingBottom: '3rem', children: _jsx(ActiveFormShipmentAddressAndNotes, {}) }) }), fetchingShipmentGroups ? (_jsx(CheckoutContainer, { children: _jsxs(InnerContainer, { width: 700, children: [_jsx(LoadingTemplateSm, {}), _jsx("p", { children: "Fetching shipping options." })] }) })) : (_jsxs(_Fragment, { children: [_jsx(CheckoutContainer, { textAlign: 'left', children: _jsx(InnerContainer, { paddingBottom: '1rem', width: 700, children: _jsx(Title, { icon: faTruck, title: shipmentGroups.length > 1 ?
                                                 'Select shipment methods'
                                                 : shipmentGroups.length ?

package/lib/slices/sliceCart.js

@@ -174,8 +174,7 @@ export var sliceCart = createSlice({
             state.cart.client = action.payload;
         },
         setDomainId: function (state, action) {
-            var domainId = action.payload.domainId;
-            state.domainId = domainId;
+            state.domainId = action.payload.domainId;
         },
         toggleCartOpen: function (state) {
             state.modalCartOpen = !state.modalCartOpen;

package/lib/slices/sliceCartAlert.js

@@ -1,3 +1,14 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 import { createSlice } from '@reduxjs/toolkit';
 import { faCheckCircle, faExclamationTriangle, faInfoCircle } from '@fortawesome/free-solid-svg-icons';
 export var sliceCartAlert = createSlice({
@@ -6,7 +17,7 @@ export var sliceCartAlert = createSlice({
             icon: faInfoCircle,
             message: '',
             show: false,
-            Title: '',
+            title: '',
             type: 'info',
         },
     },
@@ -19,16 +30,10 @@ export var sliceCartAlert = createSlice({
             state.alert = action.payload;
         },
         showAlertDanger: function (state, action) {
-            state.alert = action.payload;
-            state.alert.icon = faExclamationTriangle;
-            state.alert.show = true;
-            state.alert.type = 'danger';
+            state.alert = __assign(__assign({}, action.payload), { icon: faExclamationTriangle, show: true, type: 'danger' });
         },
         showAlertSuccess: function (state, action) {
-            state.alert = action.payload;
-            state.alert.icon = faCheckCircle;
-            state.alert.show = true;
-            state.alert.type = 'success';
+            state.alert = __assign(__assign({}, action.payload), { icon: faCheckCircle, show: true, type: 'success' });
         },
     },
 });

package/lib/store.js

@@ -149,6 +149,7 @@ function cartAndCookie() {
         var domainId, cart;
         return __generator(this, function (_a) {
             domainId = getStore().stateCart.domainId;
+            console.log(domainId, 'what is this thing in cartAndCookie');
             cart = makeCart({ domain: { id: domainId } }, true);
             return [2 /*return*/, cart.create({ embed: cartEmbed })
                     .then(function (c) {
@@ -162,7 +163,7 @@ function cartAndCookie() {
                 })
                     .catch(function (e) {
                     batch(function () {
-                        alertError(e.errorMessage);
+                        alertError(e.errorMessage || 'Unable to fetch cart.');
                         dispatch(fetchCartError());
                     });
                 })];
@@ -489,7 +490,6 @@ export function getMerchiCart(domainId) {
                 case 0: return [4 /*yield*/, getMerchiCartCookie(domainId)];
                 case 1:
                     cartIdAndToken = _a.sent();
-                    dispatch(setDomainId({ cartIdAndToken: cartIdAndToken, domainId: domainId }));
                     if (cartIdAndToken) {
                         getCart(cartIdAndToken);
                     }
@@ -541,6 +541,7 @@ export function doCartComplete() {
     });
 }
 export function initMerchiCart(domainId) {
+    dispatch(setDomainId(domainId));
     getMerchiCart(domainId);
     if (window && window !== undefined) {
         window.getCart = function () { return getMerchiCart(domainId); };

package/lib/styles/globals.css

@@ -0,0 +1,197 @@
+.merchi-cart-body {
+  display: block;
+  min-height: 100px;
+  height: 450px;
+}
+
+.merchi-loading-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: var(--bs-height-md, 100px);
+}
+
+.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;
+  padding: 1rem;
+}
+
+.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-clear-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.merchi-cart-clear-text {
+  font-size: 16px;
+  margin-top: 3rem;
+  margin-bottom: 3rem;
+}
+
+.merchi-cart-item-table-head {
+  border: none;
+  background-color: #f8f9fa;
+  padding: 0.5rem;
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+  text-transform: uppercase;
+}
+
+.merchi-cart-item-table-head-right {
+  border: none;
+  background-color: #f8f9fa;
+  padding: 0.5rem;
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+  text-transform: uppercase;
+  text-align: right;
+}
+
+.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;
+  padding: 0.5rem 1rem;
+}
+
+.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 {
+  border-bottom: 1px solid #dee2e6;
+}
+
+.merchi-nav-tabs .merchi-nav-item {
+  margin-bottom: -1px;
+}
+
+.merchi-nav-tabs .merchi-nav-link {
+  border: 1px solid transparent;
+  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: #007bff;
+}
+
+.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;
+}
+
+.btn-close {
+  background: transparent;
+  border: 0px;
+  cursor: pointer;
+  color: inherit;
+  float: right;
+}
+
+/*# sourceMappingURL=globals.css.map */

package/lib/styles/globals.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../../src/styles/globals.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAGF;AACA;EACE;EACA;;;AAGF;EACE;IACE;;EAGF;IACE;IACA;;EAGF;IACE;IACA;;;AAIJ;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;AAAA;EAEE;EACA;EACA;;;AAGF;EACE;;;AAGF;AAAA;EAEE;EACA;;;AAGF;EACE;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA","file":"globals.css"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "merchi_cart",
-  "version": "0.0.2",
+  "version": "0.0.3-a",
   "description": "Merchi's cart",
   "main": "lib/index.js",
   "module": "src/index.tsx",
@@ -8,8 +8,9 @@
   "typings": "index.d.ts",
   "type": "module",
   "scripts": {
-    "build": "tsc && yarn copy-assets",
-    "copy-assets": "cp -r ./assets lib",
+    "build": "tsc && npm run sass && yarn copy-assets",
+    "copy-assets": "copyfiles -u 1 src/assets/**/* lib",
+    "sass": "sass src/styles/globals.scss lib/styles/globals.css",
     "start": "react-scripts start",
     "test": "react-scripts test",
     "eject": "react-scripts eject"
@@ -74,6 +75,7 @@
     "@stripe/stripe-js": "^2.1.6",
     "@types/moment-timezone": "^0.5.30",
     "@types/node": "^20.11.5",
+    "babel-plugin-import-css-to-jss": "^3.1.1",
     "browser-or-node": "^3.0.0-pre.0",
     "eslint": "8.47.0",
     "eslint-config-next": "13.4.16",
@@ -94,6 +96,7 @@
     "react-transition": "^1.0.3",
     "react-transition-group": "^4.4.5",
     "reflect-metadata": "^0.2.1",
+    "sass": "^1.70.0",
     "typescript": "^5.1.6"
   }
 }