@tycoonsystems/tycoon-modules/modules/ecommerce/product/NewProduct.js

www.tv.tycoon.systems/documentation

function _extends(){return(_extends=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var a,n=arguments[t];for(a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e}).apply(this,arguments)}import React from"react";import PIMStyles from"../product/ProductImageManager.module.scss";import{getFormattedDate}from"../../util";import AllInclusive from"@mui/icons-material/AllInclusive";import ConfirmationNumber from"@mui/icons-material/ConfirmationNumber";import Inventory from"@mui/icons-material/Inventory";import Stadium from"@mui/icons-material/Stadium";import Tooltip from"@mui/material/Tooltip";import TextareaAutosize from"react-textarea-autosize";import{resolveStyles}from"../../utility/ecommerce";import{Lineup,ProductImageManager}from"@tycoonsystems/tycoon-modules/ecommerce/product";import{SignIn,Username}from"../../onboarding/signin";const Module=e=>React.createElement(React.Fragment,null,React.createElement("div",{className:"Product_flex_container"},editing?.new?React.createElement("div",{className:PIMStyles.currentlyEditingProductContainer+" "+(e?.noFixedPosition?PIMStyles.currentlyEditingNoFixed:"")},React.createElement("div",{className:""+PIMStyles.currentEditingProductInnerContainer},React.createElement("div",{className:""+PIMStyles.currentlyEditingProductContent},React.createElement("div",{className:PIMStyles.productImgContainer+" Product_img_container Product_img_container_large"},React.createElement(ProductImageManager,_extends({},e,{editing:editing,passTempImages:passTempImages}))),React.createElement("div",{className:PIMStyles.productMetaContainer+" Product_meta_container"},React.createElement("div",{style:{height:`calc(100% - ${e._loggedIn?e?._loggedIn?.username?"25":"100":"40"}px)`,maxHeight:"75vh",overflow:"auto"}},React.createElement("div",null,React.createElement("div",{className:"flex gap-p2"},React.createElement(Tooltip,{title:"Name of Product",placement:"right"},React.createElement("label",{style:{fontWeight:"600"}},"Title: ")),React.createElement("input",{name:"name",placeholder:"Product Title",style:{fontWeight:"600",width:"100%"},onChange:setCurrentName,ref:nameRef,modif:"product_name"})),pageError.location&&"product_name"===pageError.location?React.createElement("div",{className:"error"},pageError.message):null),React.createElement(Tooltip,{title:"Product Description",placement:"left"},React.createElement(TextareaAutosize,{className:""+PIMStyles.textArea,name:"description",placeholder:"Description",defaultValue:editing?.detailmeta?.description,onChange:handleUpdateProductDescription,ref:descriptionInputRef})),React.createElement("div",{className:"flex gap-p2",style:{alignItems:"center"}},React.createElement(Tooltip,{title:"Set the price for the currently selected Style",placement:"left"},React.createElement("div",{style:{fontSize:".8rem",fontWeight:600}},currentDefinePriceCurrency?.symbol??"$")),React.createElement("input",{type:"currency",style:{width:"100%"},defaultValue:"10.00",ref:priceInput,onChange:setCurrentPrice}),selectedStyle&&"USD"===currentDefinePriceCurrency?.currency&&selectedStyle.price!=priceInput?.current?.value||"USD"!==currentDefinePriceCurrency?.currency&&(!selectedStyle.priceTable||selectedStyle.priceTable&&!selectedStyle.priceTable[currentDefinePriceCurrency.currency]||currentDefinePriceCurrency?.currency&&selectedStyle.priceTable&&Object.prototype.hasOwnProperty.call(selectedStyle.priceTable,currentDefinePriceCurrency.currency)&&selectedStyle.priceTable[currentDefinePriceCurrency.currency]!=priceInput.current.value)?React.createElement(Tooltip,{title:"The price displayed is currently not set for this product style. Click here to set it"},React.createElement("button",{onClick:setCurrentPrice,value:priceInput?.current?.value,style:{whiteSpace:"nowrap",lineHeight:".5rem",fontSize:".75rem"}},"Set Price")):null,React.createElement(Tooltip,{title:"You can set pricing in multiple currencies. Although the value you keep selected here will be the primary currency. Use the currency selector to choose a currency to begin setting prices in the respective currency. Countries that users reside in for which you have not set a currency will be presented the closest relevant currency you have defined a pricepoint in"},React.createElement("div",{className:PIMStyles.currencyLabel+" "+(isSettingCurrency?""+PIMStyles.currencyLabelActive:null),style:{lineHeight:".5rem"},onClick:handleSetIsSettingCurrency,ref:currentCurrencyRef},currentDefinePriceCurrency?.currency??editing?.meta?.currency??"USD")),isSettingCurrency?React.createElement("div",{className:""+PIMStyles.setCurrencyExternalContainer},React.createElement("div",{className:""+PIMStyles.setCurrencyContainer},React.createElement("select",{id:editing.id+"_setCurrency",name:editing.id+"_setCurrency",style:{width:"100%"},onChange:handleChangeCurrentCurrency,ref:setCurrencySelect,defaultValue:currentDefinePriceCurrency?.currency??"USD"},e?.regionsData?Object.entries(e.regionsData).map(e=>React.createElement("option",{className:PIMStyles.setCurrencyOption+" "+("USD"!==e[1].currency&&(selectedStyle?.priceTable&&Object.prototype.hasOwnProperty.call(selectedStyle.priceTable,e[1].currency)||"USD"===e[1].currency)?PIMStyles.currencyOptionUsed:null),value:e[1].currency,symbol:e[1].symbol},React.createElement("div",null,e[1].currency),React.createElement("div",null," "),React.createElement("div",null,e[1].name),React.createElement("div",null," "),React.createElement("div",null,e[1].symbol))):null))):null,React.createElement(Tooltip,{title:"Set the quantity for the currently selected Style & Option combo"},React.createElement("div",{style:{fontSize:".8rem",fontWeight:600,display:selectedOption&&selectedOption.quantity&&1e7===selectedOption.quantity?"none":"block"}},"Qty")),React.createElement("input",{type:"number",style:{width:"100%",display:selectedOption&&selectedOption.quantity&&1e7===selectedOption.quantity?"none":"block"},defaultValue:"100",ref:quantityInput,onChange:setCurrentQuantity}),React.createElement(Tooltip,{title:"Infinite stock"},React.createElement(AllInclusive,null)),React.createElement("input",{type:"checkbox",style:{margin:0},onChange:setInfinity,checked:selectedOption&&selectedOption.quantity&&1e7===selectedOption.quantity})),React.createElement("div",{style:{border:"1px solid #484848",marginTop:".125rem",marginBottom:".25rem"}}),React.createElement("div",{className:"flex",style:{flexWrap:"wrap",gap:".05rem 0.2rem",marginBottom:".125rem"}},React.createElement(Tooltip,{title:"If your product has multiple styles, set them here. A style should be an alternate design or color for a single product that you want to track as single product. For example you might have white, black, grey for t-shirts as individual styles.",placement:"right"},React.createElement("div",{className:"flex gap-p2",style:{alignItems:"center"}},React.createElement("div",{style:{fontSize:".8rem",fontWeight:600}},"Style"),React.createElement("div",{className:"dropdown_input"},React.createElement("input",{type:"text",ref:styleInput,onChange:setCurrentStyleName}),React.createElement("select",{id:editing.id+"_styles",name:editing.id+"_styles",style:{width:"100%"},onChange:changeCurrentStyle},resolveStyles(editing).map((e,t)=>React.createElement("option",{value:e.sid,className:"style_option",key:t},e.style)))))),selectedStyle&&0<selectedStyle.option.length&&selectedStyle.option[0]&&Object.hasOwnProperty.call(selectedStyle.option[0],"option")?React.createElement(Tooltip,{title:"If your product has options, set them here. An option should be a sizing or format choice that exists for all or most styles. For example you might have sizes XS, S, M, L, XL or OS as individual options per style.",placement:"right"},React.createElement("div",{className:"flex gap-p2",style:{alignItems:"center"}},React.createElement("div",{style:{fontSize:".8rem",fontWeight:600}},"Option"),React.createElement("div",{className:"dropdown_input"},React.createElement("input",{type:"text",ref:optionInput,onChange:setCurrentOptionName}),React.createElement("select",{id:editing.id+"_options",name:editing.id+"_options",style:{width:"100%"},onChange:changeCurrentOption,ref:optionSelect},editing.styles.find(e=>e.sid===editingSelectedStyle).option.map((e,t)=>React.createElement("option",{value:e.sid,className:"option_option",key:t},e.option)))))):null),React.createElement("div",{className:"flex gap-p2 Product_admin_choice_container"},React.createElement("button",{onClick:addStyle},"Add Style"),React.createElement("button",{onClick:addOption},"Add Option"),React.createElement(Tooltip,{title:"Set the product type",placement:"right"},React.createElement("div",{className:"flex gap-p2",style:{fontSize:".8rem",alignItems:"center"}},React.createElement("span",{className:"flex"},React.createElement("input",{type:"radio",id:"virtual",name:"fav_language",value:"virtual",defaultChecked:!0,onChange:onProductTypeChange}),React.createElement("label",{for:"virtual"},"Virtual")),React.createElement("span",{className:"flex"},React.createElement("input",{type:"radio",id:"physical",name:"fav_language",value:"physical",onChange:onProductTypeChange}),React.createElement("label",{for:"physical"},"Physical"))))),React.createElement("div",{className:"promptContainer",style:{alignItems:"center",borderRadius:".5rem",margin:".25rem 0"}},React.createElement("div",{className:"flex gap-p2"},React.createElement(Tooltip,{title:"Ticketed Products offer universally unique ids that are unique across the product being sold and can be stamped onto Ticket Images. Virtual Tickets are for Virtual Events. Physical Tickets serve Virtual Tickets for your own In Person Events.",className:"flex gap-p2",style:{alignItems:"center"},placement:"left"},React.createElement("div",{style:{fontSize:".8rem"}},"Is this a ticket?"),React.createElement(ConfirmationNumber,{style:{width:"15px",height:"15px"}})),React.createElement("input",{type:"checkbox",style:{margin:0},value:editingOptionsMeta.ticket,defaultChecked:editingOptionsMeta.ticket,onChange:setOptionsMetaData,option:"ticket"})),editingOptionsMeta.ticket?React.createElement("div",null,React.createElement(Tooltip,{title:"Please add dates your event is happening. Enter dates in the following format MON-DD-YYYY-HH:MM or they will not be parsed as dates.",className:"flex gap-p2",style:{alignItems:"center"},placement:"right"},React.createElement("span",{style:{fontSize:".8rem",fontWeight:"600",whiteSpace:"nowrap"}},"Date for Event"),React.createElement("input",{type:"text",style:{marginBottom:".125rem",width:"-webkit-fill-available"},placeholder:"Date in MON-DD-YYYY-HH:MM format. If the ticket does not have an event date leave empty",onInput:setOptionsMetaData,option:"eventDateDef",option2:"input",defaultValue:editingOptionsMeta.eventDateDef.input})),0<editingOptionsMeta.eventDateDef.dates.length?React.createElement("div",{className:"tagContainer",style:{marginTop:".25rem",marginBottom:".25rem"}},editingOptionsMeta.eventDateDef.dates.map((e,t)=>""!==e?React.createElement("div",{className:"tagItem",key:t},e?getFormattedDate(e,{pretty:!0}):""):React.createElement("div",null))):React.createElement("div",null)):null),editingOptionsMeta&&"virtual"===editingOptionsMeta.productType?React.createElement("div",null,React.createElement("div",{className:"promptContainer",style:{borderRadius:".5rem",margin:".25rem 0"}},React.createElement("div",{className:"flex gap-p2",style:{alignItems:"center",height:"20px"}},React.createElement(Tooltip,{title:"You can use a date to authorize all users that purchase this ticket for access to your livestreams on that day. Or you can use a tag that you must include in the livestream tags field when you create it. Please use this if you want to put your livestream behind this paywalled purchase",className:"flex gap-p2",style:{alignItems:"center"},placement:"left",paddin:!0},React.createElement("div",{style:{fontSize:".8rem"}},"Is this for a livestream?"),React.createElement(Stadium,{style:{width:"15px"}})),React.createElement("input",{type:"checkbox",style:{margin:0},value:editingOptionsMeta.livestream,defaultChecked:editingOptionsMeta.livestream,onChange:setOptionsMetaData,option:"livestream"})),editingOptionsMeta.livestream?React.createElement("div",null,React.createElement(Tooltip,{title:"Enter dates or words for matching authorization. Enter dates in the following format MON-DD-YYYY-HH:MM. Time must be input in 24 H military time. Values that do not match dates will be parsed as Tags that can be added to livestreams. Any matches will authorize viewership of the stream for purchases of this ticket",className:"flex gap-p2",style:{alignItems:"center"},placement:"right"},React.createElement("span",{style:{fontSize:".8rem",fontWeight:"600",whiteSpace:"nowrap"}},"Tags"),React.createElement("input",{type:"text",style:{marginBottom:".125rem",width:"-webkit-fill-available"},placeholder:"Date in DD/MM/YY format or a Tag",onInput:setOptionsMetaData,option:"livestreamDef",option2:"input",defaultValue:editingOptionsMeta.livestreamDef.input})),React.createElement("span",{className:"flex gap-p2",style:{marginBottom:".25rem"}},0<editingOptionsMeta.livestreamDef.dates.length?React.createElement("div",{className:"tagContainer",style:{marginTop:".25rem"}},editingOptionsMeta.livestreamDef.dates.map((e,t)=>""!==e?React.createElement("div",{className:"tagItem",key:t},e?getFormattedDate(e,{pretty:!0}):""):React.createElement("div",null))):React.createElement("div",null),0<editingOptionsMeta.livestreamDef.tags.length?React.createElement("div",{className:"tagContainer",style:{marginTop:".25rem"}},editingOptionsMeta.livestreamDef.tags.map((e,t)=>""!==e?React.createElement("div",{className:"tagItem",key:t},e):React.createElement("div",null))):React.createElement("div",null))):null,React.createElement(Lineup,_extends({},e,{product:editing,editing:editing,editingOptionsMeta:editingOptionsMeta,setOptionsMetaData:setOptionsMetaData,currentLineupEditing:currentLineupEditing,setCurrentLineupEditing:setCurrentLineupEditing,appendFormData:appendFormData})))):React.createElement("div",null),React.createElement("div",{className:"flex gap-p2 promptContainer",style:{alignItems:"center",height:"20px",borderRadius:".5rem",margin:".25rem 0"}},React.createElement(Tooltip,{title:"Allow for your customers to subscribe to your product. This is a guarantee by your company that you will continue to deliver your Product to any subscribed customers. Subscriptions will charge monthly by default.",className:"flex gap-p2",style:{alignItems:"center"},placement:"left"},React.createElement("div",{style:{fontSize:".8rem"}},"Is this a subscription?"),React.createElement(Inventory,{style:{width:"15px"}})),React.createElement("input",{type:"checkbox",style:{margin:0},value:editingOptionsMeta.subscription,defaultChecked:editingOptionsMeta.subscription,onChange:setOptionsMetaData,option:"subscription"}))),e?._loggedIn&&e?._loggedIn?.username?React.createElement("div",{className:"flex gap-p2 Product_admin_choice_container",style:{marginTop:".125rem"}},React.createElement("button",{onClick:handlePublishProduct,modif:"publish"},"Publish"),e?.forceOpenRedirectOnDone?null:React.createElement("button",{onClick:handlePublishProduct,modif:"save"},"Save"),editing&&!e?.forceOpenRedirectOnDone?React.createElement("button",{onClick:handleCancelProduct,modif:"save"},editing.new?"Abandon":"Cancel"):null):React.createElement("div",null,React.createElement(SignIn,e),React.createElement(Username,e)))))):null));export default Module;