@tycoonsystems/tycoon-modules/modules/survey/Survey.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 styles from"./Survey.module.scss";import TextareaAutosize from"react-textarea-autosize";import{sendSurveyEmail}from"../utility/mail";import{Lineup}from"../ecommerce/product";import{isObjectEmpty}from"../util";import{westernMoneyFormat}from"../utility/ecommerce";import{defaultDefinePriceCurrency}from"../ecommerce/product/defaults";import{doSetOptionsMetaData}from"../ecommerce/shop/Functions";import{allowedTypes}from"../ecommerce/product/defaults";import{v4 as uuidv4}from"uuid";const Module=i=>{const[e,P]=React.useState(!1),[t,M]=React.useState(!1),[c,$]=React.useState([]),[p,q]=React.useState(null),[m,L]=React.useState({}),[a,g]=React.useState(null),[n,d]=React.useState(null),[F,y]=React.useState(null),[H,r]=React.useState(null),[z,v]=React.useState(!1),[f,U]=React.useState(i?.surveyState?.pipelineObject??{}),[s,V]=React.useState({}),[o,K]=React.useState(!1),[b,_]=React.useState(0),[J,,]=React.useState(defaultDefinePriceCurrency),[h,l]=React.useState(new FormData),[R,Q]=React.useState([]),[E,S]=React.useState({}),[Z,u]=React.useState("100vh"),T=React.useRef(),N=React.useRef(),x=React.useRef(),I=i.survey,O=I?.stages[p],G=I?.stages[a];var W=I?.stages[n];React.useEffect(()=>{e||(i?.imgCache&&l(i.imgCache),setTimeout(()=>{x?.current&&u(x.current.clientHeight+"px")},50),setInterval(()=>{x?.current&&u(x.current.clientHeight+"px")},2500),P(!0))},[e,i?.imgCache]);const X=e=>{var t;i.setSurveyState&&i.surveyState&&((t=i.surveyState).answers=e,i.setSurveyState(t)),L(e)},C=e=>{var t;i.setSurveyState&&i.surveyState&&((t=i.surveyState).currentStage=e,i.setSurveyState(t)),q(e),I?.stages&&I.stages[e]&&"function"==typeof I.stages[e]?.func&&I.stages[e].func()},k=(React.useEffect(()=>{!p&&I?.stages?.index&&C("index")},[I,p]),e=>{var t;i.setSurveyState&&i.surveyState&&((t=i.surveyState).pipelineDbItem=e,i.setSurveyState(t)),V(e)}),Y=(React.useEffect(()=>{I?.pipelineDbItemDefault&&!isObjectEmpty(I.pipelineDbItemDefault)&&isObjectEmpty(s)?k(I.pipelineDbItemDefault):isObjectEmpty(s)&&i?.surveyState?.pipelineDbItem&&!isObjectEmpty(i?.surveyState?.pipelineDbItem)&&k(i.surveyState.pipelineDbItem)},[s,I?.pipelineDbItemDefault]),React.useCallback(e=>{var t=e?.currentTarget?.getAttribute("goto"),a=e?.currentTarget?.getAttribute("question"),n=document.getElementById("input_ref_id_current")?.value??"",e=e?.currentTarget?.getAttribute("handlestage");console.log(document.getElementById("input_ref_id_current")?.value,document.getElementById("input_ref_id_next"),document.getElementById("input_ref_id_back"),n,T?.current),B(t,a,n,null,e)},[T?.current,O])),ee=React.useCallback(e=>{var t=e?.currentTarget?.getAttribute("goto"),a=e?.currentTarget?.getAttribute("question"),n=e?.currentTarget?.getAttribute("value")??e.currentTarget.value,e="true"===e?.currentTarget?.getAttribute("pipeline");B(t,a,n,e)}),w=(console.log(O),t=>{if(console.log("Do Clear",t),t)for(let e=0;e<t.length;e++)console.log(t[e]?.getAttribute("surveyclear")),t[e]?.getAttribute("surveyclear")&&(t[e].value="",console.log(t[e]),t[e].getAttribute("usedefault"))&&(t[e].value=t[e].getAttribute("usedefault"))}),B=(t,a,n,e,r)=>{if(console.log(O,t,a,n),S({}),N?.current&&(N.current.innerHTML="",N.current.style.opacity=0),O?.validation&&"function"==typeof O.validation){var l,u=O.validation(O,n);if(console.log(u),u)return(l=E)[p]=u,S(l),N?.current&&(N.current.innerHTML=u,N.current.style.opacity=1),null}if(O?.pipeline?.length)for(let e=0;e<O.pipeline.length;e++)if(O.pipeline[e]?.input&&O.pipeline[e]?.input?.validation&&"function"==typeof O.pipeline[e].input.validation){var i,c=O.pipeline[e]?.input?.validation(O.pipeline[e],f[O.pipeline[e].input.var]);if(c)return console.log(c),(i=E)[p]=c,S(i),N?.current&&(N.current.innerHTML=c,N.current.style.opacity=1),null}if(e)return console.log(t,a,n),!1;g(t),d(p),setTimeout(()=>{y(!0)},100),T?.current&&T.current.select();let s="",o="";setTimeout(()=>{var e;T?.current&&(T.current.value="",T.current.placeholder=""),v(!0),t&&(console.log(a,p),a&&((e=m)[p]||(e[p]={}),e[p].question=a,e[p].answer=n,X(e)),console.log(document.getElementById("input_ref_id_next"),I,t,m),I?.stages[t]?.input&&document.getElementById("input_ref_id_next")&&(m&&m[t]&&Object.prototype.hasOwnProperty.call(m[t],"answer")?(document.getElementById("input_ref_id_next").value=m[t].answer,s=m[t].answer):Object.prototype.hasOwnProperty.call(I?.stages[t].input,"default")&&(document.getElementById("input_ref_id_next").value=I.stages[t].input.default,s=I.stages[t].input.default),Object.prototype.hasOwnProperty.call(I?.stages[t].input,"placeholder"))&&(document.getElementById("input_ref_id_next").placeholder=I.stages[t].input.placeholder,o=I.stages[t].input.placeholder),C(t),setTimeout(()=>{w(document.getElementsByTagName("textarea")),w(document.getElementsByTagName("input"))},100)),setTimeout(()=>{g(null),d(null),document.getElementById("input_ref_id_current")&&(document.getElementById("input_ref_id_current").value=s,document.getElementById("input_ref_id_current").placeholder=o,document.getElementById("input_ref_id_next").value=""),y(null),v(!1)},100)},250),te(p,!0)},te=(console.log(m),(e,t)=>{var a=c;t&&e?a.push(e):a.pop(),$(a)}),ae=React.useCallback(e=>{if(0<c.length){const a=c[c.length-1];console.log(a),g(p),d(a),setTimeout(()=>{r(!0)},100);let e="",t="";setTimeout(()=>{v(!0),a&&(C(a),w(document.getElementsByTagName("textarea")),w(document.getElementsByTagName("input"))),console.log(I.stages,a,m),setTimeout(()=>{I?.stages[a]?.input&&document.getElementById("input_ref_id_back")&&(Object.prototype.hasOwnProperty.call(m[a],"answer")?(document.getElementById("input_ref_id_back").value=m[a].answer,e=m[a].answer):Object.prototype.hasOwnProperty.call(I?.stages[a].input,"default")&&(document.getElementById("input_ref_id_back").value=I.stages[a].input.default,e=I.stages[a].input.default),Object.prototype.hasOwnProperty.call(I?.stages[a].input,"placeholder"))&&(document.getElementById("input_ref_id_back").placeholder=I.stages[a].input.placeholder,t=I.stages[a].input.placeholder)},1),setTimeout(()=>{d(null),g(null),document.getElementById("input_ref_id_current")&&(document.getElementById("input_ref_id_current").value=e,document.getElementById("input_ref_id_current").placeholder=t),r(null),v(!1)},100)},250),te(null,!1)}},[c,I]),A=(React.useEffect(()=>{t||T?.current&&O?.input&&(console.log("Running"),M(!0),T.current.value="",T.current.placeholder="",T.current.select(),Object.prototype.hasOwnProperty.call(O.input,"default")&&(T.current.value=O.input.default),Object.prototype.hasOwnProperty.call(O.input,"placeholder"))&&(T.current.placeholder=O.input.placeholder)},[t,O]),React.useEffect(()=>{!O?.submit&&!G?.submit||o||((async e=>{e&&(e=await sendSurveyEmail(i.apiUrl,i.domainKey,e,I.name,i._loggedIn),console.log(e))})(m),K(!0))},[O,o]),(e,t,a)=>{var n={...f},r=(a?(n[e]||(n[e]=[]),-1===n[e].indexOf(t)?n[e].push(t):n[e].splice(n[e].indexOf(t),1)):n[e]=t,m);r[p]||(r[p]={}),r[p].pipeline||(r[p].pipeline={}),a?(r[p].pipeline[e]||(r[p].pipeline[e]=[]),-1===r[p].pipeline[e].indexOf(t)?r[p].pipeline[e].push(t):r[p].pipeline[e].splice(r[p].pipeline[e].indexOf(t),1)):r[p].pipeline[e]=t,X(r),a=n,i.setSurveyState&&i.surveyState&&((e=i.surveyState).pipelineObject=a,i.setSurveyState(e)),U(a)}),j=React.useCallback(e=>{try{var t,a,n;e&&(t=e?.target?.getAttribute("useinnerhtml")?e?.target?.innerHTML:e?.target?.value??e?.currentTarget?.value,e?.currentTarget?.getAttribute("pipeline")?(console.log(t,"Add to Obj"),A(e?.currentTarget?.getAttribute("var"),t,e?.target?.getAttribute("usemultiple"))):13===e.keyCode&&(e.preventDefault(),a=e?.currentTarget?.getAttribute("goto"),n=e?.currentTarget?.getAttribute("question"),console.log(t,n,a),B(a,n,t)))}catch(e){console.log(e)}}),ne=React.useCallback(e=>{console.log(e.currentTarget.checked,e.currentTarget.getAttribute("option")),doSetOptionsMetaData(e,s?.detailmeta,s,k,null,b,_)}),re=React.useCallback(e=>{var t,a;e.currentTarget&&(e?.currentTarget?.getAttribute("pipeline")&&(t=e?.current?.value??e?.currentTarget?.value,console.log(t,"Add to Obj"),A(e?.currentTarget?.getAttribute("var"),t)),t={...s},"singleStyle"===e?.currentTarget?.getAttribute("method"))&&(a=t?.styles[0]?0:-1,console.log(a,e.currentTarget.value,!isNaN(Number(e.currentTarget.value))),-1<a)&&(isNaN(Number(e.currentTarget.value))||("USD"===J?.currency?t.styles[a].price=Number(e.currentTarget.value):(t.styles[a].priceTable||(t.styles[a].priceTable={}),t.styles[a].priceTable[J.currency]=Number(e.currentTarget.value)),k(t)))}),le=React.useCallback(e=>{var t,a;e.currentTarget&&(e?.currentTarget?.getAttribute("pipeline")&&(t=e?.current?.value??e?.currentTarget?.value,console.log(t,"Add to Obj"),A(e?.currentTarget?.getAttribute("var"),t)),t={...s},"singleStyle"===e?.currentTarget?.getAttribute("method"))&&-1<(a=t?.styles[0]?0:-1)&&(isNaN(Number(e.currentTarget.value))||(t.styles[a].option[0].quantity=Number(e.currentTarget.value)),k(t))}),ue=React.useCallback(e=>{console.log(e,"Handle New");const a=e?.currentTarget?.getAttribute("selectmodif");console.log("Sel",a),console.log(h);var e=e?.target?.files,e=Array.from(e).slice(0,1<e.length?1:e.length).filter(e=>e.type&&-1<allowedTypes.indexOf(e.type)).map(e=>{var t=e.slice(0,e.size,e.type),a=allowedTypes[allowedTypes.indexOf(e.type)].match(/\/([a-zA-Z0-9].*)/)[1];return new File([t],uuidv4()+"."+a,{type:e.type})});console.log("Files Renamed",e,h);const n=h,r=R;e&&e.forEach(t=>{n.append("image",t),ce(t,a);var e=r.findIndex(e=>e.name===t.name);-1<e&&r.splice(e,1),r.push({name:t.name,modif:a})}),Q(r),l(n),i?.setImgCache&&i.setImgCache(n),i.setSurveyState&&i.surveyState&&((e=i.surveyState).imgFor=r,i.setSurveyState(e))}),ie=React.useCallback(e=>{console.log(e,"Add Temp"),e?.currentTarget?.getAttribute("modif")&&(e=document.querySelector(`input[selectmodif='${e?.currentTarget?.getAttribute("modif")}']`))?.click&&e.click()}),ce=(n,r)=>new Promise((e,t)=>{const a=new FileReader;a.onload=()=>{console.log(a.result),document.querySelector(`img[selectimg=${r}]`).style.backgroundImage=`url(${a.result})`,e(a.result)},a.onerror=()=>{t(a.error)},a.readAsDataURL(n)}),se=(e,t="lineup",a)=>{const n=h,r=R;e&&(e.forEach(e=>{n.append("image",e),r.push({name:e.name,modif:t,id:a})}),n.append("imgNames",JSON.stringify(r))),l(n),Q(r),i?.setImgCache&&i.setImgCache(n),i.setSurveyState&&i.surveyState&&((e=i.surveyState).imgFor=r,i.setSurveyState(e))},oe=e=>{var t,a;if(e?.component&&"function"==typeof e.component)return t=e.component,a=Object.assign(e?.props??{},i),React.createElement(t,_extends({},a,{m:e}))},pe=React.useCallback(e=>{e?.currentTarget&&u(e.currentTarget.clientHeight+"px")});var D=(t,e,a,n,r,l,u)=>(console.log(l,m),React.createElement("div",{className:`${styles[a]} ${styles.item} ${F&&n?""+styles[n]:null} ${H&&e?""+styles[e]:null} ${z&&r?styles.keepCurrent+" "+styles.backToOriginal:null} ${t?.className} survey_itemContainer`,style:{background:t?.bg??null,color:t?.color??null},onChange:pe,onMouseMove:pe,ref:x},React.createElement("h1",{className:styles.title+" survey_title"},t?.label),"select"===t?.input?.type?React.createElement("ul",{className:styles.survey__optionsList},t?.input?.options.map(e=>React.createElement("li",{key:e.label},React.createElement("button",{className:styles.survey__optionButton,onClick:ee,goto:e.goto,label:e.label,question:t?.label,value:e.label},e.label)))):"number"===t?.input?.type?React.createElement("div",null,React.createElement("input",{id:"input_ref_id_"+u,type:"number",className:""+styles.numberInput,defaultValue:t?.input?.default,ref:T})):"text"===t?.input?.type?React.createElement("div",null,React.createElement(TextareaAutosize,{id:"input_ref_id_"+u,type:"text",className:""+styles.textInput,placeholder:t?.input?.default,minRows:3,ref:T,onKeyDown:j,goto:t?.confirm?.goto,question:t?.label,defaultValue:m[l]?.answer})):t?.component&&"function"==typeof t.component?React.createElement("div",null,oe(t)):null,t?.pipeline?.map?t.pipeline.map((t,e)=>React.createElement("div",{key:e,className:"survey_pipelineItemContainer",style:{marginBottom:".25rem"}},React.createElement("label",{className:"survey_label",style:{lineHeight:"1.5rem"}},t?.label??""),React.createElement("div",{className:"survey_inputContainer",style:{marginTop:".25rem"}},"text"===t?.input?.type?React.createElement("div",{className:t?.className+" survey_textInput"},React.createElement(TextareaAutosize,{type:"text",className:""+styles.textInput,placeholder:t?.input?.default,onInput:j,var:t?.input?.var,pipeline:"true",minRows:t?.input?.rows??1,defaultValue:f[t?.input?.var],usedefault:f[t?.input?.var],surveyclear:"true"})):"datetime-local"===t?.input?.type?React.createElement("div",{className:t?.className+" survey_datetimeInput"},React.createElement("input",{type:"datetime-local",placeholder:t?.input?.default,onInput:j,var:t?.input?.var,pipeline:"true",surveyclear:"true",usedefault:f[t?.input?.var]})):"lineup"===t?.input?.type?React.createElement("div",{className:t?.className+" survey_lineupContainer"},React.createElement(Lineup,_extends({},i,{product:s,editing:s,editingOptionsMeta:s?.detailmeta??null,setOptionsMetaData:ne,currentLineupEditing:b,setCurrentLineupEditing:_,appendFormData:se}))):"price"===t?.input?.type?React.createElement("div",{className:t?.className+" flex gap-p2 survey_price"},React.createElement("span",{className:"survey_currency"},t.symbol??"$"),React.createElement("span",null,React.createElement("input",{type:"text",style:{width:"100%"},onChange:re,var:t?.input?.var,pipeline:"true",surveyclear:"true",method:t?.input?.method,usedefault:!isObjectEmpty(f)&&Object.prototype.hasOwnProperty.call(f,[t?.input?.var])&&null!==f[t?.input?.var]?westernMoneyFormat.format(f[t.input.var]):"10.00"}))):"quantity"===t?.input?.type?React.createElement("div",{className:t?.className+" flex gap-p2 survey_quantity"},React.createElement("span",null,"Qty"),React.createElement("span",null,React.createElement("input",{type:"text",style:{width:"100%"},onChange:le,var:t?.input?.var,pipeline:"true",surveyclear:"true",method:t?.input?.method,usedefault:!isObjectEmpty(f)&&Object.prototype.hasOwnProperty.call(f,[t?.input?.var])&&null!==f[t?.input?.var]?f[t?.input?.var]:"100"}))):"select"===t?.input?.type?React.createElement("ul",{className:styles.survey__optionsList},t?.input?.options.map(e=>React.createElement("li",{key:e.label},React.createElement("button",{className:styles.survey__optionButton+" "+(f&&Object.prototype.hasOwnProperty.call(f,[t?.input?.var])&&(t?.input?.multiple&&-1<f[t.input.var].indexOf(e.label)||f[t.input.var]===e.label)?styles.survey__optionButtonSelected:""),onClick:j,var:t?.input?.var,pipeline:"true",useinnerhtml:"true",usemultiple:t?.input?.multiple?"true":null},e.label)))):"image"===t?.input?.type&&-1<["leadImg","featureImg"].indexOf(t?.input?.var)?React.createElement("div",{className:t?.className+" survey_image"},React.createElement("div",{style:{height:t?.height??"200px",width:t?.width??"200px"}},(t=>{let a;for(let e=0;e<R.length;e++)t?.input?.var===R[e].modif&&(a=R[e].name);var e=[...h.entries()].filter(([e])=>"image"===e);let n;e.forEach(([,e],t)=>{a===e.name&&(n=e)}),n&&ce(n,t.input.var);e="featureImg"===t.input.var&&me?i?.cdn?.static+"/"+me:"leadImg"===t.input.var&&ge?i?.cdn?.static+"/"+ge:"img/default/greythumb.jpg";return React.createElement("img",{className:"lineup_image",style:{borderRadius:".25rem",backgroundImage:`url(${e})`,backgroundSize:"cover",backgroundPosition:"center",backgroundRepeat:"no-repeat",width:"100%",height:"100%"},selectimg:t?.input?.var})})(t)),React.createElement("div",{className:"flex gap-p2 "+styles.pseudoButton,style:{alignItems:"center",fontSize:".8rem",marginTop:".5rem"},onClick:ie,modif:t?.input?.var},React.createElement("div",{className:"material-icons",style:{alignSelf:"center"}},"add"),React.createElement("div",null,t?.note)),React.createElement("input",{style:{display:"none"},type:"file",onChange:ue,selectmodif:t.input.var})):t?.component?React.createElement("div",{className:t?.className+" survey_myCustomComponent"},oe(t)):t?.jsx?React.createElement("div",{className:t?.className+" survey_myCustomComponent"},t.jsx):null))):null,React.createElement("div",{className:"survey_errorContainer"},React.createElement("div",{className:"error",ref:N,style:{opacity:0}},E[l])),React.createElement("div",{className:"flex survey_confirmBackButtonContainer",style:{direction:"rtl",marginTop:".5rem",justifyContent:"space-between"}},React.createElement("button",{className:styles.confirmButton+" survey_confirmButton",onClick:Y,goto:t?.confirm?.goto,label:t?.label,value:"confirm",question:t?.label,style:{opacity:t?.confirm?1:0,transition:0},handlestage:u},t?.confirm?.label?t?.confirm.label:"end"===t?.confirm?.goto?"Confirm":"Next"),c&&0<c.length&&!t?.submit&&!o?React.createElement("button",{onClick:ae,className:styles.backButton+" survey_backButton",style:{transition:0}},"Back"):null)));const me=s?.images?s.images.find(e=>e?.bgImg):null,ge=s.images?s.images.find(e=>e?.leadImg):null;return console.log("Pipeline Object",f,s,n,a,p),React.createElement("div",{className:`${styles.survey__container} ${i?.relativeStyles?styles.survey__relativeStyles+" Survey_relativeStyles":""} survey_container`,style:{height:Z,width:"-webkit-fill-available"}},n?D(W,"animatingBackBack","backItem",null,null,n,"back"):null,D(O,"animatingBackCurrent","currentItem","animatingNextCurrent",!0,p,"current"),a?D(G,null,"nextItem","animatingNextNext",null,a,"next"):null)};export default Module;