@trap_stevo/legendarybuilderproreact-ui/dist/HUDComponents/HUDReceipt.js

The legendary UI & utility API that makes your application a legendary application. ~ Created by Steven Compton

import _extends from "@babel/runtime/helpers/extends";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
import * as React from "react";
import { useEffect, useCallback, useMemo } from "react";
import HUDIcon from "./HUDIcon.js";
function HUDReceipt(_ref) {
  var _ref$receiptStorewide = _ref.receiptStorewideDiscountDetailsContainerConfigurationSettings,
    receiptStorewideDiscountDetailsContainerConfigurationSettings = _ref$receiptStorewide === void 0 ? {} : _ref$receiptStorewide,
    _ref$receiptStorewide2 = _ref.receiptStorewideDiscountFloatingBadgeConfigurationSettings,
    receiptStorewideDiscountFloatingBadgeConfigurationSettings = _ref$receiptStorewide2 === void 0 ? {} : _ref$receiptStorewide2,
    _ref$receiptStorewide3 = _ref.receiptStorewideDiscountContainerConfigurationSettings,
    receiptStorewideDiscountContainerConfigurationSettings = _ref$receiptStorewide3 === void 0 ? {} : _ref$receiptStorewide3,
    _ref$receiptStorewide4 = _ref.receiptStorewideDiscountBadgeConfigurationSettings,
    receiptStorewideDiscountBadgeConfigurationSettings = _ref$receiptStorewide4 === void 0 ? {} : _ref$receiptStorewide4,
    _ref$receiptStorewide5 = _ref.receiptStorewideDiscountItemConfigurationSettings,
    receiptStorewideDiscountItemConfigurationSettings = _ref$receiptStorewide5 === void 0 ? {} : _ref$receiptStorewide5,
    _ref$receiptTotalSect = _ref.receiptTotalSectionContainerConfigurationSettings,
    receiptTotalSectionContainerConfigurationSettings = _ref$receiptTotalSect === void 0 ? {} : _ref$receiptTotalSect,
    _ref$receiptItemFloat = _ref.receiptItemFloatingBadgeConfigurationSettings,
    receiptItemFloatingBadgeConfigurationSettings = _ref$receiptItemFloat === void 0 ? {} : _ref$receiptItemFloat,
    _ref$receiptHeaderCon = _ref.receiptHeaderContainerConfigurationSettings,
    receiptHeaderContainerConfigurationSettings = _ref$receiptHeaderCon === void 0 ? {} : _ref$receiptHeaderCon,
    _ref$receiptFooterCon = _ref.receiptFooterContainerConfigurationSettings,
    receiptFooterContainerConfigurationSettings = _ref$receiptFooterCon === void 0 ? {} : _ref$receiptFooterCon,
    _ref$receiptContainer = _ref.receiptContainerHoverConfigurationSettings,
    receiptContainerHoverConfigurationSettings = _ref$receiptContainer === void 0 ? {} : _ref$receiptContainer,
    _ref$receiptTotalHigh = _ref.receiptTotalHighlightConfigurationSettings,
    receiptTotalHighlightConfigurationSettings = _ref$receiptTotalHigh === void 0 ? {} : _ref$receiptTotalHigh,
    _ref$receiptItemConta = _ref.receiptItemContainerConfigurationSettings,
    receiptItemContainerConfigurationSettings = _ref$receiptItemConta === void 0 ? {} : _ref$receiptItemConta,
    _ref$receiptContainer2 = _ref.receiptContainerConfigurationSettings,
    receiptContainerConfigurationSettings = _ref$receiptContainer2 === void 0 ? {} : _ref$receiptContainer2,
    _ref$receiptNameLabel = _ref.receiptNameLabelConfigurationSettings,
    receiptNameLabelConfigurationSettings = _ref$receiptNameLabel === void 0 ? {} : _ref$receiptNameLabel,
    _ref$receiptDateLabel = _ref.receiptDateLabelConfigurationSettings,
    receiptDateLabelConfigurationSettings = _ref$receiptDateLabel === void 0 ? {} : _ref$receiptDateLabel,
    _ref$receiptLogoConfi = _ref.receiptLogoConfigurationSettings,
    receiptLogoConfigurationSettings = _ref$receiptLogoConfi === void 0 ? {} : _ref$receiptLogoConfi,
    _ref$receiptStorewide6 = _ref.receiptStorewideDiscountDetailsContainerConfigurations,
    receiptStorewideDiscountDetailsContainerConfigurations = _ref$receiptStorewide6 === void 0 ? {} : _ref$receiptStorewide6,
    _ref$receiptTotalHigh2 = _ref.receiptTotalHighlightSubtotalContainerConfigurations,
    receiptTotalHighlightSubtotalContainerConfigurations = _ref$receiptTotalHigh2 === void 0 ? {} : _ref$receiptTotalHigh2,
    _ref$receiptTotalHigh3 = _ref.receiptTotalHighlightTotalContainerConfigurations,
    receiptTotalHighlightTotalContainerConfigurations = _ref$receiptTotalHigh3 === void 0 ? {} : _ref$receiptTotalHigh3,
    _ref$receiptStorewide7 = _ref.receiptStorewideDiscountTitleLabelConfigurations,
    receiptStorewideDiscountTitleLabelConfigurations = _ref$receiptStorewide7 === void 0 ? {} : _ref$receiptStorewide7,
    _ref$receiptStorewide8 = _ref.receiptStorewideDiscountTotalLabelConfigurations,
    receiptStorewideDiscountTotalLabelConfigurations = _ref$receiptStorewide8 === void 0 ? {} : _ref$receiptStorewide8,
    _ref$receiptTotalHigh4 = _ref.receiptTotalHighlightTaxContainerConfigurations,
    receiptTotalHighlightTaxContainerConfigurations = _ref$receiptTotalHigh4 === void 0 ? {} : _ref$receiptTotalHigh4,
    _ref$receiptStorewide9 = _ref.receiptStorewideDiscountContainerConfigurations,
    receiptStorewideDiscountContainerConfigurations = _ref$receiptStorewide9 === void 0 ? {} : _ref$receiptStorewide9,
    _ref$receiptStorewide10 = _ref.receiptStorewideDiscountBadgeConfigurations,
    receiptStorewideDiscountBadgeConfigurations = _ref$receiptStorewide10 === void 0 ? {} : _ref$receiptStorewide10,
    _ref$receiptTotalSect2 = _ref.receiptTotalSectionContainerConfigurations,
    receiptTotalSectionContainerConfigurations = _ref$receiptTotalSect2 === void 0 ? {} : _ref$receiptTotalSect2,
    _ref$receiptStoreDeta = _ref.receiptStoreDetailsNameLabelConfigurations,
    receiptStoreDetailsNameLabelConfigurations = _ref$receiptStoreDeta === void 0 ? {} : _ref$receiptStoreDeta,
    _ref$receiptStoreDeta2 = _ref.receiptStoreDetailsDateLabelConfigurations,
    receiptStoreDetailsDateLabelConfigurations = _ref$receiptStoreDeta2 === void 0 ? {} : _ref$receiptStoreDeta2,
    _ref$receiptFooterMes = _ref.receiptFooterMessageLabelConfigurations,
    receiptFooterMessageLabelConfigurations = _ref$receiptFooterMes === void 0 ? {} : _ref$receiptFooterMes,
    _ref$receiptSubtotalC = _ref.receiptSubtotalContainerConfigurations,
    receiptSubtotalContainerConfigurations = _ref$receiptSubtotalC === void 0 ? {} : _ref$receiptSubtotalC,
    _ref$receiptTotalCont = _ref.receiptTotalContainerConfigurations,
    receiptTotalContainerConfigurations = _ref$receiptTotalCont === void 0 ? {} : _ref$receiptTotalCont,
    _ref$receiptTaxContai = _ref.receiptTaxContainerConfigurations,
    receiptTaxContainerConfigurations = _ref$receiptTaxContai === void 0 ? {} : _ref$receiptTaxContai,
    _ref$receiptHeaderCon2 = _ref.receiptHeaderContainerConfigurations,
    receiptHeaderContainerConfigurations = _ref$receiptHeaderCon2 === void 0 ? {} : _ref$receiptHeaderCon2,
    _ref$receiptFooterCon2 = _ref.receiptFooterContainerConfigurations,
    receiptFooterContainerConfigurations = _ref$receiptFooterCon2 === void 0 ? {} : _ref$receiptFooterCon2,
    _ref$receiptSubtotalL = _ref.receiptSubtotalLabelConfigurations,
    receiptSubtotalLabelConfigurations = _ref$receiptSubtotalL === void 0 ? {} : _ref$receiptSubtotalL,
    _ref$receiptTotalLabe = _ref.receiptTotalLabelConfigurations,
    receiptTotalLabelConfigurations = _ref$receiptTotalLabe === void 0 ? {} : _ref$receiptTotalLabe,
    _ref$receiptTaxLabelC = _ref.receiptTaxLabelConfigurations,
    receiptTaxLabelConfigurations = _ref$receiptTaxLabelC === void 0 ? {} : _ref$receiptTaxLabelC,
    _ref$receiptContainer3 = _ref.receiptContainerConfigurations,
    receiptContainerConfigurations = _ref$receiptContainer3 === void 0 ? {} : _ref$receiptContainer3,
    _ref$itemsContainerCo = _ref.itemsContainerConfigurations,
    itemsContainerConfigurations = _ref$itemsContainerCo === void 0 ? {} : _ref$itemsContainerCo,
    _ref$theme = _ref.theme,
    theme = _ref$theme === void 0 ? {} : _ref$theme,
    _ref$headerBottomCont = _ref.headerBottomContent,
    headerBottomContent = _ref$headerBottomCont === void 0 ? null : _ref$headerBottomCont,
    _ref$headerCenterCont = _ref.headerCenterContent,
    headerCenterContent = _ref$headerCenterCont === void 0 ? null : _ref$headerCenterCont,
    _ref$headerTopContent = _ref.headerTopContent,
    headerTopContent = _ref$headerTopContent === void 0 ? null : _ref$headerTopContent,
    _ref$headerContent = _ref.headerContent,
    headerContent = _ref$headerContent === void 0 ? null : _ref$headerContent,
    _ref$footerBottomCont = _ref.footerBottomContent,
    footerBottomContent = _ref$footerBottomCont === void 0 ? null : _ref$footerBottomCont,
    _ref$footerTopContent = _ref.footerTopContent,
    footerTopContent = _ref$footerTopContent === void 0 ? null : _ref$footerTopContent,
    _ref$footerContent = _ref.footerContent,
    footerContent = _ref$footerContent === void 0 ? null : _ref$footerContent,
    onTotalCalculated = _ref.onTotalCalculated,
    _ref$footer = _ref.footer,
    footer = _ref$footer === void 0 ? {
      message: "Thank you for your purchase!",
      showSocials: false
    } : _ref$footer,
    _ref$storeDetails = _ref.storeDetails,
    storeDetails = _ref$storeDetails === void 0 ? {
      name: "Legendary Store",
      logoConfigurations: {
        alt: "Store Logo"
      }
    } : _ref$storeDetails,
    _ref$receiptStorewide11 = _ref.receiptStorewideDiscountContainerShadowColor,
    receiptStorewideDiscountContainerShadowColor = _ref$receiptStorewide11 === void 0 ? "rgba(0, 255, 169, 0.369)" : _ref$receiptStorewide11,
    _ref$receiptStorewide12 = _ref.receiptStorewideDiscountContainerBackground,
    receiptStorewideDiscountContainerBackground = _ref$receiptStorewide12 === void 0 ? "rgba(0, 255, 169, 0.169)" : _ref$receiptStorewide12,
    _ref$receiptStorewide13 = _ref.receiptStorewideDiscountContainerColor,
    receiptStorewideDiscountContainerColor = _ref$receiptStorewide13 === void 0 ? "rgba(0, 255, 169, 1)" : _ref$receiptStorewide13,
    _ref$receiptStorewide14 = _ref.receiptStorewideDiscountItemColor,
    receiptStorewideDiscountItemColor = _ref$receiptStorewide14 === void 0 ? "rgba(0, 255, 169, 1)" : _ref$receiptStorewide14,
    _ref$renderHeaderCont = _ref.renderHeaderContentOnlyInHeader,
    renderHeaderContentOnlyInHeader = _ref$renderHeaderCont === void 0 ? false : _ref$renderHeaderCont,
    _ref$renderFooterCont = _ref.renderFooterContentOnlyInFooter,
    renderFooterContentOnlyInFooter = _ref$renderFooterCont === void 0 ? false : _ref$renderFooterCont,
    _ref$showStorewideDis = _ref.showStorewideDiscountPercentage,
    showStorewideDiscountPercentage = _ref$showStorewideDis === void 0 ? false : _ref$showStorewideDis,
    _ref$showStorewideDis2 = _ref.showStorewideDiscountDetails,
    showStorewideDiscountDetails = _ref$showStorewideDis2 === void 0 ? true : _ref$showStorewideDis2,
    _ref$showStorewideDis3 = _ref.showStorewideDiscountBadge,
    showStorewideDiscountBadge = _ref$showStorewideDis3 === void 0 ? true : _ref$showStorewideDis3,
    _ref$date = _ref.date,
    date = _ref$date === void 0 ? new Date().toLocaleString() : _ref$date,
    _ref$layout = _ref.layout,
    layout = _ref$layout === void 0 ? "grid" : _ref$layout,
    _ref$currency = _ref.currency,
    currency = _ref$currency === void 0 ? "$" : _ref$currency,
    _ref$discounts = _ref.discounts,
    discounts = _ref$discounts === void 0 ? [] : _ref$discounts,
    _ref$items = _ref.items,
    items = _ref$items === void 0 ? [] : _ref$items,
    _ref$total = _ref.total,
    total = _ref$total === void 0 ? 0 : _ref$total,
    _ref$tax = _ref.tax,
    tax = _ref$tax === void 0 ? 0 : _ref$tax;
  var baseTheme = useMemo(function () {
    return {
      background: "rgba(20, 20, 40, 0.95)",
      textColor: "#FFFFFF",
      fontFamily: "'Poppins', sans-serif",
      accentColor: "#0ACF83",
      borderColor: "rgba(10, 207, 131, 0.6)",
      glowColor: "rgba(10, 207, 131, 0.3)",
      shadowColor: "rgba(10, 207, 131, 0.2)",
      highlightColor: "#00FFC6"
    };
  }, []);
  var mergedTheme = useMemo(function () {
    return _objectSpread(_objectSpread({}, baseTheme), theme);
  }, [baseTheme, theme]);
  var styles = useMemo(function () {
    return {
      container: _objectSpread({
        transition: "all 0.369s ease-in-out",
        fontFamily: mergedTheme.fontFamily,
        backdropFilter: "blur(8.69px)",
        border: "2px solid ".concat(mergedTheme.borderColor),
        borderRadius: "14px",
        boxShadow: "0px 6px 25px ".concat(mergedTheme.shadowColor),
        background: mergedTheme.background,
        color: mergedTheme.textColor,
        maxWidth: "500px",
        width: "100%",
        padding: "30px",
        margin: "auto"
      }, receiptContainerConfigurationSettings),
      containerHover: _objectSpread({
        transform: "scale(1.0269)",
        boxShadow: "0px 8px 30px ".concat(mergedTheme.glowColor)
      }, receiptContainerHoverConfigurationSettings),
      header: _objectSpread({
        textAlign: "center",
        textShadow: "0px 0px 8px ".concat(mergedTheme.glowColor),
        letterSpacing: "1.269px",
        fontWeight: "700",
        fontSize: "1.75rem",
        marginBottom: "20px"
      }, receiptHeaderContainerConfigurationSettings),
      name: _objectSpread({
        marginTop: "1.1069rem"
      }, receiptNameLabelConfigurationSettings),
      date: _objectSpread({
        fontWeight: "500",
        fontSize: "1rem",
        opacity: "0.85",
        marginBottom: "0.269rem"
      }, receiptDateLabelConfigurationSettings),
      logo: _objectSpread({
        objectFit: "contain",
        filter: "drop-shadow(0px 3px 5px rgba(0, 0, 0, 0.5))",
        height: "3.269rem",
        width: "3.269rem",
        marginBottom: "0.169rem"
      }, receiptLogoConfigurationSettings),
      item: _objectSpread({
        display: layout === "grid" ? "flex" : "block",
        justifyContent: "space-between",
        borderBottom: "1px dashed ".concat(mergedTheme.borderColor),
        fontWeight: "500",
        fontSize: "15px",
        paddingBottom: "6px",
        marginBottom: "10px"
      }, receiptItemContainerConfigurationSettings),
      totalSection: _objectSpread({
        fontWeight: "700",
        fontSize: "18px",
        borderTop: "2px solid ".concat(mergedTheme.borderColor),
        paddingTop: "10px",
        marginTop: "15px"
      }, receiptTotalSectionContainerConfigurationSettings),
      totalHighlight: _objectSpread({
        textShadow: "0px 0px 10px ".concat(mergedTheme.glowColor),
        fontWeight: "800",
        fontSize: "20px",
        color: mergedTheme.highlightColor
      }, receiptTotalHighlightConfigurationSettings),
      discountDetailsContainer: _objectSpread({
        marginBottom: "10px"
      }, receiptStorewideDiscountDetailsContainerConfigurationSettings),
      discountContainer: _objectSpread({
        display: "flex",
        justifyContent: "space-between",
        alignItems: "center",
        animation: "fadeIn 0.569s ease-in-out",
        fontWeight: "700",
        borderRadius: "8px",
        boxShadow: "0px 0px 12px ".concat(receiptStorewideDiscountContainerShadowColor),
        background: receiptStorewideDiscountContainerBackground,
        color: receiptStorewideDiscountContainerColor,
        padding: "10px",
        marginBottom: "10px",
        marginTop: "10px"
      }, receiptStorewideDiscountContainerConfigurationSettings),
      globalDiscountItem: _objectSpread({
        display: "flex",
        justifyContent: "space-between",
        color: receiptStorewideDiscountItemColor,
        scale: "0.869",
        padding: "4px 0"
      }, receiptStorewideDiscountItemConfigurationSettings),
      itemFloatingBadge: _objectSpread({
        position: "absolute",
        animation: "floatUp 0.869s ease-out",
        fontWeight: "bold",
        fontSize: "12px",
        borderRadius: "12px",
        boxShadow: "0px 0px 10px rgba(0, 255, 177.69, 0.269)",
        background: "rgba(0, 255, 169, 0.269)",
        color: "#FFF",
        padding: "4px 8px"
      }, receiptItemFloatingBadgeConfigurationSettings),
      floatingBadge: _objectSpread({
        position: "absolute",
        animation: "floatUp 0.869s ease-out",
        fontWeight: "bold",
        fontSize: "12px",
        borderRadius: "12px",
        boxShadow: "0px 0px 10px rgba(255, 71, 71, 0.69)",
        background: "#FF4747",
        color: "#FFF",
        padding: "4px 8px"
      }, receiptStorewideDiscountFloatingBadgeConfigurationSettings),
      footer: _objectSpread({
        textAlign: "center",
        fontStyle: "italic",
        fontSize: "14px",
        opacity: "0.869",
        paddingTop: "10px",
        marginTop: "20px"
      }, receiptFooterContainerConfigurationSettings)
    };
  }, [receiptStorewideDiscountDetailsContainerConfigurationSettings, receiptStorewideDiscountFloatingBadgeConfigurationSettings, receiptStorewideDiscountContainerConfigurationSettings, receiptStorewideDiscountItemConfigurationSettings, receiptTotalSectionContainerConfigurationSettings, receiptItemFloatingBadgeConfigurationSettings, receiptHeaderContainerConfigurationSettings, receiptFooterContainerConfigurationSettings, receiptContainerHoverConfigurationSettings, receiptTotalHighlightConfigurationSettings, receiptItemContainerConfigurationSettings, receiptContainerConfigurationSettings, receiptNameLabelConfigurationSettings, receiptDateLabelConfigurationSettings, receiptLogoConfigurationSettings, mergedTheme, receiptStorewideDiscountContainerShadowColor, receiptStorewideDiscountContainerBackground, receiptStorewideDiscountContainerColor, receiptStorewideDiscountItemColor]);
  var calculateItemDiscount = useCallback(function (item) {
    if (!item.discount) {
      return 0;
    }
    if (item.discount.type === "percentage") {
      return item.price * item.quantity * item.discount.value / 100;
    }
    return item.discount.value * item.quantity;
  }, []);
  var calculateSubtotal = useCallback(function () {
    return items.reduce(function (sum, item) {
      var itemDiscount = calculateItemDiscount(item);
      return sum + (item.price * item.quantity - itemDiscount);
    }, 0);
  }, [items, calculateItemDiscount]);
  var calculateGlobalDiscount = useCallback(function () {
    var subtotal = calculateSubtotal();
    return discounts.reduce(function (totalDiscount, discount) {
      if (discount.type === "percentage") {
        return totalDiscount + subtotal * discount.value / 100;
      }
      return totalDiscount + discount.value;
    }, 0);
  }, [calculateSubtotal, discounts]);
  var calculateTotal = useCallback(function () {
    var subtotal = calculateSubtotal();
    var globalDiscount = calculateGlobalDiscount();
    return subtotal - globalDiscount + tax;
  }, [calculateSubtotal, calculateGlobalDiscount, tax]);
  useEffect(function () {
    if (onTotalCalculated) {
      var subtotal = calculateSubtotal();
      var globalDiscount = calculateGlobalDiscount();
      var _total = calculateTotal();
      onTotalCalculated({
        subtotal: subtotal,
        itemDiscounts: items.map(function (item) {
          return {
            discount: calculateItemDiscount(item),
            name: item.name
          };
        }),
        globalDiscount: globalDiscount,
        total: _total,
        tax: tax
      });
    }
  }, [items, tax, calculateSubtotal, calculateGlobalDiscount, calculateTotal, onTotalCalculated]);
  return /*#__PURE__*/React.createElement("div", _extends({
    style: styles.container,
    onMouseEnter: function onMouseEnter(e) {
      return Object.assign(e.currentTarget.style, styles.containerHover);
    },
    onMouseLeave: function onMouseLeave(e) {
      return Object.assign(e.currentTarget.style, styles.container);
    }
  }, receiptContainerConfigurations), renderHeaderContentOnlyInHeader && headerContent ? headerContent : /*#__PURE__*/React.createElement("div", _extends({
    style: styles.header
  }, receiptHeaderContainerConfigurations), headerTopContent, storeDetails.logoConfigurations && /*#__PURE__*/React.createElement(HUDIcon, _extends({
    iconConfigurationSettings: styles.logo
  }, storeDetails.logoConfigurations || {})), headerCenterContent, /*#__PURE__*/React.createElement("h2", _extends({
    style: styles.name
  }, receiptStoreDetailsNameLabelConfigurations), storeDetails.name), /*#__PURE__*/React.createElement("p", _extends({
    style: styles.date
  }, receiptStoreDetailsDateLabelConfigurations), date), headerBottomContent), /*#__PURE__*/React.createElement("div", itemsContainerConfigurations, items.map(function (item, index) {
    var itemDiscount = calculateItemDiscount(item);
    return /*#__PURE__*/React.createElement("div", _extends({
      key: index,
      style: styles.item
    }, item.containerAppearanceConfigurations || {}), /*#__PURE__*/React.createElement("span", item.nameLabelAppearanceConfigurations || {}, item.name), item.discount && item.discount.type === "percentage" && /*#__PURE__*/React.createElement("span", {
      style: _objectSpread(_objectSpread({}, styles.itemFloatingBadge), {}, {
        position: "relative",
        bottom: "0.269rem",
        right: "-5.69rem"
      })
    }, item.discount.value, "% off!"), /*#__PURE__*/React.createElement("span", item.priceLabelAppearanceConfigurations || {}, currency, (item.price * item.quantity - itemDiscount).toFixed(2)));
  })), /*#__PURE__*/React.createElement("div", _extends({
    style: styles.totalSection
  }, receiptTotalSectionContainerConfigurations), /*#__PURE__*/React.createElement("div", _extends({
    style: {
      display: "flex",
      justifyContent: "space-between"
    }
  }, receiptSubtotalContainerConfigurations), /*#__PURE__*/React.createElement("span", receiptSubtotalLabelConfigurations, "Subtotal"), /*#__PURE__*/React.createElement("span", _extends({
    style: styles.totalHighlight
  }, receiptTotalHighlightSubtotalContainerConfigurations), currency, calculateSubtotal().toFixed(2))), discounts.length > 0 && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", _extends({
    style: styles.discountContainer
  }, receiptStorewideDiscountContainerConfigurations), /*#__PURE__*/React.createElement("span", receiptStorewideDiscountTitleLabelConfigurations, "Storewide Discounts"), /*#__PURE__*/React.createElement("span", _extends({
    style: styles.totalHighlight
  }, receiptStorewideDiscountTotalLabelConfigurations), "-", currency, showStorewideDiscountPercentage ? "".concat(calculateGlobalDiscount().toFixed(2), " (").concat((calculateGlobalDiscount() / calculateSubtotal() * 100).toFixed(1), "%)") : calculateGlobalDiscount().toFixed(2)), showStorewideDiscountBadge ? /*#__PURE__*/React.createElement("span", _extends({
    style: _objectSpread(_objectSpread({}, styles.floatingBadge), {}, {
      transform: "rotate(15.69deg)",
      right: "-10px",
      top: "-10px"
    }, receiptStorewideDiscountBadgeConfigurationSettings)
  }, receiptStorewideDiscountBadgeConfigurations), (calculateGlobalDiscount() / calculateSubtotal() * 100).toFixed(1), "% off!") : null), /*#__PURE__*/React.createElement("div", _extends({
    style: styles.discountDetailsContainer
  }, receiptStorewideDiscountDetailsContainerConfigurations), showStorewideDiscountDetails && discounts.map(function (discount, index) {
    return /*#__PURE__*/React.createElement("div", _extends({
      key: index,
      style: styles.globalDiscountItem
    }, discount.containerAppearanceConfigurations || {}), /*#__PURE__*/React.createElement("span", discount.nameLabelAppearanceConfigurations || {}, discount.name || "Complimentary Discount"), /*#__PURE__*/React.createElement("span", discount.discountLabelAppearanceConfigurations || {}, "-", currency, discount.type === "percentage" ? "".concat((calculateSubtotal() * discount.value / 100).toFixed(2), " (").concat(discount.value, "%)") : discount.value.toFixed(2)));
  }))), /*#__PURE__*/React.createElement("div", _extends({
    style: {
      display: "flex",
      justifyContent: "space-between"
    }
  }, receiptTaxContainerConfigurations), /*#__PURE__*/React.createElement("span", receiptTaxLabelConfigurations, "Tax"), /*#__PURE__*/React.createElement("span", _extends({
    style: styles.totalHighlight
  }, receiptTotalHighlightTaxContainerConfigurations), currency, tax.toFixed(2))), /*#__PURE__*/React.createElement("div", _extends({
    style: {
      display: "flex",
      justifyContent: "space-between",
      fontSize: "22px"
    }
  }, receiptTotalContainerConfigurations), /*#__PURE__*/React.createElement("span", receiptTotalLabelConfigurations, "Total"), /*#__PURE__*/React.createElement("span", _extends({
    style: styles.totalHighlight
  }, receiptTotalHighlightTotalContainerConfigurations), currency, calculateTotal().toFixed(2)))), renderFooterContentOnlyInFooter && footerContent ? footerContent : /*#__PURE__*/React.createElement("div", _extends({
    style: styles.footer
  }, receiptFooterContainerConfigurations), footerTopContent, /*#__PURE__*/React.createElement("p", receiptFooterMessageLabelConfigurations, footer.message), footerBottomContent));
}
;
export default HUDReceipt;