\n \n \n {line.available_quantity}\n {' '}\n \n {t('user.store.available')}\n \n )}\n {hideProductAvailabilityQuantities &&\n t(available ? 'user.store.available' : 'user.store.unavailable')}\n \n )}\n
\n {line.title}
\n {hasDates && useAvailability && (\n \n {!hideProductAvailabilityQuantities && (\n \n \n {ui.quantity}\n \n
\n \n {showPrices && !line.discountable && (\n
\n \n \n )\n }\n}\n\nconst uiToProps = {\n persist: true,\n state: {\n quantity: 0,\n deleting: false\n }\n}\n\nconst mapStateToProps = (state, props) => {\n return {\n currency: state.client.currency.toJS(),\n useAvailability: state.settings.get('store.use_availability') && props.line.tracking_type !== 'none',\n hideProductAvailabilityQuantities: state.settings.get('store.hide_product_availability_quantities'),\n showPrices: state.settings.get('store.use_prices')\n }\n}\n\nconst mapDispatchToProps = (_dispatch, props) => {\n const book = function (quantity) {\n if (quantity === 0) {\n props.updateUI({ deleting: true })\n }\n\n if (quantity === -1) {\n return\n }\n\n props.updateUI({ quantity })\n\n return cartActions\n .book({\n item_id: props.line.item_id,\n line_id: props.line.id,\n quantity,\n type: 'set',\n apiVersion: 1\n })\n .then(() => {\n const quantityChange = quantity - props.line.quantity\n\n triggerUserFrameworkBookEvent(props.line.item_id, quantityChange)\n })\n }\n\n return {\n increaseQty: () => {\n const newQuantity = props.ui.quantity + 1\n\n return book(newQuantity)\n },\n decreaseQty: () => {\n const newQuantity = props.ui.quantity - 1\n\n return book(newQuantity)\n },\n remove: () => book(0)\n }\n}\n\nexport default compose(\n withTranslation('user'),\n uiConnect('Line', uiToProps),\n reduxConnect(mapStateToProps, mapDispatchToProps)\n)(Line)\n","import React from 'react'\nimport PropTypes from 'prop-types'\n\nexport default class Delay extends React.Component {\n static displayName = 'Delay'\n\n static propTypes = {\n initial: PropTypes.number,\n children: PropTypes.any,\n value: PropTypes.number,\n period: PropTypes.number\n }\n\n constructor (props) {\n super(props)\n\n this.state = {\n value: this.props.initial\n }\n }\n\n static getDerivedStateFromProps (props, state) {\n return (props.value === state.value) ? null : { value: props.value }\n }\n\n componentDidMount = () => {\n const setProps = () => this.setState((prevState, props) => {\n const { value } = props\n\n // update state only if the value has changed\n return (prevState.value === value) ? null : { value }\n })\n\n return setTimeout(setProps, this.props.period)\n }\n\n render = () => {\n return this.props.children(this.state.value)\n }\n}\n","// React\nimport React from 'react'\nimport PropTypes from 'prop-types'\n\nconst Logo = ({ width = '52px', height = '28px' }) => (\n \n)\n\nLogo.propTypes = {\n width: PropTypes.string,\n height: PropTypes.string\n}\n\nexport default Logo\n","// React\nimport React from 'react'\nimport PropTypes from 'prop-types'\n\n// Hooks\nimport { useTranslation } from 'shared/utils/useTranslation'\n\n// Components\nimport Logo from 'shop-components/components/MiniCart/components/Logo'\n\n// Shared\nimport { featureEnabled, FeatureFlags } from 'shared/utils/features'\n\nexport const PoweredBy = ({ logoWidth }) => {\n const { t } = useTranslation('user')\n\n let title = t('user.powered_by_short')\n let href = 'https://booqable.com/?source=Shop&campaign=Cart'\n\n if (featureEnabled(FeatureFlags.EQUIPMENT_RENTAL_SOFTWARE_LINK)) {\n title = t('user.powered_by_equipment_rental_long')\n href = 'https://booqable.com/equipment-rental-software/?source=Shop&campaign=Cart'\n }\n\n return (\n \n \n \n {t('user.store.not_discountable_hint')}\n
\n )}\n {showPrices && line.display_price_in_cents > 0 && (\n{Format.money(line.display_price_in_cents, currency)}
\n )}\n\n {viewCartHref && (\n \n {t('user.store.view_cart')}\n \n )}\n {checkoutButtonValid && (\n checkoutButton\n )}\n {!checkoutButtonValid && (\n \n {checkoutButton}\n \n )}\n
\n )\n }\n\n render () {\n const { autoOpenedModal } = this.state\n const {\n cart,\n cartOpen,\n toggleCart,\n cartOverdue,\n cannotCheckout,\n checkingOut,\n hasDates,\n showPrices,\n showPoweredBy,\n currency,\n totalPriceAttribute,\n inPortal,\n locations,\n nonServiceCartLinesCount,\n t\n } = this.props\n const floatingCartClasses = []\n\n floatingCartClasses.push(cartOpen ? 'open' : 'closed')\n\n if (inPortal) {\n floatingCartClasses.push('portal')\n }\n\n return (\n \n \n \n \n
\n {t('user.store.my_order')}
\n {children}
\n\nModalTitle.propTypes = {\n children: PropTypes.node\n}\n\n/**\n * The body section of the Modal.\n *\n * @component\n * @param {Object} props - The properties for the ModalBody.\n * @param {React.ReactNode} props.children - The content to be rendered inside the body.\n * @param {string} [props.modifiers] - Custom CSS class for styling the body.\n *\n * @example\n * // Named import\n * import { ModalBody } from 'ui/components/Modal'\n *\n *This is the main content of the modal.
\n *This is the main content of the modal.
\n *\n \n
\n )}\n \n {!!deliveryError && (\n \n \n )}\n {showFulfillmentTypeSelect && (\n \n \n )}\n {isPickup && pickupLocations.size() > 1 && (\n
\n \n \n \n \n
\n )}\n {isDelivery && (\n \n
\n )}\n \n {children}\n
\n \n )\n } else {\n return children\n }\n }\n}\n\nconst mapStateToProps = (state, props) => {\n return {\n readOnlyMode: state.client.readOnlyMode\n }\n}\n\nexport default reduxConnect(mapStateToProps)(ReadOnlyModeDisabledComponent)\n","import Model from '../models'\nimport API from '../../api'\n\nModel.Availability.createAction('FETCH_ITEM_AVAILABILITY', (options) => {\n return API.get('item_availabilities', options)\n})\n\nModel.Availability.createAction('FETCH_CALENDAR_AVAILABILITY', (options) => {\n return API.get('cart_availabilities', options)\n})\n\nexport default Model.Availability.actions\n","// React\nimport React, { useState } from 'react'\nimport PropTypes from 'prop-types'\nimport { connect as reduxConnect } from 'react-redux'\n\n// Components\nimport { CartFlowPicker } from 'ui/components/Picker'\nimport { LocationPicker } from 'ui/components/Picker/LocationPicker'\nimport { FulfillmentType } from './FulfillmentType'\nimport BCartPicker from 'ui/blocks/Picker/types/cart'\nimport ReadOnlyModeDisabledComponent from 'store/components/ReadOnlyModeDisabledComponent'\n\n// Libraries\nimport _debounce from 'lodash/debounce'\n\n// Hooks\nimport { useSettings } from 'shared/utils/useSettings'\nimport { useOrm } from 'shared/utils/useOrm'\n\n// Shared\nimport { featureEnabled, FeatureFlags } from 'back_office/v2/utils/utils'\nimport AvailabilityActions from 'store/v2/redux/actions/availability'\nimport promiseDebounce from 'shared/utils/promiseDebounce'\nimport { useTranslation } from 'react-i18next'\n\n/**\n * CartPicker Component\n *\n * This component renders a CartFlowPicker with additional functionality for handling\n * availability fetching and duration changes.\n *\n * @param {Object} props - The component props\n * @param {string} props.mode - The mode of the picker ('freely', 'timeslot_duration', 'timeslot_fixed')\n * @param {Function} props.onChange - Callback function when selection changes\n * @param {string} props.format - The date format to use\n * @param {boolean} props.useTimes - Whether to use times in the picker\n * @param {Object} props.cart - The cart object\n * @param {Object} props.durations - Object of available durations\n * @param {Object} props.timeslots - Object of available timeslots\n * @param {Object} props.initialValues - Initial values for the picker\n * @param {boolean} props.useAMOrPM - Whether to use AM/PM format\n * @param {Object} props.minDate - The minimum selectable date\n * @param {boolean} [props.disabled] - Whether the picker is disabled\n * @param {Object} props.availabilities - Object of availability data\n * @param {boolean} props.availabilityLoading - Whether availability data is currently loading\n * @param {number} props.lineCount - The number of lines in the cart\n * @param {boolean} props.showAvailability - Whether to show availability\n * @param {Function} props.fetchAvailability - Function to fetch availability data\n *\n * @returns {React.ReactNode}\n */\nconst CartPicker = ({ cart, availabilities, ...props }) => {\n const [duration, setDuration] = useState(null)\n\n const locations = useOrm('locations', (locations) => {\n return locations.getAll({ archived_at: [null, undefined] })\n })\n const intervalInMinutes = useSettings('store.time_increment', {\n default: 15,\n transformer: (value) => parseInt(value)\n })\n\n const { t } = useTranslation('user')\n\n const handleMonthChange = (options, date) => {\n // Fetch availability on month change if setting enabled\n if (!props.showAvailability || !props.lineCount) return\n\n try {\n props.fetchAvailability(cart, {\n year: date.getFullYear(),\n month: date.getMonth() + 1,\n type: options.type,\n starts_at: options.values?.starts_at,\n durationData: duration\n })\n } catch {\n throw new Error('fetch_availability_error')\n }\n }\n\n const debouncedHandleMonthChange = () => {\n if (window.testMode) {\n return handleMonthChange\n } else {\n return promiseDebounce(handleMonthChange, 500)\n }\n }\n\n const handleAvailabilityFetch = (options, day) => {\n let date\n\n day = options?.day || day\n\n if (day) {\n date = day.toDate?.().getDate() ?? day\n }\n\n if (!props.showAvailability || !props.lineCount) return\n\n try {\n props.fetchAvailability(cart, {\n type: options.type,\n day: date,\n starts_at: options.values?.starts_at,\n month: options.values?.starts_at ? new Date(options.values?.starts_at).getMonth() + 1 : undefined,\n year: options.values?.starts_at ? new Date(options.values?.starts_at).getFullYear() : undefined,\n durationData: duration,\n location_id: options.values?.start_location_id\n })\n } catch {\n throw new Error('fetch_availability_error')\n }\n }\n\n const handleChangeDuration = (_duration, durationData) => {\n setDuration(durationData)\n }\n\n return (\n \n \n \n
\n \n {title || t('user.store.cart_title')} \n {onClose &&
\n \n \n
\n \n
\n
\n \n \n )\n }\n}\n\nconst mapStateToProps = (state) => {\n let timeFormat, totalPriceAttribute\n\n if (state.settings.get('dates.use_am_pm')) {\n timeFormat = 'hh:mm A'\n } else {\n timeFormat = 'HH:mm'\n }\n\n const cart = state.orm.carts.getById(state.client.cartId)\n const lines = state.orm.lines.getAll({\n id: cart != null ? cart.lines : undefined,\n product_type: ['consumable', 'rental', 'bundle']\n })\n\n const itemCount = lines.map((line) => line.quantity).reduce((a, b) => a + b, 0)\n\n if (state.settings.get('pricing.tax_strategy') === 'inclusive') {\n totalPriceAttribute = 'grand_total_with_tax_in_cents'\n } else {\n totalPriceAttribute = 'grand_total_in_cents'\n }\n\n return {\n floating: state.client.floatingCart,\n cartOpen: state.client.cartOpen,\n cart,\n currency: state.client.currency.toJS(),\n totalPriceAttribute,\n timeFormat,\n useTimes: state.settings.get('store.use_times'),\n usePrices: state.settings.get('store.use_prices'),\n itemCount\n }\n}\n\nconst mapDispatchToProps = () => {\n return {\n toggleCart: (cartOpen) => {\n return clientActions.toggleCart(cartOpen)\n }\n }\n}\n\nexport default compose(withTranslation('user'), reduxConnect(mapStateToProps, mapDispatchToProps))(Launcher)\n","// React\nimport React, { Fragment, useState, useEffect } from 'react'\n\n// Components\nimport FloatingCart from 'store/v2/react/scenes/cart/components/FloatingCart'\nimport { CartPicker } from 'store/modules/cart/FloatingCart/components/CartPicker'\nimport Launcher from 'store/modules/cart/FloatingCart/components/Launcher'\n\n// Hooks\nimport { useSettings } from 'shared/utils/useSettings'\n\nexport const Cart = () => {\n const [showPicker, setShowPicker] = useState(true)\n\n const isShowCartBehavior = useSettings('store.behaviors.add_button') === 'show_cart'\n\n useEffect(() => {\n if (document.querySelector('bq-date-picker-modal')) {\n setShowPicker(false)\n }\n }, [])\n\n return (\n \n {cart && cart.starts_at ?\n (\n \n {Format.date(cart.starts_at, 'shortDate')} \n {useTimes && Format.date(cart.starts_at, timeFormat)}\n {' - '}\n {Format.date(cart.stops_at, 'shortDate')} \n {useTimes && Format.date(cart.stops_at, timeFormat)}\n \n ) :\n ({t('user.store.select_a_period')})}\n
\n \n
\n {cart && itemCount ?\n (\n
\n \n \n {this.countLabel}\n \n {usePrices && (\n \n \n {Format.money(cart != null ? cart.get(totalPriceAttribute) : undefined, currency)}\n \n \n )}\n
\n ) :\n ({t('user.store.cart_empty')})}\n \n {isShowCartBehavior && (\n \n \n \n )}\n {showPicker &&
\n )\n}\n\nexport default Cart\n","import { Themed } from './styles'\n\nexport default Themed\n","import styled from 'styled-components'\n\nexport const Themed = styled.div`\n * {\n &:not(i) {\n font-family: ${(props) => props.theme.font.body};\n }\n }\n`\n","\n\n/**\n * Theme for being used in the checkout and store integration.\n */\n\nimport { colors, palette } from 'ui/themes/colors'\n\n// DO NOT USE THESE COLORS! THEY ARE DEPRECATED AND WILL BE REMOVED IN THE FUTURE\nconst deprecatedColors = (brandingColor) => {\n return {\n primary: brandingColor,\n secondary: colors['Text/Secondary'],\n success: colors['Success/Base'],\n info: colors['Accent1/Base'],\n warning: colors['Warning/Base'],\n danger: colors['Danger/Base'],\n\n light: palette.grey[20],\n dark: colors['Text/Primary'],\n\n borderHover: palette.grey[40]\n }\n}\n\nconst color = (brandingColor) => {\n return {\n black: palette.black,\n white: palette.white,\n transparent: 'transparent',\n branding: brandingColor,\n\n // Ease of use colors, corresponding to the Base color of the palette.\n // e.g. blue =~ colors['Primary/Base']\n blue: palette.blue[60],\n green: palette.green[50],\n orange: palette.orange[50],\n red: palette.red[60],\n purple: palette.purple[60],\n grey: palette.grey[30],\n\n ...colors,\n ...deprecatedColors(brandingColor)\n }\n}\n\n/**\n * We use a 4px grid system for spacing. This function calculates the pixel value for a given grid unit.\n * 0.5 grid units = 2px\n * 1 grid unit = 4px\n * 2 grid units = 8px\n * 3 grid units = 12px\n * 4 grid units = 16px\n * 5 grid units = 20px\n * 6 grid units = 24px\n * 7 grid units = 28px\n * 8 grid units = 32px\n * 9 grid units = 36px\n * 10 grid units = 40px\n * 11 grid units = 44px\n * 12 grid units = 48px\n * 16 grid units = 64px\n */\nconst grid = (unit) => {\n if (!Number.isInteger(unit) && unit !== 0.5) {\n throw new Error('Grid units must be integers or 0.5')\n }\n return `${unit * 4}px`\n}\n\nconst units = {\n 0.5: grid(0.5),\n 1: grid(1),\n 2: grid(2),\n 3: grid(3),\n 4: grid(4),\n 5: grid(5),\n 6: grid(6),\n 7: grid(7),\n 8: grid(8),\n 9: grid(9),\n 10: grid(10),\n 11: grid(11),\n 12: grid(12),\n 13: grid(13),\n 14: grid(14),\n 15: grid(15),\n 16: grid(16)\n}\n\nconst font = {\n base: 'Roboto',\n fallback: 'sans-serif',\n mono: 'Monospace',\n fontAwesomeStyle: 'far',\n size: {\n body: '20px',\n xs: '13px !important',\n sm: '13px',\n md: '14px',\n lg: '18px',\n lgplus: '22px',\n xl: '34px',\n xxl: '50px',\n xxxl: '66px'\n },\n weight: {\n light: '300',\n lighter: '400',\n normal: '500',\n semibold: '600',\n bold: '700'\n }\n}\n\nfont.body = `${font.base}, ${font.fallback}`\n\nconst size = {\n borderRadius: {\n xs: '2px',\n sm: '6px',\n md: '6px',\n lg: '6px',\n lgplus: '8px',\n xl: '13px'\n },\n borderWidth: {\n xs: '1px',\n sm: '1px',\n md: '1px',\n lg: '1px'\n },\n controlHeight: {\n xs: '26px',\n sm: '36px',\n md: '42px',\n lg: '50px'\n },\n margin: {\n xs: grid(1),\n sm: grid(3),\n md: grid(4),\n lg: grid(6)\n },\n padding: {\n xs: grid(1),\n sm: grid(3),\n md: grid(4),\n mdplus: grid(5),\n lg: grid(6),\n lgplus: grid(7),\n xl: grid(8),\n xlplus: grid(11),\n xxl: grid(12),\n xxxl: grid(16)\n },\n shadow: {\n sm: 'rgba(0, 0, 0, 0.2) 0px 1px 2px 0px',\n smplus: 'rgba(0, 0, 0, 0.1) 0px 4px 12px 0px',\n md: 'rgba(0, 0, 0, 0.1) 0 6px 14px 0',\n lg: 'rgba(0, 0, 0, 0.1) 0 6px 14px 0'\n },\n screenSizes: {\n xs: '0px',\n sm: '768px',\n md: '992px',\n lg: '1200px',\n xl: '1800px'\n }\n}\n\nconst opacity = {\n disabled: 0.6,\n destroying: 0.4\n}\n\nconst zIndex = [\n 1,\n 100,\n 200,\n 300,\n 400\n]\n\nexport default (brandingColor = '#8fcc40') => {\n return {\n color: color(brandingColor),\n font,\n opacity,\n size,\n zIndex,\n units\n }\n}\n","// React\nimport React, { Component } from 'react'\nimport PropTypes from 'prop-types'\nimport { connect as reduxConnect } from 'react-redux'\n\n// Libraries\nimport { ThemeProvider, StyleSheetManager } from 'styled-components'\n\n// Components\nimport BThemed from '../blocks/Themed'\n\n// Shared\nimport theme from 'ui/themes/public'\nimport getBrandingColor from 'shared/utils/getBrandingColor'\nimport { shouldForwardProp } from 'shared/utils/shouldForwardProp'\n\nclass Themed extends Component {\n static displayName = 'Themed'\n\n static propTypes = {\n children: PropTypes.node,\n brandingColor: PropTypes.string\n }\n\n render () {\n const { children, brandingColor } = this.props\n\n return (\n \n
\n )\n }\n\n renderContent = () => {\n const { id, item, photo, onClick, openQuickview, useAvailability, hideProductAvailabilityQuantities, hasDates, hasPrices, t } = this.props\n\n const preview = _get(photo, 'preview')\n const imageSrc = _get(photo, 'large_url') || item.photo_url\n const imageCoordinates = _get(photo, 'coordinates')\n\n return (\n \n \n \n \n \n \n
\n \n
\n \n
\n \n {t('user.store.product_placeholder')}\n
\n \n
\n \n )\n }\n\n render () {\n const { loading } = this.props\n\n return loading ? this.renderLoading() : this.renderContent()\n }\n}\n\nconst mapStateToProps = (state, props) => {\n const showPrices = state.settings.get('store.use_prices')\n const item = state.orm.items.getById(props.id)\n const cart = state.orm.carts.getById(state.client.cartId)\n const photo = item && state.orm.photos.getById(item.photo_id)\n\n return {\n loading: !item,\n translations: state.client.get('translations').toJS(),\n item,\n photo,\n useAvailability: state.settings.get('store.use_availability'),\n hideProductAvailabilityQuantities: state.settings.get('store.hide_product_availability_quantities'),\n hasDates: cart?.starts_at && cart?.stops_at,\n hasPrices: showPrices && item?.price_each_in_cents\n }\n}\n\nconst mapDispatchToProps = (_, props) => {\n const openQuickview = (id) => quickviewActions.setItem(id)\n\n return {\n openQuickview,\n onClick: (id, e) => {\n if (props.link && !e.target.getAttribute('data-link')) {\n return (window.location = props.link)\n } else {\n return openQuickview(id)\n }\n }\n }\n}\n\nexport default compose(reduxConnect(mapStateToProps, mapDispatchToProps), withTranslation('user'))(Product)\n","import React from 'react'\nimport { Provider } from 'react-redux'\n\nimport IdFinder from '../id_finder'\nimport Product from '../components/product'\nimport Themed from 'store/v2/react/components/Themed'\n\nconst store = window.booqableStore\n\nexport default class ProductGroup extends React.Component {\n static displayName = 'ProductGroupContainer'\n\n render = () => {\n return (\n \n \n {imageSrc && (\n \n
\n \n {useAvailability && hasDates && (\n \n {item.available_quantity === null && (\n {_capitalize(t('user.store.available'))}\n )}\n {item.available_quantity === 0 && (\n {_capitalize(t('user.store.unavailable'))}\n )}\n {item.available_quantity > 0 && (\n hideProductAvailabilityQuantities ?\n (\n \n {_capitalize(t('user.store.available'))}\n \n ) :\n (\n \n {item.available_quantity} \n {t('user.store.available')}\n \n )\n )}\n \n )}\n \n \n \n \n
\n {item && (\n \n {item.name}\n
\n \n \n \n
\n \n
\n )\n }\n}\n\nconst mapStateToProps = (state, props) => {\n const pages = Math.ceil(props.total / props.per)\n\n return {\n pages,\n showPrev: props.page !== 1,\n showNext: props.page !== pages\n }\n}\n\nconst mapDispatchToProps = (dispatch, props) => {\n const handlePageChange = (page) => {\n const pages = Math.ceil(props.total / props.per)\n\n if (page >= 1 && page <= pages) {\n return props.onChange(page)\n }\n }\n\n return {\n handlePage (page) {\n return handlePageChange(page)\n },\n handlePrevPage () {\n return handlePageChange(props.page - 1)\n },\n handleNextPage () {\n return handlePageChange(props.page + 1)\n }\n }\n}\n\nexport default reduxConnect(mapStateToProps, mapDispatchToProps)(Pagination)\n","const store = window.booqableStore\n\nexport const setFilterSearchQuery = (value, key = 'global') => {\n store.dispatch({\n type: 'SET_FILTER_SEARCH_QUERY',\n payload: {\n key,\n value\n }\n })\n}\n\nexport const setFilterCollection = (value, key = 'global') => {\n store.dispatch({\n type: 'SET_FILTER_COLLECTION',\n payload: {\n key,\n value\n }\n })\n}\n\nexport const setFilterSortBy = (value, key = 'global') => {\n store.dispatch({\n type: 'SET_FILTER_SORT_BY',\n payload: {\n key,\n value\n }\n })\n}\n\nexport const setFilterFilterBy = (value, key = 'global') => {\n store.dispatch({\n type: 'SET_FILTER_FILTER_BY',\n payload: {\n key,\n value\n }\n })\n}\n\nexport default {\n setFilterSearchQuery,\n setFilterSortBy,\n setFilterFilterBy\n}\n","// React\nimport React, { useRef, useState } from 'react'\nimport PropTypes from 'prop-types'\nimport { connect as reduxConnect } from 'react-redux'\n\n// Shared\nimport { withTranslation } from 'shared/utils/withTranslation'\nimport { setFilterSearchQuery } from 'store/v2/redux/actions/filter'\nimport useIsMobile from 'shared/utils/useIsMobile'\n\nconst ProductSearch = ({ t, filterKey = 'global' }) => {\n const ref = useRef()\n\n const [value, setValue] = useState('')\n\n const isMobile = useIsMobile()\n\n const handleInputChange = (e) => {\n setValue(e.target.value)\n\n // Search was cleared manually\n if (e.target.value === '') {\n setFilterSearchQuery('', filterKey)\n }\n }\n\n const handleInputKeyUp = (e) => {\n if (e.key === 'Enter') {\n setFilterSearchQuery(value, filterKey)\n\n if (isMobile) {\n ref.current?.blur()\n }\n }\n }\n\n const handleClearClick = () => {\n setValue('')\n\n setFilterSearchQuery('', filterKey)\n\n ref.current?.focus()\n }\n\n return (\n \n {this.props.showPrev && (\n \n \n \n )}\n {this.renderPages()}\n {this.props.showNext && (\n \n \n \n )}\n
\n \n
\n )\n}\n\nProductSearch.displayName = 'ProductSearch'\n\nProductSearch.propTypes = {\n t: PropTypes.func,\n filterKey: PropTypes.string\n}\n\nconst mapStateToProps = (state, props) => {\n return {\n filterKey: props.searchKey || props.filterKey\n }\n}\n\nconst decoratedComponent = reduxConnect(mapStateToProps)(ProductSearch)\n\nexport default withTranslation('user')(decoratedComponent)\n","import styled, { css } from 'styled-components'\n\nimport { fontWeight, color, size } from 'ui/themes/utils'\n\nimport I from 'ui/elements/I'\n\nexport const Collection = styled.div`\n display: flex;\n align-items: center;\n justify-content: space-between;\n\n font-size: 14px !important;\n line-height: 32px !important;\n font-family: \"Roboto\", sans-serif;\n\n cursor: pointer;\n\n font-weight: ${fontWeight('normal')} !important;\n\n clear: both;\n\n ${({ active }) => active && css`\n font-weight: ${fontWeight('bold')} !important;\n `}\n\n > div {\n flex-grow: 1;\n text-align: left;\n }\n\n > span {\n color: ${color('Text/Secondary')};\n font-weight: ${fontWeight('normal')} !important;\n }\n\n > ${I} {\n padding-right: ${size('padding', 'md')};\n }\n`\n\nexport const CollectionList = styled.ul`\n ${({ noPadding }) => !noPadding && css`\n > li {\n padding-left: 10px;\n }\n `}\n`\n","import { CollectionList, Collection } from './styles'\n\nCollectionList.Collection = Collection\n\nexport default CollectionList\n","import Model from '../models'\n\nexport default Model.Collection.actions\n","// React\nimport React, { useState, Fragment, useEffect } from 'react'\nimport PropTypes from 'prop-types'\nimport { connect as reduxConnect } from 'react-redux'\nimport { compose } from 'redux'\n\n// Libraries\nimport _get from 'lodash/get'\n\n// Components\nimport BCollectionList from 'store/modules/product/blocks/CollectionList'\nimport Icon from 'ui/components/Icon'\n\n// Shared\nimport { useTranslation } from 'react-i18next'\nimport { setFilterCollection } from 'store/v2/redux/actions/filter'\nimport CollectionActions from 'store/v2/redux/actions/collection'\n\nconst CollectionList = ({\n collections,\n rootCollections,\n active,\n fetchCollections,\n filterKey = 'global',\n brandColor,\n horizontalRule\n}) => {\n const [open, setOpen] = useState({})\n const { t } = useTranslation('user')\n\n useEffect(() => {\n fetchCollections()\n }, [])\n\n const handleToggleCollection = (collectionId, e) => {\n e?.stopPropagation()\n\n setOpen((prevOpen) => ({\n ...prevOpen,\n [collectionId]: !prevOpen[collectionId]\n }))\n }\n\n const handleFilterByCollection = (collectionId, e) => {\n // If collection is closed open it\n if (!open[collectionId]) {\n handleToggleCollection(collectionId)\n }\n\n e?.nativeEvent.stopImmediatePropagation()\n setFilterCollection(collectionId, filterKey)\n }\n\n const renderCollection = (collection) => {\n const children = collections.getAll({ parent_id: collection.id })\n const isOpen = !!open[collection.id]\n const hasChildren = children.size() > 0\n\n return (\n \n \n
\n \n \n
\n )}\n {collection.name}
\n {' '}\n {collection.item_count}\n \n\n {hasChildren && isOpen && }\n
\n
\n )\n })\n } else if (this.state.loading) {\n return range(1, this.props.loadingItems || this.state.loadingItems + 1).map((i) => (\n \n
\n ))\n } else if (this.props.searchValue !== '' || (this.props.hasItems && items.size() === 0)) {\n return {t('user.store.no_products_found_try_filters')}
\n } else {\n return (\n \n {t('user.store.no_products_found')}\n
\n )\n }\n }\n\n render () {\n const { t } = this.props\n const { cartModalOpen } = this.state\n\n return (\n \n {t('user.store.no_dates_set')}\n
\n )}\n {this.renderList()}\n {this.state.initialLoaded && this.state.total > 0 && (\n \n
\n \n \n {products.map((product) => (\n \n ))}\n \n
\n )\n }\n\n renderItem = (bundleItem) => {\n const { products, productGroups, photos, configuration } = this.props\n const productGroup = productGroups.getById(bundleItem.product_group_id)\n const product = products.getById(bundleItem.product_id)\n const variation = products.getById(configuration[bundleItem.id])\n const item = variation || product || productGroup\n const photo = photos.getById(item.photo_id)\n const choices = products.getAll({ product_group_id: productGroup.id }).sort('sorting_weight')\n\n return (\n {dateFormat(localDate, 'date')}
\n{dateFormat(availability.time, 'time')}
\n {showCounts &&{availability.quantity} {t('user.store.available')}
}\n {!showCounts &&{t(availability.status === 'available' ? 'user.store.available' : 'user.store.unavailable')}
}\n{t('user.store.check_availability', t('common.check_availability'))}
\n {' '}\n\n \n this.setState({ date }, this.handleFetchAvailability)}\n onDayClick={this.handleDayClick}\n disabledDays={(date) => isDayClosed({ date: localMomentInUTC(date), openingHours: operatingRules, allowPast: false })}\n modifiers={modifiers}\n from={selected.from}\n to={selected.to}\n className={!showTimes && 'DayPicker--interactionDisabled'}\n />\n \n
\n \n \n {products.map((product) => {\n const withAvailability =\n useAvailability &&\n hasDates &&\n product.tracking_type !== 'none' &&\n product.available_quantity !== null &&\n showCounts\n\n return (\n \n )\n })}\n \n
\n )\n }\n\n render () {\n const { item, productGroup, bundle, useAvailability, hasDates, addButtonUsesCheckoutBehaviour, t } = this.props\n const { quantity, configuration, price_each_in_cents: priceEachInCents } = this.state\n const selectedProduct = this.selectedProduct || bundle || item\n const loading = this.props.loading || this.state.loading\n\n let disabled = quantity <= 0 || _isNaN(quantity)\n\n if (addButtonUsesCheckoutBehaviour && useAvailability && selectedProduct?.tracking_type !== 'none') {\n disabled =\n disabled ||\n (hasDates && !selectedProduct?.available_quantity) ||\n (hasDates && quantity > selectedProduct?.available_quantity)\n }\n\n return (\n \n )\n }\n}\n\nconst mapStateToProps = (state, props) => {\n const cart = state.orm.carts.getById(state.client.cartId)\n const productGroup = state.orm.product_groups.getById(props.item.id)\n\n const hasDates = !!cart?.starts_at && !!cart?.stops_at\n\n return {\n cart,\n productGroup,\n operatingRules: getOperatingRules(state),\n availabilities: state.orm.shop_availabilities,\n useAvailability: state.settings.get('store.use_availability'),\n showProductAvailability: state.settings.get('store.show_product_availability'),\n bundle: state.orm.bundles.getById(props.item.id),\n products: state.orm.products.getAll({ product_group_id: productGroup && productGroup.id }).sort('sorting_weight'),\n showCounts: !state.settings.get('store.hide_product_availability_quantities'),\n addButtonUsesCheckoutBehaviour: state.settings.get('store.behaviors.add_button') === 'checkout',\n hasDates\n }\n}\n\nconst mapDispatchToProps = () => {\n return {\n clear: () => {\n return cartActions.clear({\n apiVersion: 1\n })\n },\n book: (itemId, line, quantity, configuration, addButtonUsesCheckoutBehaviour) => {\n return cartActions.book({ item_id: itemId, quantity, configuration, apiVersion: 1 }).then(() => {\n if (line) {\n lineActions.addLineQtyUI(line, quantity)\n }\n\n const addToCart = () => {\n quickviewActions.unsetItem()\n clientActions.toggleCart(true)\n }\n\n const handleCheckout = () => {\n quickviewActions.unsetItem()\n clientActions.setCheckingOut()\n }\n\n const checkout = () =>\n clientActions.evaluateCartOverdue() ? clientActions.toggleModalPicker(true) : handleCheckout()\n\n const action = addButtonUsesCheckoutBehaviour ? checkout : addToCart\n\n triggerUserFrameworkBookEvent(itemId, quantity)\n\n return setTimeout(action, 150)\n })\n }\n }\n}\n\nconst reduxComponent = reduxConnect(mapStateToProps, mapDispatchToProps)(ProductButton)\n\nexport default withTranslation('user')(reduxComponent)\n","import React from 'react'\nimport { Provider } from 'react-redux'\n\nimport IdFinder from '../id_finder'\nimport ProductButton from 'store/modules/product/components/ProductButton'\nimport Themed from 'store/v2/react/components/Themed'\n\nconst store = window.booqableStore\n\nexport default class Button extends React.Component {\n static displayName = 'ProductButtonContainer'\n\n render = () => {\n return (\n \n \n \n
\n \n
\n )\n }\n}\n\nconst uiToProps = {\n state: {\n selectedProductId: null\n }\n}\n\nconst mapStateToProps = (state, props) => {\n const item = props.item || state.orm.items.getById(props.itemId)\n const selectedProduct = productSelectors.selectedForProductGroup(\n state.orm.products.sort('sorting_weight'),\n props.ui != null ? props.ui.selectedProductId : undefined,\n item.id\n )\n const bundle = item.type === 'Bundle' && state.orm.bundles.getById(item.id)\n const bundleItems = bundle && state.orm.bundle_items.getById(bundle.bundle_items)\n\n return {\n item,\n translations: state.client.get('translations').toJS(),\n product: selectedProduct,\n cart: state.orm.carts.getById(state.client.cartId),\n bundle,\n bundleItems\n }\n}\n\nconst mapDispatchToProp = (_, props) => {\n return {\n onChangeProductId (id) {\n return props.updateUI({ selectedProductId: id })\n }\n }\n}\n\nexport default compose(\n uiConnect('ProductDetail', uiToProps),\n reduxConnect(mapStateToProps, mapDispatchToProp)\n)(ProductDetail)\n","import React from 'react'\nimport { Provider } from 'react-redux'\n\nimport IdFinder from '../id_finder'\nimport ProductDetail from '../components/product_detail'\nimport Themed from 'store/v2/react/components/Themed'\n\nconst store = window.booqableStore\n\nexport default class Detail extends React.Component {\n static displayName = 'ProductDetailContainer'\n\n render () {\n return (\n \n this.magnifyRef = ref} />\n
\n \n {item && item.name}\n
\n {item &&\n (\n\n \n \n
\n \n \n
\n \n )\n }\n}\n\nconst uiToProps = {\n state: {\n itemId: null\n }\n}\n\nconst mapStateToProps = (state, props) => {\n const itemId = props.ui.itemId\n\n return {\n itemId,\n item: state.orm.items.getById(itemId)\n }\n}\n\nconst mapDispatchToProps = (dispatch, props) => {\n const close = () => props.updateUI({ itemId: null })\n\n return {\n closeWrapper: (e) => {\n if (e.target.id === 'booqable-quickview-wrapper') {\n return close()\n }\n },\n close\n }\n}\n\nconst QuickviewInnerComposed = compose(\n uiConnect('Quickview', uiToProps),\n reduxConnect(mapStateToProps, mapDispatchToProps)\n)(QuickviewInner)\n\nexport default class Quickview extends React.Component {\n static displayName = 'Quickview'\n\n render () {\n return (\n \n \n {itemId &&
\n \n
\n \n
\n \n
\n \n \n {this.options.map((option) => (\n \n ))}\n \n
\n )\n }\n}\n\nconst mapStateToProps = (state, props) => {\n const filter = state.filter.get(props.filterKey || 'global')\n const sortBy = (filter && filter.get('sort_by')) || undefined\n\n return {\n sortBy,\n showPrices: state.settings.get('store.use_prices')\n }\n}\n\nconst mapDispatchToProps = (_dispatch, props) => {\n return {\n handleChangeSortBy: (event) => {\n let value = event.target.value\n\n if (value === 'null') {\n value = null\n }\n\n setFilterSortBy(value, props.filterKey || 'global')\n }\n }\n}\n\nconst reduxComponent = reduxConnect(mapStateToProps, mapDispatchToProps)(SortingSelect)\n\nexport default withTranslation('user')(reduxComponent)\n","// React\nimport React, { Component } from 'react'\nimport PropTypes from 'prop-types'\nimport { connect as reduxConnect } from 'react-redux'\n\n// Libraries\nimport { withTranslation } from 'shared/utils/withTranslation'\n\n// Components\n\n// Shared\nimport { setFilterFilterBy } from 'store/v2/redux/actions/filter'\n\nexport class FilterSelect extends Component {\n static displayName = 'FilterSelect'\n\n static propTypes = {\n filterBy: PropTypes.string,\n handleChangeFilter: PropTypes.func,\n useAvailability: PropTypes.bool\n }\n\n get options () {\n const { useAvailability, t } = this.props\n const options = [\n {\n label: t('user.store.filter_all'),\n value: null\n }\n ]\n\n if (useAvailability) {\n options.push(\n {\n label: t('user.store.filter_available'),\n value: 'available'\n }\n )\n }\n\n return options\n }\n\n render () {\n const { filterBy, handleChangeFilter } = this.props\n\n return (\n \n \n {this.options.map((option) => (\n \n ))}\n \n
\n )\n }\n}\n\nconst mapStateToProps = (state, props) => {\n const filter = state.filter.get(props.filterKey || 'global')\n const filterBy = (filter && filter.get('filter_by')) || undefined\n\n return {\n useAvailability: state.settings.get('store.use_availability'),\n filterBy\n }\n}\n\nconst mapDispatchToProps = (_dispatch, props) => {\n return {\n handleChangeFilter: (event) => {\n const value = event.target.value\n\n setFilterFilterBy(value, props.filterKey || 'global')\n }\n }\n}\n\nconst reduxComponent = reduxConnect(mapStateToProps, mapDispatchToProps)(FilterSelect)\n\nexport default withTranslation('user')(reduxComponent)\n\n","// React\nimport React, { Component } from 'react'\nimport PropTypes from 'prop-types'\n\n// Libraries\nimport { Provider } from 'react-redux'\n\n// Components\nimport ProductSearch from '../components/product_search'\nimport SortingSelect from 'store/modules/product/components/SortingSelect'\nimport FilterSelect from 'store/modules/product/components/FilterSelect'\nimport Themed from 'store/v2/react/components/Themed'\n\n// Shared\n\nconst store = window.booqableStore\n\nexport default class FilterBar extends Component {\n static displayName = 'FilterBar'\n\n static propTypes = {\n filterKey: PropTypes.string,\n searchKey: PropTypes.string\n }\n\n static defaultProps = {\n filterKey: 'global'\n }\n\n render () {\n const filterKey = this.props.searchKey || this.props.filterKey\n\n // TODO: Re-enable filterselect when availability filtering perfomance is improved\n return (\n \n
\n \n
\n \n
\n \n
\n \n {line?.photo && (\n
\n \n
\n )}\n {!line?.photo && (\n \n \n \n )}\n \n \n {line.available_quantity} \n {t('user.store.available')}\n \n )}\n {hideProductAvailabilityQuantities && (\n t(available ? 'user.store.available' : 'user.store.unavailable')\n )}\n \n )}\n
\n {line.title}
\n {hasDates && useAvailability && (\n \n {!hideProductAvailabilityQuantities && (\n \n \n
\n {t('user.store.cart_empty')}
\n }\n\n return lines.map((line) => \n
\n )\n }\n}\n\nconst mapStateToProps = (state) => {\n const cart = state.orm.carts.getById(state.client.cartId)\n const lines = state.orm.lines.getAll({ id: cart != null ? cart.lines : undefined })\n const usePrices = state.settings.get('store.use_prices')\n\n return { lines, usePrices }\n}\n\nconst reduxComponent = reduxConnect(mapStateToProps, null)(EmbeddableCartLines)\n\nexport default withTranslation('user')(reduxComponent)\n","// React\nimport React, { Component } from 'react'\nimport PropTypes from 'prop-types'\nimport { connect as reduxConnect } from 'react-redux'\n\n// Libraries\nimport { withTranslation } from 'shared/utils/withTranslation'\n\nexport class EmbeddableCartErrors extends Component {\n static displayName = 'EmbeddableCartErrors'\n\n static propTypes = {\n hasDates: PropTypes.bool,\n cannotCheckout: PropTypes.bool,\n t: PropTypes.func\n }\n\n render () {\n const { hasDates, cannotCheckout, t } = this.props\n\n let errorText\n\n if (hasDates && cannotCheckout) {\n errorText = t('user.store.not_all_products_available')\n }\n\n if (!hasDates) {\n errorText = t('user.store.select_a_period', 'Select a rental period')\n }\n\n if (!errorText) return null\n\n return (\n \n {lines.size() > 0 && (\n \n \n
\n )}\n {lines.size() <= 0 &&\n
\n | {t('user.store.product')} | \n{t('user.store.quantity')} | \n {usePrices &&{t('user.cart.total')} | }\n\n |
{t('user.store.cart_empty')}
}\n \n \n {errorText}\n
\n )\n }\n}\n\nconst mapStateToProps = (state, props) => {\n const cart = state.orm.carts.getById(state.client.cartId)\n const hasDates = !!(cart && cart.starts_at && cart.stops_at)\n const useAvailability = state.settings.get('store.use_availability')\n\n let cannotCheckout\n\n // Check if we need to calculate if use can checkout\n if (useAvailability) {\n cannotCheckout =\n state.orm.lines\n .getAll({\n id: cart != null ? cart.lines : undefined,\n can_checkout: false\n })\n .size() > 0\n } else {\n cannotCheckout = false\n }\n\n return {\n hasDates,\n cannotCheckout\n }\n}\n\nconst reduxComponent = reduxConnect(mapStateToProps, null)(EmbeddableCartErrors)\n\nexport default withTranslation('user')(reduxComponent)\n","// React\nimport React, { Component } from 'react'\nimport PropTypes from 'prop-types'\nimport { connect as reduxConnect } from 'react-redux'\n\n// Libraries\nimport { withTranslation } from 'shared/utils/withTranslation'\n\n// Components\n\n// Shared\nimport Format from 'shared/utils/format'\n\nexport class EmbeddableCartTotals extends Component {\n static displayName = 'EmbeddableCartTotals'\n\n static propTypes = {\n cart: PropTypes.object,\n currency: PropTypes.any,\n totalPriceAttribute: PropTypes.string,\n t: PropTypes.func\n }\n\n render () {\n const { cart, currency, totalPriceAttribute, t } = this.props\n\n if (!cart || cart.lines.length < 1) return null\n\n return (\n \n
\n )\n }\n}\n\nconst mapStateToProps = (state, _props) => {\n let totalPriceAttribute\n\n if (state.settings.get('pricing.tax_strategy') === 'inclusive') {\n totalPriceAttribute = 'grand_total_with_tax_in_cents'\n } else {\n totalPriceAttribute = 'grand_total_in_cents'\n }\n\n return {\n currency: state.client.currency != null ? state.client.currency.toJS() : undefined,\n totalPriceAttribute\n }\n}\n\nconst reduxComponent = reduxConnect(mapStateToProps, null)(EmbeddableCartTotals)\n\nexport default withTranslation('user')(reduxComponent)\n","// React\nimport React, { Component, Fragment } from 'react'\nimport PropTypes from 'prop-types'\nimport { connect as reduxConnect } from 'react-redux'\nimport { compose } from 'redux'\n\n// Components\nimport Errors from './Errors'\nimport Totals from './Totals'\nimport Services from 'store/components/Services'\nimport { CartPickerButton } from 'store/modules/cart/CartPicker/Button'\nimport ReadOnlyModeDisabledComponent from 'store/components/ReadOnlyModeDisabledComponent'\n\n// Shared\nimport clientActions from 'store/v2/redux/actions/client'\nimport { withTranslation } from 'shared/utils/withTranslation'\n\nexport class EmbeddableCartSidebar extends Component {\n static displayName = 'EmbeddableCartSidebar'\n\n static propTypes = {\n cart: PropTypes.object,\n checkoutButtonValid: PropTypes.bool,\n checkingOut: PropTypes.bool,\n setCheckingOut: PropTypes.func,\n usePrices: PropTypes.bool,\n showContinueShopping: PropTypes.bool,\n showDatePicker: PropTypes.bool,\n t: PropTypes.func\n }\n\n static defaultProps = {\n showContinueShopping: true,\n showDatePicker: true\n }\n\n handleBack = (event) => {\n window.history.back()\n event?.preventDefault()\n }\n\n render () {\n const {\n cart,\n checkoutButtonValid,\n showDatePicker,\n checkingOut,\n setCheckingOut,\n usePrices,\n showContinueShopping,\n t\n } = this.props\n const checkoutButtonClass = checkoutButtonValid ? 'bq-enabled' : 'bq-disabled'\n\n return (\n \n {t('user.store.subtotal')}\n \n {Format.money(\n cart != null ? cart.get(totalPriceAttribute) : undefined,\n currency\n )}\n \n
\n\n {(cart != null && cart.get('deposit_in_cents') !== 0) && (\n \n {t('user.store.security_deposit')}\n \n {Format.money(\n cart != null ? cart.get('deposit_in_cents') : undefined,\n currency\n )}\n \n
\n )}\n \n {showDatePicker &&
\n )\n }\n}\n\nconst mapStateToProps = (state, props) => {\n const cart = state.orm.carts.getById(state.client.cartId)\n\n let cannotCheckout\n\n const hasDates = !!(cart?.starts_at && cart?.stops_at)\n const useAvailability = state.settings.get('store.use_availability')\n const usePrices = state.settings.get('store.use_prices')\n\n // Check if we need to calculate if use can checkout\n if (useAvailability) {\n cannotCheckout =\n state.orm.lines\n .getAll({\n id: cart?.lines,\n can_checkout: false\n })\n .size() > 0\n } else {\n cannotCheckout = false\n }\n\n const checkoutButtonValid = !!(\n (Number(cart?.lines?.length || 0) > 0) &&\n hasDates &&\n !cannotCheckout &&\n !state.client.cartOverdue\n )\n\n return {\n cart,\n checkingOut: state.client.checkingOut,\n checkoutButtonValid,\n usePrices,\n showContinueShopping: props.continueShopping,\n showDatePicker: props.datepicker\n }\n}\n\nconst mapDispatchToProps = (_dispatch, _props) => {\n return {\n setCheckingOut: (e) => {\n e.preventDefault()\n\n if (clientActions.evaluateCartOverdue()) return\n\n clientActions.setCheckingOut()\n }\n }\n}\n\nexport default compose(\n reduxConnect(mapStateToProps, mapDispatchToProps),\n withTranslation('user')\n)(EmbeddableCartSidebar)\n","// React\nimport React, { Component, Fragment } from 'react'\nimport PropTypes from 'prop-types'\nimport { connect } from 'react-redux'\nimport { compose } from 'redux'\n\n// Components\nimport FocalImage from 'ui/components/FocalImage'\n\n// Shared\nimport Format from 'shared/utils/format'\nimport { withTranslation } from 'shared/utils/withTranslation'\n\nexport class EmbeddableCartMobileLine extends Component {\n static displayName = 'EmbeddableCartMobileLine'\n\n static propTypes = {\n line: PropTypes.object,\n currency: PropTypes.any,\n photo: PropTypes.object,\n useAvailability: PropTypes.bool,\n showPrices: PropTypes.bool,\n hideProductAvailabilityQuantities: PropTypes.bool,\n hasDates: PropTypes.bool,\n quantity: PropTypes.number,\n deleting: PropTypes.bool,\n onIncreaseQuantity: PropTypes.func,\n onDecreaseQuantity: PropTypes.func,\n onRemove: PropTypes.func,\n onInputChange: PropTypes.func,\n t: PropTypes.func\n }\n\n constructor (props) {\n super(props)\n\n this.state = {\n quantity: props.line.quantity,\n deleting: false\n }\n }\n\n render () {\n const {\n line,\n currency,\n useAvailability,\n showPrices,\n hideProductAvailabilityQuantities,\n hasDates,\n quantity,\n deleting,\n onIncreaseQuantity,\n onDecreaseQuantity,\n onRemove,\n onInputChange,\n t\n } = this.props\n\n const available = line.available_quantity >= quantity\n const statusClass = available ? 'bq-available' : 'bq-unavailable'\n\n if (line.product_type === 'service' || line.quantity === 0) {\n return null\n }\n\n return (\n \n \n
\n \n )}\n
\n\n \n {t('user.store.checkout')}\n \n \n )}\n {showContinueShopping && (\n \n )}\n
\n \n
\n
\n \n
\n )}\n {!checkingOut && (\n \n
\n )\n }\n}\n\nconst mapStateToProps = (state) => ({ hideProductAvailabilityQuantities: state.settings.get('store.hide_product_availability_quantities') })\n\nconst EnhancedEmbeddableCartMobileLine = compose(\n withTranslation('user'),\n connect(mapStateToProps)\n)(EmbeddableCartMobileLine)\n\nexport default EnhancedEmbeddableCartMobileLine\n","// React\nimport React, { Component } from 'react'\n\n// Libraries\n\n// Components\nimport LinesContainer from '../LinesContainer'\nimport Line from './Line'\n\n// Shared\n\nexport default class EmbeddableCartMobileLines extends Component {\n static displayName = 'EmbeddableCartMobileLines'\n\n render () {\n return (\n \n {line?.photo && (\n
\n \n
\n )}\n {!line?.photo && (\n \n \n \n )}\n \n \n {line.available_quantity} \n {t('user.store.available')}\n \n )}\n {hideProductAvailabilityQuantities &&\n t(available ? 'user.store.available' : 'user.store.unavailable')}\n \n )}\n
\n {line.title}
\n {hasDates && useAvailability && (\n \n {!hideProductAvailabilityQuantities && (\n \n \n
\n \n \n {showPrices && line.display_price_in_cents > 0 && (\n {Format.money(line.display_price_in_cents, currency)}\n )}\n
\n \n
\n )\n }\n}\n","// React\nimport React, { Component } from 'react'\nimport PropTypes from 'prop-types'\n\n// Libraries\n\n// Components\nimport Sidebar from '../Sidebar'\nimport { CartPickerButton } from 'store/modules/cart/CartPicker/Button'\nimport { PoweredBy } from 'shop-components/components/PoweredBy'\nimport Lines from './Lines'\nimport Spacer from 'ui/blocks/Spacer'\n\n// Shared\n\nexport class EmbeddableCartMobile extends Component {\n static displayName = 'EmbeddableCartMobile'\n\n static propTypes = {\n showPoweredBy: PropTypes.bool,\n t: PropTypes.func\n }\n\n render () {\n const { showPoweredBy } = this.props\n\n return (\n \n
\n )\n }\n}\n\nexport default EmbeddableCartMobile\n","// React\nimport React, { Component } from 'react'\nimport PropTypes from 'prop-types'\nimport { connect as reduxConnect } from 'react-redux'\n\n// Libraries\n\n// Components\nimport Lines from './Lines'\nimport Sidebar from './Sidebar'\nimport Mobile from './Mobile'\nimport { PoweredBy } from 'shop-components/components/PoweredBy'\n\n// Shared\nimport { setUserFrameworkCartData } from 'shared/utils/userFrameworkEvents'\n\nclass EmbeddableCart extends Component {\n static displayName = 'EmbeddableCart'\n\n static propTypes = {\n cart: PropTypes.object,\n showPoweredBy: PropTypes.bool,\n t: PropTypes.func\n }\n\n state = {\n triggeredTracking: false,\n renderMobileForDesktop: false\n }\n\n get isMobile () {\n return /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ||\n this.state.renderMobileForDesktop\n }\n\n componentDidMount () {\n window.addEventListener('resize', this.handleWindowResize)\n }\n\n componentWillUnmount () {\n window.removeEventListener('resize', this.handleWindowResize)\n }\n\n componentDidUpdate = (prevProps) => {\n const { cart } = this.props\n\n if (cart !== prevProps.cart) {\n setUserFrameworkCartData()\n }\n\n // On mount window.Booqable.data is not set yet. By keeping track of whether this is triggered,\n // we can use the data in reporting events\n if (window.Booqable.cartData && !this.state.triggeredTracking) {\n this.setState({ triggeredTracking: true })\n\n window.Booqable._trigger('viewCart')\n }\n }\n\n handleWindowResize = () => {\n const renderMobileForDesktop = window.innerWidth <= 991\n\n if (renderMobileForDesktop !== this.state.renderMobileForDesktop) {\n this.setState({ renderMobileForDesktop })\n }\n }\n\n renderDesktop () {\n const { showPoweredBy } = this.props\n\n return (\n \n
\n
\n \n
\n
\n )}\n \n
\n )\n }\n\n renderMobile () {\n const { showPoweredBy } = this.props\n\n return \n
\n \n
\n \n
\n )}\n \n
\n \n {compact ?\n
\n \n
\n \n
\n ),\n [isMobile, href]\n )\n\n const renderIcon = useCallback(\n () => (\n \n {isShowCartBehavior &&
\n )\n}\n\nexport default CartButton\n","// React\nimport React, { Component } from 'react'\n\n// Libraries\nimport { Provider } from 'react-redux'\n\n// Components\nimport Themed from 'store/v2/react/components/Themed'\nimport CartButton from 'store/v2/react/components/cart_button'\n\n// Shared\n\nconst store = window.booqableStore\n\nexport default class CartButtonContainer extends Component {\n static displayName = 'CartButtonContainer'\n\n render () {\n return (\n {product.name}
\n \n \n \n \n \n \n \n \n \n {quantity}\n \n \n \n {showPrices && line.display_price_in_cents > 0 && (\n \n {showPrices && !line.discountable && (\n \n \n )}\n \n )}\n \n
\n \n {line.title} \n {hasDates && useAvailability && (\n \n {!hideProductAvailabilityQuantities && (\n \n {line.available_quantity} {t('user.store.available')}\n \n )}\n {hideProductAvailabilityQuantities && (\n \n {t(available ? 'user.store.available' : 'user.store.unavailable')}\n \n )}\n \n )}\n
\n {Format.money(line.display_price_in_cents, currency)}
\n- \n
- \n {lines.map((line) => {\n return
\n })}\n \n
{t('user.store.cart_title')}
\n \n {t('user.cart.empty')} \n
\n {errorText}
\n{label}
\n{FormatUtils.money(value, currency)}
\n\n
\n {showPrices && (\n \n \n \n {cart.deposit_in_cents > 0 && (\n \n \n \n \n )}\n \n )}\n
\n {t('user.store.subtotal')}
\n{FormatUtils.money(cart[totalPriceAttribute], currency)}
\n{t('user.store.security_deposit')}
\n{FormatUtils.money(cart.deposit_in_cents, currency)}
\n\n
\n \n {itemCount} {t('common.resources.item', { count: itemCount })}\n \n {usePrices && (\n {Format.money(cart?.get(totalPriceAttribute), currency)}\n )}\n
\n ) :\n (\n {t('user.store.cart_empty')}\n )}\n