{"version":3,"sources":["webpack:///./src/stories/Components/Containers/Responsive/Responsive.styles.ts","webpack:///./src/stories/Components/Containers/Responsive/DesktopOnly.tsx","webpack:///./src/stories/Components/Containers/Responsive/MobileOnly.tsx","webpack:///./src/helpers/date.ts","webpack:///./src/img/icons/delete.svg","webpack:///./src/stories/Components/Cards/HireCard/HireCard.tsx","webpack:///./src/stories/Components/Cards/HireCard/HireCard.styles.ts"],"names":["DesktopOnly","styled","div","from","Device","TabletLarge","MobileOnly","children","React","createElement","S","formatStringDate","dateString","formatDate","Date","formatDateISO","value","date","toISOString","Intl","DateTimeFormat","undefined","day","month","year","format","formatDateLong","formatDateShort","_path","_extends","Object","assign","target","i","arguments","length","source","key","prototype","hasOwnProperty","call","apply","this","SvgDelete","props","xmlns","viewBox","d","fill","opacity","HireCard","useState","hire","quantity","setQuantity","productQuestion","answerText","answer","setAnswer","disabled","setDisabled","startDate","setStartDate","endDate","setEndDate","initialQuantity","setInitialQuantity","initialAnswer","setInitialAnswer","initialStartDate","setInitialStartDate","initialEndDate","setInitialEndDate","hasChanged","isEqual","error","setError","dispatch","useDispatch","variantPriceText","variant","priceFormatted","priceSuffix","hirePeriodText","differenceInDays","dayHirePeriodText","handleDelete","EcommerceService","DeleteBasketItem","productId","id","result","type","payload","updateBasket","UpdateBasketItem","hireDateEnd","getApiFormattedDate","hireDateStart","productQuestionAnswer","response","status","success","validationErrors","message","hireViewType","HireViewType","Editable","Card","Media","Image","src","imageUrl","width","height","layout","objectFit","alt","title","draggable","Content","Top","DeleteButton","onClick","DeleteIcon","Title","Small","SelectQuantity","Label","quantityLabel","Quantity","onChange","min","Text","Bottom","Split","NewDatePicker","label","startDateLabel","endDateLabel","readOnlyInputs","leadTimeDays","onStartDateChanged","onEndDateChanged","excludedDates","ProductQuestions","questionText","TextArea","required","placeholder","e","currentTarget","isValid","Button","branding","HireCardStyles","Error","ReadOnly","Field","marginAuto","Dates","brand","white","rgba","black","css","DatePickerStyles","Wrapper","TextboxStyles","Input","fonts","DaxPro","grey","grey20","small","grey55","attrs","readonly","primary","base","desktopOnly","mobileOnly","p","ParagraphStyles","Paragraph","red","TextAreaStyles"],"mappings":"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","file":"30-4adfdd5c4c19791919dd.js","sourcesContent":["import { Device, from } from '@helpers/media';\r\nimport styled from 'styled-components';\r\nconst DesktopOnly = styled.div `\r\n  display: none;\r\n\r\n  @media ${from(Device.TabletLarge)} {\r\n    display: block;\r\n  }\r\n`;\r\nconst MobileOnly = styled.div `\r\n  display: block;\r\n\r\n  @media ${from(Device.TabletLarge)} {\r\n    display: none;\r\n  }\r\n`;\r\nexport default {\r\n    DesktopOnly,\r\n    MobileOnly,\r\n};\r\n","import React from 'react';\r\nimport S from './Responsive.styles';\r\nconst DesktopOnly = ({ children }) => {\r\n    return React.createElement(S.DesktopOnly, null, children);\r\n};\r\nexport default DesktopOnly;\r\n","import React from 'react';\r\nimport S from './Responsive.styles';\r\nconst MobileOnly = ({ children }) => {\r\n    return React.createElement(S.MobileOnly, null, children);\r\n};\r\nexport default MobileOnly;\r\n","export function formatStringDate(dateString) {\r\n    const date = new Date(dateString);\r\n    return formatDate(date);\r\n}\r\nexport function formatDateISO(value) {\r\n    let date = value;\r\n    if (typeof date === 'string') {\r\n        date = new Date(date);\r\n    }\r\n    return date.toISOString();\r\n}\r\nexport function formatDate(value) {\r\n    let date = value;\r\n    if (typeof date === 'string') {\r\n        date = new Date(date);\r\n    }\r\n    return new Intl.DateTimeFormat(undefined, {\r\n        day: 'numeric',\r\n        month: 'short',\r\n        year: 'numeric',\r\n    }).format(date);\r\n}\r\nexport function formatDateLong(value) {\r\n    let date = value;\r\n    if (typeof date === 'string') {\r\n        date = new Date(date);\r\n    }\r\n    return new Intl.DateTimeFormat(undefined, {\r\n        day: 'numeric',\r\n        month: 'long',\r\n        year: 'numeric',\r\n    }).format(date);\r\n}\r\nexport function formatDateShort(value) {\r\n    let date = value;\r\n    if (typeof date === 'string') {\r\n        date = new Date(date);\r\n    }\r\n    return new Intl.DateTimeFormat(undefined, {\r\n        day: 'numeric',\r\n        month: '2-digit',\r\n        year: '2-digit',\r\n    }).format(date);\r\n}\r\n","var _path;\n\nfunction _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nimport * as React from \"react\";\n\nfunction SvgDelete(props) {\n  return /*#__PURE__*/React.createElement(\"svg\", _extends({\n    xmlns: \"http://www.w3.org/2000/svg\",\n    viewBox: \"0 0 20.313 25\"\n  }, props), _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n    \"data-name\": \"Icon metro-bin\",\n    d: \"M1.563 7.813v15.625A1.567 1.567 0 003.126 25h14.062a1.567 1.567 0 001.563-1.562V7.813H1.563zm4.688 14.059H4.688V10.938h1.563zm3.125 0H7.813V10.938h1.563zm3.126 0h-1.564V10.938h1.564zm3.125 0h-1.564V10.938h1.563zm3.516-18.75h-5.08v-1.95A1.175 1.175 0 0012.891 0H7.423a1.175 1.175 0 00-1.172 1.172v1.953H1.173A1.175 1.175 0 00.002 4.297V6.25h20.311V4.297a1.175 1.175 0 00-1.172-1.172zm-6.641.003H7.813V1.582h4.689v1.543z\",\n    fill: \"#8d8c8c\",\n    opacity: 0.75\n  })));\n}\n\nexport default __webpack_public_path__ + \"370a72e9271ada081335422a21c09ba1.svg\";\nexport { SvgDelete as ReactComponent };","import { HireViewType } from '@core/enums';\r\nimport { formatDate } from '@helpers/date';\r\nimport DesktopOnly from '@stories/Components/Containers/Responsive/DesktopOnly';\r\nimport MobileOnly from '@stories/Components/Containers/Responsive/MobileOnly';\r\nimport Quantity from '@stories/Components/Forms/Quantity/Quantity';\r\nimport TextArea from '@stories/Components/Forms/TextArea/TextArea';\r\nimport Image from '@stories/Components/Media/Image/Image';\r\nimport React, { useState } from 'react';\r\nimport { HireCardStyles, HireCardStyles as S } from './HireCard.styles';\r\nimport { ReactComponent as DeleteIcon } from '@img/icons/delete.svg';\r\nimport differenceInDays from 'date-fns/differenceInDays';\r\nimport EcommerceService from '@core/ecommerce/services/EcommerceService';\r\nimport { useDispatch } from 'react-redux';\r\nimport isEqual from 'date-fns/isEqual';\r\nimport Button from '@stories/Components/Buttons/Button/Button';\r\nimport NewDatePicker from '@stories/Components/Forms/NewDatePicker/DatePicker';\r\nconst HireCard = (props) => {\r\n    const [quantity, setQuantity] = useState(props.hire.quantity);\r\n    const [answer, setAnswer] = useState(props.hire.productQuestion?.answerText || '');\r\n    const [disabled, setDisabled] = useState(false);\r\n    const [startDate, setStartDate] = useState(props.hire.startDate);\r\n    const [endDate, setEndDate] = useState(props.hire.endDate);\r\n    const [initialQuantity, setInitialQuantity] = useState(props.hire.quantity);\r\n    const [initialAnswer, setInitialAnswer] = useState(props.hire.productQuestion?.answerText || '');\r\n    const [initialStartDate, setInitialStartDate] = useState(props.hire.startDate);\r\n    const [initialEndDate, setInitialEndDate] = useState(props.hire.endDate);\r\n    const hasChanged = quantity !== initialQuantity ||\r\n        answer !== initialAnswer ||\r\n        !isEqual(initialStartDate, startDate) ||\r\n        !isEqual(initialEndDate, endDate);\r\n    const [error, setError] = useState();\r\n    const dispatch = useDispatch();\r\n    const variantPriceText = `${props.hire.variant}: ${props.hire.priceFormatted} ${props.hire.priceSuffix}`;\r\n    // + 1 to include the starting date\r\n    const hirePeriodText = `${differenceInDays(props.hire.endDate, props.hire.startDate) + 1} ${props.hire.dayHirePeriodText}`;\r\n    const handleDelete = async () => {\r\n        setDisabled(true);\r\n        const result = await EcommerceService.DeleteBasketItem({ productId: props.hire.id });\r\n        dispatch({ type: 'BASKET/SET_BASKET', payload: result.result });\r\n        setDisabled(false);\r\n    };\r\n    const updateBasket = async () => {\r\n        setDisabled(true);\r\n        const response = await EcommerceService.UpdateBasketItem({\r\n            productId: props.hire.id,\r\n            hireDateEnd: EcommerceService.getApiFormattedDate(endDate),\r\n            hireDateStart: EcommerceService.getApiFormattedDate(startDate),\r\n            quantity: quantity,\r\n            productQuestionAnswer: answer,\r\n        });\r\n        if (!response.status.success) {\r\n            if (response.validationErrors && response.validationErrors.length > 0) {\r\n                setError(response.validationErrors[0].message);\r\n                setDisabled(false);\r\n            }\r\n            return;\r\n        }\r\n        if (response.status.success) {\r\n            dispatch({ type: 'BASKET/SET_BASKET', payload: response.result });\r\n            setError(undefined);\r\n            // Update the initial values\r\n            setInitialStartDate(startDate);\r\n            setInitialEndDate(endDate);\r\n            setInitialQuantity(quantity);\r\n            setInitialAnswer(answer);\r\n            setDisabled(false);\r\n        }\r\n    };\r\n    switch (props.hire.hireViewType) {\r\n        default:\r\n        case HireViewType.Editable: {\r\n            return (React.createElement(S.Card, { disabled: disabled },\r\n                React.createElement(S.Media, null,\r\n                    React.createElement(Image, { src: props.hire.imageUrl, width: 168, height: 168, layout: \"responsive\", objectFit: \"cover\", alt: props.hire.title || '', draggable: false })),\r\n                React.createElement(S.Content, null,\r\n                    React.createElement(S.Top, null,\r\n                        React.createElement(S.DeleteButton, { onClick: handleDelete },\r\n                            React.createElement(DeleteIcon, null)),\r\n                        React.createElement(S.Title, null, props.hire.title),\r\n                        React.createElement(S.Small, null, variantPriceText),\r\n                        React.createElement(MobileOnly, null,\r\n                            React.createElement(S.SelectQuantity, null,\r\n                                React.createElement(S.Label, null, props.hire.quantityLabel),\r\n                                React.createElement(Quantity, { value: quantity, onChange: setQuantity, min: 0 }))),\r\n                        React.createElement(S.Text, null, hirePeriodText)),\r\n                    React.createElement(S.Bottom, null,\r\n                        React.createElement(S.Split, null,\r\n                            React.createElement(NewDatePicker, { label: `${props.hire.startDateLabel} - ${props.hire.endDateLabel}`, readOnlyInputs: true, leadTimeDays: 0, startDate: startDate, onStartDateChanged: setStartDate, endDate: endDate, onEndDateChanged: setEndDate, excludedDates: props.excludedDates }),\r\n                            React.createElement(DesktopOnly, null,\r\n                                React.createElement(S.SelectQuantity, null,\r\n                                    React.createElement(S.Label, null, props.hire.quantityLabel),\r\n                                    React.createElement(Quantity, { value: quantity, onChange: setQuantity, min: 0 })))),\r\n                        React.createElement(S.ProductQuestions, null, props.hire.productQuestion &&\r\n                            props.hire.productQuestion.questionText.length > 0 ? (React.createElement(TextArea, { id: \"productQuestion\", required: true, label: props.hire.productQuestion.questionText, placeholder: props.hire.productQuestion.questionText, value: answer, onChange: (e) => setAnswer(e.currentTarget.value), isValid: answer !== undefined })) : null),\r\n                        React.createElement(Button, { branding: \"secondary\", disabled: !hasChanged, title: \"Save Changes\", onClick: () => updateBasket() })),\r\n                    error ? React.createElement(HireCardStyles.Error, null, error) : null)));\r\n        }\r\n        case HireViewType.ReadOnly: {\r\n            return (React.createElement(S.Card, { disabled: disabled },\r\n                React.createElement(S.Media, null,\r\n                    React.createElement(Image, { src: props.hire.imageUrl, width: 168, height: 168, layout: \"responsive\", objectFit: \"cover\", alt: props.hire.title || '', draggable: false })),\r\n                React.createElement(S.Content, null,\r\n                    React.createElement(S.Top, null,\r\n                        React.createElement(S.Title, null, props.hire.title),\r\n                        React.createElement(S.Field, null,\r\n                            React.createElement(S.Small, null, variantPriceText)),\r\n                        React.createElement(S.Field, null,\r\n                            React.createElement(S.Text, null, hirePeriodText))),\r\n                    React.createElement(S.Bottom, { marginAuto: true },\r\n                        React.createElement(S.Dates, null,\r\n                            React.createElement(S.Field, null,\r\n                                React.createElement(S.Label, null, props.hire.startDateLabel),\r\n                                formatDate(props.hire.startDate)),\r\n                            React.createElement(S.Field, null,\r\n                                React.createElement(S.Label, null, props.hire.endDateLabel),\r\n                                formatDate(props.hire.endDate))),\r\n                        props.hire.productQuestion ? (React.createElement(S.Field, null,\r\n                            React.createElement(S.Label, null, props.hire.productQuestion.questionText),\r\n                            props.hire.productQuestion.answerText)) : null))));\r\n        }\r\n    }\r\n};\r\nexport default HireCard;\r\n","import brand from '@helpers/brand';\r\nimport styled, { css } from 'styled-components';\r\nimport { rgba } from 'polished';\r\nimport { fonts } from '@helpers/fonts';\r\nimport { Device, from } from '@helpers/media';\r\nimport ParagraphStyles from '@stories/Components/Global/Typography/Paragraph.styles';\r\nimport DatePickerStyles from '@stories/Components/Forms/NewDatePicker/DatePicker.styles';\r\nimport TextboxStyles from '@stories/Components/Forms/Textbox/Textbox.styles';\r\nimport { TextAreaStyles } from '@stories/Components/Forms/TextArea/TextArea.styles';\r\nconst Card = styled.div `\r\n  position: relative;\r\n  display: flex;\r\n  padding: 16px;\r\n  background: ${brand.white};\r\n  border: 1px solid ${rgba(brand.black, 0.1)};\r\n  box-shadow: ${rgba(brand.black, 0.16)} 0 4px 10px;\r\n  transition: opacity 375ms ease;\r\n\r\n  &:after {\r\n    content: '';\r\n    position: absolute;\r\n    top: 0;\r\n    left: 0;\r\n    width: 100%;\r\n    height: 100%;\r\n    background: ${brand.white};\r\n\r\n    ${({ disabled }) => disabled\r\n    ? css `\r\n            opacity: 0.4;\r\n            cursor: progress;\r\n            transition: opacity 100ms ease;\r\n          `\r\n    : css `\r\n            transition: opacity 275ms ease;\r\n            pointer-events: none;\r\n            opacity: 0;\r\n          `};\r\n  }\r\n`;\r\nconst Media = styled.div `\r\n  position: absolute;\r\n  top: 16px;\r\n  left: 16px;\r\n  width: 100%;\r\n  max-width: 95px;\r\n\r\n  @media ${from(Device.TabletLarge)} {\r\n    max-width: 168px;\r\n    position: unset;\r\n  }\r\n\r\n  img {\r\n    display: block;\r\n    width: 100%;\r\n  }\r\n`;\r\nconst Content = styled.div `\r\n  display: flex;\r\n  flex-direction: column;\r\n  width: 100%;\r\n\r\n  @media ${from(Device.TabletLarge)} {\r\n    padding-left: 16px;\r\n  }\r\n`;\r\nconst Top = styled.div `\r\n  position: relative;\r\n`;\r\nconst Bottom = styled.div `\r\n  width: 100%;\r\n\r\n  ${DatePickerStyles.Wrapper} {\r\n    margin: 14px 0px;\r\n  }\r\n\r\n  input[type='text'],\r\n  ${TextboxStyles.Input} {\r\n    max-width: 332px;\r\n\r\n    @media ${from(Device.TabletLarge)} {\r\n      max-width: 295px;\r\n    }\r\n  }\r\n\r\n  ${({ marginAuto }) => marginAuto &&\r\n    css `\r\n      margin-top: auto;\r\n\r\n      ${() => Text} {\r\n        margin-top: auto;\r\n      }\r\n    `}\r\n`;\r\nconst Split = styled.div `\r\n  @media ${from(Device.TabletLarge)} {\r\n    display: flex;\r\n    justify-content: space-between;\r\n    flex-wrap: wrap;\r\n  }\r\n`;\r\nconst DeleteButton = styled.div `\r\n  position: absolute;\r\n  top: 0;\r\n  right: 0;\r\n  cursor: pointer;\r\n  transition: transform 0.15s ease;\r\n\r\n  svg {\r\n    width: 20px;\r\n    height: 25px;\r\n  }\r\n\r\n  &:hover {\r\n    transform: rotate(15deg);\r\n  }\r\n`;\r\nconst Title = styled.div `\r\n  font-size: 18px;\r\n  line-height: 1.2;\r\n  ${fonts.DaxPro['Medium']};\r\n  color: ${brand.grey.grey20};\r\n  margin-bottom: 6px;\r\n  min-height: 45px;\r\n  padding-left: 110px;\r\n  padding-right: 30px;\r\n\r\n  @media ${from(Device.TabletLarge)} {\r\n    font-size: 30px;\r\n    min-height: unset;\r\n    padding-left: unset;\r\n    padding-right: unset;\r\n  }\r\n`;\r\nconst Small = styled.small `\r\n  display: block;\r\n  font-size: 16px;\r\n  line-height: 1.2;\r\n  ${fonts.DaxPro['Regular']};\r\n  color: ${brand.grey.grey55};\r\n  padding-left: 110px;\r\n  margin-bottom: 36px;\r\n  min-height: 38px;\r\n\r\n  @media ${from(Device.TabletLarge)} {\r\n    font-size: 18px;\r\n    padding-left: unset;\r\n    margin-bottom: unset;\r\n    min-height: unset;\r\n  }\r\n`;\r\nconst Label = styled.label.attrs({ readonly: 'readonly' }) `\r\n  display: block;\r\n  font-size: 18px;\r\n  ${fonts.DaxPro['Medium']};\r\n  margin-bottom: 6px;\r\n  color: ${brand.grey.grey20};\r\n`;\r\nconst Text = styled.div `\r\n  line-height: 1.2;\r\n  font-size: 16px;\r\n  ${fonts.DaxPro['Medium']};\r\n  color: ${brand.primary.base};\r\n  margin: 16px 0 8px;\r\n\r\n  @media ${from(Device.TabletLarge)} {\r\n    font-size: 18px;\r\n  }\r\n\r\n  ${({ desktopOnly }) => desktopOnly &&\r\n    css `\r\n      display: none;\r\n\r\n      @media ${from(Device.TabletLarge)} {\r\n        display: block;\r\n        margin: 0;\r\n      }\r\n    `}\r\n\r\n  ${({ mobileOnly }) => mobileOnly &&\r\n    css `\r\n      display: block;\r\n      margin-bottom: 10px;\r\n\r\n      @media ${from(Device.TabletLarge)} {\r\n        display: none;\r\n      }\r\n    `}\r\n`;\r\nconst Field = styled.div `\r\n  margin-bottom: 12px;\r\n`;\r\nconst Dates = styled.div `\r\n  display: flex;\r\n  width: 100%;\r\n  flex: 1;\r\n  font-size: 18px;\r\n  ${fonts.DaxPro['Regular']};\r\n  color: ${rgba(brand.grey.grey20, 0.75)};\r\n\r\n  > ${Field} {\r\n    flex-basis: 50%;\r\n  }\r\n`;\r\nconst Error = styled.p `\r\n  ${ParagraphStyles.Paragraph};\r\n  font-size: 16px;\r\n  color: ${brand.red.base};\r\n  margin: 12px 0px;\r\n`;\r\nconst SelectQuantity = styled.div `\r\n  margin: 14px 0px;\r\n`;\r\nconst ProductQuestions = styled.div `\r\n  display: flex;\r\n  flex-direction: column;\r\n  justify-content: flex-start;\r\n  margin-bottom: 14px;\r\n\r\n  ${TextAreaStyles.Input} {\r\n    max-width: 332px;\r\n    height: 72px !important;\r\n    padding: 13px 18px;\r\n    min-height: unset;\r\n    line-height: 1.2;\r\n\r\n    @media ${from(Device.TabletLarge)} {\r\n      max-width: 295px;\r\n    }\r\n  }\r\n`;\r\nexport const HireCardStyles = {\r\n    Card,\r\n    Media,\r\n    Content,\r\n    Top,\r\n    Bottom,\r\n    Split,\r\n    Title,\r\n    Small,\r\n    Label,\r\n    Text,\r\n    Dates,\r\n    Field,\r\n    SelectQuantity,\r\n    ProductQuestions,\r\n    DeleteButton,\r\n    Error,\r\n};\r\n"],"sourceRoot":""}