749 lines
36 KiB
JavaScript
749 lines
36 KiB
JavaScript
"use strict";
|
|
(self["webpackChunkdropship_store"] = self["webpackChunkdropship_store"] || []).push([["cart-page-stories"],{
|
|
|
|
/***/ "./app/cart/page.stories.tsx"
|
|
/*!***********************************!*\
|
|
!*** ./app/cart/page.stories.tsx ***!
|
|
\***********************************/
|
|
(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
|
|
|
|
__webpack_require__.r(__webpack_exports__);
|
|
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
|
|
/* harmony export */ Default: () => (/* binding */ Default),
|
|
/* harmony export */ __namedExportsOrder: () => (/* binding */ __namedExportsOrder),
|
|
/* harmony export */ "default": () => (__WEBPACK_DEFAULT_EXPORT__)
|
|
/* harmony export */ });
|
|
/* harmony import */ var _page__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./page */ "./app/cart/page.tsx");
|
|
|
|
var meta = {
|
|
title: "Pages/cart",
|
|
component: _page__WEBPACK_IMPORTED_MODULE_0__["default"]
|
|
};
|
|
/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (meta);
|
|
var Default = {
|
|
render: function render() {
|
|
return /*#__PURE__*/React.createElement(_page__WEBPACK_IMPORTED_MODULE_0__["default"], null);
|
|
}
|
|
};
|
|
;
|
|
const __namedExportsOrder = ["Default"];
|
|
Default.parameters = {
|
|
...Default.parameters,
|
|
docs: {
|
|
...Default.parameters?.docs,
|
|
source: {
|
|
originalSource: "{\n render: () => <Page />\n}",
|
|
...Default.parameters?.docs?.source
|
|
}
|
|
}
|
|
};
|
|
|
|
/***/ },
|
|
|
|
/***/ "./app/cart/page.tsx"
|
|
/*!***************************!*\
|
|
!*** ./app/cart/page.tsx ***!
|
|
\***************************/
|
|
(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
|
|
|
|
__webpack_require__.r(__webpack_exports__);
|
|
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
|
|
/* harmony export */ "default": () => (/* binding */ CartPage)
|
|
/* harmony export */ });
|
|
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "./node_modules/react/index.js");
|
|
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
|
|
/* harmony import */ var next_auth_react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! next-auth/react */ "./node_modules/next-auth/react/index.js");
|
|
/* harmony import */ var next_auth_react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(next_auth_react__WEBPACK_IMPORTED_MODULE_1__);
|
|
/* harmony import */ var _components_DesktopHeader__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../components/DesktopHeader */ "./components/DesktopHeader.tsx");
|
|
/* harmony import */ var _components_MobileHeader__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../components/MobileHeader */ "./components/MobileHeader.tsx");
|
|
/* harmony import */ var _components_Footer__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../components/Footer */ "./components/Footer.tsx");
|
|
"use client";
|
|
|
|
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
|
function _regenerator() { /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/babel/babel/blob/main/packages/babel-helpers/LICENSE */ var e, t, r = "function" == typeof Symbol ? Symbol : {}, n = r.iterator || "@@iterator", o = r.toStringTag || "@@toStringTag"; function i(r, n, o, i) { var c = n && n.prototype instanceof Generator ? n : Generator, u = Object.create(c.prototype); return _regeneratorDefine2(u, "_invoke", function (r, n, o) { var i, c, u, f = 0, p = o || [], y = !1, G = { p: 0, n: 0, v: e, a: d, f: d.bind(e, 4), d: function d(t, r) { return i = t, c = 0, u = e, G.n = r, a; } }; function d(r, n) { for (c = r, u = n, t = 0; !y && f && !o && t < p.length; t++) { var o, i = p[t], d = G.p, l = i[2]; r > 3 ? (o = l === n) && (u = i[(c = i[4]) ? 5 : (c = 3, 3)], i[4] = i[5] = e) : i[0] <= d && ((o = r < 2 && d < i[1]) ? (c = 0, G.v = n, G.n = i[1]) : d < l && (o = r < 3 || i[0] > n || n > l) && (i[4] = r, i[5] = n, G.n = l, c = 0)); } if (o || r > 1) return a; throw y = !0, n; } return function (o, p, l) { if (f > 1) throw TypeError("Generator is already running"); for (y && 1 === p && d(p, l), c = p, u = l; (t = c < 2 ? e : u) || !y;) { i || (c ? c < 3 ? (c > 1 && (G.n = -1), d(c, u)) : G.n = u : G.v = u); try { if (f = 2, i) { if (c || (o = "next"), t = i[o]) { if (!(t = t.call(i, u))) throw TypeError("iterator result is not an object"); if (!t.done) return t; u = t.value, c < 2 && (c = 0); } else 1 === c && (t = i["return"]) && t.call(i), c < 2 && (u = TypeError("The iterator does not provide a '" + o + "' method"), c = 1); i = e; } else if ((t = (y = G.n < 0) ? u : r.call(n, G)) !== a) break; } catch (t) { i = e, c = 1, u = t; } finally { f = 1; } } return { value: t, done: y }; }; }(r, o, i), !0), u; } var a = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} t = Object.getPrototypeOf; var c = [][n] ? t(t([][n]())) : (_regeneratorDefine2(t = {}, n, function () { return this; }), t), u = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(c); function f(e) { return Object.setPrototypeOf ? Object.setPrototypeOf(e, GeneratorFunctionPrototype) : (e.__proto__ = GeneratorFunctionPrototype, _regeneratorDefine2(e, o, "GeneratorFunction")), e.prototype = Object.create(u), e; } return GeneratorFunction.prototype = GeneratorFunctionPrototype, _regeneratorDefine2(u, "constructor", GeneratorFunctionPrototype), _regeneratorDefine2(GeneratorFunctionPrototype, "constructor", GeneratorFunction), GeneratorFunction.displayName = "GeneratorFunction", _regeneratorDefine2(GeneratorFunctionPrototype, o, "GeneratorFunction"), _regeneratorDefine2(u), _regeneratorDefine2(u, o, "Generator"), _regeneratorDefine2(u, n, function () { return this; }), _regeneratorDefine2(u, "toString", function () { return "[object Generator]"; }), (_regenerator = function _regenerator() { return { w: i, m: f }; })(); }
|
|
function _regeneratorDefine2(e, r, n, t) { var i = Object.defineProperty; try { i({}, "", {}); } catch (e) { i = 0; } _regeneratorDefine2 = function _regeneratorDefine(e, r, n, t) { function o(r, n) { _regeneratorDefine2(e, r, function (e) { return this._invoke(r, n, e); }); } r ? i ? i(e, r, { value: n, enumerable: !t, configurable: !t, writable: !t }) : e[r] = n : (o("next", 0), o("throw", 1), o("return", 2)); }, _regeneratorDefine2(e, r, n, t); }
|
|
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
|
|
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
|
|
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
|
|
function asyncGeneratorStep(n, t, e, r, o, a, c) { try { var i = n[a](c), u = i.value; } catch (n) { return void e(n); } i.done ? t(u) : Promise.resolve(u).then(r, o); }
|
|
function _asyncToGenerator(n) { return function () { var t = this, e = arguments; return new Promise(function (r, o) { var a = n.apply(t, e); function _next(n) { asyncGeneratorStep(a, r, o, _next, _throw, "next", n); } function _throw(n) { asyncGeneratorStep(a, r, o, _next, _throw, "throw", n); } _next(void 0); }); }; }
|
|
function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
|
|
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
|
|
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
|
|
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
|
|
function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
|
|
|
|
|
|
|
|
|
|
|
|
function CartPage() {
|
|
var _cart$items$reduce;
|
|
var _useState = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)("storeshifted"),
|
|
_useState2 = _slicedToArray(_useState, 2),
|
|
slug = _useState2[0],
|
|
setSlug = _useState2[1];
|
|
var _useState3 = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(null),
|
|
_useState4 = _slicedToArray(_useState3, 2),
|
|
cart = _useState4[0],
|
|
setCart = _useState4[1];
|
|
var _useState5 = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(false),
|
|
_useState6 = _slicedToArray(_useState5, 2),
|
|
loading = _useState6[0],
|
|
setLoading = _useState6[1];
|
|
var _useState7 = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(""),
|
|
_useState8 = _slicedToArray(_useState7, 2),
|
|
message = _useState8[0],
|
|
setMessage = _useState8[1];
|
|
var _useSession = (0,next_auth_react__WEBPACK_IMPORTED_MODULE_1__.useSession)(),
|
|
session = _useSession.data,
|
|
status = _useSession.status;
|
|
var isAuthenticated = status === "authenticated";
|
|
var _useState9 = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)({
|
|
name: "",
|
|
street1: "",
|
|
city: "",
|
|
state: "",
|
|
zip: "",
|
|
country: "US",
|
|
phone: ""
|
|
}),
|
|
_useState0 = _slicedToArray(_useState9, 2),
|
|
addressTo = _useState0[0],
|
|
setAddressTo = _useState0[1];
|
|
(0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(function () {
|
|
var stored = window.localStorage.getItem("connectStoreSlug");
|
|
if (stored) setSlug(stored);
|
|
}, []);
|
|
function loadCart(_x) {
|
|
return _loadCart.apply(this, arguments);
|
|
}
|
|
function _loadCart() {
|
|
_loadCart = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee(currentSlug) {
|
|
var res, data, _t;
|
|
return _regenerator().w(function (_context) {
|
|
while (1) switch (_context.p = _context.n) {
|
|
case 0:
|
|
setLoading(true);
|
|
setMessage("");
|
|
_context.p = 1;
|
|
_context.n = 2;
|
|
return fetch("/api/cart/get?slug=".concat(currentSlug));
|
|
case 2:
|
|
res = _context.v;
|
|
_context.n = 3;
|
|
return res.json();
|
|
case 3:
|
|
data = _context.v;
|
|
if (res.ok) {
|
|
_context.n = 4;
|
|
break;
|
|
}
|
|
throw new Error(data.error || "Failed to load cart");
|
|
case 4:
|
|
setCart(data.cart);
|
|
_context.n = 6;
|
|
break;
|
|
case 5:
|
|
_context.p = 5;
|
|
_t = _context.v;
|
|
setMessage(_t.message || "Failed to load cart.");
|
|
case 6:
|
|
_context.p = 6;
|
|
setLoading(false);
|
|
return _context.f(6);
|
|
case 7:
|
|
return _context.a(2);
|
|
}
|
|
}, _callee, null, [[1, 5, 6, 7]]);
|
|
}));
|
|
return _loadCart.apply(this, arguments);
|
|
}
|
|
(0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(function () {
|
|
loadCart(slug);
|
|
}, [slug]);
|
|
function updateQty(_x2, _x3) {
|
|
return _updateQty.apply(this, arguments);
|
|
}
|
|
function _updateQty() {
|
|
_updateQty = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee2(itemId, quantity) {
|
|
var res, data, _t2;
|
|
return _regenerator().w(function (_context2) {
|
|
while (1) switch (_context2.p = _context2.n) {
|
|
case 0:
|
|
setLoading(true);
|
|
_context2.p = 1;
|
|
_context2.n = 2;
|
|
return fetch("/api/cart/update", {
|
|
method: "POST",
|
|
headers: {
|
|
"Content-Type": "application/json"
|
|
},
|
|
body: JSON.stringify({
|
|
itemId: itemId,
|
|
quantity: quantity
|
|
})
|
|
});
|
|
case 2:
|
|
res = _context2.v;
|
|
_context2.n = 3;
|
|
return res.json();
|
|
case 3:
|
|
data = _context2.v;
|
|
if (res.ok) {
|
|
_context2.n = 4;
|
|
break;
|
|
}
|
|
throw new Error(data.error || "Failed to update cart");
|
|
case 4:
|
|
_context2.n = 5;
|
|
return loadCart(slug);
|
|
case 5:
|
|
_context2.n = 7;
|
|
break;
|
|
case 6:
|
|
_context2.p = 6;
|
|
_t2 = _context2.v;
|
|
setMessage(_t2.message || "Failed to update cart.");
|
|
case 7:
|
|
_context2.p = 7;
|
|
setLoading(false);
|
|
return _context2.f(7);
|
|
case 8:
|
|
return _context2.a(2);
|
|
}
|
|
}, _callee2, null, [[1, 6, 7, 8]]);
|
|
}));
|
|
return _updateQty.apply(this, arguments);
|
|
}
|
|
function removeItem(_x4) {
|
|
return _removeItem.apply(this, arguments);
|
|
}
|
|
function _removeItem() {
|
|
_removeItem = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee3(itemId) {
|
|
var res, data, _t3;
|
|
return _regenerator().w(function (_context3) {
|
|
while (1) switch (_context3.p = _context3.n) {
|
|
case 0:
|
|
setLoading(true);
|
|
_context3.p = 1;
|
|
_context3.n = 2;
|
|
return fetch("/api/cart/remove", {
|
|
method: "POST",
|
|
headers: {
|
|
"Content-Type": "application/json"
|
|
},
|
|
body: JSON.stringify({
|
|
itemId: itemId
|
|
})
|
|
});
|
|
case 2:
|
|
res = _context3.v;
|
|
_context3.n = 3;
|
|
return res.json();
|
|
case 3:
|
|
data = _context3.v;
|
|
if (res.ok) {
|
|
_context3.n = 4;
|
|
break;
|
|
}
|
|
throw new Error(data.error || "Failed to remove item");
|
|
case 4:
|
|
_context3.n = 5;
|
|
return loadCart(slug);
|
|
case 5:
|
|
_context3.n = 7;
|
|
break;
|
|
case 6:
|
|
_context3.p = 6;
|
|
_t3 = _context3.v;
|
|
setMessage(_t3.message || "Failed to remove item.");
|
|
case 7:
|
|
_context3.p = 7;
|
|
setLoading(false);
|
|
return _context3.f(7);
|
|
case 8:
|
|
return _context3.a(2);
|
|
}
|
|
}, _callee3, null, [[1, 6, 7, 8]]);
|
|
}));
|
|
return _removeItem.apply(this, arguments);
|
|
}
|
|
function checkout() {
|
|
return _checkout.apply(this, arguments);
|
|
}
|
|
function _checkout() {
|
|
_checkout = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee4() {
|
|
var res, data, _t4;
|
|
return _regenerator().w(function (_context4) {
|
|
while (1) switch (_context4.p = _context4.n) {
|
|
case 0:
|
|
setLoading(true);
|
|
setMessage("");
|
|
_context4.p = 1;
|
|
_context4.n = 2;
|
|
return fetch("/api/cart/checkout", {
|
|
method: "POST",
|
|
headers: {
|
|
"Content-Type": "application/json"
|
|
},
|
|
body: JSON.stringify({
|
|
slug: slug,
|
|
shippingAddress: addressTo
|
|
})
|
|
});
|
|
case 2:
|
|
res = _context4.v;
|
|
_context4.n = 3;
|
|
return res.json();
|
|
case 3:
|
|
data = _context4.v;
|
|
if (res.ok) {
|
|
_context4.n = 4;
|
|
break;
|
|
}
|
|
throw new Error(data.error || "Checkout failed");
|
|
case 4:
|
|
window.location.href = data.url;
|
|
_context4.n = 6;
|
|
break;
|
|
case 5:
|
|
_context4.p = 5;
|
|
_t4 = _context4.v;
|
|
setMessage(_t4.message || "Checkout failed.");
|
|
case 6:
|
|
_context4.p = 6;
|
|
setLoading(false);
|
|
return _context4.f(6);
|
|
case 7:
|
|
return _context4.a(2);
|
|
}
|
|
}, _callee4, null, [[1, 5, 6, 7]]);
|
|
}));
|
|
return _checkout.apply(this, arguments);
|
|
}
|
|
var total = (_cart$items$reduce = cart === null || cart === void 0 ? void 0 : cart.items.reduce(function (sum, item) {
|
|
return sum + item.unitAmount * item.quantity;
|
|
}, 0)) !== null && _cart$items$reduce !== void 0 ? _cart$items$reduce : 0;
|
|
return /*#__PURE__*/React.createElement("main", {
|
|
className: "cart-page"
|
|
}, /*#__PURE__*/React.createElement(_components_DesktopHeader__WEBPACK_IMPORTED_MODULE_2__["default"], null), /*#__PURE__*/React.createElement(_components_MobileHeader__WEBPACK_IMPORTED_MODULE_3__["default"], null), /*#__PURE__*/React.createElement("section", {
|
|
className: "section"
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: "container cart-page__inner"
|
|
}, /*#__PURE__*/React.createElement("h1", {
|
|
className: "page-title"
|
|
}, "Cart"), isAuthenticated ? /*#__PURE__*/React.createElement("p", {
|
|
className: "connect-muted"
|
|
}, "Signed in as ", session.user.email) : /*#__PURE__*/React.createElement("p", {
|
|
className: "connect-muted"
|
|
}, "Sign in to save your cart across devices. ", /*#__PURE__*/React.createElement("a", {
|
|
href: "/login"
|
|
}, "Sign in")), message ? /*#__PURE__*/React.createElement("div", {
|
|
className: "connect-message"
|
|
}, message) : null, /*#__PURE__*/React.createElement("div", {
|
|
className: "cart-list"
|
|
}, cart === null || cart === void 0 ? void 0 : cart.items.map(function (item) {
|
|
return /*#__PURE__*/React.createElement("div", {
|
|
key: item.id,
|
|
className: "cart-item"
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: "cart-item__info"
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: "cart-item__name"
|
|
}, item.name), /*#__PURE__*/React.createElement("div", {
|
|
className: "cart-item__price"
|
|
}, (item.unitAmount / 100).toFixed(2), " ", item.currency.toUpperCase())), /*#__PURE__*/React.createElement("div", {
|
|
className: "cart-item__actions"
|
|
}, /*#__PURE__*/React.createElement("input", {
|
|
type: "number",
|
|
min: 1,
|
|
value: item.quantity,
|
|
onChange: function onChange(e) {
|
|
return updateQty(item.id, Number(e.target.value));
|
|
}
|
|
}), /*#__PURE__*/React.createElement("button", {
|
|
className: "btn btn--ghost",
|
|
onClick: function onClick() {
|
|
return removeItem(item.id);
|
|
}
|
|
}, "Remove")));
|
|
}), !(cart !== null && cart !== void 0 && cart.items.length) ? /*#__PURE__*/React.createElement("div", {
|
|
className: "storefront-muted"
|
|
}, "Your cart is empty.") : null), /*#__PURE__*/React.createElement("div", {
|
|
className: "cart-shipping"
|
|
}, /*#__PURE__*/React.createElement("h2", null, "Shipping"), /*#__PURE__*/React.createElement("div", {
|
|
className: "cart-shipping__grid"
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: "cart-shipping__card"
|
|
}, /*#__PURE__*/React.createElement("h3", null, "Ship To"), /*#__PURE__*/React.createElement("input", {
|
|
value: addressTo.name,
|
|
onChange: function onChange(e) {
|
|
return setAddressTo(_objectSpread(_objectSpread({}, addressTo), {}, {
|
|
name: e.target.value
|
|
}));
|
|
},
|
|
placeholder: "Name"
|
|
}), /*#__PURE__*/React.createElement("input", {
|
|
value: addressTo.street1,
|
|
onChange: function onChange(e) {
|
|
return setAddressTo(_objectSpread(_objectSpread({}, addressTo), {}, {
|
|
street1: e.target.value
|
|
}));
|
|
},
|
|
placeholder: "Street"
|
|
}), /*#__PURE__*/React.createElement("input", {
|
|
value: addressTo.city,
|
|
onChange: function onChange(e) {
|
|
return setAddressTo(_objectSpread(_objectSpread({}, addressTo), {}, {
|
|
city: e.target.value
|
|
}));
|
|
},
|
|
placeholder: "City"
|
|
}), /*#__PURE__*/React.createElement("input", {
|
|
value: addressTo.state,
|
|
onChange: function onChange(e) {
|
|
return setAddressTo(_objectSpread(_objectSpread({}, addressTo), {}, {
|
|
state: e.target.value
|
|
}));
|
|
},
|
|
placeholder: "State/Province"
|
|
}), /*#__PURE__*/React.createElement("input", {
|
|
value: addressTo.zip,
|
|
onChange: function onChange(e) {
|
|
return setAddressTo(_objectSpread(_objectSpread({}, addressTo), {}, {
|
|
zip: e.target.value
|
|
}));
|
|
},
|
|
placeholder: "Postal Code"
|
|
}), /*#__PURE__*/React.createElement("input", {
|
|
value: addressTo.country,
|
|
onChange: function onChange(e) {
|
|
return setAddressTo(_objectSpread(_objectSpread({}, addressTo), {}, {
|
|
country: e.target.value
|
|
}));
|
|
},
|
|
placeholder: "Country"
|
|
})))), /*#__PURE__*/React.createElement("div", {
|
|
className: "cart-summary"
|
|
}, /*#__PURE__*/React.createElement("div", null, "Total: ", (total / 100).toFixed(2), " USD"), /*#__PURE__*/React.createElement("button", {
|
|
className: "btn",
|
|
onClick: checkout,
|
|
disabled: loading || !(cart !== null && cart !== void 0 && cart.items.length)
|
|
}, "Checkout")))), /*#__PURE__*/React.createElement(_components_Footer__WEBPACK_IMPORTED_MODULE_4__["default"], null));
|
|
}
|
|
;
|
|
CartPage.__docgenInfo = {
|
|
"description": "",
|
|
"methods": [],
|
|
"displayName": "CartPage"
|
|
};
|
|
|
|
/***/ },
|
|
|
|
/***/ "./components/DesktopHeader.tsx"
|
|
/*!**************************************!*\
|
|
!*** ./components/DesktopHeader.tsx ***!
|
|
\**************************************/
|
|
(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
|
|
|
|
__webpack_require__.r(__webpack_exports__);
|
|
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
|
|
/* harmony export */ "default": () => (/* binding */ Header)
|
|
/* harmony export */ });
|
|
/* harmony import */ var next_link__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! next/link */ "./.storybook/mocks/next-link.js");
|
|
/* harmony import */ var next_link__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(next_link__WEBPACK_IMPORTED_MODULE_0__);
|
|
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react */ "./node_modules/react/index.js");
|
|
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);
|
|
/* harmony import */ var _categories__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./categories */ "./components/categories.ts");
|
|
/* harmony import */ var next_auth_react__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! next-auth/react */ "./node_modules/next-auth/react/index.js");
|
|
/* harmony import */ var next_auth_react__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(next_auth_react__WEBPACK_IMPORTED_MODULE_3__);
|
|
"use client";
|
|
|
|
function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
|
|
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
|
|
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
|
|
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
|
|
function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
|
|
|
|
|
|
|
|
|
|
var MERCH_ICONS = ["/icons/merchicon1.png", "/icons/merchicon2.png", "/icons/merchicon3.png", "/icons/merchicon4.png"];
|
|
function Header(_ref) {
|
|
var _ref$forceScrolled = _ref.forceScrolled,
|
|
forceScrolled = _ref$forceScrolled === void 0 ? false : _ref$forceScrolled;
|
|
var _CATEGORIES = _slicedToArray(_categories__WEBPACK_IMPORTED_MODULE_2__.CATEGORIES, 8),
|
|
interior = _CATEGORIES[0],
|
|
exterior = _CATEGORIES[1],
|
|
lighting = _CATEGORIES[2],
|
|
audio = _CATEGORIES[3],
|
|
tools = _CATEGORIES[4],
|
|
suspension = _CATEGORIES[5],
|
|
performance = _CATEGORIES[6],
|
|
drivetrain = _CATEGORIES[7];
|
|
var left = [interior, tools, exterior, drivetrain];
|
|
var right = [lighting, suspension, audio, performance];
|
|
var _useState = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(0),
|
|
_useState2 = _slicedToArray(_useState, 2),
|
|
merchIndex = _useState2[0],
|
|
setMerchIndex = _useState2[1];
|
|
var _useState3 = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(forceScrolled),
|
|
_useState4 = _slicedToArray(_useState3, 2),
|
|
isScrolled = _useState4[0],
|
|
setIsScrolled = _useState4[1];
|
|
var _useSession = (0,next_auth_react__WEBPACK_IMPORTED_MODULE_3__.useSession)(),
|
|
session = _useSession.data,
|
|
status = _useSession.status;
|
|
var authLabel = status === "authenticated" ? session.user.name || session.user.email || "Account" : "Sign In / Sign Up";
|
|
(0,react__WEBPACK_IMPORTED_MODULE_1__.useEffect)(function () {
|
|
var t = setInterval(function () {
|
|
return setMerchIndex(function (i) {
|
|
return (i + 1) % MERCH_ICONS.length;
|
|
});
|
|
}, 3000);
|
|
return function () {
|
|
return clearInterval(t);
|
|
};
|
|
}, []);
|
|
(0,react__WEBPACK_IMPORTED_MODULE_1__.useEffect)(function () {
|
|
if (forceScrolled) {
|
|
setIsScrolled(true);
|
|
return;
|
|
}
|
|
var SHRINK_AT = 140;
|
|
var EXPAND_AT = 80;
|
|
var onScroll = function onScroll() {
|
|
if (window.innerWidth < 981) {
|
|
setIsScrolled(false);
|
|
return;
|
|
}
|
|
var y = window.scrollY;
|
|
setIsScrolled(function (prev) {
|
|
return prev ? y > EXPAND_AT : y > SHRINK_AT;
|
|
});
|
|
};
|
|
onScroll();
|
|
window.addEventListener("scroll", onScroll, {
|
|
passive: true
|
|
});
|
|
return function () {
|
|
return window.removeEventListener("scroll", onScroll);
|
|
};
|
|
}, [forceScrolled]);
|
|
(0,react__WEBPACK_IMPORTED_MODULE_1__.useEffect)(function () {
|
|
if (typeof window !== "undefined" && window.innerWidth >= 981) {
|
|
document.body.classList.toggle("so-header-scrolled", isScrolled);
|
|
return function () {
|
|
return document.body.classList.remove("so-header-scrolled");
|
|
};
|
|
}
|
|
return undefined;
|
|
}, [isScrolled]);
|
|
return /*#__PURE__*/React.createElement("header", {
|
|
className: "so-header".concat(isScrolled ? " so-header--scrolled" : "")
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: "container"
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: "so-header__top"
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: "so-header__left"
|
|
}, /*#__PURE__*/React.createElement((next_link__WEBPACK_IMPORTED_MODULE_0___default()), {
|
|
href: "/",
|
|
className: "so-home",
|
|
"aria-label": "Home"
|
|
}, /*#__PURE__*/React.createElement("span", {
|
|
className: "so-home__icon"
|
|
})), /*#__PURE__*/React.createElement((next_link__WEBPACK_IMPORTED_MODULE_0___default()), {
|
|
href: "/merch",
|
|
className: "so-merch",
|
|
"aria-label": "Merch"
|
|
}, MERCH_ICONS.map(function (src, i) {
|
|
return /*#__PURE__*/React.createElement("img", {
|
|
key: src,
|
|
src: src,
|
|
className: "so-merch__icon" + (i === merchIndex ? " so-merch__icon--active" : ""),
|
|
alt: ""
|
|
});
|
|
}))), /*#__PURE__*/React.createElement((next_link__WEBPACK_IMPORTED_MODULE_0___default()), {
|
|
href: "/",
|
|
className: "so-header__logo-wrap"
|
|
}, /*#__PURE__*/React.createElement("img", {
|
|
src: "/icons/logo.png",
|
|
className: "so-header__logo",
|
|
alt: "Shifted Offroad"
|
|
})), /*#__PURE__*/React.createElement("div", {
|
|
className: "so-header__right"
|
|
}, /*#__PURE__*/React.createElement((next_link__WEBPACK_IMPORTED_MODULE_0___default()), {
|
|
href: "/rewards",
|
|
className: "so-rewards"
|
|
}, /*#__PURE__*/React.createElement("span", {
|
|
className: "so-rewards__icon"
|
|
})), /*#__PURE__*/React.createElement((next_link__WEBPACK_IMPORTED_MODULE_0___default()), {
|
|
href: "/cart",
|
|
className: "so-cart"
|
|
}, /*#__PURE__*/React.createElement("span", {
|
|
className: "so-cart__icon"
|
|
})))), /*#__PURE__*/React.createElement("div", {
|
|
className: "so-header__categories"
|
|
}, /*#__PURE__*/React.createElement("nav", {
|
|
className: "so-header__nav so-header__nav--left"
|
|
}, left.map(function (c) {
|
|
return /*#__PURE__*/React.createElement((next_link__WEBPACK_IMPORTED_MODULE_0___default()), {
|
|
key: c,
|
|
href: "/category/".concat((0,_categories__WEBPACK_IMPORTED_MODULE_2__.slugifyCategory)(c)),
|
|
className: "so-navitem"
|
|
}, c);
|
|
})), /*#__PURE__*/React.createElement("nav", {
|
|
className: "so-header__nav so-header__nav--right"
|
|
}, right.map(function (c) {
|
|
return /*#__PURE__*/React.createElement((next_link__WEBPACK_IMPORTED_MODULE_0___default()), {
|
|
key: c,
|
|
href: "/category/".concat((0,_categories__WEBPACK_IMPORTED_MODULE_2__.slugifyCategory)(c)),
|
|
className: "so-navitem"
|
|
}, c);
|
|
})))));
|
|
}
|
|
;
|
|
Header.__docgenInfo = {
|
|
"description": "",
|
|
"methods": [],
|
|
"displayName": "Header",
|
|
"props": {
|
|
"forceScrolled": {
|
|
"required": false,
|
|
"tsType": {
|
|
"name": "boolean"
|
|
},
|
|
"description": "",
|
|
"defaultValue": {
|
|
"value": "false",
|
|
"computed": false
|
|
}
|
|
}
|
|
}
|
|
};
|
|
|
|
/***/ },
|
|
|
|
/***/ "./components/Footer.tsx"
|
|
/*!*******************************!*\
|
|
!*** ./components/Footer.tsx ***!
|
|
\*******************************/
|
|
(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
|
|
|
|
__webpack_require__.r(__webpack_exports__);
|
|
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
|
|
/* harmony export */ "default": () => (/* binding */ Footer)
|
|
/* harmony export */ });
|
|
/* harmony import */ var next_link__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! next/link */ "./.storybook/mocks/next-link.js");
|
|
/* harmony import */ var next_link__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(next_link__WEBPACK_IMPORTED_MODULE_0__);
|
|
/* harmony import */ var _categories__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./categories */ "./components/categories.ts");
|
|
|
|
|
|
function Footer() {
|
|
return /*#__PURE__*/React.createElement("footer", {
|
|
className: "footer"
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: "container footer__inner"
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: "footer__brand"
|
|
}, /*#__PURE__*/React.createElement("img", {
|
|
src: "/icons/logo.png",
|
|
alt: "Shifted Offroad",
|
|
style: {
|
|
height: 54,
|
|
width: "auto",
|
|
display: "block",
|
|
marginBottom: 10
|
|
},
|
|
decoding: "async",
|
|
loading: "lazy"
|
|
}), /*#__PURE__*/React.createElement("div", {
|
|
style: {
|
|
opacity: 0.9,
|
|
fontSize: 13,
|
|
lineHeight: 1.65
|
|
}
|
|
}, "Shifted Offroad (Kelowna, BC) is an offroad parts and accessories company built around real fitment, honest advice, and clean installs. We focus on parts that work as advertised, pair well with common builds, and hold up to the conditions that actually get trucks and SUVs used the way they should be."), /*#__PURE__*/React.createElement("div", {
|
|
style: {
|
|
opacity: 0.9,
|
|
fontSize: 13,
|
|
lineHeight: 1.65,
|
|
marginTop: 10
|
|
}
|
|
}, "Our catalog blends trail-ready essentials with smart upgrades that improve capability without compromising daily drivability. Whether you are dialing in stance, lighting, recovery, or cargo utility, we help you choose components that fit your vehicle and your goals."), /*#__PURE__*/React.createElement("div", {
|
|
style: {
|
|
opacity: 0.9,
|
|
fontSize: 13,
|
|
lineHeight: 1.65,
|
|
marginTop: 10
|
|
}
|
|
}, "We are easy to reach, fast to respond, and focused on getting it right the first time. The goal is a simple, confident purchase and a setup you are proud to run.")), /*#__PURE__*/React.createElement("div", {
|
|
className: "footer__col footer__col--categories"
|
|
}, /*#__PURE__*/React.createElement("h4", null, "Categories"), _categories__WEBPACK_IMPORTED_MODULE_1__.CATEGORIES.map(function (c) {
|
|
return /*#__PURE__*/React.createElement((next_link__WEBPACK_IMPORTED_MODULE_0___default()), {
|
|
key: c,
|
|
href: "/category/".concat((0,_categories__WEBPACK_IMPORTED_MODULE_1__.slugifyCategory)(c))
|
|
}, c);
|
|
})), /*#__PURE__*/React.createElement("div", {
|
|
className: "footer__col footer__col--support"
|
|
}, /*#__PURE__*/React.createElement("h4", null, "Support"), /*#__PURE__*/React.createElement((next_link__WEBPACK_IMPORTED_MODULE_0___default()), {
|
|
href: "/contact"
|
|
}, "Contact"), /*#__PURE__*/React.createElement((next_link__WEBPACK_IMPORTED_MODULE_0___default()), {
|
|
href: "/legal/faq"
|
|
}, "FAQ"), /*#__PURE__*/React.createElement((next_link__WEBPACK_IMPORTED_MODULE_0___default()), {
|
|
href: "/legal/warranty"
|
|
}, "Warranty")), /*#__PURE__*/React.createElement("div", {
|
|
className: "footer__col footer__col--legal"
|
|
}, /*#__PURE__*/React.createElement("h4", null, "Legal"), /*#__PURE__*/React.createElement((next_link__WEBPACK_IMPORTED_MODULE_0___default()), {
|
|
href: "/legal/privacy-policy"
|
|
}, "Privacy Policy"), /*#__PURE__*/React.createElement((next_link__WEBPACK_IMPORTED_MODULE_0___default()), {
|
|
href: "/legal/terms-of-service"
|
|
}, "Terms of Service"), /*#__PURE__*/React.createElement((next_link__WEBPACK_IMPORTED_MODULE_0___default()), {
|
|
href: "/legal/refund-policy"
|
|
}, "Refund Policy"), /*#__PURE__*/React.createElement((next_link__WEBPACK_IMPORTED_MODULE_0___default()), {
|
|
href: "/legal/cookies"
|
|
}, "Cookies"))), /*#__PURE__*/React.createElement("div", {
|
|
className: "footer__payments"
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: "container footer__payments-inner"
|
|
}, /*#__PURE__*/React.createElement("div", null, "Secure checkout powered by trusted processors."), /*#__PURE__*/React.createElement("div", {
|
|
className: "footer__payment-logos"
|
|
}, /*#__PURE__*/React.createElement("img", {
|
|
src: "/assets/payments/visa.svg",
|
|
alt: "Visa",
|
|
loading: "lazy",
|
|
decoding: "async"
|
|
}), /*#__PURE__*/React.createElement("img", {
|
|
src: "/assets/payments/visa-alt.svg",
|
|
alt: "Visa",
|
|
loading: "lazy",
|
|
decoding: "async"
|
|
}), /*#__PURE__*/React.createElement("img", {
|
|
src: "/assets/payments/stripe.svg",
|
|
alt: "Stripe",
|
|
loading: "lazy",
|
|
decoding: "async"
|
|
}), /*#__PURE__*/React.createElement("img", {
|
|
src: "/assets/payments/paypal.svg",
|
|
alt: "PayPal",
|
|
loading: "lazy",
|
|
decoding: "async"
|
|
})))));
|
|
}
|
|
;
|
|
Footer.__docgenInfo = {
|
|
"description": "",
|
|
"methods": [],
|
|
"displayName": "Footer"
|
|
};
|
|
|
|
/***/ }
|
|
|
|
}]);
|
|
//# sourceMappingURL=cart-page-stories.iframe.bundle.js.map
|