@websolutespa/bom-mixer-checkout 1.8.0

package/dist/cjs/index.js

@@ -0,0 +1,3298 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var bomMixerHooks = require('@websolutespa/bom-mixer-hooks');
+var bomMixerIcons = require('@websolutespa/bom-mixer-icons');
+var bomMixerUi = require('@websolutespa/bom-mixer-ui');
+var react = require('react');
+var zustand = require('zustand');
+var middleware = require('zustand/middleware');
+var bomMixerForms = require('@websolutespa/bom-mixer-forms');
+var bomMixerAuth = require('@websolutespa/bom-mixer-auth');
+var bomCore = require('@websolutespa/bom-core');
+var styled = require('styled-components');
+var bomMixerModels = require('@websolutespa/bom-mixer-models');
+var bomMixerStore = require('@websolutespa/bom-mixer-store');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var styled__default = /*#__PURE__*/_interopDefault(styled);
+
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+/* global Reflect, Promise, SuppressedError, Symbol */
+
+function __rest(s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+}
+function __awaiter(thisArg, _arguments, P, generator) {
+  function adopt(value) {
+    return value instanceof P ? value : new P(function (resolve) {
+      resolve(value);
+    });
+  }
+  return new (P || (P = Promise))(function (resolve, reject) {
+    function fulfilled(value) {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    }
+    function rejected(value) {
+      try {
+        step(generator["throw"](value));
+      } catch (e) {
+        reject(e);
+      }
+    }
+    function step(result) {
+      result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
+    }
+    step((generator = generator.apply(thisArg, _arguments || [])).next());
+  });
+}
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+  var e = new Error(message);
+  return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
+
+const createCartStore = _a => {
+  var {
+      storage
+    } = _a,
+    initialProps = __rest(_a, ["storage"]);
+  const DEFAULT_PROPS = {
+    hydrated: false,
+    items: []
+  };
+  const useStore = zustand.createStore()(middleware.persist((set, get) => Object.assign(Object.assign(Object.assign({}, DEFAULT_PROPS), initialProps), {
+    actions: {
+      count: () => {
+        return get().items.length;
+      },
+      has: item => {
+        return get().items.find(x => x.schema === item.schema && x.id === item.id) != null;
+      },
+      find: item => {
+        return get().items.find(x => x.schema === item.schema && x.id === item.id);
+      },
+      add: function (item, qty) {
+        if (qty === void 0) {
+          qty = 1;
+        }
+        return set(state => {
+          const items = state.items.slice();
+          const index = items.reduce((p, c, i) => c.schema === item.schema && c.id === item.id ? i : p, -1);
+          if (index === -1) {
+            items.push(Object.assign(Object.assign({}, item), {
+              qty
+            }));
+          }
+          return {
+            items
+          };
+        });
+      },
+      remove: item => {
+        let count = 0;
+        set(state => {
+          const items = state.items.slice();
+          const index = items.reduce((p, c, i) => c.schema === item.schema && c.id === item.id ? i : p, -1);
+          if (index !== -1) {
+            items.splice(index, 1);
+          }
+          count = items.length;
+          return {
+            items
+          };
+        });
+        return count;
+      },
+      update: item => set(state => {
+        const items = state.items.slice();
+        const index = items.reduce((p, c, i) => c.schema === item.schema && c.id === item.id ? i : p, -1);
+        if (index !== -1) {
+          items[index] = item;
+        }
+        return {
+          items
+        };
+      }),
+      clear: () => set(state => ({
+        items: []
+      }))
+    }
+  }), {
+    name: 'cart',
+    storage: middleware.createJSONStorage(() => storage || localStorage),
+    /*
+    getStorage: () => {
+      // console.log('useCart.getStorage');
+      return storage || localStorage;
+    },
+    */
+    onRehydrateStorage: () => () => {
+      useStore.setState({
+        hydrated: true
+      });
+      // console.log('onRehydrateStorage', useStore, useStore.getState());
+    },
+    merge: (persistedState, currentState) => {
+      if (persistedState.items && Array.isArray(persistedState.items)) {
+        currentState.items = [...persistedState.items];
+      }
+      currentState.hydrated = true;
+      return currentState;
+    }
+  }));
+  return useStore;
+};
+const CartContext = /*#__PURE__*/react.createContext(null);
+function CartProvider(_a) {
+  var {
+      children
+    } = _a,
+    props = __rest(_a, ["children"]);
+  const storeRef = react.useRef();
+  if (!storeRef.current) {
+    storeRef.current = createCartStore(props);
+  }
+  return jsxRuntime.jsx(CartContext.Provider, {
+    value: storeRef.current,
+    children: children
+  });
+}
+function useCart(selector) {
+  const store = react.useContext(CartContext);
+  if (!store) throw new Error('Missing CartContext.Provider in the tree');
+  return zustand.useStore(store, selector);
+}
+
+const createCheckoutStore = _a => {
+  var {
+      storage
+    } = _a,
+    initialProps = __rest(_a, ["storage"]);
+  const DEFAULT_PROPS = {
+    hydrated: false,
+    checkout: {}
+  };
+  const useStore = zustand.createStore()(middleware.persist((set, get) => Object.assign(Object.assign(Object.assign({}, DEFAULT_PROPS), initialProps), {
+    actions: {
+      setCheckout: checkout => set(state => {
+        return {
+          checkout
+        };
+      })
+    }
+  }), {
+    name: 'checkout',
+    storage: middleware.createJSONStorage(() => storage || localStorage),
+    /*
+    getStorage: () => {
+      // console.log('useCheckout.getStorage');
+      return storage || localStorage;
+    },
+    */
+    onRehydrateStorage: () => () => {
+      useStore.setState({
+        hydrated: true
+      });
+      // console.log('onRehydrateStorage', useStore, useStore.getState());
+    },
+    merge: (persistedState, currentState) => {
+      if (persistedState.checkout && typeof persistedState.checkout === 'object') {
+        currentState.checkout = Object.assign({}, persistedState.checkout);
+      }
+      currentState.hydrated = true;
+      return currentState;
+    }
+  }));
+  return useStore;
+};
+const CheckoutContext = /*#__PURE__*/react.createContext(null);
+function CheckoutProvider(_a) {
+  var {
+      children
+    } = _a,
+    props = __rest(_a, ["children"]);
+  const storeRef = react.useRef();
+  if (!storeRef.current) {
+    storeRef.current = createCheckoutStore(props);
+  }
+  return jsxRuntime.jsx(CheckoutContext.Provider, {
+    value: storeRef.current,
+    children: children
+  });
+}
+function useCheckout(selector) {
+  const store = react.useContext(CheckoutContext);
+  if (!store) throw new Error('Missing CheckoutContext.Provider in the tree');
+  return zustand.useStore(store, selector);
+}
+
+const CheckoutBasketItem = _ref => {
+  let {
+    item
+  } = _ref;
+  const currency = bomMixerHooks.useCurrency();
+  const {
+    update,
+    remove
+  } = useCart(state => state.actions);
+  function onSetQty(qty) {
+    if (qty > 0) {
+      update(Object.assign(Object.assign({}, item), {
+        qty
+      }));
+    } else {
+      onRemove();
+    }
+  }
+  function onRemove() {
+    const count = remove(item);
+    console.log('onRemove', count);
+  }
+  return jsxRuntime.jsxs(bomMixerUi.Flex.Row, {
+    gap: "2rem",
+    paddingBottom: "1rem",
+    borderBottom: "1px solid var(--color-neutral-300)",
+    children: [jsxRuntime.jsx(bomMixerUi.Flex, {
+      flex: "0 1 calc(100% - 420px)",
+      children: jsxRuntime.jsxs(bomMixerUi.Flex.Row, {
+        gap: "2rem",
+        children: [item.media && jsxRuntime.jsx(bomMixerUi.Media, {
+          item: item.media,
+          aspectRatio: 1,
+          width: "120px",
+          height: "120px",
+          flex: "0 0 120px",
+          rounded: true
+        }), jsxRuntime.jsxs(bomMixerUi.Flex.Col, {
+          alignItems: "flex-start",
+          children: [jsxRuntime.jsx(bomMixerUi.Link, {
+            href: item.href || '',
+            children: jsxRuntime.jsx(bomMixerUi.Button, {
+              as: "a",
+              variant: "nav",
+              children: jsxRuntime.jsx(bomMixerUi.Text, {
+                variant: "paragraph20",
+                fontWeight: "700",
+                children: item.title
+              })
+            })
+          }), jsxRuntime.jsx(bomMixerUi.Text, {
+            variant: "paragraph30",
+            children: item.abstract
+          })]
+        })]
+      })
+    }), jsxRuntime.jsxs(bomMixerUi.Flex.Col, {
+      flexBasis: "110px",
+      alignItems: "flex-end",
+      children: [jsxRuntime.jsx(bomMixerUi.Text, {
+        children: currency(item.price)
+      }), item.fullPrice > item.price && jsxRuntime.jsx(bomMixerUi.Text, {
+        variant: "paragraph40",
+        textDecoration: "line-through",
+        color: "var(--color-neutral-400)",
+        children: currency(item.fullPrice)
+      })]
+    }), jsxRuntime.jsx(bomMixerUi.Flex, {
+      flexBasis: "120px",
+      justifyContent: "center",
+      children: jsxRuntime.jsxs(bomMixerUi.Flex.Row, {
+        children: [jsxRuntime.jsx(bomMixerUi.Button, {
+          onClick: () => onSetQty(item.qty - 1),
+          children: jsxRuntime.jsx(bomMixerIcons.IconMinus, {
+            width: "20px",
+            height: "20px"
+          })
+        }), jsxRuntime.jsx(bomMixerUi.Input, {
+          width: "60px",
+          padding: "0.2rem",
+          placeholder: "qty",
+          value: item.qty.toString(),
+          onChange: e => onSetQty(Number(e.target.value))
+        }), jsxRuntime.jsx(bomMixerUi.Button, {
+          size: "xs",
+          onClick: () => onSetQty(item.qty + 1),
+          children: jsxRuntime.jsx(bomMixerIcons.IconPlus, {
+            width: "20px",
+            height: "20px"
+          })
+        })]
+      })
+    }), jsxRuntime.jsx(bomMixerUi.Flex, {
+      flexBasis: "80px",
+      justifyContent: "center",
+      children: jsxRuntime.jsx(bomMixerUi.Button, {
+        onClick: onRemove,
+        children: jsxRuntime.jsx(bomMixerIcons.IconTrash, {
+          width: "20px",
+          height: "20px"
+        })
+      })
+    }), jsxRuntime.jsxs(bomMixerUi.Flex.Col, {
+      flexBasis: "110px",
+      alignItems: "flex-end",
+      children: [jsxRuntime.jsx(bomMixerUi.Text, {
+        children: currency(item.price * item.qty)
+      }), item.fullPrice > item.price && jsxRuntime.jsx(bomMixerUi.Text, {
+        variant: "paragraph40",
+        textDecoration: "line-through",
+        color: "var(--color-neutral-400)",
+        children: currency(item.fullPrice * item.qty)
+      })]
+    })]
+  });
+};
+
+const CheckoutBasket = _ref => {
+  let {
+    onBasket
+  } = _ref;
+  bomMixerHooks.useLabel();
+  const layout = bomMixerHooks.useLayout();
+  const api = bomMixerHooks.useApi();
+  const currency = bomMixerHooks.useCurrency();
+  const cartItems = useCart(state => state.items);
+  const checkout = useCheckout(state => state.checkout);
+  const {
+    setCheckout
+  } = useCheckout(state => state.actions);
+  const [items = []] = bomMixerHooks.useApiPost('/checkout/items', Object.assign(Object.assign({}, checkout), {
+    items: cartItems
+  }));
+  const subTotal = items.reduce((p, c) => {
+    return p + c.price * c.qty;
+  }, 0);
+  const subTotalFull = items.reduce((p, c) => {
+    return p + c.fullPrice * c.qty;
+  }, 0);
+  const onBasket_ = () => __awaiter(void 0, void 0, void 0, function* () {
+    try {
+      const response = yield api.post('/checkout/update', {
+        action: 'basket',
+        checkout: Object.assign(Object.assign({}, checkout), {
+          items
+        })
+      });
+      setCheckout(response);
+      if (typeof onBasket === 'function') {
+        onBasket(items);
+      }
+    } catch (error) {
+      console.error('CheckoutBasket.onBasket_.error', error);
+    }
+  });
+  return jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [jsxRuntime.jsx(bomMixerUi.Section, {
+      children: jsxRuntime.jsxs(bomMixerUi.Container, {
+        minHeight: "50vh",
+        children: [jsxRuntime.jsxs(bomMixerUi.Flex.Row, {
+          gap: "2rem",
+          padding: "1rem 0",
+          fontWeight: "700",
+          children: [jsxRuntime.jsx(bomMixerUi.Text, {
+            flex: "0 1 calc(100% - 420px)",
+            children: "Product"
+          }), jsxRuntime.jsx(bomMixerUi.Text, {
+            flexBasis: "110px",
+            textAlign: "right",
+            children: "Unit price"
+          }), jsxRuntime.jsx(bomMixerUi.Text, {
+            flexBasis: "120px",
+            textAlign: "center",
+            children: "Quantity"
+          }), jsxRuntime.jsx(bomMixerUi.Text, {
+            flexBasis: "80px",
+            textAlign: "center",
+            children: "\u00A0"
+          }), jsxRuntime.jsx(bomMixerUi.Text, {
+            flexBasis: "110px",
+            textAlign: "right",
+            children: "Price"
+          })]
+        }), jsxRuntime.jsxs(bomMixerUi.Flex.Col, {
+          flex: "1",
+          gap: "1rem",
+          children: [items && items.map((item, i) => jsxRuntime.jsx(CheckoutBasketItem, {
+            item: item
+          }, i)), jsxRuntime.jsxs(bomMixerUi.Flex.Row, {
+            gap: "1rem",
+            fontWeight: "700",
+            marginBottom: "1rem",
+            children: [jsxRuntime.jsx(bomMixerUi.Text, {
+              flex: "0 1 calc(100% - 420px)",
+              children: "Subtotal"
+            }), jsxRuntime.jsx(bomMixerUi.Text, {
+              flexBasis: "110px",
+              textAlign: "right",
+              children: "\u00A0"
+            }), jsxRuntime.jsx(bomMixerUi.Text, {
+              flexBasis: "120px",
+              textAlign: "center",
+              children: "\u00A0"
+            }), jsxRuntime.jsx(bomMixerUi.Text, {
+              flexBasis: "80px",
+              textAlign: "center",
+              children: "\u00A0"
+            }), jsxRuntime.jsxs(bomMixerUi.Flex.Col, {
+              flexBasis: "110px",
+              alignItems: "flex-end",
+              textAlign: "right",
+              children: [jsxRuntime.jsx(bomMixerUi.Text, {
+                children: currency(subTotal)
+              }), subTotalFull > subTotal && jsxRuntime.jsx(bomMixerUi.Text, {
+                variant: "paragraph40",
+                textDecoration: "line-through",
+                color: "var(--color-neutral-400)",
+                children: currency(subTotalFull)
+              })]
+            })]
+          })]
+        }), jsxRuntime.jsxs(bomMixerUi.Flex.Col, {
+          gap: "1rem",
+          children: [jsxRuntime.jsx(bomMixerUi.Box, {
+            borderRadius: "0.5rem",
+            border: "1px solid var(--color-neutral-300)",
+            children: jsxRuntime.jsxs(bomMixerUi.Flex.Row, {
+              padding: "1rem",
+              children: [jsxRuntime.jsx(bomMixerIcons.IconTruck, {
+                width: "2rem",
+                height: "2rem",
+                color: "var(--color-primary-500)"
+              }), jsxRuntime.jsxs(bomMixerUi.Box, {
+                marginLeft: "0.5rem",
+                children: [jsxRuntime.jsx(bomMixerUi.Text, {
+                  variant: "paragraph20",
+                  fontWeight: "700",
+                  children: "The shipping is on us"
+                }), jsxRuntime.jsx(bomMixerUi.Text, {
+                  variant: "paragraph30",
+                  children: "Free, contactless delivery for payments over the minimum fare."
+                })]
+              })]
+            })
+          }), jsxRuntime.jsx(bomMixerUi.Box, {
+            borderRadius: "0.5rem",
+            border: "1px solid var(--color-neutral-300)",
+            children: jsxRuntime.jsxs(bomMixerUi.Flex.Row, {
+              padding: "1rem",
+              children: [jsxRuntime.jsx(bomMixerIcons.IconPercent, {
+                width: "2rem",
+                height: "2rem",
+                color: "var(--color-primary-500)"
+              }), jsxRuntime.jsxs(bomMixerUi.Box, {
+                marginLeft: "0.5rem",
+                children: [jsxRuntime.jsx(bomMixerUi.Text, {
+                  variant: "paragraph20",
+                  fontWeight: "700",
+                  children: "Do you have a discount code?"
+                }), jsxRuntime.jsx(bomMixerUi.Text, {
+                  variant: "paragraph30",
+                  children: "You can enter it in the following steps, before the final checkout."
+                })]
+              })]
+            })
+          })]
+        })]
+      })
+    }), jsxRuntime.jsx(bomMixerUi.Section, {
+      position: "sticky",
+      bottom: "0",
+      padding: "1rem 0",
+      zIndex: "800",
+      background: "var(--color-primary-100)",
+      children: jsxRuntime.jsx(bomMixerUi.Container, {
+        children: jsxRuntime.jsxs(bomMixerUi.Flex.Row, {
+          justifyContent: "space-between",
+          children: [jsxRuntime.jsx(bomMixerUi.Flex, {
+            children: jsxRuntime.jsx(bomMixerUi.NavLink, {
+              href: layout.topLevelHrefs.shop_index || '',
+              children: jsxRuntime.jsx(bomMixerUi.Button, {
+                as: "a",
+                variant: "link",
+                children: "Continue shopping"
+              })
+            })
+          }), jsxRuntime.jsx(bomMixerUi.Flex, {
+            children: jsxRuntime.jsx(bomMixerUi.Button, {
+              variant: "primary",
+              onClick: onBasket_,
+              children: "Proceed"
+            })
+          })]
+        })
+      })
+    })]
+  });
+};
+
+const CheckoutDelivery = _ref => {
+  let {
+    onPrevious,
+    onDelivery
+  } = _ref;
+  var _a, _b;
+  const label = bomMixerHooks.useLabel();
+  const currency = bomMixerHooks.useCurrency();
+  const api = bomMixerHooks.useApi();
+  const checkout = useCheckout(state => state.checkout);
+  const {
+    setCheckout
+  } = useCheckout(state => state.actions);
+  const [options] = bomMixerHooks.useApiPost('/checkout/deliveries', checkout);
+  const [error, setError] = react.useState();
+  const required = bomMixerForms.RequiredValidator();
+  const [form, setValue, setTouched, reset, group] = bomMixerForms.useFormBuilder({
+    delivery: {
+      schema: 'card',
+      label: 'field.delivery',
+      options: options === null || options === void 0 ? void 0 : options.deliveries,
+      validators: [required]
+    }
+  }, [options]);
+  react.useEffect(() => {
+    if (checkout.delivery) {
+      setValue({
+        delivery: checkout.delivery
+      });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [options]);
+  const onSubmit = event => __awaiter(void 0, void 0, void 0, function* () {
+    event.preventDefault();
+    if (form.flags.valid && form.value) {
+      console.log('CheckoutDelivery.valid', form.value);
+      try {
+        setError(undefined);
+        const delivery = form.value.delivery;
+        const response = yield api.post('/checkout/update', {
+          action: 'delivery',
+          checkout: Object.assign(Object.assign({}, checkout), {
+            delivery
+          })
+        });
+        setCheckout(response);
+        if (typeof onDelivery === 'function') {
+          onDelivery(delivery);
+        }
+      } catch (error) {
+        console.log('CheckoutDelivery.error', error);
+        setError(error);
+      }
+    } else {
+      console.log('CheckoutDelivery.invalid');
+      setTouched();
+    }
+  });
+  const onPrevious_ = () => {
+    if (typeof onPrevious === 'function') {
+      onPrevious();
+    }
+  };
+  const delivery = group.controls.delivery;
+  const onDeliveryChange = event => {
+    var _a;
+    group.controls.delivery.value = (_a = delivery === null || delivery === void 0 ? void 0 : delivery.options) === null || _a === void 0 ? void 0 : _a.find(x => x.id.toString() === event.target.value);
+  };
+  return jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [jsxRuntime.jsx(bomMixerUi.Section, {
+      children: jsxRuntime.jsx(bomMixerUi.Container, {
+        minHeight: "50vh",
+        children: jsxRuntime.jsx(bomMixerUi.Flex.Col, {
+          justifyContent: "space-between",
+          children: jsxRuntime.jsx(bomMixerUi.Form, {
+            state: form,
+            onSubmit: onSubmit,
+            children: jsxRuntime.jsxs(bomMixerUi.Flex.Col, {
+              flex: "1",
+              rowGap: "2rem",
+              children: [jsxRuntime.jsx(bomMixerUi.Text, {
+                variant: "heading10",
+                fontWeight: "700",
+                children: "Select the delivery method"
+              }), jsxRuntime.jsx(bomMixerUi.Text, {
+                variant: "paragraph10",
+                marginBottom: "1rem",
+                maxWidth: "60ch",
+                children: "Specify your delivery or reference address to find your closest sales outlet for self-service pickup."
+              }), delivery && jsxRuntime.jsx(bomMixerUi.RadioCard.Group, {
+                initialValue: (_a = delivery.value) === null || _a === void 0 ? void 0 : _a.id.toString(),
+                onChange: onDeliveryChange,
+                children: (_b = delivery.options) === null || _b === void 0 ? void 0 : _b.map(option => jsxRuntime.jsxs(bomMixerUi.RadioCard, {
+                  value: option.id.toString(),
+                  children: [jsxRuntime.jsx(bomMixerUi.RadioCard.Title, {
+                    children: option.name
+                  }), option.abstract && jsxRuntime.jsx(bomMixerUi.RadioCard.Abstract, {
+                    dangerouslySetInnerHTML: {
+                      __html: option.abstract
+                    }
+                  }), option.price > 0 && jsxRuntime.jsx(bomMixerUi.RadioCard.Extra, {
+                    children: currency(option.price)
+                  })]
+                }, option.id))
+              }), false , error && jsxRuntime.jsx(bomMixerUi.FormError, {
+                error: error,
+                children: label('form.submit.error')
+              })]
+            })
+          })
+        })
+      })
+    }), jsxRuntime.jsx(bomMixerUi.Section, {
+      position: "sticky",
+      bottom: "0",
+      padding: "1rem 0",
+      zIndex: "800",
+      background: "var(--color-primary-100)",
+      children: jsxRuntime.jsx(bomMixerUi.Container, {
+        children: jsxRuntime.jsxs(bomMixerUi.Flex.Row, {
+          justifyContent: "space-between",
+          children: [jsxRuntime.jsx(bomMixerUi.Flex, {
+            children: jsxRuntime.jsx(bomMixerUi.Button, {
+              variant: "secondary",
+              onClick: onPrevious_,
+              children: "Back"
+            })
+          }), jsxRuntime.jsx(bomMixerUi.Flex, {
+            children: jsxRuntime.jsx(bomMixerUi.Button, {
+              variant: "primary",
+              onClick: onSubmit,
+              children: "Proceed"
+            })
+          })]
+        })
+      })
+    })]
+  });
+};
+
+const CheckoutDiscount = _ref => {
+  let {
+    onDiscount
+  } = _ref;
+  const label = bomMixerHooks.useLabel();
+  const api = bomMixerHooks.useApi();
+  const checkout = useCheckout(state => state.checkout);
+  const {
+    setCheckout
+  } = useCheckout(state => state.actions);
+  // console.log('CheckoutDiscount', checkout);
+  const [error, setError] = react.useState();
+  bomMixerForms.RequiredValidator();
+  const [form, setValue, setTouched, reset, group] = bomMixerForms.useFormBuilder({
+    discountCode: {
+      schema: 'text',
+      label: 'field.discountCode'
+    }
+  });
+  const onSubmit = event => __awaiter(void 0, void 0, void 0, function* () {
+    event.preventDefault();
+    if (form.flags.valid && form.value) {
+      console.log('CheckoutDiscount.valid', form.value);
+      try {
+        setError(undefined);
+        const response = yield api.post('/checkout/discount', {
+          checkout,
+          discountCode: form.value.discountCode
+        });
+        setCheckout(response);
+        if (typeof onDiscount === 'function') {
+          onDiscount(response.discounts);
+        }
+        reset();
+      } catch (error) {
+        console.log('CheckoutDiscount.error', error);
+        setError(error);
+      }
+    } else {
+      console.log('CheckoutDiscount.invalid');
+      setTouched();
+    }
+  });
+  return jsxRuntime.jsx(jsxRuntime.Fragment, {
+    children: jsxRuntime.jsx(bomMixerUi.Flex.Row, {
+      gap: "1rem",
+      children: jsxRuntime.jsx(bomMixerUi.FieldText, {
+        control: group.controls.discountCode,
+        after: jsxRuntime.jsx(bomMixerUi.Button, {
+          variant: "secondary",
+          onClick: onSubmit,
+          children: label('form.apply')
+        })
+      })
+    })
+  });
+};
+
+const CheckoutEmpty = () => {
+  bomMixerHooks.useLabel();
+  const layout = bomMixerHooks.useLayout();
+  return jsxRuntime.jsx(jsxRuntime.Fragment, {
+    children: jsxRuntime.jsx(bomMixerUi.Section, {
+      children: jsxRuntime.jsx(bomMixerUi.Container, {
+        minHeight: "50vh",
+        children: jsxRuntime.jsxs(bomMixerUi.Flex.Col, {
+          gap: "1rem",
+          alignItems: "center",
+          textAlign: "center",
+          children: [jsxRuntime.jsx(bomMixerUi.Text, {
+            variant: "heading10",
+            fontWeight: "700",
+            children: "Your cart is empty."
+          }), jsxRuntime.jsx(bomMixerUi.Text, {
+            variant: "paragraph10",
+            marginBottom: "1rem",
+            maxWidth: "80ch",
+            children: "All\u2019interno di Mixer Shop \u00E8 possibile acquistare i campioni delle collezioni Tiles, 3D Elements e Paints, complementi d\u2019arredo in materiali inediti, elementi decorativi esclusivi e oggettistica legata all\u2019universo del brand."
+          }), jsxRuntime.jsx(bomMixerUi.NavLink, {
+            href: layout.topLevelHrefs.shop_index || '',
+            children: jsxRuntime.jsx(bomMixerUi.Button, {
+              as: "a",
+              variant: "primary",
+              children: "Continue shopping"
+            })
+          })]
+        })
+      })
+    })
+  });
+};
+
+const CheckoutError = _ref => {
+  let {
+    order
+  } = _ref;
+  bomMixerHooks.useLabel();
+  return jsxRuntime.jsx(jsxRuntime.Fragment, {
+    children: jsxRuntime.jsx(bomMixerUi.Section, {
+      children: jsxRuntime.jsx(bomMixerUi.Container, {
+        minHeight: "50vh",
+        children: order ? jsxRuntime.jsxs(bomMixerUi.Flex.Col, {
+          gap: "1rem",
+          alignItems: "center",
+          textAlign: "center",
+          children: [jsxRuntime.jsx(bomMixerUi.Text, {
+            variant: "heading10",
+            fontWeight: "700",
+            children: "Payment unsuccesful"
+          }), jsxRuntime.jsx(bomMixerUi.Text, {
+            variant: "paragraph10",
+            marginBottom: "1rem",
+            maxWidth: "80ch",
+            children: "There was a problem processing this payment. Please contact your payment provider if needed."
+          })]
+        }) : jsxRuntime.jsxs(bomMixerUi.Flex.Col, {
+          gap: "1rem",
+          alignItems: "center",
+          textAlign: "center",
+          children: [jsxRuntime.jsx(bomMixerUi.Text, {
+            variant: "heading10",
+            fontWeight: "700",
+            children: "Order not found"
+          }), jsxRuntime.jsx(bomMixerUi.Text, {
+            variant: "paragraph10",
+            marginBottom: "1rem",
+            maxWidth: "80ch",
+            children: "There was a problem processing this order."
+          })]
+        })
+      })
+    })
+  });
+};
+
+const CheckoutForgot = _ref => {
+  let {
+    onPasswordSent,
+    onNavToLogin,
+    onNavToRegister,
+    onNavToPrevious
+  } = _ref;
+  const onPasswordSent_ = () => {
+    if (typeof onPasswordSent === 'function') {
+      onPasswordSent();
+    }
+  };
+  const onNavToLogin_ = () => {
+    if (typeof onNavToLogin === 'function') {
+      onNavToLogin();
+    }
+  };
+  const onNavToRegister_ = () => {
+    if (typeof onNavToRegister === 'function') {
+      onNavToRegister();
+    }
+  };
+  const onNavToPrevious_ = () => {
+    if (typeof onNavToPrevious === 'function') {
+      onNavToPrevious();
+    }
+  };
+  return jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [jsxRuntime.jsx(bomMixerUi.Section, {
+      children: jsxRuntime.jsx(bomMixerUi.Container, {
+        children: jsxRuntime.jsx(bomMixerAuth.AuthForgot, {
+          onPasswordSent: onPasswordSent_,
+          onNavToLogin: onNavToLogin_,
+          onNavToRegister: onNavToRegister_
+        })
+      })
+    }), jsxRuntime.jsx(bomMixerUi.Section, {
+      position: "sticky",
+      bottom: "0",
+      padding: "1rem 0",
+      zIndex: "800",
+      background: "var(--color-primary-100)",
+      children: jsxRuntime.jsx(bomMixerUi.Container, {
+        children: jsxRuntime.jsx(bomMixerUi.Flex.Row, {
+          justifyContent: "space-between",
+          children: jsxRuntime.jsx(bomMixerUi.Flex, {
+            children: jsxRuntime.jsx(bomMixerUi.Button, {
+              variant: "secondary",
+              onClick: onNavToPrevious_,
+              children: "Back"
+            })
+          })
+        })
+      })
+    })]
+  });
+};
+
+const CheckoutForgotSuccess = _ref => {
+  let {
+    onNavToLogin,
+    onNavToPrevious
+  } = _ref;
+  const onNavToLogin_ = () => {
+    if (typeof onNavToLogin === 'function') {
+      onNavToLogin();
+    }
+  };
+  const onNavToPrevious_ = () => {
+    if (typeof onNavToPrevious === 'function') {
+      onNavToPrevious();
+    }
+  };
+  return jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [jsxRuntime.jsx(bomMixerUi.Section, {
+      children: jsxRuntime.jsx(bomMixerUi.Container, {
+        children: jsxRuntime.jsx(bomMixerAuth.AuthForgotSuccess, {
+          onNavToLogin: onNavToLogin_
+        })
+      })
+    }), jsxRuntime.jsx(bomMixerUi.Section, {
+      position: "sticky",
+      bottom: "0",
+      padding: "1rem 0",
+      zIndex: "800",
+      background: "var(--color-primary-100)",
+      children: jsxRuntime.jsx(bomMixerUi.Container, {
+        children: jsxRuntime.jsx(bomMixerUi.Flex.Row, {
+          justifyContent: "space-between",
+          children: jsxRuntime.jsx(bomMixerUi.Flex, {
+            children: jsxRuntime.jsx(bomMixerUi.Button, {
+              variant: "secondary",
+              onClick: onNavToPrevious_,
+              children: "Back"
+            })
+          })
+        })
+      })
+    })]
+  });
+};
+
+const CheckoutLogin = _ref => {
+  let {
+    onSignedIn,
+    onNavToForgot,
+    onNavToRegister,
+    onNavToPrevious
+  } = _ref;
+  const onSignedIn_ = user => {
+    if (typeof onSignedIn === 'function') {
+      onSignedIn(user);
+    }
+  };
+  const onNavToForgot_ = () => {
+    if (typeof onNavToForgot === 'function') {
+      onNavToForgot();
+    }
+  };
+  const onNavToRegister_ = () => {
+    if (typeof onNavToRegister === 'function') {
+      onNavToRegister();
+    }
+  };
+  const onNavToPrevious_ = () => {
+    if (typeof onNavToPrevious === 'function') {
+      onNavToPrevious();
+    }
+  };
+  return jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [jsxRuntime.jsx(bomMixerUi.Section, {
+      children: jsxRuntime.jsx(bomMixerUi.Container, {
+        children: jsxRuntime.jsx(bomMixerAuth.AuthLogin, {
+          onSignedIn: onSignedIn_,
+          onNavToForgot: onNavToForgot_,
+          onNavToRegister: onNavToRegister_
+        })
+      })
+    }), jsxRuntime.jsx(bomMixerUi.Section, {
+      position: "sticky",
+      bottom: "0",
+      padding: "1rem 0",
+      zIndex: "800",
+      background: "var(--color-primary-100)",
+      children: jsxRuntime.jsx(bomMixerUi.Container, {
+        children: jsxRuntime.jsx(bomMixerUi.Flex.Row, {
+          justifyContent: "space-between",
+          children: jsxRuntime.jsx(bomMixerUi.Flex, {
+            children: jsxRuntime.jsx(bomMixerUi.Button, {
+              variant: "secondary",
+              onClick: onNavToPrevious_,
+              children: "Back"
+            })
+          })
+        })
+      })
+    })]
+  });
+};
+
+const CheckoutRegister = _ref => {
+  let {
+    onSignedUp,
+    onNavToLogin,
+    onNavToPrevious
+  } = _ref;
+  const onSignedUp_ = () => {
+    if (typeof onSignedUp === 'function') {
+      onSignedUp();
+    }
+  };
+  const onNavToLogin_ = () => {
+    if (typeof onNavToLogin === 'function') {
+      onNavToLogin();
+    }
+  };
+  const onNavToPrevious_ = () => {
+    if (typeof onNavToPrevious === 'function') {
+      onNavToPrevious();
+    }
+  };
+  return jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [jsxRuntime.jsx(bomMixerUi.Section, {
+      children: jsxRuntime.jsx(bomMixerUi.Container, {
+        children: jsxRuntime.jsx(bomMixerAuth.AuthRegister, {
+          onSignedUp: onSignedUp_,
+          onNavToLogin: onNavToLogin_
+        })
+      })
+    }), jsxRuntime.jsx(bomMixerUi.Section, {
+      position: "sticky",
+      bottom: "0",
+      padding: "1rem 0",
+      zIndex: "800",
+      background: "var(--color-primary-100)",
+      children: jsxRuntime.jsx(bomMixerUi.Container, {
+        children: jsxRuntime.jsx(bomMixerUi.Flex.Row, {
+          justifyContent: "space-between",
+          children: jsxRuntime.jsx(bomMixerUi.Flex, {
+            children: jsxRuntime.jsx(bomMixerUi.Button, {
+              variant: "secondary",
+              onClick: onNavToPrevious_,
+              children: "Back"
+            })
+          })
+        })
+      })
+    })]
+  });
+};
+
+const CheckoutRegisterSuccess = _ref => {
+  let {
+    onNavToLogin,
+    onNavToPrevious
+  } = _ref;
+  const onNavToLogin_ = () => {
+    if (typeof onNavToLogin === 'function') {
+      onNavToLogin();
+    }
+  };
+  const onNavToPrevious_ = () => {
+    if (typeof onNavToPrevious === 'function') {
+      onNavToPrevious();
+    }
+  };
+  return jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [jsxRuntime.jsx(bomMixerUi.Section, {
+      children: jsxRuntime.jsx(bomMixerUi.Container, {
+        children: jsxRuntime.jsx(bomMixerAuth.AuthRegisterSuccess, {
+          onNavToLogin: onNavToLogin_
+        })
+      })
+    }), jsxRuntime.jsx(bomMixerUi.Section, {
+      position: "sticky",
+      bottom: "0",
+      padding: "1rem 0",
+      zIndex: "800",
+      background: "var(--color-primary-100)",
+      children: jsxRuntime.jsx(bomMixerUi.Container, {
+        children: jsxRuntime.jsx(bomMixerUi.Flex.Row, {
+          justifyContent: "space-between",
+          children: jsxRuntime.jsx(bomMixerUi.Flex, {
+            children: jsxRuntime.jsx(bomMixerUi.Button, {
+              variant: "secondary",
+              onClick: onNavToPrevious_,
+              children: "Back"
+            })
+          })
+        })
+      })
+    })]
+  });
+};
+
+const CheckoutUserInfo = _ref => {
+  let {
+    user,
+    onUserInfo,
+    onNavToPrevious
+  } = _ref;
+  const label = bomMixerHooks.useLabel();
+  const api = bomMixerHooks.useApi();
+  const checkout = useCheckout(state => state.checkout);
+  const {
+    setCheckout
+  } = useCheckout(state => state.actions);
+  const [options] = bomMixerHooks.useApiPost('/checkout/info', checkout);
+  const required = bomMixerForms.RequiredValidator();
+  bomMixerForms.RequiredTrueValidator();
+  const email = bomMixerForms.EmailValidator();
+  const shippingRequiredIfItaly = bomMixerForms.RequiredIfValidator((value, rootValue) => {
+    var _a, _b;
+    return ((_b = (_a = rootValue === null || rootValue === void 0 ? void 0 : rootValue.shippingAddress) === null || _a === void 0 ? void 0 : _a.country) === null || _b === void 0 ? void 0 : _b.id) === 'it';
+  });
+  const shippingHiddenIfNotItaly = (value, rootValue) => {
+    var _a, _b;
+    return !(((_b = (_a = rootValue === null || rootValue === void 0 ? void 0 : rootValue.shippingAddress) === null || _a === void 0 ? void 0 : _a.country) === null || _b === void 0 ? void 0 : _b.id) === 'it');
+  };
+  const billingRequired = bomMixerForms.RequiredIfValidator((value, rootValue) => (rootValue === null || rootValue === void 0 ? void 0 : rootValue.hasBilling) === true);
+  const billingHidden = (value, rootValue) => !((rootValue === null || rootValue === void 0 ? void 0 : rootValue.hasBilling) === true);
+  const billingHiddenIfNotItaly = (value, rootValue) => {
+    var _a, _b;
+    return !(((_b = (_a = rootValue === null || rootValue === void 0 ? void 0 : rootValue.billingAddress) === null || _a === void 0 ? void 0 : _a.country) === null || _b === void 0 ? void 0 : _b.id) === 'it');
+  };
+  // const billingRequiredIfItaly = RequiredIfValidator((value, rootValue) => rootValue?.billingAddress?.country?.id === 'it');
+  const [form, setValue, setTouched, reset, group] = bomMixerForms.useFormBuilder({
+    shippingAddress: {
+      schema: 'group',
+      label: 'field.shippingAddress',
+      children: {
+        firstName: {
+          schema: 'text',
+          label: 'field.firstName',
+          validators: [required]
+        },
+        lastName: {
+          schema: 'text',
+          label: 'field.lastName',
+          validators: [required]
+        },
+        email: {
+          schema: 'text',
+          label: 'field.email',
+          validators: [required, email]
+        },
+        phoneNumber: {
+          schema: 'text',
+          label: 'field.phoneNumber',
+          validators: [required]
+        },
+        country: {
+          schema: 'select',
+          label: 'field.country',
+          options: options === null || options === void 0 ? void 0 : options.countries,
+          validators: [required]
+        },
+        region: {
+          schema: 'select',
+          label: 'field.region',
+          options: options === null || options === void 0 ? void 0 : options.regions,
+          validators: shippingRequiredIfItaly,
+          disabled: shippingHiddenIfNotItaly,
+          hidden: shippingHiddenIfNotItaly
+        },
+        province: {
+          schema: 'autocomplete',
+          label: 'field.province',
+          options: options === null || options === void 0 ? void 0 : options.provinces,
+          validators: shippingRequiredIfItaly,
+          disabled: shippingHiddenIfNotItaly,
+          hidden: shippingHiddenIfNotItaly
+        },
+        address: {
+          schema: 'text',
+          label: 'field.address',
+          validators: [required]
+        },
+        streetNumber: {
+          schema: 'text',
+          label: 'field.streetNumber',
+          validators: [required]
+        },
+        zipCode: {
+          schema: 'text',
+          label: 'field.zipCode',
+          validators: [required]
+        },
+        city: {
+          schema: 'text',
+          label: 'field.city',
+          validators: [required]
+        }
+      }
+    },
+    hasInvoice: {
+      schema: 'checkbox',
+      label: 'field.hasInvoice'
+    },
+    hasBilling: {
+      schema: 'checkbox',
+      label: 'field.hasBilling'
+    },
+    billingAddress: {
+      schema: 'group',
+      label: 'field.billingAddress',
+      children: {
+        firstName: {
+          schema: 'text',
+          label: 'field.firstName',
+          validators: [billingRequired]
+        },
+        lastName: {
+          schema: 'text',
+          label: 'field.lastName',
+          validators: [billingRequired]
+        },
+        email: {
+          schema: 'text',
+          label: 'field.email',
+          validators: [billingRequired, email]
+        },
+        phoneNumber: {
+          schema: 'text',
+          label: 'field.phoneNumber',
+          validators: [billingRequired]
+        },
+        country: {
+          schema: 'select',
+          label: 'field.country',
+          options: options === null || options === void 0 ? void 0 : options.countries,
+          validators: [billingRequired]
+        },
+        region: {
+          schema: 'select',
+          label: 'field.region',
+          options: options === null || options === void 0 ? void 0 : options.regions,
+          validators: [billingRequired],
+          disabled: billingHiddenIfNotItaly,
+          hidden: billingHiddenIfNotItaly
+        },
+        province: {
+          schema: 'autocomplete',
+          label: 'field.province',
+          options: options === null || options === void 0 ? void 0 : options.provinces,
+          validators: [billingRequired],
+          disabled: billingHiddenIfNotItaly,
+          hidden: billingHiddenIfNotItaly
+        },
+        address: {
+          schema: 'text',
+          label: 'field.address',
+          validators: [billingRequired]
+        },
+        streetNumber: {
+          schema: 'text',
+          label: 'field.streetNumber',
+          validators: [billingRequired]
+        },
+        zipCode: {
+          schema: 'text',
+          label: 'field.zipCode',
+          validators: [billingRequired]
+        },
+        city: {
+          schema: 'text',
+          label: 'field.city',
+          validators: [billingRequired]
+        }
+      },
+      disabled: billingHidden,
+      hidden: billingHidden
+    },
+    checkField: {
+      schema: 'text',
+      hidden: true
+    } // check hidden field for antiforgery
+  }, [options]);
+  react.useEffect(() => {
+    if (checkout.shippingAddress) {
+      setValue({
+        shippingAddress: checkout.shippingAddress,
+        hasInvoice: checkout.hasInvoice,
+        hasBilling: checkout.hasBilling,
+        billingAddress: checkout.billingAddress
+      });
+    } else if (user) {
+      setValue({
+        shippingAddress: user
+      });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [options]);
+  const onTest = () => {
+    setValue({
+      shippingAddress: {
+        firstName: 'Jhon',
+        lastName: 'Appleseed',
+        email: 'jhon.appleseed@gmail.com',
+        phoneNumber: '0721411112',
+        country: {
+          id: 'it',
+          name: 'Italy'
+        },
+        region: {
+          id: 10,
+          name: 'Marche'
+        },
+        province: {
+          id: 175,
+          name: 'Pesaro Urbino'
+        },
+        address: 'Strada della Campanara',
+        streetNumber: '15',
+        zipCode: '61122',
+        city: 'Pesaro'
+      },
+      hasInvoice: false,
+      hasBilling: false
+    });
+  };
+  const onReset = () => {
+    reset();
+  };
+  const [error, setError] = react.useState();
+  const onSubmit = event => __awaiter(void 0, void 0, void 0, function* () {
+    event.preventDefault();
+    if (form.flags.valid && form.value) {
+      console.log('CheckoutUserInfo.valid', form.value);
+      try {
+        setError(undefined);
+        const response = yield api.post('/checkout/update', {
+          action: 'info',
+          checkout: Object.assign(Object.assign(Object.assign({}, checkout), form.value), {
+            user
+          })
+        });
+        setCheckout(response);
+        if (typeof onUserInfo === 'function') {
+          onUserInfo(Object.assign(Object.assign({}, form.value), {
+            user
+          }));
+        }
+      } catch (error) {
+        console.log('CheckoutUserInfo.error', error);
+        setError(error);
+      }
+    } else {
+      console.log('CheckoutUserInfo.invalid');
+      setTouched();
+    }
+  });
+  const onNavToPrevious_ = () => {
+    if (typeof onNavToPrevious === 'function') {
+      onNavToPrevious();
+    }
+  };
+  return jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [jsxRuntime.jsx(bomMixerUi.Section, {
+      children: jsxRuntime.jsx(bomMixerUi.Container, {
+        children: jsxRuntime.jsx(bomMixerUi.Flex.Col, {
+          justifyContent: "space-between",
+          children: jsxRuntime.jsx(bomMixerUi.Form, {
+            state: form,
+            onSubmit: onSubmit,
+            children: jsxRuntime.jsxs(bomMixerUi.Flex.Col, {
+              flex: "1",
+              rowGap: "1rem",
+              children: [jsxRuntime.jsx(bomMixerUi.Text, {
+                variant: "heading10",
+                fontWeight: "700",
+                marginBottom: "1rem",
+                children: "Reference address"
+              }), jsxRuntime.jsx(bomMixerUi.Text, {
+                variant: "paragraph10",
+                marginBottom: "1rem",
+                maxWidth: "60ch",
+                children: "Specify your delivery or reference address to find your closest sales outlet for self-service pickup."
+              }), jsxRuntime.jsx(bomMixerUi.Grid.Row, {
+                rowGap: "1rem",
+                children: jsxRuntime.jsx(bomMixerUi.FieldCollection, {
+                  collection: group
+                })
+              }), error && jsxRuntime.jsx(bomMixerUi.FormError, {
+                error: error,
+                children: label('form.submit.error')
+              }), jsxRuntime.jsx(bomMixerUi.FormTester, {
+                form: form,
+                onTest: onTest,
+                onReset: onReset
+              })]
+            })
+          })
+        })
+      })
+    }), jsxRuntime.jsx(bomMixerUi.Section, {
+      position: "sticky",
+      bottom: "0",
+      padding: "1rem 0",
+      zIndex: "800",
+      background: "var(--color-primary-100)",
+      children: jsxRuntime.jsx(bomMixerUi.Container, {
+        children: jsxRuntime.jsxs(bomMixerUi.Flex.Row, {
+          justifyContent: "space-between",
+          children: [jsxRuntime.jsx(bomMixerUi.Flex, {
+            children: jsxRuntime.jsx(bomMixerUi.Button, {
+              variant: "secondary",
+              onClick: onNavToPrevious_,
+              children: "Back"
+            })
+          }), jsxRuntime.jsx(bomMixerUi.Flex, {
+            children: jsxRuntime.jsx(bomMixerUi.Button, {
+              variant: "primary",
+              onClick: onSubmit,
+              children: "Proceed"
+            })
+          })]
+        })
+      })
+    })]
+  });
+};
+
+const CheckoutInfo = _ref => {
+  let {
+    onPrevious,
+    onInfo
+  } = _ref;
+  bomMixerHooks.useLabel();
+  const checkout = useCheckout(state => state.checkout);
+  const user = bomMixerAuth.useUser(state => state.user);
+  const {
+    setUser
+  } = bomMixerAuth.useUser(state => state.actions);
+  const [view, setView] = react.useState(checkout.shippingAddress || user ? 'address' : 'choose');
+  // const [user, setUser] = useState<IUser>();
+  const onView = view => {
+    setView(view);
+    bomMixerHooks.scrollToY(0);
+  };
+  const onUserInfo = info => {
+    if (typeof onInfo === 'function') {
+      onInfo(info);
+    }
+  };
+  const onSignedIn = user => {
+    console.log('onSignedIn');
+    setUser(user);
+    onView('address');
+  };
+  const onSignedUp = () => {
+    console.log('onSignedUp');
+    onView('register-success');
+  };
+  const onPasswordSent = () => {
+    console.log('onPasswordSent');
+    onView('forgot-success');
+  };
+  const onNavToLogin = () => {
+    onView('login');
+  };
+  const onNavToRegister = () => {
+    onView('register');
+  };
+  const onNavToForgot = () => {
+    onView('forgot');
+  };
+  const onNavToPrevious = () => {
+    onView('choose');
+  };
+  const onPrevious_ = () => {
+    if (typeof onPrevious === 'function') {
+      onPrevious();
+    }
+    bomMixerHooks.scrollToY(0);
+  };
+  const getView = () => {
+    switch (view) {
+      case 'choose':
+        return jsxRuntime.jsxs(jsxRuntime.Fragment, {
+          children: [jsxRuntime.jsx(bomMixerUi.Section, {
+            children: jsxRuntime.jsx(bomMixerUi.Container, {
+              minHeight: "50vh",
+              children: jsxRuntime.jsxs(bomMixerUi.Grid.Row, {
+                rowGap: "3rem",
+                children: [jsxRuntime.jsx(bomMixerUi.Grid, {
+                  sm: 6,
+                  children: jsxRuntime.jsxs(bomMixerUi.Flex.Col, {
+                    gap: "1rem",
+                    alignItems: "flex-start",
+                    children: [jsxRuntime.jsx(bomMixerUi.Text, {
+                      variant: "heading10",
+                      fontWeight: "700",
+                      children: "Login"
+                    }), jsxRuntime.jsx(bomMixerUi.Text, {
+                      variant: "paragraph10",
+                      marginBottom: "1rem",
+                      maxWidth: "60ch",
+                      children: "Login to optimise your shopping experience and to see your previous orders."
+                    }), jsxRuntime.jsx(bomMixerUi.Button, {
+                      variant: "primary",
+                      onClick: () => setView('login'),
+                      children: "Login"
+                    })]
+                  })
+                }), jsxRuntime.jsx(bomMixerUi.Grid, {
+                  sm: 6,
+                  children: jsxRuntime.jsxs(bomMixerUi.Flex.Col, {
+                    gap: "2rem",
+                    children: [jsxRuntime.jsxs(bomMixerUi.Flex.Col, {
+                      gap: "1rem",
+                      alignItems: "flex-start",
+                      marginBottom: "3rem",
+                      children: [jsxRuntime.jsx(bomMixerUi.Text, {
+                        variant: "heading10",
+                        fontWeight: "700",
+                        children: "Register"
+                      }), jsxRuntime.jsx(bomMixerUi.Text, {
+                        variant: "paragraph10",
+                        marginBottom: "1rem",
+                        maxWidth: "60ch",
+                        children: "Register to optimise your shopping experience and to see your previous orders."
+                      }), jsxRuntime.jsx(bomMixerUi.Button, {
+                        variant: "primary",
+                        onClick: () => setView('register'),
+                        children: "Register"
+                      })]
+                    }), jsxRuntime.jsxs(bomMixerUi.Flex.Col, {
+                      gap: "1rem",
+                      alignItems: "flex-start",
+                      children: [jsxRuntime.jsx(bomMixerUi.Text, {
+                        variant: "heading10",
+                        fontWeight: "700",
+                        children: "Proceed as guest"
+                      }), jsxRuntime.jsx(bomMixerUi.Text, {
+                        variant: "paragraph10",
+                        marginBottom: "1rem",
+                        maxWidth: "60ch",
+                        children: "If you continue your purchase as a guest, we will request your shipping details and assign the appropriate sales outlet, but you will not need to create a personal account. If you would like to access your user area and your order history, please complete the purchase by registering your account."
+                      }), jsxRuntime.jsx(bomMixerUi.Button, {
+                        variant: "primary",
+                        onClick: () => setView('address'),
+                        children: "Proceed"
+                      })]
+                    })]
+                  })
+                })]
+              })
+            })
+          }), jsxRuntime.jsx(bomMixerUi.Section, {
+            position: "sticky",
+            bottom: "0",
+            padding: "1rem 0",
+            zIndex: "800",
+            background: "var(--color-primary-100)",
+            children: jsxRuntime.jsx(bomMixerUi.Container, {
+              children: jsxRuntime.jsx(bomMixerUi.Flex.Row, {
+                justifyContent: "space-between",
+                children: jsxRuntime.jsx(bomMixerUi.Flex, {
+                  children: jsxRuntime.jsx(bomMixerUi.Button, {
+                    variant: "secondary",
+                    onClick: onPrevious_,
+                    children: "Back"
+                  })
+                })
+              })
+            })
+          })]
+        });
+      case 'address':
+        return jsxRuntime.jsx(CheckoutUserInfo, {
+          user: user,
+          onUserInfo: onUserInfo,
+          onNavToPrevious: onNavToPrevious
+        });
+      case 'login':
+        return jsxRuntime.jsx(CheckoutLogin, {
+          onSignedIn: onSignedIn,
+          onNavToForgot: onNavToForgot,
+          onNavToRegister: onNavToRegister,
+          onNavToPrevious: onNavToPrevious
+        });
+      case 'register':
+        return jsxRuntime.jsx(CheckoutRegister, {
+          onSignedUp: onSignedUp,
+          onNavToLogin: onNavToLogin,
+          onNavToPrevious: onNavToPrevious
+        });
+      case 'register-success':
+        return jsxRuntime.jsx(CheckoutRegisterSuccess, {
+          onNavToLogin: onNavToLogin,
+          onNavToPrevious: onNavToPrevious
+        });
+      case 'forgot':
+        return jsxRuntime.jsx(CheckoutForgot, {
+          onPasswordSent: onPasswordSent,
+          onNavToLogin: onNavToLogin,
+          onNavToRegister: onNavToRegister,
+          onNavToPrevious: onNavToPrevious
+        });
+      case 'forgot-success':
+        return jsxRuntime.jsx(CheckoutForgotSuccess, {
+          onNavToLogin: onNavToLogin,
+          onNavToPrevious: onNavToPrevious
+        });
+      default:
+        return null;
+    }
+  };
+  return jsxRuntime.jsx(jsxRuntime.Fragment, {
+    children: getView()
+  });
+};
+
+const CheckoutPayment = _ref => {
+  let {
+    onPrevious,
+    onPayment
+  } = _ref;
+  var _a, _b;
+  const label = bomMixerHooks.useLabel();
+  const api = bomMixerHooks.useApi();
+  const checkout = useCheckout(state => state.checkout);
+  const {
+    setCheckout
+  } = useCheckout(state => state.actions);
+  const [options] = bomMixerHooks.useApiPost('/checkout/payments', checkout);
+  const [error, setError] = react.useState();
+  const required = bomMixerForms.RequiredValidator();
+  const [form, setValue, setTouched, reset, group] = bomMixerForms.useFormBuilder({
+    payment: {
+      schema: 'select',
+      label: 'field.payment',
+      options: options === null || options === void 0 ? void 0 : options.payments,
+      validators: [required]
+    }
+  }, [options]);
+  react.useEffect(() => {
+    if (checkout.payment) {
+      setValue({
+        payment: checkout.payment
+      });
+    } else if (options) {
+      setValue({
+        payment: options.payments[0]
+      });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [options]);
+  const onSubmit = event => __awaiter(void 0, void 0, void 0, function* () {
+    event.preventDefault();
+    if (form.flags.valid && form.value) {
+      console.log('CheckoutPayment.valid', form.value);
+      try {
+        setError(undefined);
+        const payment = form.value.payment;
+        const response = yield api.post('/checkout/update', {
+          action: 'payment',
+          checkout: Object.assign(Object.assign({}, checkout), {
+            payment
+          })
+        });
+        setCheckout(response);
+        if (typeof onPayment === 'function') {
+          onPayment(payment);
+        }
+      } catch (error) {
+        console.log('CheckoutPayment.error', error);
+        setError(error);
+      }
+    } else {
+      console.log('CheckoutPayment.invalid');
+      setTouched();
+    }
+  });
+  const onPrevious_ = () => {
+    if (typeof onPrevious === 'function') {
+      onPrevious();
+    }
+  };
+  const payment = group.controls.payment;
+  const onPaymentChange = event => {
+    var _a;
+    group.controls.payment.value = (_a = payment === null || payment === void 0 ? void 0 : payment.options) === null || _a === void 0 ? void 0 : _a.find(x => x.id.toString() === event.target.value);
+  };
+  return jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [jsxRuntime.jsx(bomMixerUi.Section, {
+      children: jsxRuntime.jsx(bomMixerUi.Container, {
+        children: jsxRuntime.jsx(bomMixerUi.Form, {
+          state: form,
+          onSubmit: onSubmit,
+          children: jsxRuntime.jsxs(bomMixerUi.Flex.Col, {
+            flex: "1",
+            rowGap: "2rem",
+            children: [jsxRuntime.jsx(bomMixerUi.Text, {
+              variant: "heading10",
+              fontWeight: "700",
+              children: "Select a payment method"
+            }), payment && jsxRuntime.jsx(bomMixerUi.RadioCard.Group, {
+              initialValue: (_a = payment.value) === null || _a === void 0 ? void 0 : _a.id.toString(),
+              onChange: onPaymentChange,
+              children: (_b = payment.options) === null || _b === void 0 ? void 0 : _b.map(option => jsxRuntime.jsxs(bomMixerUi.RadioCard, {
+                value: option.id.toString(),
+                flex: "0 0 calc(50% - 1rem)",
+                children: [jsxRuntime.jsx(bomMixerUi.RadioCard.Title, {
+                  children: option.name
+                }), option.abstract && jsxRuntime.jsx(bomMixerUi.RadioCard.Abstract, {
+                  dangerouslySetInnerHTML: {
+                    __html: option.abstract
+                  }
+                }), option.media && jsxRuntime.jsx(bomMixerUi.RadioCard.Media, {
+                  item: option.media
+                })]
+              }, option.id))
+            }), false , error && jsxRuntime.jsx(bomMixerUi.FormError, {
+              error: error,
+              children: label('form.submit.error')
+            })]
+          })
+        })
+      })
+    }), jsxRuntime.jsx(bomMixerUi.Section, {
+      position: "sticky",
+      bottom: "0",
+      padding: "1rem 0",
+      zIndex: "800",
+      background: "var(--color-primary-100)",
+      children: jsxRuntime.jsx(bomMixerUi.Container, {
+        children: jsxRuntime.jsxs(bomMixerUi.Flex.Row, {
+          justifyContent: "space-between",
+          children: [jsxRuntime.jsx(bomMixerUi.Flex, {
+            children: jsxRuntime.jsx(bomMixerUi.Button, {
+              variant: "secondary",
+              onClick: onPrevious_,
+              children: "Back"
+            })
+          }), jsxRuntime.jsx(bomMixerUi.Flex, {
+            children: jsxRuntime.jsx(bomMixerUi.Button, {
+              variant: "primary",
+              onClick: onSubmit,
+              children: "Proceed"
+            })
+          })]
+        })
+      })
+    })]
+  });
+};
+
+const CheckoutReview = _ref => {
+  let {
+    onPrevious,
+    onReview
+  } = _ref;
+  var _a, _b, _c, _d, _e, _f;
+  const label = bomMixerHooks.useLabel();
+  const api = bomMixerHooks.useApi();
+  const currency = bomMixerHooks.useCurrency();
+  const distance = bomMixerHooks.useUnit('kilometer');
+  const checkout = useCheckout(state => state.checkout);
+  const {
+    setCheckout
+  } = useCheckout(state => state.actions);
+  const [options] = bomMixerHooks.useApiPost('/checkout/stores', checkout);
+  // console.log('CheckoutReview', checkout);
+  const [error, setError] = react.useState();
+  const required = bomMixerForms.RequiredValidator();
+  const [form, setValue, setTouched, reset, group] = bomMixerForms.useFormBuilder({
+    store: {
+      schema: 'select',
+      label: 'field.store',
+      options: options === null || options === void 0 ? void 0 : options.stores,
+      validators: [required]
+    }
+  }, [options]);
+  react.useEffect(() => {
+    if (checkout.store || checkout.discounts) {
+      setValue({
+        store: checkout.store
+      });
+    } else if (options) {
+      setValue({
+        store: options.stores[0]
+      });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [options]);
+  const selectedStore = (_a = form.value) === null || _a === void 0 ? void 0 : _a.store;
+  const shippingAddress = checkout.shippingAddress;
+  const billingAddress = checkout.billingAddress;
+  const delivery = checkout.delivery;
+  const subTotal = checkout.subTotal || 0;
+  const subTotalFull = checkout.subTotalFull || 0;
+  const taxes = checkout.taxes || 0;
+  const total = checkout.total || 0;
+  const onSubmit = event => __awaiter(void 0, void 0, void 0, function* () {
+    event.preventDefault();
+    if (form.flags.valid && form.value) {
+      console.log('CheckoutReview.valid', form.value);
+      try {
+        setError(undefined);
+        const store = form.value.store;
+        const response = yield api.post('/checkout/update', {
+          action: 'store',
+          checkout: Object.assign(Object.assign({}, checkout), {
+            store
+          })
+        });
+        setCheckout(response);
+        if (typeof onReview === 'function') {
+          onReview(store);
+        }
+      } catch (error) {
+        console.log('CheckoutReview.error', error);
+        setError(error);
+      }
+    } else {
+      console.log('CheckoutReview.invalid');
+      setTouched();
+    }
+  });
+  const onPrevious_ = () => {
+    if (typeof onPrevious === 'function') {
+      onPrevious();
+    }
+  };
+  const store = group.controls.store;
+  const onStoreChange = event => {
+    var _a;
+    group.controls.store.value = (_a = store === null || store === void 0 ? void 0 : store.options) === null || _a === void 0 ? void 0 : _a.find(x => x.id.toString() === event.target.value);
+  };
+  return jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [jsxRuntime.jsx(bomMixerUi.Section, {
+      children: jsxRuntime.jsx(bomMixerUi.Container, {
+        children: jsxRuntime.jsxs(bomMixerUi.Flex.Col, {
+          gap: "2rem",
+          flexDirectionMd: "row",
+          children: [jsxRuntime.jsx(bomMixerUi.Flex, {
+            flexMd: "1 1 calc(100% - 375px - 2rem)",
+            alignItemsMd: "flex-start",
+            children: jsxRuntime.jsx(bomMixerUi.Form, {
+              state: form,
+              onSubmit: onSubmit,
+              children: jsxRuntime.jsxs(bomMixerUi.Flex.Col, {
+                flex: "1",
+                rowGap: "2rem",
+                children: [jsxRuntime.jsx(bomMixerUi.Text, {
+                  variant: "heading10",
+                  fontWeight: "700",
+                  children: "Reference store"
+                }), jsxRuntime.jsx(bomMixerUi.Text, {
+                  variant: "paragraph10",
+                  marginBottom: "1rem",
+                  children: "Your suggested closest sales outlet for self-service pickup."
+                }), selectedStore && jsxRuntime.jsxs(bomMixerUi.Flex.Col, {
+                  marginBottom: "1rem",
+                  children: [jsxRuntime.jsx(bomMixerUi.Text, {
+                    variant: "heading40",
+                    fontWeight: "700",
+                    children: selectedStore.name
+                  }), jsxRuntime.jsxs(bomMixerUi.Text, {
+                    children: [selectedStore.address, ", ", selectedStore.streetNumber]
+                  }), jsxRuntime.jsxs(bomMixerUi.Text, {
+                    children: [selectedStore.zipCode, " ", selectedStore.city, " ", (_b = selectedStore.country) === null || _b === void 0 ? void 0 : _b.name]
+                  }), jsxRuntime.jsx(bomMixerUi.Text, {
+                    children: selectedStore.phoneNumber
+                  })]
+                }), store && jsxRuntime.jsx(bomMixerUi.RadioCard.Group, {
+                  initialValue: (_c = store.value) === null || _c === void 0 ? void 0 : _c.id.toString(),
+                  onChange: onStoreChange,
+                  maxWidth: "60ch",
+                  children: (_d = store.options) === null || _d === void 0 ? void 0 : _d.map(option => jsxRuntime.jsxs(bomMixerUi.RadioCard, {
+                    value: option.id.toString(),
+                    children: [jsxRuntime.jsx(bomMixerUi.RadioCard.Title, {
+                      children: option.name
+                    }), option.category && jsxRuntime.jsx(bomMixerUi.RadioCard.Abstract, {
+                      children: option.category.name
+                    }), jsxRuntime.jsx(bomMixerUi.RadioCard.Extra, {
+                      children: distance(option.distance)
+                    })]
+                  }, option.id))
+                }), false , error && jsxRuntime.jsx(bomMixerUi.FormError, {
+                  error: error,
+                  children: label('form.submit.error')
+                }), jsxRuntime.jsxs(bomMixerUi.Grid.Row, {
+                  padding: "2em 0",
+                  children: [jsxRuntime.jsx(bomMixerUi.Grid, {
+                    md: 6,
+                    children: shippingAddress && jsxRuntime.jsxs(bomMixerUi.Flex.Col, {
+                      gap: "1rem",
+                      children: [jsxRuntime.jsx(bomMixerUi.Text, {
+                        variant: "heading10",
+                        fontWeight: "700",
+                        children: "Shipping address"
+                      }), jsxRuntime.jsxs(bomMixerUi.Flex.Col, {
+                        children: [jsxRuntime.jsxs(bomMixerUi.Text, {
+                          variant: "heading40",
+                          fontWeight: "700",
+                          children: [shippingAddress.firstName, " ", shippingAddress.lastName]
+                        }), jsxRuntime.jsxs(bomMixerUi.Text, {
+                          children: [shippingAddress.address, ", ", shippingAddress.streetNumber]
+                        }), jsxRuntime.jsxs(bomMixerUi.Text, {
+                          children: [shippingAddress.zipCode, " ", shippingAddress.city, " ", (_e = shippingAddress.country) === null || _e === void 0 ? void 0 : _e.name]
+                        }), jsxRuntime.jsx(bomMixerUi.Text, {
+                          children: shippingAddress.phoneNumber
+                        }), jsxRuntime.jsx(bomMixerUi.Text, {
+                          children: shippingAddress.email
+                        })]
+                      })]
+                    })
+                  }), jsxRuntime.jsx(bomMixerUi.Grid, {
+                    md: 6,
+                    children: billingAddress && jsxRuntime.jsxs(bomMixerUi.Flex.Col, {
+                      gap: "1rem",
+                      children: [jsxRuntime.jsx(bomMixerUi.Text, {
+                        variant: "heading10",
+                        fontWeight: "700",
+                        children: "Billing address"
+                      }), jsxRuntime.jsxs(bomMixerUi.Flex.Col, {
+                        children: [jsxRuntime.jsxs(bomMixerUi.Text, {
+                          variant: "heading40",
+                          fontWeight: "700",
+                          children: [billingAddress.firstName, " ", billingAddress.lastName]
+                        }), jsxRuntime.jsxs(bomMixerUi.Text, {
+                          children: [billingAddress.address, ", ", billingAddress.streetNumber]
+                        }), jsxRuntime.jsxs(bomMixerUi.Text, {
+                          children: [billingAddress.zipCode, " ", billingAddress.city, " ", (_f = billingAddress.country) === null || _f === void 0 ? void 0 : _f.name]
+                        }), jsxRuntime.jsx(bomMixerUi.Text, {
+                          children: billingAddress.phoneNumber
+                        }), jsxRuntime.jsx(bomMixerUi.Text, {
+                          children: billingAddress.email
+                        })]
+                      })]
+                    })
+                  })]
+                })]
+              })
+            })
+          }), jsxRuntime.jsx(bomMixerUi.Flex, {
+            flexMd: "0 0 375px",
+            alignItemsMd: "flex-start",
+            children: jsxRuntime.jsxs(bomMixerUi.Flex.Col, {
+              gap: "1rem",
+              positionMd: "sticky",
+              topMd: "200px",
+              children: [jsxRuntime.jsxs(bomMixerUi.Flex.Col, {
+                gap: "1rem",
+                padding: "1rem",
+                borderRadius: "0.5em",
+                border: "1px solid var(--color-neutral-300)",
+                fontSize: "0.9em",
+                lineHeight: "1",
+                children: [jsxRuntime.jsxs(bomMixerUi.Flex.Row, {
+                  gap: "1rem",
+                  fontWeight: "700",
+                  children: [jsxRuntime.jsx(bomMixerUi.Text, {
+                    flexGrow: "1",
+                    children: "Product"
+                  }), jsxRuntime.jsx(bomMixerUi.Text, {
+                    flexBasis: "40px",
+                    textAlign: "right",
+                    children: "Qty"
+                  }), jsxRuntime.jsx(bomMixerUi.Text, {
+                    flexBasis: "90px",
+                    textAlign: "right",
+                    children: "Price"
+                  })]
+                }), jsxRuntime.jsx(bomMixerUi.Flex.Col, {
+                  flex: "1",
+                  gap: "1rem",
+                  padding: "1rem 0",
+                  borderTop: "1px solid var(--color-neutral-300)",
+                  borderBottom: "1px solid var(--color-neutral-300)",
+                  children: checkout.items && checkout.items.map((item, i) => jsxRuntime.jsxs(bomMixerUi.Flex.Row, {
+                    gap: "1rem",
+                    children: [jsxRuntime.jsx(bomMixerUi.Text, {
+                      flexGrow: "1",
+                      children: item.title
+                    }), jsxRuntime.jsx(bomMixerUi.Text, {
+                      flexBasis: "40px",
+                      textAlign: "right",
+                      children: item.qty
+                    }), jsxRuntime.jsxs(bomMixerUi.Flex.Col, {
+                      flexBasis: "90px",
+                      alignItems: "flex-end",
+                      textAlign: "right",
+                      children: [jsxRuntime.jsx(bomMixerUi.Text, {
+                        children: currency(item.qty * item.price)
+                      }), item.fullPrice > item.price && jsxRuntime.jsx(bomMixerUi.Text, {
+                        variant: "paragraph40",
+                        textDecoration: "line-through",
+                        color: "var(--color-neutral-400)",
+                        children: currency(item.fullPrice * item.qty)
+                      })]
+                    })]
+                  }, i))
+                }), jsxRuntime.jsxs(bomMixerUi.Flex.Row, {
+                  gap: "1rem",
+                  children: [jsxRuntime.jsx(bomMixerUi.Text, {
+                    flexGrow: "1",
+                    children: "Subtotal"
+                  }), jsxRuntime.jsx(bomMixerUi.Text, {
+                    flexBasis: "40px",
+                    textAlign: "right",
+                    children: "\u00A0"
+                  }), jsxRuntime.jsxs(bomMixerUi.Flex.Col, {
+                    flexBasis: "90px",
+                    alignItems: "flex-end",
+                    textAlign: "right",
+                    children: [jsxRuntime.jsx(bomMixerUi.Text, {
+                      children: currency(subTotal)
+                    }), subTotalFull > subTotal && jsxRuntime.jsx(bomMixerUi.Text, {
+                      variant: "paragraph40",
+                      textDecoration: "line-through",
+                      color: "var(--color-neutral-400)",
+                      children: currency(subTotalFull)
+                    })]
+                  })]
+                }), checkout.discounts && checkout.discounts.map((item, i) => jsxRuntime.jsxs(bomMixerUi.Flex.Row, {
+                  gap: "1rem",
+                  children: [jsxRuntime.jsxs(bomMixerUi.Text, {
+                    flexGrow: "1",
+                    children: ["Discount ", jsxRuntime.jsx(bomMixerUi.Badge, {
+                      children: item.name
+                    })]
+                  }), jsxRuntime.jsx(bomMixerUi.Text, {
+                    flexBasis: "40px",
+                    textAlign: "right",
+                    children: item.abstract
+                  }), jsxRuntime.jsx(bomMixerUi.Text, {
+                    flexBasis: "90px",
+                    textAlign: "right",
+                    children: currency(item.price)
+                  })]
+                }, i)), taxes > 0 && jsxRuntime.jsxs(bomMixerUi.Flex.Row, {
+                  gap: "1rem",
+                  children: [jsxRuntime.jsx(bomMixerUi.Text, {
+                    flexGrow: "1",
+                    children: "Taxes"
+                  }), jsxRuntime.jsx(bomMixerUi.Text, {
+                    flexBasis: "40px",
+                    textAlign: "right",
+                    children: "\u00A0"
+                  }), jsxRuntime.jsx(bomMixerUi.Text, {
+                    flexBasis: "90px",
+                    textAlign: "right",
+                    children: currency(taxes)
+                  })]
+                }), delivery && jsxRuntime.jsxs(bomMixerUi.Flex.Row, {
+                  gap: "1rem",
+                  children: [jsxRuntime.jsx(bomMixerUi.Text, {
+                    flexGrow: "1",
+                    children: delivery.name
+                  }), jsxRuntime.jsx(bomMixerUi.Text, {
+                    flexBasis: "40px",
+                    textAlign: "right",
+                    children: "\u00A0"
+                  }), jsxRuntime.jsx(bomMixerUi.Text, {
+                    flexBasis: "90px",
+                    textAlign: "right",
+                    children: currency(delivery.price)
+                  })]
+                }), jsxRuntime.jsxs(bomMixerUi.Flex.Row, {
+                  gap: "1rem",
+                  fontWeight: "700",
+                  marginBottom: "1rem",
+                  children: [jsxRuntime.jsx(bomMixerUi.Text, {
+                    flexGrow: "1",
+                    children: "Total"
+                  }), jsxRuntime.jsx(bomMixerUi.Text, {
+                    flexBasis: "40px",
+                    textAlign: "right",
+                    children: "\u00A0"
+                  }), jsxRuntime.jsx(bomMixerUi.Text, {
+                    flexBasis: "90px",
+                    textAlign: "right",
+                    children: currency(total)
+                  })]
+                })]
+              }), jsxRuntime.jsx(bomMixerUi.Box, {
+                padding: "1rem",
+                borderRadius: "0.5em",
+                border: "1px solid var(--color-neutral-300)",
+                children: jsxRuntime.jsx(CheckoutDiscount, {})
+              })]
+            })
+          })]
+        })
+      })
+    }), jsxRuntime.jsx(bomMixerUi.Section, {
+      position: "sticky",
+      bottom: "0",
+      padding: "1rem 0",
+      zIndex: "800",
+      background: "var(--color-primary-100)",
+      children: jsxRuntime.jsx(bomMixerUi.Container, {
+        children: jsxRuntime.jsxs(bomMixerUi.Flex.Row, {
+          justifyContent: "space-between",
+          children: [jsxRuntime.jsx(bomMixerUi.Flex, {
+            children: jsxRuntime.jsx(bomMixerUi.Button, {
+              variant: "secondary",
+              onClick: onPrevious_,
+              children: "Back"
+            })
+          }), jsxRuntime.jsx(bomMixerUi.Flex, {
+            children: jsxRuntime.jsx(bomMixerUi.Button, {
+              variant: "primary",
+              onClick: onSubmit,
+              children: "Proceed"
+            })
+          })]
+        })
+      })
+    })]
+  });
+};
+
+const OrderAddress = _ref => {
+  let {
+    item,
+    title
+  } = _ref;
+  var _a;
+  return jsxRuntime.jsxs(bomMixerUi.Flex.Col, {
+    gap: "1rem",
+    children: [title && jsxRuntime.jsx(bomMixerUi.Text, {
+      variant: "heading30",
+      fontWeight: "700",
+      children: title
+    }), jsxRuntime.jsxs(bomMixerUi.Flex.Col, {
+      children: [jsxRuntime.jsxs(bomMixerUi.Text, {
+        fontWeight: "700",
+        children: [item.firstName, " ", item.lastName]
+      }), jsxRuntime.jsxs(bomMixerUi.Text, {
+        children: [item.address, ", ", item.streetNumber]
+      }), jsxRuntime.jsxs(bomMixerUi.Text, {
+        children: [item.zipCode, " ", item.city, " ", (_a = item.country) === null || _a === void 0 ? void 0 : _a.name]
+      }), jsxRuntime.jsx(bomMixerUi.Text, {
+        children: item.phoneNumber
+      }), jsxRuntime.jsx(bomMixerUi.Text, {
+        children: item.email
+      })]
+    })]
+  });
+};
+
+const OrderRegister = _ref => {
+  let {
+    className,
+    data,
+    onSignedUp
+  } = _ref;
+  var _a;
+  const label = bomMixerHooks.useLabel();
+  const [registered, setRegistered] = react.useState(false);
+  const required = bomMixerForms.RequiredValidator();
+  const requiredTrue = bomMixerForms.RequiredTrueValidator();
+  const email = bomMixerForms.EmailValidator();
+  const match = bomMixerForms.MatchValidator((value, rootValue, control, root) => {
+    return rootValue === null || rootValue === void 0 ? void 0 : rootValue.password;
+  });
+  const [form, setValue, setTouched, reset, group] = bomMixerForms.useFormBuilder({
+    password: {
+      schema: 'password',
+      label: 'field.password',
+      validators: required
+    },
+    confirmPassword: {
+      schema: 'password',
+      label: 'field.confirmPassword',
+      validators: [required, match]
+    },
+    firstName: {
+      value: data.firstName,
+      schema: 'text',
+      label: 'field.firstName',
+      validators: [required]
+    },
+    lastName: {
+      value: data.lastName,
+      schema: 'text',
+      label: 'field.lastName',
+      validators: [required]
+    },
+    email: {
+      value: data.email,
+      schema: 'text',
+      label: 'field.email',
+      validators: [required, email]
+    },
+    privacy: {
+      schema: 'checkbox',
+      label: 'field.privacy',
+      validators: [requiredTrue]
+    },
+    checkField: {
+      schema: 'text',
+      hidden: true
+    } // check hidden field for antiforgery
+  });
+  const onTest = () => {
+    setValue({
+      firstName: 'Jhon',
+      lastName: 'Appleseed',
+      email: 'jhon.appleseed@gmail.com',
+      password: '123456',
+      confirmPassword: '123456',
+      privacy: true
+    });
+  };
+  const onReset = () => {
+    reset();
+  };
+  const [error, setError] = react.useState();
+  const onSubmit = event => __awaiter(void 0, void 0, void 0, function* () {
+    event.preventDefault();
+    if (form.flags.valid) {
+      console.log('AuthRegister.valid', form.value);
+      try {
+        setError(undefined);
+        yield bomCore.httpPost('/api/auth/register', form.value);
+        setRegistered(true);
+        if (typeof onSignedUp === 'function') {
+          onSignedUp();
+        }
+      } catch (error) {
+        console.log('AuthRegister.error', error);
+        setError(error);
+      }
+    } else {
+      console.log('AuthRegister.invalid');
+      setTouched();
+    }
+  });
+  return jsxRuntime.jsx(bomMixerUi.Section, {
+    className: className,
+    children: jsxRuntime.jsx(bomMixerUi.Container, {
+      children: jsxRuntime.jsx(bomMixerUi.Flex.Col, {
+        gap: "1rem",
+        padding: "1.5rem 1rem",
+        borderRadius: "0.5em",
+        border: "1px solid var(--color-warning-500)",
+        children: registered ? jsxRuntime.jsxs(jsxRuntime.Fragment, {
+          children: [jsxRuntime.jsx(bomMixerUi.Text, {
+            variant: "heading30",
+            fontWeight: "700",
+            children: "Account created"
+          }), jsxRuntime.jsxs(bomMixerUi.Text, {
+            variant: "paragraph10",
+            marginBottom: "1rem",
+            maxWidth: "80ch",
+            children: ["A confimation email has been sent to you at ", (_a = form.value) === null || _a === void 0 ? void 0 : _a.email, ". Please check your inbox."]
+          })]
+        }) : jsxRuntime.jsxs(jsxRuntime.Fragment, {
+          children: [jsxRuntime.jsx(bomMixerUi.Text, {
+            variant: "heading30",
+            fontWeight: "700",
+            children: "Checkout faster next time"
+          }), jsxRuntime.jsx(bomMixerUi.Text, {
+            variant: "paragraph10",
+            marginBottom: "1rem",
+            maxWidth: "80ch",
+            children: "Want easy order tracking and faster checkout? Just choose a password to create your account."
+          }), jsxRuntime.jsxs(bomMixerUi.Form, {
+            state: form,
+            onSubmit: onSubmit,
+            children: [jsxRuntime.jsx(bomMixerUi.Grid.Row, {
+              rowGap: "1rem",
+              children: jsxRuntime.jsx(bomMixerUi.FieldCollection, {
+                collection: group
+              })
+            }), error && jsxRuntime.jsx(bomMixerUi.FormError, {
+              error: error,
+              children: label('form.submit.error')
+            }), jsxRuntime.jsx(bomMixerUi.Button, {
+              type: "submit",
+              variant: "primary",
+              size: "lg",
+              justifyContent: "center",
+              margin: "1rem 0",
+              children: jsxRuntime.jsx("span", {
+                children: "Create account"
+              })
+            }), jsxRuntime.jsx(bomMixerUi.FormTester, {
+              form: form,
+              onTest: onTest,
+              onReset: onReset
+            })]
+          })]
+        })
+      })
+    })
+  });
+};
+
+const OrderSummaryItem = _ref => {
+  let {
+    item
+  } = _ref;
+  const currency = bomMixerHooks.useCurrency();
+  const price = currency(item.price);
+  const totalPrice = currency(item.price * item.qty);
+  return jsxRuntime.jsxs(bomMixerUi.Flex.Row, {
+    gap: "2rem",
+    paddingBottom: "1rem",
+    borderBottom: "1px solid var(--color-neutral-300)",
+    children: [jsxRuntime.jsx(bomMixerUi.Flex, {
+      flexGrow: "1",
+      children: jsxRuntime.jsxs(bomMixerUi.Flex.Row, {
+        gap: "2rem",
+        children: [item.media && jsxRuntime.jsx(bomMixerUi.Media, {
+          item: item.media,
+          aspectRatio: 1,
+          width: "120px",
+          height: "120px",
+          flex: "0 0 120px",
+          rounded: true
+        }), jsxRuntime.jsxs(bomMixerUi.Flex.Col, {
+          alignItems: "flex-start",
+          children: [jsxRuntime.jsx(bomMixerUi.Link, {
+            href: item.href || '',
+            children: jsxRuntime.jsx(bomMixerUi.Button, {
+              as: "a",
+              variant: "nav",
+              children: jsxRuntime.jsx(bomMixerUi.Text, {
+                variant: "paragraph20",
+                fontWeight: "700",
+                children: item.title
+              })
+            })
+          }), jsxRuntime.jsx(bomMixerUi.Text, {
+            variant: "paragraph30",
+            children: item.abstract
+          })]
+        })]
+      })
+    }), jsxRuntime.jsx(bomMixerUi.Flex, {
+      flexBasis: "110px",
+      justifyContent: "flex-end",
+      children: jsxRuntime.jsx(bomMixerUi.Text, {
+        children: price
+      })
+    }), jsxRuntime.jsx(bomMixerUi.Flex, {
+      flexBasis: "120px",
+      justifyContent: "center",
+      children: item.qty.toString()
+    }), jsxRuntime.jsx(bomMixerUi.Flex, {
+      flexBasis: "110px",
+      justifyContent: "flex-end",
+      children: jsxRuntime.jsx(bomMixerUi.Text, {
+        children: totalPrice
+      })
+    })]
+  });
+};
+
+const OrderSummary = _ref => {
+  let {
+    order
+  } = _ref;
+  bomMixerHooks.useLabel();
+  bomMixerHooks.useLayout();
+  const currency = bomMixerHooks.useCurrency();
+  return jsxRuntime.jsx(jsxRuntime.Fragment, {
+    children: jsxRuntime.jsx(bomMixerUi.Section, {
+      children: jsxRuntime.jsxs(bomMixerUi.Container, {
+        children: [jsxRuntime.jsx(bomMixerUi.Text, {
+          variant: "heading30",
+          fontWeight: "700",
+          children: "Order Summary"
+        }), jsxRuntime.jsxs(bomMixerUi.Flex.Row, {
+          gap: "2rem",
+          padding: "1rem 0",
+          fontWeight: "700",
+          children: [jsxRuntime.jsx(bomMixerUi.Text, {
+            flexGrow: "1",
+            children: "Product"
+          }), jsxRuntime.jsx(bomMixerUi.Text, {
+            flexBasis: "110px",
+            textAlign: "right",
+            children: "Unit price"
+          }), jsxRuntime.jsx(bomMixerUi.Text, {
+            flexBasis: "120px",
+            textAlign: "center",
+            children: "Quantity"
+          }), jsxRuntime.jsx(bomMixerUi.Text, {
+            flexBasis: "110px",
+            textAlign: "right",
+            children: "Price"
+          })]
+        }), jsxRuntime.jsxs(bomMixerUi.Flex.Col, {
+          flex: "1",
+          gap: "1rem",
+          children: [order.items && order.items.map((item, i) => jsxRuntime.jsx(OrderSummaryItem, {
+            item: item
+          }, i)), jsxRuntime.jsxs(bomMixerUi.Flex.Row, {
+            gap: "1rem",
+            children: [jsxRuntime.jsx(bomMixerUi.Text, {
+              flexGrow: "1",
+              children: "Subtotal"
+            }), jsxRuntime.jsx(bomMixerUi.Text, {
+              flexBasis: "110px",
+              textAlign: "right",
+              children: "\u00A0"
+            }), jsxRuntime.jsx(bomMixerUi.Text, {
+              flexBasis: "120px",
+              textAlign: "center",
+              children: "\u00A0"
+            }), jsxRuntime.jsx(bomMixerUi.Text, {
+              flexBasis: "90px",
+              textAlign: "right",
+              children: currency(order.subTotal)
+            })]
+          }), order.discounts.map((item, i) => jsxRuntime.jsxs(bomMixerUi.Flex.Row, {
+            gap: "1rem",
+            children: [jsxRuntime.jsxs(bomMixerUi.Text, {
+              flexGrow: "1",
+              children: ["Discount ", jsxRuntime.jsx(bomMixerUi.Badge, {
+                children: item.name
+              })]
+            }), jsxRuntime.jsx(bomMixerUi.Text, {
+              flexBasis: "110px",
+              textAlign: "right",
+              children: "\u00A0"
+            }), jsxRuntime.jsx(bomMixerUi.Text, {
+              flexBasis: "120px",
+              textAlign: "center",
+              children: item.abstract
+            }), jsxRuntime.jsx(bomMixerUi.Text, {
+              flexBasis: "90px",
+              textAlign: "right",
+              children: currency(item.price)
+            })]
+          }, i)), order.taxes > 0 && jsxRuntime.jsxs(bomMixerUi.Flex.Row, {
+            gap: "1rem",
+            children: [jsxRuntime.jsx(bomMixerUi.Text, {
+              flexGrow: "1",
+              children: "Taxes"
+            }), jsxRuntime.jsx(bomMixerUi.Text, {
+              flexBasis: "110px",
+              textAlign: "right",
+              children: "\u00A0"
+            }), jsxRuntime.jsx(bomMixerUi.Text, {
+              flexBasis: "120px",
+              textAlign: "center",
+              children: "\u00A0"
+            }), jsxRuntime.jsx(bomMixerUi.Text, {
+              flexBasis: "90px",
+              textAlign: "right",
+              children: currency(order.taxes)
+            })]
+          }), jsxRuntime.jsxs(bomMixerUi.Flex.Row, {
+            gap: "1rem",
+            children: [jsxRuntime.jsx(bomMixerUi.Text, {
+              flexGrow: "1",
+              children: order.delivery.name
+            }), jsxRuntime.jsx(bomMixerUi.Text, {
+              flexBasis: "110px",
+              textAlign: "right",
+              children: "\u00A0"
+            }), jsxRuntime.jsx(bomMixerUi.Text, {
+              flexBasis: "120px",
+              textAlign: "center",
+              children: "\u00A0"
+            }), jsxRuntime.jsx(bomMixerUi.Text, {
+              flexBasis: "110px",
+              textAlign: "right",
+              children: currency(order.delivery.price)
+            })]
+          }), jsxRuntime.jsxs(bomMixerUi.Flex.Row, {
+            gap: "1rem",
+            fontWeight: "700",
+            marginBottom: "1rem",
+            children: [jsxRuntime.jsx(bomMixerUi.Text, {
+              flexGrow: "1",
+              children: "Total"
+            }), jsxRuntime.jsx(bomMixerUi.Text, {
+              flexBasis: "110px",
+              textAlign: "right",
+              children: "\u00A0"
+            }), jsxRuntime.jsx(bomMixerUi.Text, {
+              flexBasis: "120px",
+              textAlign: "center",
+              children: "\u00A0"
+            }), jsxRuntime.jsx(bomMixerUi.Text, {
+              flexBasis: "110px",
+              textAlign: "right",
+              children: currency(order.total)
+            })]
+          })]
+        })]
+      })
+    })
+  });
+};
+
+const CheckoutSuccess = _ref => {
+  let {
+    order
+  } = _ref;
+  const label = bomMixerHooks.useLabel();
+  // console.log('CheckoutSuccess', order);
+  return jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [jsxRuntime.jsx(bomMixerUi.Section, {
+      position: "sticky",
+      top: "80px",
+      padding: "1rem 0",
+      zIndex: "800",
+      background: "var(--color-primary-100)",
+      children: jsxRuntime.jsx(bomMixerUi.Container.Fluid, {
+        children: jsxRuntime.jsxs(bomMixerUi.Flex.Row, {
+          justifyContent: "space-between",
+          children: [jsxRuntime.jsxs(bomMixerUi.Text, {
+            variant: "paragraph10",
+            fontWeight: "700",
+            children: ["Order #", order.id, " ", jsxRuntime.jsx(bomMixerUi.Badge, {
+              children: label(`order.status.${order.status}`)
+            })]
+          }), jsxRuntime.jsx(bomMixerUi.Button, {
+            className: "print-none",
+            variant: "primary",
+            onClick: () => window.print(),
+            children: "Print"
+          })]
+        })
+      })
+    }), jsxRuntime.jsx(bomMixerUi.Section, {
+      className: "print-none",
+      children: jsxRuntime.jsx(bomMixerUi.Container, {
+        children: jsxRuntime.jsxs(bomMixerUi.Flex.Col, {
+          gap: "1rem",
+          alignItems: "center",
+          textAlign: "center",
+          children: [jsxRuntime.jsxs(bomMixerUi.Text, {
+            variant: "heading10",
+            fontWeight: "700",
+            children: ["Thank you for your order, ", order.user ? order.user.firstName : order.shippingAddress.firstName]
+          }), jsxRuntime.jsxs(bomMixerUi.Text, {
+            variant: "paragraph10",
+            marginBottom: "1rem",
+            maxWidth: "80ch",
+            children: ["A confirmation email will be sent to you at ", order.user ? order.user.email : order.shippingAddress.email, " with your complete order details."]
+          })]
+        })
+      })
+    }), !order.user && jsxRuntime.jsx(OrderRegister, {
+      className: "print-none",
+      data: order.shippingAddress
+    }), jsxRuntime.jsx(OrderSummary, {
+      order: order
+    }), jsxRuntime.jsx(bomMixerUi.Section, {
+      children: jsxRuntime.jsx(bomMixerUi.Container, {
+        children: jsxRuntime.jsxs(bomMixerUi.Grid.Row, {
+          padding: "2em 0",
+          children: [jsxRuntime.jsx(bomMixerUi.Grid, {
+            md: 6,
+            children: order.shippingAddress && jsxRuntime.jsx(OrderAddress, {
+              item: order.shippingAddress,
+              title: 'Shipping address'
+            })
+          }), jsxRuntime.jsx(bomMixerUi.Grid, {
+            md: 6,
+            children: order.billingAddress && jsxRuntime.jsx(OrderAddress, {
+              item: order.billingAddress,
+              title: 'Billing address'
+            })
+          })]
+        })
+      })
+    })]
+  });
+};
+
+exports.CheckoutStatus = void 0;
+(function (CheckoutStatus) {
+  CheckoutStatus[CheckoutStatus["None"] = -1] = "None";
+  CheckoutStatus[CheckoutStatus["Basket"] = 0] = "Basket";
+  CheckoutStatus[CheckoutStatus["Info"] = 1] = "Info";
+  CheckoutStatus[CheckoutStatus["Delivery"] = 2] = "Delivery";
+  CheckoutStatus[CheckoutStatus["Review"] = 3] = "Review";
+  CheckoutStatus[CheckoutStatus["Payment"] = 4] = "Payment";
+  CheckoutStatus[CheckoutStatus["Complete"] = 5] = "Complete";
+  CheckoutStatus[CheckoutStatus["Error"] = 6] = "Error";
+})(exports.CheckoutStatus || (exports.CheckoutStatus = {}));
+const StyledWizard = styled__default.default(bomMixerUi.Flex.Row)`
+  counter-reset: steps;
+
+  & > div {
+    counter-increment: steps;
+		text-transform: uppercase;
+		opacity: 0.25;
+
+    &:before {
+      content: counter(steps) ". ";
+      display: block;
+      font-size: 48px;
+      font-weight: 100;
+      line-height: 1;
+    }
+
+    &.active {
+      opacity: 1;
+    }
+
+    @media(max-width: 800px) {
+
+      &:not(.active) {
+        font-size: 0;
+      }
+
+      &:before {
+        font-size: 1rem;
+        font-weight: 700;
+        margin-right: 0.5rem;
+      }
+    }
+  }
+`;
+const CheckoutWizard = _a => {
+  var {
+      onCheckout
+    } = _a;
+    __rest(_a, ["onCheckout"]);
+  const api = bomMixerHooks.useApi();
+  const checkout = useCheckout(state => state.checkout);
+  // const { setCheckout } = useCheckout((state) => state.actions);
+  const [status, setStatus] = react.useState(exports.CheckoutStatus.Basket);
+  const onCheckout_ = checkout => {
+    // setCheckout(checkout);
+    if (typeof onCheckout === 'function') {
+      onCheckout(checkout);
+    }
+    bomMixerHooks.scrollToY(0);
+  };
+  // 1.
+  const onBasket = items => {
+    console.log('CheckoutWizard.onBasket', items);
+    onCheckout_(Object.assign(Object.assign({}, checkout), {
+      items
+    }));
+    setStatus(exports.CheckoutStatus.Info);
+  };
+  // 2.
+  const onInfo = info => {
+    console.log('CheckoutWizard.onInfo', info);
+    onCheckout_(Object.assign(Object.assign({}, checkout), info));
+    setStatus(exports.CheckoutStatus.Delivery);
+  };
+  // 3.
+  const onDelivery = delivery => {
+    console.log('CheckoutWizard.onDelivery', delivery);
+    onCheckout_(Object.assign(Object.assign({}, checkout), {
+      delivery
+    }));
+    setStatus(exports.CheckoutStatus.Review);
+  };
+  // 4.
+  const onReview = store => {
+    console.log('CheckoutWizard.onReview', store);
+    onCheckout_(Object.assign(Object.assign({}, checkout), {
+      store
+    }));
+    setStatus(exports.CheckoutStatus.Payment);
+  };
+  // 5.
+  const onPayment = payment => __awaiter(void 0, void 0, void 0, function* () {
+    console.log('CheckoutWizard.onPayment', payment);
+    try {
+      const response = yield api.post('/checkout/payment', Object.assign(Object.assign({}, checkout), {
+        payment
+      }));
+      // console.log('onPayment.response', response);
+      window.location.href = response.redirectUrl;
+    } catch (error) {
+      console.error('onPayment.error', error);
+    }
+    /*
+    onCheckout_({ ...checkout, payment });
+    setStatus(CheckoutStatus.Complete);
+    */
+  });
+  const onPrevious = () => {
+    console.log('CheckoutWizard.onPrevious');
+    if (status > exports.CheckoutStatus.Basket) {
+      setStatus(status - 1);
+    }
+    bomMixerHooks.scrollToY(0);
+  };
+  return jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [jsxRuntime.jsx(bomMixerUi.Section, {
+      position: "sticky",
+      top: "80px",
+      padding: "1rem 0",
+      zIndex: "800",
+      background: "var(--color-primary-100)",
+      children: jsxRuntime.jsx(bomMixerUi.Container, {
+        children: jsxRuntime.jsxs(StyledWizard, {
+          justifyContent: "space-between",
+          children: [jsxRuntime.jsx(bomMixerUi.Flex, {
+            className: bomCore.getClassNames({
+              active: status === exports.CheckoutStatus.Basket
+            }),
+            children: "Basket"
+          }), jsxRuntime.jsx(bomMixerUi.Flex, {
+            className: bomCore.getClassNames({
+              active: status === exports.CheckoutStatus.Info
+            }),
+            children: "User data"
+          }), jsxRuntime.jsx(bomMixerUi.Flex, {
+            className: bomCore.getClassNames({
+              active: status === exports.CheckoutStatus.Delivery
+            }),
+            children: "Delivery"
+          }), jsxRuntime.jsx(bomMixerUi.Flex, {
+            className: bomCore.getClassNames({
+              active: status === exports.CheckoutStatus.Review
+            }),
+            children: "Review"
+          }), jsxRuntime.jsx(bomMixerUi.Flex, {
+            className: bomCore.getClassNames({
+              active: status === exports.CheckoutStatus.Payment
+            }),
+            children: "Payment"
+          }), jsxRuntime.jsx(bomMixerUi.Flex, {
+            className: bomCore.getClassNames({
+              active: status === exports.CheckoutStatus.Complete
+            }),
+            children: "Complete"
+          })]
+        })
+      })
+    }), status === exports.CheckoutStatus.Basket && jsxRuntime.jsx(CheckoutBasket, {
+      onBasket: onBasket
+    }), status === exports.CheckoutStatus.Info && jsxRuntime.jsx(CheckoutInfo, {
+      onInfo: onInfo,
+      onPrevious: onPrevious
+    }), status === exports.CheckoutStatus.Delivery && jsxRuntime.jsx(CheckoutDelivery, {
+      onDelivery: onDelivery,
+      onPrevious: onPrevious
+    }), status === exports.CheckoutStatus.Review && jsxRuntime.jsx(CheckoutReview, {
+      onReview: onReview,
+      onPrevious: onPrevious
+    }), status === exports.CheckoutStatus.Payment && jsxRuntime.jsx(CheckoutPayment, {
+      onPayment: onPayment,
+      onPrevious: onPrevious
+    })]
+  });
+};
+
+// step 1.
+function getItems(items, market, locale, user) {
+  return __awaiter(this, void 0, void 0, function* () {
+    // !!! todo calculate user discount price
+    return items.map(x => Object.assign(Object.assign({}, x), {
+      fullPrice: x.price * 1.1,
+      price: x.price
+    }));
+  });
+}
+// step 2.
+function getInfo(checkout, market, locale) {
+  return __awaiter(this, void 0, void 0, function* () {
+    const countries = yield bomMixerModels.getCountries(locale);
+    const provinces = yield bomMixerModels.getProvinces(locale);
+    const regions = yield bomMixerModels.getRegions(locale);
+    const data = {
+      countries,
+      regions,
+      provinces
+    };
+    return data;
+  });
+}
+// step 3.
+function getDeliveries(checkout, market, locale) {
+  return __awaiter(this, void 0, void 0, function* () {
+    return [{
+      'id': 1,
+      'name': 'In-store pick up',
+      'abstract': 'Conveniently collect from your nearest shop at no extra charge',
+      'price': 0,
+      'fullPrice': 0
+    }, {
+      'id': 2,
+      'name': 'Courier delivery',
+      'abstract': 'Packaged goods are delivered by our trusted forwarder.',
+      'price': 81,
+      'fullPrice': 81
+    }, {
+      'id': 3,
+      'name': 'In-home courier delivery',
+      'abstract': 'Packaged goods are delivered inside at front door. <br>White glove delivery, unpacking, assembly, or removal of debris is optional on request.',
+      'price': 156,
+      'fullPrice': 156
+    }];
+  });
+}
+// step 4.
+function getStores(checkout, market, locale) {
+  return __awaiter(this, void 0, void 0, function* () {
+    return [{
+      'id': 10366,
+      'category': {
+        'id': 'store_category_distributor',
+        'name': 'Mixer Distributor'
+      },
+      'name': 'Di Paolo Arredamenti',
+      'address': 'Viale Cesare Battisti',
+      'streetNumber': '80',
+      'zipCode': '64020',
+      'city': 'Bellante',
+      'country': {
+        'id': 'it',
+        'name': 'Italy'
+      },
+      'phoneNumber': '+39 0861 616436',
+      'timetable': [],
+      'position': {
+        'latitude': 0.0,
+        'longitude': 0.0
+      },
+      'distance': 151.84174300013095,
+      'rank': 1
+    }, {
+      'id': 7430,
+      'category': {
+        'id': 'store_category_distributor',
+        'name': 'Mixer Distributor'
+      },
+      'name': 'Mancini Italian Design & Art S.r.l.',
+      'address': 'Via Ascari',
+      'streetNumber': '2',
+      'zipCode': '41053',
+      'city': 'Maranello',
+      'country': {
+        'id': 'it',
+        'name': 'Italy'
+      },
+      'email': 'info@mancinimida.com',
+      'timetable': [],
+      'position': {
+        'latitude': 0.0,
+        'longitude': 0.0
+      },
+      'distance': 170.6551472799284,
+      'rank': 2
+    }, {
+      'id': 325,
+      'category': {
+        'id': 'store_category_distributor',
+        'name': 'Mixer Distributor'
+      },
+      'name': 'AD dal Pozzo',
+      'address': 'Via Mazzini',
+      'streetNumber': '24',
+      'zipCode': '36040',
+      'city': 'Grisignano Di Zocco',
+      'country': {
+        'id': 'it',
+        'name': 'Italy'
+      },
+      'phoneNumber': '+39 0444 614521',
+      'email': 'mfort@websolute.it',
+      'timetable': [],
+      'position': {
+        'latitude': 0.0,
+        'longitude': 0.0
+      },
+      'distance': 196.0600048738732,
+      'rank': 3
+    }];
+  });
+}
+// step 5.
+function getPayments(checkout, market, locale) {
+  return __awaiter(this, void 0, void 0, function* () {
+    return [{
+      'id': 'alipay',
+      'name': 'Alipay',
+      'media': {
+        'type': 'image',
+        'src': '/assets/payment/alipay.svg'
+      }
+    }, {
+      'id': 'amex',
+      'name': 'American Express',
+      'media': {
+        'type': 'image',
+        'src': '/assets/payment/american-express.svg'
+      }
+    }, {
+      'id': 'apple-pay',
+      'name': 'Apple Pay',
+      'media': {
+        'type': 'image',
+        'src': '/assets/payment/apple-pay.svg'
+      }
+    }, {
+      'id': 'bank-transfer',
+      'name': 'Bank Transfer',
+      'media': {
+        'type': 'image',
+        'src': '/assets/payment/bank-transfer.svg'
+      }
+    }, {
+      'id': 'cbc',
+      'name': 'CBC',
+      'media': {
+        'type': 'image',
+        'src': '/assets/payment/cbc.svg'
+      }
+    }, {
+      'id': 'direct-debit',
+      'name': 'Direct Debit',
+      'media': {
+        'type': 'image',
+        'src': '/assets/payment/direct-debit.svg'
+      }
+    }, {
+      'id': 'googlepay',
+      'name': 'Google Pay',
+      'media': {
+        'type': 'image',
+        'src': '/assets/payment/googlepay.svg'
+      }
+    }, {
+      'id': 'ideal',
+      'name': 'iDEAL',
+      'media': {
+        'type': 'image',
+        'src': '/assets/payment/ideal.svg'
+      }
+    }, {
+      'id': 'maestro',
+      'name': 'Maestro',
+      'media': {
+        'type': 'image',
+        'src': '/assets/payment/maestro.svg'
+      }
+    }, {
+      'id': 'mastercard',
+      'name': 'MasterCard',
+      'abstract': '<p>You can use your Mastercard credit card. The 3DS authentication procedure will be used when the order is concluded, and you will be redirected to the bank\'s web page. To complete the order, follow the required steps.</p>',
+      'media': {
+        'type': 'image',
+        'src': '/assets/payment/mastercard.svg'
+      }
+    }, {
+      'id': 'mybank',
+      'name': 'MyBank',
+      'media': {
+        'type': 'image',
+        'src': '/assets/payment/mybank.svg'
+      }
+    }, {
+      'id': 'paypal',
+      'name': 'PayPal',
+      'media': {
+        'type': 'image',
+        'src': '/assets/payment/paypal.svg'
+      }
+    }, {
+      'id': 'trustly',
+      'name': 'Trustly',
+      'media': {
+        'type': 'image',
+        'src': '/assets/payment/trustly.svg'
+      }
+    }, {
+      'id': 'visa',
+      'name': 'Visa',
+      'abstract': '<p>You can use your Visa credit card. The 3DS authentication procedure will be used when the order is concluded, and you will be redirected to the bank\'s web page. To complete the order, follow the required steps.</p>',
+      'media': {
+        'type': 'image',
+        'src': '/assets/payment/visa.svg'
+      }
+    }, {
+      'id': 'wechatpay',
+      'name': 'WeChat Pay',
+      'media': {
+        'type': 'image',
+        'src': '/assets/payment/wechatpay.svg'
+      }
+    }, {
+      'id': 'wire-transfer',
+      'name': 'Wire Transfer',
+      'abstract': '<p>The order confirmation will contain a summary of the total amount to be paid and the details of the bank to which the payment is to be made..</p><p> Once the payment has been made, the order will be activated and the delivery terms indicated for the various items ordered will apply. The successful completion of the payment will be communicated by email to the email address indicated during registration.</p>',
+      'media': {
+        'type': 'image',
+        'src': '/assets/payment/wire-transfer.svg'
+      }
+    }];
+  });
+}
+// update
+function updateCheckout(checkout, action, market, locale) {
+  return __awaiter(this, void 0, void 0, function* () {
+    var _a;
+    // generic checkout update
+    /*
+    switch (action) {
+      case 'basket':
+        break;
+      case 'info':
+        break;
+      case 'delivery':
+        break;
+      case 'store':
+        break;
+      case 'discount':
+        break;
+      case 'payment':
+        break;
+    }
+    */
+    // recalculate price
+    const subTotal = checkout.items ? checkout.items.reduce((p, c) => {
+      return p + c.price * c.qty;
+    }, 0) : 0;
+    const subTotalFull = checkout.items ? checkout.items.reduce((p, c) => {
+      return p + c.fullPrice * c.qty;
+    }, 0) : 0;
+    const subTotalDiscountPrice = checkout.discounts ? checkout.discounts.reduce((p, c) => {
+      let value = 0;
+      switch (c.id) {
+        case 'coupon10':
+          value = subTotal * 0.1 * -1;
+          c.price = value;
+          break;
+        case 'coupon50':
+          value = subTotal * 0.5 * -1;
+          c.price = value;
+          break;
+      }
+      return p + value;
+    }, 0) : 0;
+    const deliveryPrice = ((_a = checkout.delivery) === null || _a === void 0 ? void 0 : _a.price) || 0;
+    const afterTaxesDiscountPrice = checkout.discounts ? checkout.discounts.reduce((p, c) => {
+      let value = 0;
+      switch (c.id) {
+        case 'shipping':
+          value = deliveryPrice * -1;
+          c.price = value;
+          break;
+      }
+      return p + value;
+    }, 0) : 0;
+    // const totalDiscountPrice = subTotalDiscountPrice + afterTaxesDiscountPrice;
+    const taxes = (subTotal + subTotalDiscountPrice) * 0.2;
+    const total = subTotal + subTotalDiscountPrice + taxes + deliveryPrice + afterTaxesDiscountPrice;
+    checkout.subTotal = subTotal;
+    checkout.subTotalFull = subTotalFull;
+    checkout.taxes = taxes;
+    checkout.total = total;
+    return checkout;
+  });
+}
+// discounts
+function setDiscountCode(discountCode, checkout, market, locale) {
+  return __awaiter(this, void 0, void 0, function* () {
+    var _a, _b, _c;
+    const discounts = []; // checkout.discounts || [];
+    if (discountCode === 'shipping') {
+      discounts.push({
+        'id': 'shipping',
+        'name': 'shipping',
+        'abstract': 'Free shipping',
+        'price': (((_a = checkout.delivery) === null || _a === void 0 ? void 0 : _a.price) || 0) * -1,
+        'validFrom': new Date(),
+        'validTo': new Date()
+      });
+    }
+    if (discountCode === 'coupon10') {
+      discounts.push({
+        'id': 'coupon10',
+        'name': 'coupon10',
+        'abstract': '10%',
+        'price': (((_b = checkout.items) === null || _b === void 0 ? void 0 : _b.reduce((p, c) => p + c.price * c.qty * 0.1, 0)) || 0) * -1,
+        'validFrom': new Date(),
+        'validTo': new Date()
+      });
+    }
+    if (discountCode === 'coupon50') {
+      discounts.push({
+        'id': 'coupon50',
+        'name': 'coupon50',
+        'abstract': '50%',
+        'price': (((_c = checkout.items) === null || _c === void 0 ? void 0 : _c.reduce((p, c) => p + c.price * c.qty * 0.5, 0)) || 0) * -1,
+        'validFrom': new Date(),
+        'validTo': new Date()
+      });
+    }
+    return yield updateCheckout(Object.assign(Object.assign({}, checkout), {
+      discounts
+    }));
+  });
+}
+// payment
+function getPayment(checkout, market, locale) {
+  return __awaiter(this, void 0, void 0, function* () {
+    const knownRoutes = yield bomMixerModels.getRoutesForSchemas(['checkout_result'], market, locale);
+    // !!! todo return payment redirectUrl
+    const redirectUrl = `${knownRoutes.checkout_result}?orderId=1&status=OK`;
+    return {
+      redirectUrl
+    };
+  });
+}
+
+const IOrderStatus = {
+  Pending: 'pending',
+  // Customer started the checkout process but did not complete it. Incomplete orders are assigned a "Pending" status and can be found under the More tab in the View Orders screen.
+  AwaitingPayment: 'awaitingPayment',
+  // Customer has completed the checkout process, but payment has yet to be confirmed. Authorize only transactions that are not yet captured have this status.
+  AwaitingFulfillment: 'awaitingFulfillment',
+  // Customer has completed the checkout process and payment has been confirmed.
+  AwaitingShipment: 'awaitingShipment',
+  // Order has been pulled and packaged and is awaiting collection from a shipping provider.
+  AwaitingPickup: 'awaitingPickup',
+  // Order has been packaged and is awaiting customer pickup from a seller-specified location.
+  PartiallyShipped: 'partiallyShipped',
+  // Only some items in the order have been shipped.
+  Completed: 'completed',
+  // Order has been shipped/picked up, and receipt is confirmed; client has paid for their digital product, and their file(s) are available for download.
+  Shipped: 'shipped',
+  // Order has been shipped, but receipt has not been confirmed; seller has used the Ship Items action. A listing of all orders with a "Shipped" status can be found under the More tab of the View Orders screen.
+  Cancelled: 'cancelled',
+  // Seller has cancelled an order, due to a stock inconsistency or other reasons. Stock levels will automatically update depending on your Inventory Settings. Cancelling an order will not refund the order. This status is triggered automatically when an order using an authorize-only payment gateway is voided in the control panel before capturing payment.
+  Declined: 'declined',
+  // Seller has marked the order as declined.
+  Refunded: 'refunded',
+  // Seller has used the Refund action to refund the whole order. A listing of all orders with a "Refunded" status can be found under the More tab of the View Orders screen.
+  Disputed: 'disputed',
+  // Customer has initiated a dispute resolution process for the PayPal transaction that paid for the order or the seller has marked the order as a fraudulent order.
+  ManualVerificationRequired: 'manualVerificationRequired',
+  // Order on hold while some aspect, such as tax-exempt documentation, is manually confirmed. Orders with this status must be updated manually. Capturing funds or other order actions will not automatically update the status of an order marked Manual Verification Required.
+  PartiallyRefunded: 'partiallyRefunded' // Seller has partially refunded the order.
+};
+
+function getOrders() {
+  return __awaiter(this, arguments, void 0, function (params) {
+    if (params === void 0) {
+      params = {};
+    }
+    return function* () {
+      const store = yield bomMixerStore.getStore();
+      const items = yield store.order.findMany(params);
+      const {
+        market,
+        locale
+      } = params;
+      if (typeof market === 'string' && typeof locale === 'string') {
+        const knownRoutes = yield bomMixerModels.getRoutesForTemplates(['reserved_area_order_detail'], params.market, params.locale);
+        return items.map(x => Object.assign(Object.assign({}, x), {
+          href: `${knownRoutes.reserved_area_order_detail}?orderId=${x.id}`
+        }));
+      }
+      return items;
+    }();
+  });
+}
+function getOrder(id_1) {
+  return __awaiter(this, arguments, void 0, function (id, params) {
+    if (params === void 0) {
+      params = {};
+    }
+    return function* () {
+      const store = yield bomMixerStore.getStore();
+      const item = yield store.order.findOne(id, params);
+      if (item) {
+        const {
+          market,
+          locale
+        } = params;
+        if (typeof market === 'string' && typeof locale === 'string') {
+          const knownRoutes = yield bomMixerModels.getRoutesForTemplates(['reserved_area_order_detail'], params.market, params.locale);
+          return Object.assign(Object.assign({}, item), {
+            href: `${knownRoutes.reserved_area_order_detail}?orderId=${item.id}`
+          });
+        }
+      }
+      return item;
+    }();
+  });
+}
+
+const OrderItem = _ref => {
+  let {
+    item
+  } = _ref;
+  bomMixerHooks.useLayout();
+  const label = bomMixerHooks.useLabel();
+  const dateTimeFormat = bomMixerHooks.useDateTimeFormat({
+    year: 'numeric',
+    month: 'short',
+    day: 'numeric'
+  });
+  const currency = bomMixerHooks.useCurrency();
+  const qty = item.items.reduce((p, c) => p + c.qty, 0);
+  return jsxRuntime.jsxs(bomMixerUi.Flex.Row, {
+    gap: "2rem",
+    padding: "1rem",
+    border: "1px solid var(--color-neutral-300)",
+    children: [jsxRuntime.jsxs(bomMixerUi.Box, {
+      flexBasis: "80px",
+      children: [jsxRuntime.jsx(bomMixerUi.Text, {
+        variant: "paragraph40",
+        fontWeight: "700",
+        children: "ID"
+      }), jsxRuntime.jsx(bomMixerUi.NavLink, {
+        href: item.href,
+        children: jsxRuntime.jsxs(bomMixerUi.Button, {
+          as: "a",
+          variant: "underline",
+          children: ["#", item.id]
+        })
+      })]
+    }), jsxRuntime.jsxs(bomMixerUi.Box, {
+      flexBasis: "120px",
+      children: [jsxRuntime.jsx(bomMixerUi.Text, {
+        variant: "paragraph40",
+        fontWeight: "700",
+        children: "Order placed"
+      }), jsxRuntime.jsx(bomMixerUi.Text, {
+        variant: "paragraph30",
+        children: dateTimeFormat(item.date)
+      })]
+    }), jsxRuntime.jsxs(bomMixerUi.Box, {
+      flexBasis: "160px",
+      children: [jsxRuntime.jsx(bomMixerUi.Text, {
+        variant: "paragraph40",
+        fontWeight: "700",
+        children: "Current status"
+      }), jsxRuntime.jsx(bomMixerUi.Badge, {
+        children: label(`order.status.${item.status}`)
+      })]
+    }), jsxRuntime.jsxs(bomMixerUi.Box, {
+      flexBasis: "120px",
+      children: [jsxRuntime.jsx(bomMixerUi.Text, {
+        variant: "paragraph40",
+        fontWeight: "700",
+        children: "Articles"
+      }), jsxRuntime.jsx(bomMixerUi.Text, {
+        variant: "paragraph30",
+        children: qty.toString()
+      })]
+    }), jsxRuntime.jsxs(bomMixerUi.Box, {
+      flexBasis: "120px",
+      textAlign: "right",
+      children: [jsxRuntime.jsx(bomMixerUi.Text, {
+        variant: "paragraph40",
+        fontWeight: "700",
+        children: "Total"
+      }), jsxRuntime.jsx(bomMixerUi.Text, {
+        variant: "paragraph30",
+        children: currency(item.total)
+      })]
+    }), jsxRuntime.jsx(bomMixerUi.Box, {
+      flexGrow: "1",
+      textAlign: "right",
+      children: jsxRuntime.jsx(bomMixerUi.NavLink, {
+        href: item.href,
+        children: jsxRuntime.jsx(bomMixerUi.Button, {
+          as: "a",
+          variant: "primary",
+          size: "sm",
+          children: "Order detail"
+        })
+      })
+    })]
+  });
+};
+
+exports.CartContext = CartContext;
+exports.CartProvider = CartProvider;
+exports.CheckoutBasket = CheckoutBasket;
+exports.CheckoutBasketItem = CheckoutBasketItem;
+exports.CheckoutContext = CheckoutContext;
+exports.CheckoutDelivery = CheckoutDelivery;
+exports.CheckoutDiscount = CheckoutDiscount;
+exports.CheckoutEmpty = CheckoutEmpty;
+exports.CheckoutError = CheckoutError;
+exports.CheckoutForgot = CheckoutForgot;
+exports.CheckoutForgotSuccess = CheckoutForgotSuccess;
+exports.CheckoutInfo = CheckoutInfo;
+exports.CheckoutLogin = CheckoutLogin;
+exports.CheckoutPayment = CheckoutPayment;
+exports.CheckoutProvider = CheckoutProvider;
+exports.CheckoutRegister = CheckoutRegister;
+exports.CheckoutRegisterSuccess = CheckoutRegisterSuccess;
+exports.CheckoutReview = CheckoutReview;
+exports.CheckoutSuccess = CheckoutSuccess;
+exports.CheckoutUserInfo = CheckoutUserInfo;
+exports.CheckoutWizard = CheckoutWizard;
+exports.IOrderStatus = IOrderStatus;
+exports.OrderAddress = OrderAddress;
+exports.OrderItem = OrderItem;
+exports.OrderRegister = OrderRegister;
+exports.OrderSummary = OrderSummary;
+exports.OrderSummaryItem = OrderSummaryItem;
+exports.getDeliveries = getDeliveries;
+exports.getInfo = getInfo;
+exports.getItems = getItems;
+exports.getOrder = getOrder;
+exports.getOrders = getOrders;
+exports.getPayment = getPayment;
+exports.getPayments = getPayments;
+exports.getStores = getStores;
+exports.setDiscountCode = setDiscountCode;
+exports.updateCheckout = updateCheckout;
+exports.useCart = useCart;
+exports.useCheckout = useCheckout;
+//# sourceMappingURL=index.js.map