{"version":3,"sources":["webpack:///./app/javascript/simple-designer/liquifire.js","webpack:///./app/javascript/simple-designer/utilities.js","webpack:///./app/javascript/simple-designer/logo-designer.js","webpack:///./app/javascript/simple-designer/font-select.js","webpack:///./app/javascript/simple-designer/text-designer.js","webpack:///./app/javascript/simple-designer/faq.js","webpack:///./app/javascript/simple-designer/simple-designer.js","webpack:///./app/javascript/simple-designer/blank-markup.js","webpack:///./app/javascript/simple-designer/fonts.js","webpack:///./app/javascript/simple-designer/index.js"],"names":["encodeText","string","replace","match","generateTextPreviewUrl","sku","text","font","mockup_or_art","generateLogoPreviewUrl","image_url","joinLines","lines","filter","Boolean","join","LogoDesigner","onChange","initialMarkup","availableLines","admin","useState","design","imageUrl","setImageUrl","useEffect","designUrl","previewUrl","markup","designer","designType","version","config","className","onSuccess","r","filesUploaded","url","actionOptions","maxSize","transformations","circle","rotate","crop","customRender","onPick","onClick","target","rel","href","fontOptions","name","value","FontSelect","a","check","initialValue","label","useSelect","items","itemToString","i","onSelectedItemChange","c","selectedItem","initialSelectedItem","find","o","isOpen","getToggleButtonProps","getLabelProps","getMenuProps","highlightedIndex","getItemProps","style","position","cx","fontFamily","title","icon","navigator","userAgent","vendor","window","opera","test","substr","bottom","right","maxHeight","hidden","map","option","index","highlighted","selected","key","item","TextDesigner","firstInputRef","useRef","Array","fill","setLines","setFont","setText","debouncedSetText","debounce","current","length","line","ref","type","e","idx","substring","setLine","FAQ","modal","modalBoolean","top","Preview","onClose","isLoading","setIsLoading","previewSize","setPreviewSize","img","Image","onload","src","MobileExit","left","MobileExpand","transform","SimpleDesigner","onSave","outsideSave","size","quickClose","mode","setMode","isSaving","setIsSaving","setDesign","handleChange","designObj","width","split","height","blankMarkup","medium","init","isAdmin","fetch","then","res","blob","uploadDesign","headers","get","webFonts","WebFont","load","classes","events","google","families","launchInModal","element","document","createElement","body","appendChild","close","confirm","ReactDOM","unmountComponentAtNode","render"],"mappings":"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","file":"js/18-616246889e6ee4e95324.chunk.js","sourcesContent":["export const encodeText = string =>\n string\n .replace(/U(\\w{4})/g, match => `\\\\${match}`)\n .replace(/\\(/g, \"U0026lp;\")\n .replace(/\\)/g, \"U0026rp\")\n .replace(/\\*/g, \"U002A\")\n .replace(/\\./g, \"U002E\")\n .replace(/\\+/g, \"U002B\")\n .replace(/\\[/g, \"%5B\")\n .replace(/\\]/g, \"%5D\")\n .replace(/,/g, \"U002C\")\n .replace(/\"/g, \"U0022\")\n .replace(/'/g, \"U0027\")\n .replace(/“/g, \"U201C\")\n .replace(/â€/g, \"U201D\")\n .replace(/‘/g, \"U2018\")\n .replace(/’/g, \"U2019\")\n .replace(/#/g, \"%23\")\n .replace(/&/g, \"U0026amp;\")\n .replace(\"\\\\\", \"\")","import { encodeText } from \"./liquifire\"\n\nexport const generateTextPreviewUrl = (sku, text, font, mockup_or_art) =>\n \"https://personalwine.liquifire.com/personalwine\" +\n `?set=SKU[${sku}]` +\n `&set=TYPE[text]` +\n `&set=FONT[${encodeText(font)}]` +\n `&set=TEXT[${encodeText(text)}]` +\n `&call=url[${\n mockup_or_art === \"art\"\n ? \"file:text-only-design.chain\"\n : \"file:simple-designer-preview.chain\"\n }]` +\n `&sink=format[png]`\n\nexport const generateLogoPreviewUrl = (sku, image_url, mockup_or_art) =>\n \"https://personalwine.liquifire.com/personalwine\" +\n `?set=SKU[${sku}]` +\n (mockup_or_art === \"art\" ? \"\" : `&set=TYPE[engraving]`) +\n (mockup_or_art === \"art\"\n ? `&set=LOGO_URL[${image_url}]`\n : `&set=DESIGN_URL[${image_url}]`) +\n `&call=url[${\n mockup_or_art === \"art\"\n ? \"file:logo-art.chain\"\n : \"file:product-preview.chain\"\n }]` +\n `&sink=format[png]`\n\nexport const joinLines = lines => {\n if (lines) {\n return lines.filter(Boolean).join(\"%5Cn\")\n }\n}\n","import React, { useEffect, useState } from \"react\"\nimport FileUploader from \"../designer/file-uploader\"\nimport { generateLogoPreviewUrl } from \"./utilities\"\n\nconst LogoDesigner = ({\n onChange,\n sku,\n initialMarkup,\n availableLines,\n admin\n}) => {\n const [imageUrl, setImageUrl] = useState(\n initialMarkup\n ? initialMarkup.design.imageUrl\n ? initialMarkup.design.imageUrl\n : \"https://cdn.filestackcontent.com/djJbwqaQtmCQ932D7xB1\"\n : \"https://cdn.filestackcontent.com/djJbwqaQtmCQ932D7xB1\"\n )\n\n // Generate the initial design data on mount\n useEffect(() => {\n onChange({\n designUrl: generateLogoPreviewUrl(sku, imageUrl, \"art\"),\n previewUrl: generateLogoPreviewUrl(sku, imageUrl, \"mockup\"),\n markup: {\n designer: \"simple-designer\",\n designType: \"logo\",\n version: 1,\n config: {\n availableLines\n },\n design: {\n imageUrl\n }\n }\n })\n }, [imageUrl])\n\n return (\n <div className=\"flex-1\">\n <FileUploader\n onSuccess={r => setImageUrl(r.filesUploaded[0].url)}\n actionOptions={{\n maxSize: 10 * 1024 * 1024, // 10 mb\n transformations: {\n circle: true,\n rotate: true,\n crop: true\n }\n }}\n customRender={({ onPick }) => (\n <button\n className=\"w-full py-4 mt-3 font-bold text-white uppercase bg-blue-600 rounded hover:bg-blue-700 focus:bg-blue-700\"\n onClick={onPick}\n >\n Upload your logo\n </button>\n )}\n />\n {imageUrl && admin && (\n <a target=\"_blank\" rel=\"noopener noreferrer\" href={imageUrl}>\n <button className=\"my-3\">Download</button>\n </a>\n )}\n </div>\n )\n}\n\nexport default LogoDesigner\n","import React from \"react\"\nimport cx from \"classnames\"\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\"\nimport { useSelect } from \"downshift\"\n\nconst fontOptions = [\n // Serif\n { name: \"Alegreya SC\", value: \"AlegreyaSC-Medium\" },\n { name: \"IM Fell Pica DW SC\", value: \"IMFellPicaDWSC-Medium\" },\n { name: \"Old Standard TT\", value: \"OldStandardTT-Medium\" },\n // Script\n { name: \"Sacramento\", value: \"Sacramento-Regular\" },\n { name: \"Niconne\", value: \"Niconne-Regular\" },\n { name: \"Great Vibes\", value: \"GreatVibes-Regular\" },\n // Sans Serif\n { name: \"Oswald\", value: \"Oswald-SemiBold\" },\n { name: \"Raleway\", value: \"Raleway-SemiBold\" },\n { name: \"Nunito\", value: \"Nunito-SemiBold\" }\n]\n\n// TODO saturate initial value\nconst FontSelect = ({ initialValue, label = \"Select a font:\", onChange }) => {\n const {\n isOpen,\n getToggleButtonProps,\n getLabelProps,\n getMenuProps,\n highlightedIndex,\n getItemProps,\n selectedItem\n } = useSelect({\n items: fontOptions,\n itemToString: i => i.name,\n onSelectedItemChange: c => onChange(c.selectedItem),\n initialSelectedItem:\n fontOptions.find(o => o.value === initialValue) || fontOptions[0]\n })\n\n const mobileCheck = () => {\n let check = false\n ;(function(a) {\n if (\n /(android|bb\\d+|meego).+mobile|avantgo|bada\\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\\.(browser|link)|vodafone|wap|windows ce|xda|xiino|android|ipad|playbook|silk/i.test(\n a\n ) ||\n /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\\-(n|u)|c55\\/|capi|ccwa|cdm\\-|cell|chtm|cldc|cmd\\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\\-s|devi|dica|dmob|do(c|p)o|ds(12|\\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\\-|_)|g1 u|g560|gene|gf\\-5|g\\-mo|go(\\.w|od)|gr(ad|un)|haie|hcit|hd\\-(m|p|t)|hei\\-|hi(pt|ta)|hp( i|ip)|hs\\-c|ht(c(\\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\\-(20|go|ma)|i230|iac( |\\-|\\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\\/)|klon|kpt |kwc\\-|kyo(c|k)|le(no|xi)|lg( g|\\/(k|l|u)|50|54|\\-[a-w])|libw|lynx|m1\\-w|m3ga|m50\\/|ma(te|ui|xo)|mc(01|21|ca)|m\\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\\-2|po(ck|rt|se)|prox|psio|pt\\-g|qa\\-a|qc(07|12|21|32|60|\\-[2-7]|i\\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\\-|oo|p\\-)|sdk\\/|se(c(\\-|0|1)|47|mc|nd|ri)|sgh\\-|shar|sie(\\-|m)|sk\\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\\-|v\\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\\-|tdg\\-|tel(i|m)|tim\\-|t\\-mo|to(pl|sh)|ts(70|m\\-|m3|m5)|tx\\-9|up(\\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\\-|your|zeto|zte\\-/i.test(\n a.substr(0, 4)\n )\n )\n check = true\n })(navigator.userAgent || navigator.vendor || window.opera)\n return check\n }\n\n return (\n <div style={{ position: \"relative\" }}>\n <label className=\"font-bold text-sm\" {...getLabelProps()}>\n {label}\n </label>\n <button\n {...getToggleButtonProps()}\n className={cx(\n \"w-full p-2 rounded text-left flex items-center justify-between surface\",\n { \"text-blue-700 bg-blue-300\": isOpen }\n )}\n style={{\n fontFamily: selectedItem.name\n }}\n title=\"Font\"\n >\n <span className=\"truncate\">{selectedItem.name}</span>\n <FontAwesomeIcon\n icon={[\"fas\", \"caret-down\"]}\n className=\"text-gray-600\"\n />\n </button>\n <div\n style={mobileCheck() === true ? { bottom: \"37px\", right: \"4px\" } : {}}\n className=\"w-full absolute z-50\"\n >\n <div\n {...getMenuProps()}\n style={{ maxHeight: \"200px\" }}\n className={cx(\n \"m-1 sm:w-56 w-full overflow-y-auto bg-white text-gray-700 shadow-2xl rounded\",\n { hidden: !isOpen }\n )}\n >\n {fontOptions.map((option, index) => {\n const highlighted = highlightedIndex === index\n const selected = selectedItem === option\n\n return (\n <button\n key={`${option.name}-${index}`}\n {...getItemProps({\n item: option,\n index\n })}\n className={cx(\"w-full block p-2 text-left surface\", {\n \"surface-focus\": !selected && highlighted,\n \"bg-blue-300\": selected\n })}\n style={{ fontFamily: option.name }}\n >\n {option.name}\n </button>\n )\n })}\n </div>\n </div>\n </div>\n )\n}\n\nexport default FontSelect\n","import React, { useEffect, useRef, useState } from \"react\"\nimport debounce from \"lodash/debounce\"\nimport { generateTextPreviewUrl, joinLines } from \"./utilities\"\nimport FontSelect from \"./font-select\"\n\nconst maxChars = 20\n\nconst TextDesigner = ({ onChange, sku, availableLines, initialMarkup }) => {\n const firstInputRef = useRef()\n const [lines, setLines] = useState(() =>\n initialMarkup\n ? initialMarkup.design.lines\n ? initialMarkup.design.lines\n : Array(availableLines).fill(\"\")\n : Array(availableLines).fill(\"\")\n )\n\n const [font, setFont] = useState(\n initialMarkup\n ? initialMarkup.design.font\n ? initialMarkup.design.font\n : \"Raleway-SemiBold\"\n : \"Raleway-SemiBold\"\n )\n const [text, setText] = useState(joinLines(lines))\n const setLine = (index, value) =>\n setLines(\n lines.map((line, idx) => (index === idx ? value.substring(0, 20) : line))\n )\n const debouncedSetText = useRef(debounce(setText, 300)).current\n\n useEffect(() => {\n debouncedSetText(joinLines(lines))\n }, [debouncedSetText, lines])\n\n useEffect(() => {\n onChange({\n designUrl: generateTextPreviewUrl(sku, text, font, \"art\"),\n previewUrl: generateTextPreviewUrl(sku, text, font, \"mockup\"),\n markup: {\n designer: \"simple-designer\",\n designType: \"text\",\n version: 1,\n config: {\n availableLines\n },\n design: {\n lines,\n font\n }\n }\n })\n }, [text, font])\n\n return (\n <div className=\"flex-1\">\n <div className=\"mb-1 text-sm font-bold\">Enter your text below:</div>\n <div\n className={`overflow-scroll ${lines.length > 2 &&\n \"show_scroll max_text_box_height\"}`}\n >\n {lines.map((line, index) => (\n <div key={index} className=\"sm:mb-1\">\n <input\n ref={index == 0 ? firstInputRef : null}\n type=\"text\"\n value={line}\n onChange={e => setLine(index, e.target.value)}\n className=\"block w-full py-1 border-b-2 focus:border-blue-600 focus:outline-none\"\n />\n <div className=\"px-2 mt-px text-sm text-right text-gray-700\">\n {line.length} / {maxChars}\n </div>\n </div>\n ))}\n </div>\n <FontSelect\n initialValue={font}\n onChange={({ value }) => setFont(value)}\n />\n </div>\n )\n}\n\nexport default TextDesigner\n","import React, { useEffect, useState } from \"react\"\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\"\n\nconst FAQ = ({}) => {\n const [modal, modalBoolean] = useState(false)\n\n return (\n <div>\n <FontAwesomeIcon\n icon={modal ? [\"far\", \"times-circle\"] : [\"far\", \"question-circle\"]}\n className=\"text-gray-600 absolute z-30\"\n style={{ top: \"5px\", right: \"5px\" }}\n onClick={() => modalBoolean(!modal)}\n />\n {modal && (\n <div className=\"sm:absolute fixed inset-0 bg-gray-200 overflow-scroll text-left z-20 pt-1 sm:px-4 px-1\">\n <h1 className=\"text-red-700 font-bold text-center\">FAQ's</h1>\n <div className=\"flex flex-col\">\n <div className=\"sm:my-4 my-2\">\n <div className=\"font-semibold\">\n What color will my engraving be?\n </div>\n <div className=\"ml-2\">\n Engravings will be painted in either gold or silver depending on\n the bottle you choose. The virtual proof will show the actual\n color.\n </div>\n </div>\n <div className=\"sm:my-4 my-2\">\n <div className=\"font-semibold\">\n How many lines of text are allowed?\n </div>\n <div className=\"ml-2\">\n There are anywhere from 1 to 4 lines of text allowed depending\n on the engravable area of each bottle.\n </div>\n </div>\n <div className=\"sm:my-4 my-2\">\n <div className=\"font-semibold\">\n Where will the engraving be on the bottle?\n </div>\n <div className=\"ml-2\">\n Engravable space varies depending on the bottle. All products\n show what side customization will be on.\n </div>\n </div>\n </div>\n </div>\n )}\n </div>\n )\n}\n\nexport default FAQ\n","import React, { useEffect, useState } from \"react\"\nimport cx from \"classnames\"\nimport { LoadingContainer } from \"../components/spinner\"\nimport { uploadDesign } from \"../designer/save-to-s3\"\nimport LogoDesigner from \"./logo-designer\"\nimport TextDesigner from \"./text-designer\"\nimport Faq from \"./faq\"\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\"\nimport { blankMarkup } from \"./blank-markup\"\n\nconst SimpleDesigner = ({\n onSave,\n outsideSave,\n sku,\n availableLines,\n initialMarkup,\n admin,\n onClose,\n size,\n quickClose\n}) => {\n const [mode, setMode] = useState(\n initialMarkup ? initialMarkup.designType : \"text\"\n )\n const [isSaving, setIsSaving] = useState(false)\n const [design, setDesign] = useState({\n previewUrl: null,\n designUrl: null,\n markup: null\n })\n\n // design shoud look like { previewUrl, designUrl, markup }\n const handleChange = design => setDesign(design)\n const handleDone = () => {\n setIsSaving(true)\n\n // Use fetch to download the image data and save it to S3\n fetch(design.designUrl)\n .then(res =>\n res\n .blob()\n .then(blob => uploadDesign(blob, res.headers.get(\"content-type\")))\n )\n .then(url => {\n // I would love to rename this to designUrl to be clear between\n // our different urls.\n onSave({ url, markup: design.markup })\n })\n }\n\n const initFull = () => {\n const markup = blankMarkup(size)\n let designObj = {\n markup,\n size,\n medium: \"engraving\"\n }\n quickClose()\n designer.init({\n design: designObj,\n onSave: outsideSave,\n isAdmin: true,\n sku\n })\n }\n\n return (\n <div className=\"font-sans bg-gray-200 simple-designer\">\n <LoadingContainer\n isLoading={isSaving}\n label=\"Saving\"\n className=\"flex flex-col h-full md:flex-row-reverse\"\n >\n <div className=\"flex-1 min-h-0\">\n <Preview url={design.previewUrl} onClose={onClose} />\n </div>\n <div className=\"flex flex-col flex-none p-2 bg-white shadow space-y-1 md:w-64\">\n {admin && (\n <div className=\"flex-none\">\n <button className=\"w-full my-2\" onClick={initFull}>\n Switch To Full Designer\n </button>\n </div>\n )}\n <div className=\"flex-none\">\n <div className=\"mb-1 text-sm font-bold\">\n Create your design with text or a logo:\n </div>\n <div className=\"flex\">\n <button\n className={cx(\n \"flex-1 px-4 py-2 font-bold rounded-l text-white\",\n mode === \"text\"\n ? \"bg-blue-600\"\n : \"bg-gray-500 hover:bg-blue-600\"\n )}\n onClick={() => setMode(\"text\")}\n >\n Text\n </button>\n <button\n className={cx(\n \"flex-1 px-4 py-2 font-bold rounded-r text-white\",\n mode === \"logo\"\n ? \"bg-blue-600\"\n : \"bg-gray-500 hover:bg-blue-600\"\n )}\n onClick={() => setMode(\"logo\")}\n >\n Logo\n </button>\n </div>\n </div>\n <div className=\"flex-1 pt-2\">\n {mode === \"logo\" && (\n <LogoDesigner\n sku={sku}\n onChange={handleChange}\n initialMarkup={initialMarkup}\n availableLines={availableLines}\n admin={admin}\n />\n )}\n {mode === \"text\" && (\n <TextDesigner\n sku={sku}\n onChange={handleChange}\n availableLines={availableLines}\n initialMarkup={initialMarkup}\n />\n )}\n </div>\n <div className=\"flex-none\">\n <button\n onClick={handleDone}\n className=\"w-full py-3 mt-3 font-bold text-white uppercase bg-blue-600 rounded hover:bg-blue-700 focus:bg-blue-700\"\n >\n Done\n </button>\n </div>\n </div>\n </LoadingContainer>\n </div>\n )\n}\n\nconst Preview = ({ url, onClose }) => {\n const [isLoading, setIsLoading] = useState(false)\n const [previewSize, setPreviewSize] = useState(false)\n\n useEffect(() => {\n setIsLoading(true)\n\n const img = new Image()\n img.onload = () => setIsLoading(false)\n img.src = url\n\n return () => {\n img.src = \"\" // cancels the image download\n img.onload = null\n }\n }, [url])\n\n const expandMobilePreview = () => {\n setPreviewSize(!previewSize)\n }\n\n return (\n <div\n className={`w-full h-full p-2 text-center \n ${!previewSize && \"relative\"} \n ${previewSize && \"absolute inset-0 bg-gray-200 z-20\"}`}\n >\n {!previewSize && (\n <>\n <Faq />\n <MobileExit onClose={onClose} />\n </>\n )}\n <img\n onClick={expandMobilePreview}\n src={url}\n className={`sm:hidden inline h-full max-w-full ${previewSize &&\n \"pb-10\"}`}\n />\n <img\n src={url}\n className={`sm:inline hidden h-full max-w-full ${previewSize &&\n \"pb-10\"}`}\n />\n <MobileExpand setPreviewSize={setPreviewSize} previewSize={previewSize} />\n {isLoading && (\n <div className=\"absolute inset-x-0 bottom-0 flex justify-center\">\n <div className=\"px-4 py-1 m-2 font-sans text-xs font-bold text-center text-gray-800 uppercase bg-white rounded shadow opacity-75 sm:text-md sm:py-2\">\n Generating preview...\n </div>\n </div>\n )}\n </div>\n )\n}\n\nconst MobileExit = ({ onClose }) => {\n return (\n <div className=\"sm:hidden block\">\n <FontAwesomeIcon\n icon={[\"far\", \"arrow-left\"]}\n className=\"text-gray-600 absolute z-10\"\n style={{ top: \"5px\", left: \"5px\" }}\n onClick={onClose}\n />\n </div>\n )\n}\n\nconst MobileExpand = ({ setPreviewSize, previewSize }) => {\n if (previewSize) {\n return (\n <div className=\"sm:hidden block\">\n <button\n onClick={() => setPreviewSize(!previewSize)}\n className=\"absolute\"\n style={{ bottom: \"5px\", left: \"50%\", transform: \"translateX(-50%)\" }}\n >\n Back to Designer\n </button>\n </div>\n )\n } else {\n return (\n <div className=\"sm:hidden block\">\n <FontAwesomeIcon\n icon={[\"far\", \"expand\"]}\n className=\"text-gray-600 absolute z-20\"\n style={{ bottom: \"5px\", right: \"5px\" }}\n onClick={() => setPreviewSize(!previewSize)}\n />\n </div>\n )\n }\n}\n\nexport default SimpleDesigner\n","export const blankMarkup = (size) => {\n let width = size.split(\":\")[0]\n let height = size.split(\":\")[1]\n return (\n `{\"objects\":[],\"background\":\"white\",\"aspect\":\"${width}:${height}\",\"risky\":false,\"version\":\"4.0.16\",\"labelWidth\":${width},\"labelHeight\":${height}}`\n )\n}","import WebFont from \"webfontloader\"\n\nexport const webFonts = [\n \"Alegreya SC\",\n \"Great Vibes\",\n \"IM Fell DW Pica SC\",\n \"Niconne\",\n \"Nunito\",\n \"Old Standard TT\",\n \"Sacramento\",\n \"Oswald\"\n]\n\nexport const systemFonts = [\"Arial\", \"Helvetica\", \"Times New Roman\"]\n\nexport const fonts = [...webFonts, ...systemFonts]\n\nexport const loadFonts = () =>\n WebFont.load({\n classes: false,\n events: false,\n google: { families: webFonts }\n })\n","import ReactDOM from \"react-dom\"\nimport React from \"react\"\nimport Modal from \"../components/modal\"\nimport SimpleDesigner from \"./simple-designer\"\nimport \"../styles/styles\"\nimport \"./simple-designer.scss\"\nimport \"../designer/icons\"\nimport { loadFonts } from \"./fonts\"\n\nloadFonts()\n\nconst closePrompt =\n \"Are you sure you want to leave the designer? Any unsaved progress will be lost.\"\n\nexport const launchInModal = ({\n lines,\n sku = \"LIQ-SCOT-GLENLIVET-18YR\",\n onSave,\n markup = null,\n admin = false,\n size = null\n}) => {\n const element = document.createElement(\"div\")\n document.body.appendChild(element)\n\n const close = () => {\n if (window.confirm(closePrompt)) {\n ReactDOM.unmountComponentAtNode(element)\n }\n }\n\n const wrappedOnSave = ({ markup, url }) => {\n ReactDOM.unmountComponentAtNode(element)\n onSave(markup, url)\n }\n\n const quickClose = () => {\n ReactDOM.unmountComponentAtNode(element)\n }\n\n ReactDOM.render(\n <Modal size=\"md\" onClose={close}>\n <SimpleDesigner\n onClose={close}\n quickClose={quickClose}\n onSave={wrappedOnSave}\n outsideSave={onSave}\n sku={sku}\n availableLines={lines}\n initialMarkup={markup}\n admin={admin}\n size={size}\n />\n </Modal>,\n element\n )\n}\n"],"sourceRoot":""}