@bikdotai/bik-component-library 0.0.407-beta.17 → 0.0.407-beta.18
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/components/input/Input.js +1 -1
- package/dist/cjs/components/template-context-mapper/modalElements/VariableConnector.js +1 -1
- package/dist/esm/components/input/Input.js +1 -1
- package/dist/esm/components/template-context-mapper/modalElements/VariableConnector.js +1 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),n=require("../button/Button.js"),i=require("./Input-helper.js"),r=require("../TypographyStyle.js"),s=require("../../assets/icons/errorInfo.svg.js"),l=require("./context/InputStyleProvider.js"),o=require("./Input.styled.js");const a=t.forwardRef(((a,u)=>{var c,d,v,h,p;const{placeholder:f,leftIcon:x,rightIcon:g,labelText:j,maxCharLimit:y,isRequired:b,hintText:I,type:C,state:m,validate:w,variant:E,button:S,suffixText:O,prefixText:k,onChangeText:q,value:F,noErrorHint:H,reset:L,rangeValidation:M,noKeyDownChange:T,version:B,noMaxCharCheck:D}=Object.assign({maxCharLimit:0,type:"text",variant:"default"},a),R=null==x?void 0:x.icon,A=null==g?void 0:g.icon,[z,K]=t.useState(!1),[P,W]=t.useState(!1),[_,N]=t.useState(),V="small"===E?"18px":"22px",G=t.useContext(l.InputStyleContext),[J,Q]=t.useState(),U=t.useRef(null),X=null!=u?u:U;t.useEffect((()=>{Q(F)}),[F]),t.useEffect((()=>{var e;X.current&&(null===(e=a.onReferenceInit)||void 0===e||e.call(a,X.current))}),[X]),t.useEffect((()=>{const e=X.current;if(e)return e.addEventListener("wheel",ee,{passive:!1}),()=>{e.removeEventListener("wheel",ee)}}),[]),t.useEffect((()=>{L&&Q("")}),[L]),t.useEffect((()=>{var e;W(!!a.isActive),a.isActive&&(null===(e=X.current)||void 0===e||e.focus())}),[a.isActive]),t.useEffect((()=>{N(a.errorMessage)}),[a.errorMessage]),t.useEffect((()=>{var e;K(!1),("invalid"===a.state||_)&&K(!0),"active"===a.state&&(null===(e=X.current)||void 0===e||e.focus())}),[a.state,_]),t.useEffect((()=>{K(!!_)}),[_]);const Y=function(e){if(i.isFunction(e)){for(var t=arguments.length,n=new Array(t>1?t-1:0),r=1;r<t;r++)n[r-1]=arguments[r];e(...n)}},Z=()=>"zip"===C?6:60,$=e=>{const t=y
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),n=require("../button/Button.js"),i=require("./Input-helper.js"),r=require("../TypographyStyle.js"),s=require("../../assets/icons/errorInfo.svg.js"),l=require("./context/InputStyleProvider.js"),o=require("./Input.styled.js");const a=t.forwardRef(((a,u)=>{var c,d,v,h,p;const{placeholder:f,leftIcon:x,rightIcon:g,labelText:j,maxCharLimit:y,isRequired:b,hintText:I,type:C,state:m,validate:w,variant:E,button:S,suffixText:O,prefixText:k,onChangeText:q,value:F,noErrorHint:H,reset:L,rangeValidation:M,noKeyDownChange:T,version:B,noMaxCharCheck:D}=Object.assign({maxCharLimit:0,type:"text",variant:"default"},a),R=null==x?void 0:x.icon,A=null==g?void 0:g.icon,[z,K]=t.useState(!1),[P,W]=t.useState(!1),[_,N]=t.useState(),V="small"===E?"18px":"22px",G=t.useContext(l.InputStyleContext),[J,Q]=t.useState(),U=t.useRef(null),X=null!=u?u:U;t.useEffect((()=>{Q(F)}),[F]),t.useEffect((()=>{var e;X.current&&(null===(e=a.onReferenceInit)||void 0===e||e.call(a,X.current))}),[X]),t.useEffect((()=>{const e=X.current;if(e)return e.addEventListener("wheel",ee,{passive:!1}),()=>{e.removeEventListener("wheel",ee)}}),[]),t.useEffect((()=>{L&&Q("")}),[L]),t.useEffect((()=>{var e;W(!!a.isActive),a.isActive&&(null===(e=X.current)||void 0===e||e.focus())}),[a.isActive]),t.useEffect((()=>{N(a.errorMessage)}),[a.errorMessage]),t.useEffect((()=>{var e;K(!1),("invalid"===a.state||_)&&K(!0),"active"===a.state&&(null===(e=X.current)||void 0===e||e.focus())}),[a.state,_]),t.useEffect((()=>{K(!!_)}),[_]);const Y=function(e){if(i.isFunction(e)){for(var t=arguments.length,n=new Array(t>1?t-1:0),r=1;r<t;r++)n[r-1]=arguments[r];e(...n)}},Z=()=>"zip"===C?6:60,$=e=>{const t=0!==y?y:Z();if(T||q(F||"",e),D)return;const n=e.target.value;![8].includes(e.which)&&t>0&&n.length>=t&&e.preventDefault()},ee=e=>{e.preventDefault()},te=e=>{const t=e.target.value,n=0!==y?y+1:Z();if(!D&&n>0&&t.length>=n)return void e.preventDefault();q(t,e),a.textControl||Q(t);const r=w||i.validateInput;if(!r||!i.isFunction(r))return;const[s,l]=r(t,C,M);K(!s),N(a.errorMessage?a.errorMessage:l)},ne=e=>{var t;a.skipFocus||W(!0),Y(null===(t=a.onFocus)||void 0===t?void 0:t.call(a,e))},ie=e=>{var t;a.skipFocus||W(!1),Y(null===(t=a.onBlur)||void 0===t?void 0:t.call(a,e))},re=()=>{var t;return e.jsxs(e.Fragment,{children:["multiline"!==C&&e.jsx("input",{id:a.id,style:null!==(t=null==G?void 0:G.input)&&void 0!==t?t:{},ref:X,type:["phonenumber","zip","number"].includes(C)?"number":C,value:J,onFocus:e=>ne(e),onBlur:e=>ie(e),placeholder:f||"Enter here",onChange:te,onKeyDown:e=>$(e)}),"multiline"===C&&e.jsx("textarea",{value:J,ref:X,onFocus:e=>ne(e),onBlur:e=>ie(e),placeholder:f||"Enter here",onChange:te,onKeyDown:e=>$(e),maxLength:y>0?y:void 0})]})};return e.jsxs(o.RootContainer,Object.assign({width:a.width,height:a.height,state:m,type:C,style:null!==(c=null==G?void 0:G.RootContainer)&&void 0!==c?c:{}},{children:[!H&&(!!I||!!_)&&e.jsxs(o.InputFooter,Object.assign({invalid:!!_},{children:[!!_&&e.jsx(s.default,{width:16,height:16}),_||I]})),e.jsxs(o.InputWrapper,Object.assign({variant:E,state:m,width:a.width,isActive:"active"===m||P,isInvalid:z,style:null!==(d=null==G?void 0:G.InputWrapper)&&void 0!==d?d:{},version:B,height:a.height},{children:[!!R&&e.jsx(o.IconHolder,Object.assign({variant:E,iconSize:V,onClick:()=>Y(null==x?void 0:x.callback),isLeft:!0,style:null!==(v=null==G?void 0:G.IconHolder)&&void 0!==v?v:{}},{children:e.jsx(R,{})})),!!k&&e.jsx(o.PrefixHolder,Object.assign({variant:E},{children:k})),"default"===E&&e.jsx(o.InputContainer,Object.assign({height:a.height,type:a.type},{children:re()})),"small"===E&&e.jsx(o.InputContainerSmall,Object.assign({height:a.height,type:a.type},{children:re()})),!!A&&e.jsx(o.IconHolder,Object.assign({variant:E,iconSize:V,onClick:()=>Y(null==g?void 0:g.callback),isLeft:!1},{children:e.jsx(A,{})})),!!O&&e.jsx(o.SuffixHolder,Object.assign({variant:E},{children:O})),S&&S.text&&e.jsx(n.Button,{buttonText:S.text,onClick:()=>Y(null==S?void 0:S.onClick)})]})),(!!j||!!y)&&e.jsxs(o.InputHeader,Object.assign({invalid:z},{children:[e.jsxs(r.BodySecondary,{children:[j,b?e.jsx("span",{children:"*"}):""]}),y>0&&e.jsxs(o.MaxCharStyle,{children:[null!==(p=null===(h=a.value)||void 0===h?void 0:h.length)&&void 0!==p?p:0,"/",y]})]}))]}))}));a.displayName="Input",exports.Input=a;
|
|
@@ -4,4 +4,4 @@
|
|
|
4
4
|
background: ${e=>e.focused&&e.channel===c.CHANNEL_TYPE.EMAIL?b.COLORS.background.warning.light:"transparent"};
|
|
5
5
|
border-radius: 4px;
|
|
6
6
|
padding: 8px 10px;
|
|
7
|
-
`,_={value:"custom_link",label:"Custom URL"},O={value:"custom_text",label:"Custom text"},E={value:"static_expiry",label:"Static Expiry"};exports.Container=j,exports.default=i=>{let{onFocus:h,variable:y,index:f,showVariableModal:T,variableList:A,setShowDiscountCheckBox:N,componentType:S,CTAoptions:V}=i;var C,P;const[k,L]=a.useState(!1),[H,w]=a.useState(""),[B,D]=a.useState([]),[q,Y]=a.useState(),[M,R]=a.useState(!1),[U,W]=a.useState(!1),{device:I,channel:$,isError:z,originalVariableList:Z,template:F,templateSelectionTriggered:G,setTemplate:J,setDisplayContent:K,setOriginalVariableList:Q,globalNormalizedPlaceholders:X,enabledCustomText:ee,pod:te}=g.useTemplateModalContext();function le(e,t){var l,a,i;const n=e;w(""),console.log("vj: single option",n),Y(n),$===c.CHANNEL_TYPE.WHATSAPP?"custom_text"!==n.value&&"custom_link"!==n.value&&"static_expiry"!==n.value?(ie(null!==(l=n.value)&&void 0!==l?l:"","string"),null==ne||ne(null!==(a=y.index)&&void 0!==a?a:0,n.value,!0)):(null==ne||ne(null!==(i=y.index)&&void 0!==i?i:0,H,!0,n.value),ie("","url"===n.bikPlaceholderType?"link":"string")):"custom_text"!==n.value&&"custom_link"!==n.value?ie(n.value,"url"===n.bikPlaceholderType?"link":"string"):(w(""),ie("",n.value))}function ae(e,t){var l;w(t);const a="custom_link"===(null==q?void 0:q.value)&&t?t.includes("https")?t:`https://${t}`:t;ie(a,"static_expiry"===e?"string":e),$===c.CHANNEL_TYPE.WHATSAPP&&(null==ne||ne(null!==(l=y.index)&&void 0!==l?l:0,a,"custom_link"===e,e))}function ie(e,t){var l,a,i,n;const o="custom_link"===t?"link":"custom_text"===t?"string":t;if($!==c.CHANNEL_TYPE.WHATSAPP){const a=x.getVariableNameForEmailByIndex(f+1),i=null===document||void 0===document?void 0:document.getElementById("mobile"===I?"template_html_mobile":"template_html_desktop"),n=$===c.CHANNEL_TYPE.EMAIL?null===(l=null==i?void 0:i.contentWindow)||void 0===l?void 0:l.document.getElementById(a):document.getElementById(a);n&&(n.textContent="custom_text"!==t&&"custom_link"!==t||e?e:y.variableName);const s=Z.map(((t,l)=>l===f?Object.assign(Object.assign({},t),{type:o,updatedValue:e}):t));null==Q||Q(s)}if($===c.CHANNEL_TYPE.WHATSAPP){const l=Z;let s=l.body,u=l.header,d=l.buttons;"BODY"===S?s=null===(a=l.body)||void 0===a?void 0:a.map(((t,l)=>l===f?Object.assign(Object.assign({},t),{type:o,updatedValue:e}):t)):"HEADER"===S?u=null===(i=l.header)||void 0===i?void 0:i.map(((t,l)=>l===f?Object.assign(Object.assign({},t),{type:o,updatedValue:e}):t)):"BUTTONS"===S&&(d=null===(n=l.buttons)||void 0===n?void 0:n.map(((l,a)=>a===f?Object.assign(Object.assign({},l),{buttonVariable:"custom_link"===t?"((customPlaceholderName))":e,example:[e]}):l))),null==Q||Q((e=>Object.assign(Object.assign({},e),{header:u,body:s,buttons:d})))}}function ne(e,t,l,a){var i,n,o,s;const u=Object.assign({},F);console.log("vj: update",{index:e,newValue:t,type:a});const d=null===(i=null==u?void 0:u.components)||void 0===i?void 0:i.map((l=>{var a,i,n,o,s,u,d,r,c,p;const m=Object.assign({},l);if("BODY"===l.type&&"BODY"===S){if(null===(i=null===(a=l.example)||void 0===a?void 0:a.body_text)||void 0===i?void 0:i[0]){const l=[...null!==(s=null===(o=null===(n=m.example)||void 0===n?void 0:n.body_text)||void 0===o?void 0:o[0])&&void 0!==s?s:[]];l[e]=t.replace("{{","").replace("}}","").replace("((","").replace("))","");const a=Object.assign(Object.assign({},m.example),{body_text:[l]});return Object.assign(Object.assign({},m),{example:a})}}else if("HEADER"===l.type&&"HEADER"===S){if(null===(u=l.example)||void 0===u?void 0:u.header_text){const l=[...null!==(r=null===(d=m.example)||void 0===d?void 0:d.header_text)&&void 0!==r?r:[]];l[e]=t.replace("{{","").replace("}}","").replace("((","").replace("))","");const a=Object.assign(Object.assign({},m.example),{header_text:l});return Object.assign(Object.assign({},m),{example:a})}}else if("BUTTONS"===l.type&&"BUTTONS"===S){if(null===(p=null===(c=l.buttons)||void 0===c?void 0:c[e])||void 0===p?void 0:p.example){const a=l.buttons.map(((l,a)=>a===e?Object.assign(Object.assign({},l),{example:[t]}):l));return Object.assign(Object.assign({},m),{buttons:a})}}else if("limited_time_offer"===l.type&&"limited_time_offer"===S)return Object.assign(Object.assign({},m),{example:Object.assign(Object.assign({},m.example),{limited_time_offer:t})});return l}));if(console.log("vj: update components",d),u.components=d,l)if("BODY"===S&&(null===(n=null==u?void 0:u.mapping)||void 0===n?void 0:n.body))u.mapping=Object.assign(Object.assign({},u.mapping),{body:u.mapping.body.map(((l,i)=>e===i?"custom_text"===a?`((editableVariable${i+10}))`:t:l))});else if("HEADER"===S&&(null===(o=null==u?void 0:u.mapping)||void 0===o?void 0:o.header))u.mapping=Object.assign(Object.assign({},u.mapping),{header:u.mapping.header.map(((l,i)=>e===i?"custom_text"===a?`((editableVariable${i+20}))`:t:l))});else if("BUTTONS"===S&&(null===(s=null==u?void 0:u.mapping)||void 0===s?void 0:s.buttons)){let l=-1,i=-1;d.forEach((t=>{var a;"BUTTONS"===t.type&&(null===(a=t.buttons)||void 0===a||a.forEach(((t,a)=>{"URL"===t.type&&(l++,a===e&&"URL"==t.type&&(i=l))})))})),u.mapping=Object.assign(Object.assign({},u.mapping),{buttons:u.mapping.buttons.map(((e,l)=>l===i?"custom_link"===a?"((customPlaceholderName))":t:e))})}null==J||J(Object.assign({},u))}return a.useEffect((()=>{k&&(null==h||h())}),[k]),a.useEffect((()=>{!function(){var e,t,l,a,i;const n="mobile"===I?"template_html_mobile":"template_html_desktop",o=document.getElementById(n),s=(null!==(a=null===(l=null===(t=null===(e=null==o?void 0:o.contentWindow)||void 0===e?void 0:e.document)||void 0===t?void 0:t.body)||void 0===l?void 0:l.innerHTML)&&void 0!==a?a:"")+(null===(i=null==o?void 0:o.contentWindow)||void 0===i?void 0:i.document.head.innerHTML);$===c.CHANNEL_TYPE.EMAIL&&(null==K||K(s))}()}),[G]),a.useEffect((()=>{var e,t;const l=[];let a=[];if($!==c.CHANNEL_TYPE.MESSAGE||ee){"link"===(null==y?void 0:y.type)?(l.push({label:"",options:[_,O]}),Y(_)):"date_time"===(null==y?void 0:y.type)?(l.push({label:"",options:[_,O]}),Y(E)):(l.push({label:"",options:[_,O,E]}),Y(O));const e=null!=X?X:[];D([...l,...e.map((e=>{var t,l;return Object.assign(Object.assign({},e),{label:v.default.toCapitilize(null===(l=null===(t=e.label)||void 0===t?void 0:t.replace(/([A-Z])/g," $1"))||void 0===l?void 0:l.toLowerCase())})}))]),a=[...l,...e]}else{const e=null!=X?X:[];D([{label:"",options:[O,_]},...e]),a=[{label:"",options:[O,_]},...e]}if(($===c.CHANNEL_TYPE.WHATSAPP||$===c.CHANNEL_TYPE.EMAIL||$===c.CHANNEL_TYPE.MESSAGE)&&y.updatedValue)if(r.placeHolderNamePattern.test(y.updatedValue)&&$===c.CHANNEL_TYPE.WHATSAPP||y.updatedValue.startsWith("{{")&&$!==c.CHANNEL_TYPE.WHATSAPP){const e=function(e,t,l){var a;let i={label:"",value:""};const n=l===c.CHANNEL_TYPE.WHATSAPP?e.updatedValue.replace("[[","").replace("]]",""):e.updatedValue.replace("{{","").replace("}}","");if(T){let t=e.updatedValue;if(te===p.POD.CHATBOT&&"BUTTONS"===S){const l=null==V?void 0:V.filter((t=>t.placeHolder===e.updatedValue));l&&l.length>0&&(t=l[0].label)}i={label:t?t.replace("{{","").replace("}}","").trim().replace("."," "):"",value:null!==(a=e.updatedValue)&&void 0!==a?a:""}}else t.map((e=>{e.options.map((e=>{var t;(null===(t=e.value)||void 0===t?void 0:t.replace("{{","").replace("}}","").trim())===n.trim()&&(i=e)}))}));return i}(y,a,$);e.value&&Y(e)}else"date_time"===y.type?(Y(E),w(y.updatedValue),ne(null!==(e=y.index)&&void 0!==e?e:0,y.updatedValue)):(null===(t=y.updatedValue)||void 0===t?void 0:t.startsWith("https"))?(Y(_),w(y.updatedValue.split("https://")[1])):(Y(O),w(y.updatedValue))}),[]),a.useEffect((()=>{I&&q&&H&&setTimeout((()=>{ie("custom_link"===(null==q?void 0:q.value)&&H?H.includes("https")?H:`https://${H}`:H,q.value)}),100)}),[I]),a.useEffect((()=>{!U&&q&&y.updatedValue&&setTimeout((()=>{ie("custom_link"===(null==q?void 0:q.value)&&y.updatedValue?y.updatedValue.includes("https")?y.updatedValue:`https://${y.updatedValue}`:y.updatedValue,q.value),W(!0)}),100)}),[q]),e.jsxs(j,Object.assign({channel:$,focused:k,onMouseEnter:()=>L(!0),onMouseLeave:()=>L(!1)},{children:[e.jsx("div",Object.assign({style:{marginBottom:8}},{children:e.jsxs(m.BodySecondary,Object.assign({style:{color:z&&!q?b.COLORS.content.negative:b.COLORS.content.primary}},{children:[null===(C=y.variableName)||void 0===C?void 0:C.replace("{{","").replace("}}","")," ","link"===(null==y?void 0:y.type)?"link":"variable"]}))})),e.jsx("div",Object.assign({style:{marginBottom:12}},{children:T?e.jsxs("div",Object.assign({style:{display:"flex",border:"#E0E0E0 1px solid",borderRadius:4,padding:10,justifyContent:(null==q?void 0:q.label)?"space-between":"flex-end"}},{children:[e.jsx(m.BodyPrimary,{children:d.truncate(null!==(P=null==q?void 0:q.label)&&void 0!==P?P:"",20,!0)}),e.jsx(t.default,{onClick:()=>{R(!M)},width:24,height:24,color:b.COLORS.content.primary})]})):e.jsx(s.Dropdown,{options:B,isSearchable:!1,onSelect:le,defaultOptions:q?[Object.assign(Object.assign({},q),{selected:!0})]:[]})})),("custom_text"===(null==q?void 0:q.value)||"custom_link"===(null==q?void 0:q.value))&&e.jsx(u.Input,{labelText:"custom_text"===(null==q?void 0:q.value)?"Custom text value":"custom_link"===(null==q?void 0:q.value)?"Custom URL value":"",id:`variable-value-${null==q?void 0:q.value}-${f}`,value:H,errorMessage:z?H&&0!==H.trim().length?"custom_link"!==q.value||/^https?:\/\/(?:www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b(?:[-a-zA-Z0-9()@:%_\+.~#?&\/=]*)$/.test(`https://${H.trim()}`)&&0!==H.trim().length?"custom_link"!==q.value&&H.length>30?"Length cannot be more than 30":"BUTTONS"===S?"Enter valid alpha numeric code":"":"Enter valid URL":"Required field":"",maxCharLimit:"custom_link"===(null==q?void 0:q.value)?2e3:"BUTTONS"===S?15:30,prefixText:"custom_link"===(null==q?void 0:q.value)?"https://":"",placeholder:"link"===y.type||"custom_link"===q.value?"Enter custom URL here":"Enter custom text here",onChangeText:e=>{ae(q.value,e)}}),"static_expiry"===(null==q?void 0:q.value)&&e.jsx(o.CustomDateTime,{placement:"auto",time:H?l.format(new Date(H),"hh:mm a"):l.format(new Date,"hh:mm a"),date:H?new Date(H):new Date,minDate:new Date,error:"",setError:function(e){},onChange:e=>{console.log("vj: change date",e),ae("static_expiry",e.toISOString())}}),M&&e.jsx(n.AddVariableV2SideModal,{zIndex:2e3,data:null!=A?A:[],showVariable:M,setShowVariable:R,placeholder:"Add a variable",customTrigger:e=>{null==N||N(!1),"{{custom.url}}"===e.actualValue?le({label:e.displayName,selected:!0,value:"custom_link"}):"{{custom.text}}"==e.actualValue?le({label:e.displayName,selected:!0,value:"custom_text"}):"{{static.expiry}}"==e.actualValue?le({label:e.displayName,selected:!0,value:"static_expiry"}):le({label:e.displayName.replace("{{","").replace("}}","").trim().replace("."," "),selected:!0,value:e.actualValue,bikPlaceholderType:"string"})}})]}))};
|
|
7
|
+
`,_={value:"custom_link",label:"Custom URL"},O={value:"custom_text",label:"Custom text"},E={value:"static_expiry",label:"Static Expiry"};exports.Container=j,exports.default=i=>{let{onFocus:h,variable:y,index:f,showVariableModal:T,variableList:A,setShowDiscountCheckBox:N,componentType:S,CTAoptions:V}=i;var C,P;const[k,L]=a.useState(!1),[H,w]=a.useState(""),[B,D]=a.useState([]),[q,Y]=a.useState(),[M,R]=a.useState(!1),[U,W]=a.useState(!1),{device:I,channel:$,isError:z,originalVariableList:Z,template:F,templateSelectionTriggered:G,setTemplate:J,setDisplayContent:K,setOriginalVariableList:Q,globalNormalizedPlaceholders:X,enabledCustomText:ee,pod:te}=g.useTemplateModalContext();function le(e,t){var l,a,i;const n=e;w(""),console.log("vj: single option",n),Y(n),$===c.CHANNEL_TYPE.WHATSAPP?"custom_text"!==n.value&&"custom_link"!==n.value&&"static_expiry"!==n.value?(ie(null!==(l=n.value)&&void 0!==l?l:"","string"),null==ne||ne(null!==(a=y.index)&&void 0!==a?a:0,n.value,!0)):(null==ne||ne(null!==(i=y.index)&&void 0!==i?i:0,H,!0,n.value),ie("","url"===n.bikPlaceholderType?"link":"string")):"custom_text"!==n.value&&"custom_link"!==n.value?ie(n.value,"url"===n.bikPlaceholderType?"link":"string"):(w(""),ie("",n.value))}function ae(e,t){var l;w(t);const a="custom_link"===(null==q?void 0:q.value)&&t?t.includes("https")?t:`https://${t}`:t;ie(a,"static_expiry"===e?"string":e),$===c.CHANNEL_TYPE.WHATSAPP&&(null==ne||ne(null!==(l=y.index)&&void 0!==l?l:0,a,"custom_link"===e,e))}function ie(e,t){var l,a,i,n;const o="custom_link"===t?"link":"custom_text"===t?"string":t;if($!==c.CHANNEL_TYPE.WHATSAPP){const a=x.getVariableNameForEmailByIndex(f+1),i=null===document||void 0===document?void 0:document.getElementById("mobile"===I?"template_html_mobile":"template_html_desktop"),n=$===c.CHANNEL_TYPE.EMAIL?null===(l=null==i?void 0:i.contentWindow)||void 0===l?void 0:l.document.getElementById(a):document.getElementById(a);n&&(n.textContent="custom_text"!==t&&"custom_link"!==t||e?e:y.variableName);const s=Z.map(((t,l)=>l===f?Object.assign(Object.assign({},t),{type:o,updatedValue:e}):t));null==Q||Q(s)}if($===c.CHANNEL_TYPE.WHATSAPP){const l=Z;let s=l.body,u=l.header,d=l.buttons;"BODY"===S?s=null===(a=l.body)||void 0===a?void 0:a.map(((t,l)=>l===f?Object.assign(Object.assign({},t),{type:o,updatedValue:e}):t)):"HEADER"===S?u=null===(i=l.header)||void 0===i?void 0:i.map(((t,l)=>l===f?Object.assign(Object.assign({},t),{type:o,updatedValue:e}):t)):"BUTTONS"===S&&(d=null===(n=l.buttons)||void 0===n?void 0:n.map(((l,a)=>a===f?Object.assign(Object.assign({},l),{buttonVariable:"custom_link"===t?"((customPlaceholderName))":e,example:[e]}):l))),null==Q||Q((e=>Object.assign(Object.assign({},e),{header:u,body:s,buttons:d})))}}function ne(e,t,l,a){var i,n,o,s;const u=Object.assign({},F);console.log("vj: update",{index:e,newValue:t,type:a});const d=null===(i=null==u?void 0:u.components)||void 0===i?void 0:i.map((l=>{var a,i,n,o,s,u,d,r,c,p;const m=Object.assign({},l);if("BODY"===l.type&&"BODY"===S){if(null===(i=null===(a=l.example)||void 0===a?void 0:a.body_text)||void 0===i?void 0:i[0]){const l=[...null!==(s=null===(o=null===(n=m.example)||void 0===n?void 0:n.body_text)||void 0===o?void 0:o[0])&&void 0!==s?s:[]];l[e]=t.replace("{{","").replace("}}","").replace("((","").replace("))","");const a=Object.assign(Object.assign({},m.example),{body_text:[l]});return Object.assign(Object.assign({},m),{example:a})}}else if("HEADER"===l.type&&"HEADER"===S){if(null===(u=l.example)||void 0===u?void 0:u.header_text){const l=[...null!==(r=null===(d=m.example)||void 0===d?void 0:d.header_text)&&void 0!==r?r:[]];l[e]=t.replace("{{","").replace("}}","").replace("((","").replace("))","");const a=Object.assign(Object.assign({},m.example),{header_text:l});return Object.assign(Object.assign({},m),{example:a})}}else if("BUTTONS"===l.type&&"BUTTONS"===S){if(null===(p=null===(c=l.buttons)||void 0===c?void 0:c[e])||void 0===p?void 0:p.example){const a=l.buttons.map(((l,a)=>a===e?Object.assign(Object.assign({},l),{example:[t]}):l));return Object.assign(Object.assign({},m),{buttons:a})}}else if("limited_time_offer"===l.type&&"limited_time_offer"===S)return Object.assign(Object.assign({},m),{example:Object.assign(Object.assign({},m.example),{limited_time_offer:t})});return l}));if(console.log("vj: update components",d),u.components=d,l)if("BODY"===S&&(null===(n=null==u?void 0:u.mapping)||void 0===n?void 0:n.body))u.mapping=Object.assign(Object.assign({},u.mapping),{body:u.mapping.body.map(((l,i)=>e===i?"custom_text"===a?`((editableVariable${i+10}))`:t:l))});else if("HEADER"===S&&(null===(o=null==u?void 0:u.mapping)||void 0===o?void 0:o.header))u.mapping=Object.assign(Object.assign({},u.mapping),{header:u.mapping.header.map(((l,i)=>e===i?"custom_text"===a?`((editableVariable${i+20}))`:t:l))});else if("BUTTONS"===S&&(null===(s=null==u?void 0:u.mapping)||void 0===s?void 0:s.buttons)){let l=-1,i=-1;d.forEach((t=>{var a;"BUTTONS"===t.type&&(null===(a=t.buttons)||void 0===a||a.forEach(((t,a)=>{"URL"===t.type&&(l++,a===e&&"URL"==t.type&&(i=l))})))})),u.mapping=Object.assign(Object.assign({},u.mapping),{buttons:u.mapping.buttons.map(((e,l)=>l===i?"custom_link"===a?"((customPlaceholderName))":t:e))})}null==J||J(Object.assign({},u))}return a.useEffect((()=>{k&&(null==h||h())}),[k]),a.useEffect((()=>{!function(){var e,t,l,a,i;const n="mobile"===I?"template_html_mobile":"template_html_desktop",o=document.getElementById(n),s=(null!==(a=null===(l=null===(t=null===(e=null==o?void 0:o.contentWindow)||void 0===e?void 0:e.document)||void 0===t?void 0:t.body)||void 0===l?void 0:l.innerHTML)&&void 0!==a?a:"")+(null===(i=null==o?void 0:o.contentWindow)||void 0===i?void 0:i.document.head.innerHTML);$===c.CHANNEL_TYPE.EMAIL&&(null==K||K(s))}()}),[G]),a.useEffect((()=>{var e,t;const l=[];let a=[];if($!==c.CHANNEL_TYPE.MESSAGE||ee){"link"===(null==y?void 0:y.type)?(l.push({label:"",options:[_,O]}),Y(_)):"date_time"===(null==y?void 0:y.type)?(l.push({label:"",options:[_,O]}),Y(E)):(l.push({label:"",options:[_,O,E]}),Y(O));const e=null!=X?X:[];D([...l,...e.map((e=>{var t,l;return Object.assign(Object.assign({},e),{label:v.default.toCapitilize(null===(l=null===(t=e.label)||void 0===t?void 0:t.replace(/([A-Z])/g," $1"))||void 0===l?void 0:l.toLowerCase())})}))]),a=[...l,...e]}else{const e=null!=X?X:[];D([{label:"",options:[O,_]},...e]),a=[{label:"",options:[O,_]},...e]}if(($===c.CHANNEL_TYPE.WHATSAPP||$===c.CHANNEL_TYPE.EMAIL||$===c.CHANNEL_TYPE.MESSAGE)&&y.updatedValue)if(r.placeHolderNamePattern.test(y.updatedValue)&&$===c.CHANNEL_TYPE.WHATSAPP||y.updatedValue.startsWith("{{")&&$!==c.CHANNEL_TYPE.WHATSAPP){const e=function(e,t,l){var a;let i={label:"",value:""};const n=l===c.CHANNEL_TYPE.WHATSAPP?e.updatedValue.replace("[[","").replace("]]",""):e.updatedValue.replace("{{","").replace("}}","");if(T){let t=e.updatedValue;if(te===p.POD.CHATBOT&&"BUTTONS"===S){const l=null==V?void 0:V.filter((t=>t.placeHolder===e.updatedValue));l&&l.length>0&&(t=l[0].label)}i={label:t?t.replace("{{","").replace("}}","").trim().replace("."," "):"",value:null!==(a=e.updatedValue)&&void 0!==a?a:""}}else t.map((e=>{e.options.map((e=>{var t;(null===(t=e.value)||void 0===t?void 0:t.replace("{{","").replace("}}","").trim())===n.trim()&&(i=e)}))}));return i}(y,a,$);e.value&&Y(e)}else"date_time"===y.type?(Y(E),w(y.updatedValue),ne(null!==(e=y.index)&&void 0!==e?e:0,y.updatedValue)):(null===(t=y.updatedValue)||void 0===t?void 0:t.startsWith("https"))?(Y(_),w(y.updatedValue.split("https://")[1])):(Y(O),w(y.updatedValue))}),[]),a.useEffect((()=>{I&&q&&H&&setTimeout((()=>{ie("custom_link"===(null==q?void 0:q.value)&&H?H.includes("https")?H:`https://${H}`:H,q.value)}),100)}),[I]),a.useEffect((()=>{!U&&q&&y.updatedValue&&setTimeout((()=>{ie("custom_link"===(null==q?void 0:q.value)&&y.updatedValue?y.updatedValue.includes("https")?y.updatedValue:`https://${y.updatedValue}`:y.updatedValue,q.value),W(!0)}),100)}),[q]),e.jsxs(j,Object.assign({channel:$,focused:k,onMouseEnter:()=>L(!0),onMouseLeave:()=>L(!1)},{children:[e.jsx("div",Object.assign({style:{marginBottom:8}},{children:e.jsxs(m.BodySecondary,Object.assign({style:{color:z&&!q?b.COLORS.content.negative:b.COLORS.content.primary}},{children:[null===(C=y.variableName)||void 0===C?void 0:C.replace("{{","").replace("}}","")," ","link"===(null==y?void 0:y.type)?"link":"variable"]}))})),e.jsx("div",Object.assign({style:{marginBottom:12}},{children:T?e.jsxs("div",Object.assign({style:{display:"flex",border:"#E0E0E0 1px solid",borderRadius:4,padding:10,justifyContent:(null==q?void 0:q.label)?"space-between":"flex-end"}},{children:[e.jsx(m.BodyPrimary,{children:d.truncate(null!==(P=null==q?void 0:q.label)&&void 0!==P?P:"",20,!0)}),e.jsx(t.default,{onClick:()=>{R(!M)},width:24,height:24,color:b.COLORS.content.primary})]})):e.jsx(s.Dropdown,{options:B,isSearchable:!1,onSelect:le,defaultOptions:q?[Object.assign(Object.assign({},q),{selected:!0})]:[]})})),("custom_text"===(null==q?void 0:q.value)||"custom_link"===(null==q?void 0:q.value))&&e.jsx(u.Input,{labelText:"custom_text"===(null==q?void 0:q.value)?"Custom text value":"custom_link"===(null==q?void 0:q.value)?"Custom URL value":"",id:`variable-value-${null==q?void 0:q.value}-${f}`,value:H,errorMessage:z?H&&0!==H.trim().length?"custom_link"!==q.value||/^https?:\/\/(?:www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b(?:[-a-zA-Z0-9()@:%_\+.~#?&\/=]*)$/.test(`https://${H.trim()}`)&&0!==H.trim().length?"custom_link"!==q.value&&H.length>30?"Length cannot be more than 30":"BUTTONS"===S&&"custom_link"!==q.value?"Enter valid alpha numeric code":"":"Enter valid URL":"Required field":"",maxCharLimit:"custom_link"===(null==q?void 0:q.value)?2e3:"BUTTONS"===S?15:30,prefixText:"custom_link"===(null==q?void 0:q.value)?"https://":"",placeholder:"link"===y.type||"custom_link"===q.value?"Enter custom URL here":"Enter custom text here",onChangeText:e=>{ae(q.value,e)}}),"static_expiry"===(null==q?void 0:q.value)&&e.jsx(o.CustomDateTime,{placement:"auto",time:H?l.format(new Date(H),"hh:mm a"):l.format(new Date,"hh:mm a"),date:H?new Date(H):new Date,minDate:new Date,error:"",setError:function(e){},onChange:e=>{console.log("vj: change date",e),ae("static_expiry",e.toISOString())}}),M&&e.jsx(n.AddVariableV2SideModal,{zIndex:2e3,data:null!=A?A:[],showVariable:M,setShowVariable:R,placeholder:"Add a variable",customTrigger:e=>{null==N||N(!1),"{{custom.url}}"===e.actualValue?le({label:e.displayName,selected:!0,value:"custom_link"}):"{{custom.text}}"==e.actualValue?le({label:e.displayName,selected:!0,value:"custom_text"}):"{{static.expiry}}"==e.actualValue?le({label:e.displayName,selected:!0,value:"static_expiry"}):le({label:e.displayName.replace("{{","").replace("}}","").trim().replace("."," "),selected:!0,value:e.actualValue,bikPlaceholderType:"string"})}})]}))};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsxs as e,jsx as t,Fragment as n}from"react/jsx-runtime";import{forwardRef as i,useState as r,useContext as l,useRef as o,useEffect as a}from"react";import{Button as s}from"../button/Button.js";import{isFunction as c,validateInput as u}from"./Input-helper.js";import{BodySecondary as v}from"../TypographyStyle.js";import d from"../../assets/icons/errorInfo.svg.js";import{InputStyleContext as h}from"./context/InputStyleProvider.js";import{RootContainer as p,InputFooter as g,InputWrapper as f,IconHolder as m,PrefixHolder as x,InputContainer as y,InputContainerSmall as b,SuffixHolder as j,InputHeader as C,MaxCharStyle as w}from"./Input.styled.js";const I=i(((i,I)=>{var O,k,L,T,D;const{placeholder:A,leftIcon:E,rightIcon:F,labelText:M,maxCharLimit:z,isRequired:B,hintText:S,type:K,state:R,validate:H,variant:q,button:N,suffixText:P,prefixText:V,onChangeText:W,value:G,noErrorHint:J,reset:Q,rangeValidation:U,noKeyDownChange:X,version:Y,noMaxCharCheck:Z}=Object.assign({maxCharLimit:0,type:"text",variant:"default"},i),$=null==E?void 0:E.icon,_=null==F?void 0:F.icon,[ee,te]=r(!1),[ne,ie]=r(!1),[re,le]=r(),oe="small"===q?"18px":"22px",ae=l(h),[se,ce]=r(),ue=o(null),ve=null!=I?I:ue;a((()=>{ce(G)}),[G]),a((()=>{var e;ve.current&&(null===(e=i.onReferenceInit)||void 0===e||e.call(i,ve.current))}),[ve]),a((()=>{const e=ve.current;if(e)return e.addEventListener("wheel",ge,{passive:!1}),()=>{e.removeEventListener("wheel",ge)}}),[]),a((()=>{Q&&ce("")}),[Q]),a((()=>{var e;ie(!!i.isActive),i.isActive&&(null===(e=ve.current)||void 0===e||e.focus())}),[i.isActive]),a((()=>{le(i.errorMessage)}),[i.errorMessage]),a((()=>{var e;te(!1),("invalid"===i.state||re)&&te(!0),"active"===i.state&&(null===(e=ve.current)||void 0===e||e.focus())}),[i.state,re]),a((()=>{te(!!re)}),[re]);const de=function(e){if(c(e)){for(var t=arguments.length,n=new Array(t>1?t-1:0),i=1;i<t;i++)n[i-1]=arguments[i];e(...n)}},he=()=>"zip"===K?6:60,pe=e=>{const t=z
|
|
1
|
+
import{jsxs as e,jsx as t,Fragment as n}from"react/jsx-runtime";import{forwardRef as i,useState as r,useContext as l,useRef as o,useEffect as a}from"react";import{Button as s}from"../button/Button.js";import{isFunction as c,validateInput as u}from"./Input-helper.js";import{BodySecondary as v}from"../TypographyStyle.js";import d from"../../assets/icons/errorInfo.svg.js";import{InputStyleContext as h}from"./context/InputStyleProvider.js";import{RootContainer as p,InputFooter as g,InputWrapper as f,IconHolder as m,PrefixHolder as x,InputContainer as y,InputContainerSmall as b,SuffixHolder as j,InputHeader as C,MaxCharStyle as w}from"./Input.styled.js";const I=i(((i,I)=>{var O,k,L,T,D;const{placeholder:A,leftIcon:E,rightIcon:F,labelText:M,maxCharLimit:z,isRequired:B,hintText:S,type:K,state:R,validate:H,variant:q,button:N,suffixText:P,prefixText:V,onChangeText:W,value:G,noErrorHint:J,reset:Q,rangeValidation:U,noKeyDownChange:X,version:Y,noMaxCharCheck:Z}=Object.assign({maxCharLimit:0,type:"text",variant:"default"},i),$=null==E?void 0:E.icon,_=null==F?void 0:F.icon,[ee,te]=r(!1),[ne,ie]=r(!1),[re,le]=r(),oe="small"===q?"18px":"22px",ae=l(h),[se,ce]=r(),ue=o(null),ve=null!=I?I:ue;a((()=>{ce(G)}),[G]),a((()=>{var e;ve.current&&(null===(e=i.onReferenceInit)||void 0===e||e.call(i,ve.current))}),[ve]),a((()=>{const e=ve.current;if(e)return e.addEventListener("wheel",ge,{passive:!1}),()=>{e.removeEventListener("wheel",ge)}}),[]),a((()=>{Q&&ce("")}),[Q]),a((()=>{var e;ie(!!i.isActive),i.isActive&&(null===(e=ve.current)||void 0===e||e.focus())}),[i.isActive]),a((()=>{le(i.errorMessage)}),[i.errorMessage]),a((()=>{var e;te(!1),("invalid"===i.state||re)&&te(!0),"active"===i.state&&(null===(e=ve.current)||void 0===e||e.focus())}),[i.state,re]),a((()=>{te(!!re)}),[re]);const de=function(e){if(c(e)){for(var t=arguments.length,n=new Array(t>1?t-1:0),i=1;i<t;i++)n[i-1]=arguments[i];e(...n)}},he=()=>"zip"===K?6:60,pe=e=>{const t=0!==z?z:he();if(X||W(G||"",e),Z)return;const n=e.target.value;![8].includes(e.which)&&t>0&&n.length>=t&&e.preventDefault()},ge=e=>{e.preventDefault()},fe=e=>{const t=e.target.value,n=0!==z?z+1:he();if(!Z&&n>0&&t.length>=n)return void e.preventDefault();W(t,e),i.textControl||ce(t);const r=H||u;if(!r||!c(r))return;const[l,o]=r(t,K,U);te(!l),le(i.errorMessage?i.errorMessage:o)},me=e=>{var t;i.skipFocus||ie(!0),de(null===(t=i.onFocus)||void 0===t?void 0:t.call(i,e))},xe=e=>{var t;i.skipFocus||ie(!1),de(null===(t=i.onBlur)||void 0===t?void 0:t.call(i,e))},ye=()=>{var r;return e(n,{children:["multiline"!==K&&t("input",{id:i.id,style:null!==(r=null==ae?void 0:ae.input)&&void 0!==r?r:{},ref:ve,type:["phonenumber","zip","number"].includes(K)?"number":K,value:se,onFocus:e=>me(e),onBlur:e=>xe(e),placeholder:A||"Enter here",onChange:fe,onKeyDown:e=>pe(e)}),"multiline"===K&&t("textarea",{value:se,ref:ve,onFocus:e=>me(e),onBlur:e=>xe(e),placeholder:A||"Enter here",onChange:fe,onKeyDown:e=>pe(e),maxLength:z>0?z:void 0})]})};return e(p,Object.assign({width:i.width,height:i.height,state:R,type:K,style:null!==(O=null==ae?void 0:ae.RootContainer)&&void 0!==O?O:{}},{children:[!J&&(!!S||!!re)&&e(g,Object.assign({invalid:!!re},{children:[!!re&&t(d,{width:16,height:16}),re||S]})),e(f,Object.assign({variant:q,state:R,width:i.width,isActive:"active"===R||ne,isInvalid:ee,style:null!==(k=null==ae?void 0:ae.InputWrapper)&&void 0!==k?k:{},version:Y,height:i.height},{children:[!!$&&t(m,Object.assign({variant:q,iconSize:oe,onClick:()=>de(null==E?void 0:E.callback),isLeft:!0,style:null!==(L=null==ae?void 0:ae.IconHolder)&&void 0!==L?L:{}},{children:t($,{})})),!!V&&t(x,Object.assign({variant:q},{children:V})),"default"===q&&t(y,Object.assign({height:i.height,type:i.type},{children:ye()})),"small"===q&&t(b,Object.assign({height:i.height,type:i.type},{children:ye()})),!!_&&t(m,Object.assign({variant:q,iconSize:oe,onClick:()=>de(null==F?void 0:F.callback),isLeft:!1},{children:t(_,{})})),!!P&&t(j,Object.assign({variant:q},{children:P})),N&&N.text&&t(s,{buttonText:N.text,onClick:()=>de(null==N?void 0:N.onClick)})]})),(!!M||!!z)&&e(C,Object.assign({invalid:ee},{children:[e(v,{children:[M,B?t("span",{children:"*"}):""]}),z>0&&e(w,{children:[null!==(D=null===(T=i.value)||void 0===T?void 0:T.length)&&void 0!==D?D:0,"/",z]})]}))]}))}));I.displayName="Input";export{I as Input};
|
|
@@ -4,4 +4,4 @@ import{jsxs as e,jsx as t}from"react/jsx-runtime";import l from"../../../assets/
|
|
|
4
4
|
background: ${e=>e.focused&&e.channel===m.EMAIL?x.background.warning.light:"transparent"};
|
|
5
5
|
border-radius: 4px;
|
|
6
6
|
padding: 8px 10px;
|
|
7
|
-
`,y={value:"custom_link",label:"Custom URL"},_={value:"custom_text",label:"Custom text"},T={value:"static_expiry",label:"Static Expiry"},V=o=>{let{onFocus:V,variable:k,index:A,showVariableModal:E,variableList:S,setShowDiscountCheckBox:w,componentType:P,CTAoptions:B}=o;var C,L;const[D,N]=i(!1),[H,U]=i(""),[M,W]=i([]),[R,$]=i(),[I,z]=i(!1),[Y,Z]=i(!1),{device:G,channel:q,isError:F,originalVariableList:J,template:K,templateSelectionTriggered:Q,setTemplate:X,setDisplayContent:ee,setOriginalVariableList:te,globalNormalizedPlaceholders:le,enabledCustomText:ae,pod:ie}=j();function ne(e,t){var l,a,i;const n=e;U(""),console.log("vj: single option",n),$(n),q===m.WHATSAPP?"custom_text"!==n.value&&"custom_link"!==n.value&&"static_expiry"!==n.value?(se(null!==(l=n.value)&&void 0!==l?l:"","string"),null==ue||ue(null!==(a=k.index)&&void 0!==a?a:0,n.value,!0)):(null==ue||ue(null!==(i=k.index)&&void 0!==i?i:0,H,!0,n.value),se("","url"===n.bikPlaceholderType?"link":"string")):"custom_text"!==n.value&&"custom_link"!==n.value?se(n.value,"url"===n.bikPlaceholderType?"link":"string"):(U(""),se("",n.value))}function oe(e,t){var l;U(t);const a="custom_link"===(null==R?void 0:R.value)&&t?t.includes("https")?t:`https://${t}`:t;se(a,"static_expiry"===e?"string":e),q===m.WHATSAPP&&(null==ue||ue(null!==(l=k.index)&&void 0!==l?l:0,a,"custom_link"===e,e))}function se(e,t){var l,a,i,n;const o="custom_link"===t?"link":"custom_text"===t?"string":t;if(q!==m.WHATSAPP){const a=f(A+1),i=null===document||void 0===document?void 0:document.getElementById("mobile"===G?"template_html_mobile":"template_html_desktop"),n=q===m.EMAIL?null===(l=null==i?void 0:i.contentWindow)||void 0===l?void 0:l.document.getElementById(a):document.getElementById(a);n&&(n.textContent="custom_text"!==t&&"custom_link"!==t||e?e:k.variableName);const s=J.map(((t,l)=>l===A?Object.assign(Object.assign({},t),{type:o,updatedValue:e}):t));null==te||te(s)}if(q===m.WHATSAPP){const l=J;let s=l.body,u=l.header,d=l.buttons;"BODY"===P?s=null===(a=l.body)||void 0===a?void 0:a.map(((t,l)=>l===A?Object.assign(Object.assign({},t),{type:o,updatedValue:e}):t)):"HEADER"===P?u=null===(i=l.header)||void 0===i?void 0:i.map(((t,l)=>l===A?Object.assign(Object.assign({},t),{type:o,updatedValue:e}):t)):"BUTTONS"===P&&(d=null===(n=l.buttons)||void 0===n?void 0:n.map(((l,a)=>a===A?Object.assign(Object.assign({},l),{buttonVariable:"custom_link"===t?"((customPlaceholderName))":e,example:[e]}):l))),null==te||te((e=>Object.assign(Object.assign({},e),{header:u,body:s,buttons:d})))}}function ue(e,t,l,a){var i,n,o,s;const u=Object.assign({},K);console.log("vj: update",{index:e,newValue:t,type:a});const d=null===(i=null==u?void 0:u.components)||void 0===i?void 0:i.map((l=>{var a,i,n,o,s,u,d,r,c,p;const m=Object.assign({},l);if("BODY"===l.type&&"BODY"===P){if(null===(i=null===(a=l.example)||void 0===a?void 0:a.body_text)||void 0===i?void 0:i[0]){const l=[...null!==(s=null===(o=null===(n=m.example)||void 0===n?void 0:n.body_text)||void 0===o?void 0:o[0])&&void 0!==s?s:[]];l[e]=t.replace("{{","").replace("}}","").replace("((","").replace("))","");const a=Object.assign(Object.assign({},m.example),{body_text:[l]});return Object.assign(Object.assign({},m),{example:a})}}else if("HEADER"===l.type&&"HEADER"===P){if(null===(u=l.example)||void 0===u?void 0:u.header_text){const l=[...null!==(r=null===(d=m.example)||void 0===d?void 0:d.header_text)&&void 0!==r?r:[]];l[e]=t.replace("{{","").replace("}}","").replace("((","").replace("))","");const a=Object.assign(Object.assign({},m.example),{header_text:l});return Object.assign(Object.assign({},m),{example:a})}}else if("BUTTONS"===l.type&&"BUTTONS"===P){if(null===(p=null===(c=l.buttons)||void 0===c?void 0:c[e])||void 0===p?void 0:p.example){const a=l.buttons.map(((l,a)=>a===e?Object.assign(Object.assign({},l),{example:[t]}):l));return Object.assign(Object.assign({},m),{buttons:a})}}else if("limited_time_offer"===l.type&&"limited_time_offer"===P)return Object.assign(Object.assign({},m),{example:Object.assign(Object.assign({},m.example),{limited_time_offer:t})});return l}));if(console.log("vj: update components",d),u.components=d,l)if("BODY"===P&&(null===(n=null==u?void 0:u.mapping)||void 0===n?void 0:n.body))u.mapping=Object.assign(Object.assign({},u.mapping),{body:u.mapping.body.map(((l,i)=>e===i?"custom_text"===a?`((editableVariable${i+10}))`:t:l))});else if("HEADER"===P&&(null===(o=null==u?void 0:u.mapping)||void 0===o?void 0:o.header))u.mapping=Object.assign(Object.assign({},u.mapping),{header:u.mapping.header.map(((l,i)=>e===i?"custom_text"===a?`((editableVariable${i+20}))`:t:l))});else if("BUTTONS"===P&&(null===(s=null==u?void 0:u.mapping)||void 0===s?void 0:s.buttons)){let l=-1,i=-1;d.forEach((t=>{var a;"BUTTONS"===t.type&&(null===(a=t.buttons)||void 0===a||a.forEach(((t,a)=>{"URL"===t.type&&(l++,a===e&&"URL"==t.type&&(i=l))})))})),u.mapping=Object.assign(Object.assign({},u.mapping),{buttons:u.mapping.buttons.map(((e,l)=>l===i?"custom_link"===a?"((customPlaceholderName))":t:e))})}null==X||X(Object.assign({},u))}return n((()=>{D&&(null==V||V())}),[D]),n((()=>{!function(){var e,t,l,a,i;const n="mobile"===G?"template_html_mobile":"template_html_desktop",o=document.getElementById(n),s=(null!==(a=null===(l=null===(t=null===(e=null==o?void 0:o.contentWindow)||void 0===e?void 0:e.document)||void 0===t?void 0:t.body)||void 0===l?void 0:l.innerHTML)&&void 0!==a?a:"")+(null===(i=null==o?void 0:o.contentWindow)||void 0===i?void 0:i.document.head.innerHTML);q===m.EMAIL&&(null==ee||ee(s))}()}),[Q]),n((()=>{var e,t;const l=[];let a=[];if(q!==m.MESSAGE||ae){"link"===(null==k?void 0:k.type)?(l.push({label:"",options:[y,_]}),$(y)):"date_time"===(null==k?void 0:k.type)?(l.push({label:"",options:[y,_]}),$(T)):(l.push({label:"",options:[y,_,T]}),$(_));const e=null!=le?le:[];W([...l,...e.map((e=>{var t,l;return Object.assign(Object.assign({},e),{label:h.toCapitilize(null===(l=null===(t=e.label)||void 0===t?void 0:t.replace(/([A-Z])/g," $1"))||void 0===l?void 0:l.toLowerCase())})}))]),a=[...l,...e]}else{const e=null!=le?le:[];W([{label:"",options:[_,y]},...e]),a=[{label:"",options:[_,y]},...e]}if((q===m.WHATSAPP||q===m.EMAIL||q===m.MESSAGE)&&k.updatedValue)if(p.test(k.updatedValue)&&q===m.WHATSAPP||k.updatedValue.startsWith("{{")&&q!==m.WHATSAPP){const e=function(e,t,l){var a;let i={label:"",value:""};const n=l===m.WHATSAPP?e.updatedValue.replace("[[","").replace("]]",""):e.updatedValue.replace("{{","").replace("}}","");if(E){let t=e.updatedValue;if(ie===v.CHATBOT&&"BUTTONS"===P){const l=null==B?void 0:B.filter((t=>t.placeHolder===e.updatedValue));l&&l.length>0&&(t=l[0].label)}i={label:t?t.replace("{{","").replace("}}","").trim().replace("."," "):"",value:null!==(a=e.updatedValue)&&void 0!==a?a:""}}else t.map((e=>{e.options.map((e=>{var t;(null===(t=e.value)||void 0===t?void 0:t.replace("{{","").replace("}}","").trim())===n.trim()&&(i=e)}))}));return i}(k,a,q);e.value&&$(e)}else"date_time"===k.type?($(T),U(k.updatedValue),ue(null!==(e=k.index)&&void 0!==e?e:0,k.updatedValue)):(null===(t=k.updatedValue)||void 0===t?void 0:t.startsWith("https"))?($(y),U(k.updatedValue.split("https://")[1])):($(_),U(k.updatedValue))}),[]),n((()=>{G&&R&&H&&setTimeout((()=>{se("custom_link"===(null==R?void 0:R.value)&&H?H.includes("https")?H:`https://${H}`:H,R.value)}),100)}),[G]),n((()=>{!Y&&R&&k.updatedValue&&setTimeout((()=>{se("custom_link"===(null==R?void 0:R.value)&&k.updatedValue?k.updatedValue.includes("https")?k.updatedValue:`https://${k.updatedValue}`:k.updatedValue,R.value),Z(!0)}),100)}),[R]),e(O,Object.assign({channel:q,focused:D,onMouseEnter:()=>N(!0),onMouseLeave:()=>N(!1)},{children:[t("div",Object.assign({style:{marginBottom:8}},{children:e(b,Object.assign({style:{color:F&&!R?x.content.negative:x.content.primary}},{children:[null===(C=k.variableName)||void 0===C?void 0:C.replace("{{","").replace("}}","")," ","link"===(null==k?void 0:k.type)?"link":"variable"]}))})),t("div",Object.assign({style:{marginBottom:12}},{children:E?e("div",Object.assign({style:{display:"flex",border:"#E0E0E0 1px solid",borderRadius:4,padding:10,justifyContent:(null==R?void 0:R.label)?"space-between":"flex-end"}},{children:[t(g,{children:c(null!==(L=null==R?void 0:R.label)&&void 0!==L?L:"",20,!0)}),t(l,{onClick:()=>{z(!I)},width:24,height:24,color:x.content.primary})]})):t(d,{options:M,isSearchable:!1,onSelect:ne,defaultOptions:R?[Object.assign(Object.assign({},R),{selected:!0})]:[]})})),("custom_text"===(null==R?void 0:R.value)||"custom_link"===(null==R?void 0:R.value))&&t(r,{labelText:"custom_text"===(null==R?void 0:R.value)?"Custom text value":"custom_link"===(null==R?void 0:R.value)?"Custom URL value":"",id:`variable-value-${null==R?void 0:R.value}-${A}`,value:H,errorMessage:F?H&&0!==H.trim().length?"custom_link"!==R.value||/^https?:\/\/(?:www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b(?:[-a-zA-Z0-9()@:%_\+.~#?&\/=]*)$/.test(`https://${H.trim()}`)&&0!==H.trim().length?"custom_link"!==R.value&&H.length>30?"Length cannot be more than 30":"BUTTONS"===P?"Enter valid alpha numeric code":"":"Enter valid URL":"Required field":"",maxCharLimit:"custom_link"===(null==R?void 0:R.value)?2e3:"BUTTONS"===P?15:30,prefixText:"custom_link"===(null==R?void 0:R.value)?"https://":"",placeholder:"link"===k.type||"custom_link"===R.value?"Enter custom URL here":"Enter custom text here",onChangeText:e=>{oe(R.value,e)}}),"static_expiry"===(null==R?void 0:R.value)&&t(u,{placement:"auto",time:a(H?new Date(H):new Date,"hh:mm a"),date:H?new Date(H):new Date,minDate:new Date,error:"",setError:function(e){},onChange:e=>{console.log("vj: change date",e),oe("static_expiry",e.toISOString())}}),I&&t(s,{zIndex:2e3,data:null!=S?S:[],showVariable:I,setShowVariable:z,placeholder:"Add a variable",customTrigger:e=>{null==w||w(!1),"{{custom.url}}"===e.actualValue?ne({label:e.displayName,selected:!0,value:"custom_link"}):"{{custom.text}}"==e.actualValue?ne({label:e.displayName,selected:!0,value:"custom_text"}):"{{static.expiry}}"==e.actualValue?ne({label:e.displayName,selected:!0,value:"static_expiry"}):ne({label:e.displayName.replace("{{","").replace("}}","").trim().replace("."," "),selected:!0,value:e.actualValue,bikPlaceholderType:"string"})}})]}))};export{O as Container,V as default};
|
|
7
|
+
`,_={value:"custom_link",label:"Custom URL"},y={value:"custom_text",label:"Custom text"},T={value:"static_expiry",label:"Static Expiry"},V=o=>{let{onFocus:V,variable:k,index:A,showVariableModal:E,variableList:S,setShowDiscountCheckBox:w,componentType:P,CTAoptions:B}=o;var C,L;const[D,N]=i(!1),[H,U]=i(""),[M,W]=i([]),[R,$]=i(),[I,z]=i(!1),[Y,Z]=i(!1),{device:G,channel:q,isError:F,originalVariableList:J,template:K,templateSelectionTriggered:Q,setTemplate:X,setDisplayContent:ee,setOriginalVariableList:te,globalNormalizedPlaceholders:le,enabledCustomText:ae,pod:ie}=j();function ne(e,t){var l,a,i;const n=e;U(""),console.log("vj: single option",n),$(n),q===m.WHATSAPP?"custom_text"!==n.value&&"custom_link"!==n.value&&"static_expiry"!==n.value?(se(null!==(l=n.value)&&void 0!==l?l:"","string"),null==ue||ue(null!==(a=k.index)&&void 0!==a?a:0,n.value,!0)):(null==ue||ue(null!==(i=k.index)&&void 0!==i?i:0,H,!0,n.value),se("","url"===n.bikPlaceholderType?"link":"string")):"custom_text"!==n.value&&"custom_link"!==n.value?se(n.value,"url"===n.bikPlaceholderType?"link":"string"):(U(""),se("",n.value))}function oe(e,t){var l;U(t);const a="custom_link"===(null==R?void 0:R.value)&&t?t.includes("https")?t:`https://${t}`:t;se(a,"static_expiry"===e?"string":e),q===m.WHATSAPP&&(null==ue||ue(null!==(l=k.index)&&void 0!==l?l:0,a,"custom_link"===e,e))}function se(e,t){var l,a,i,n;const o="custom_link"===t?"link":"custom_text"===t?"string":t;if(q!==m.WHATSAPP){const a=f(A+1),i=null===document||void 0===document?void 0:document.getElementById("mobile"===G?"template_html_mobile":"template_html_desktop"),n=q===m.EMAIL?null===(l=null==i?void 0:i.contentWindow)||void 0===l?void 0:l.document.getElementById(a):document.getElementById(a);n&&(n.textContent="custom_text"!==t&&"custom_link"!==t||e?e:k.variableName);const s=J.map(((t,l)=>l===A?Object.assign(Object.assign({},t),{type:o,updatedValue:e}):t));null==te||te(s)}if(q===m.WHATSAPP){const l=J;let s=l.body,u=l.header,d=l.buttons;"BODY"===P?s=null===(a=l.body)||void 0===a?void 0:a.map(((t,l)=>l===A?Object.assign(Object.assign({},t),{type:o,updatedValue:e}):t)):"HEADER"===P?u=null===(i=l.header)||void 0===i?void 0:i.map(((t,l)=>l===A?Object.assign(Object.assign({},t),{type:o,updatedValue:e}):t)):"BUTTONS"===P&&(d=null===(n=l.buttons)||void 0===n?void 0:n.map(((l,a)=>a===A?Object.assign(Object.assign({},l),{buttonVariable:"custom_link"===t?"((customPlaceholderName))":e,example:[e]}):l))),null==te||te((e=>Object.assign(Object.assign({},e),{header:u,body:s,buttons:d})))}}function ue(e,t,l,a){var i,n,o,s;const u=Object.assign({},K);console.log("vj: update",{index:e,newValue:t,type:a});const d=null===(i=null==u?void 0:u.components)||void 0===i?void 0:i.map((l=>{var a,i,n,o,s,u,d,r,c,p;const m=Object.assign({},l);if("BODY"===l.type&&"BODY"===P){if(null===(i=null===(a=l.example)||void 0===a?void 0:a.body_text)||void 0===i?void 0:i[0]){const l=[...null!==(s=null===(o=null===(n=m.example)||void 0===n?void 0:n.body_text)||void 0===o?void 0:o[0])&&void 0!==s?s:[]];l[e]=t.replace("{{","").replace("}}","").replace("((","").replace("))","");const a=Object.assign(Object.assign({},m.example),{body_text:[l]});return Object.assign(Object.assign({},m),{example:a})}}else if("HEADER"===l.type&&"HEADER"===P){if(null===(u=l.example)||void 0===u?void 0:u.header_text){const l=[...null!==(r=null===(d=m.example)||void 0===d?void 0:d.header_text)&&void 0!==r?r:[]];l[e]=t.replace("{{","").replace("}}","").replace("((","").replace("))","");const a=Object.assign(Object.assign({},m.example),{header_text:l});return Object.assign(Object.assign({},m),{example:a})}}else if("BUTTONS"===l.type&&"BUTTONS"===P){if(null===(p=null===(c=l.buttons)||void 0===c?void 0:c[e])||void 0===p?void 0:p.example){const a=l.buttons.map(((l,a)=>a===e?Object.assign(Object.assign({},l),{example:[t]}):l));return Object.assign(Object.assign({},m),{buttons:a})}}else if("limited_time_offer"===l.type&&"limited_time_offer"===P)return Object.assign(Object.assign({},m),{example:Object.assign(Object.assign({},m.example),{limited_time_offer:t})});return l}));if(console.log("vj: update components",d),u.components=d,l)if("BODY"===P&&(null===(n=null==u?void 0:u.mapping)||void 0===n?void 0:n.body))u.mapping=Object.assign(Object.assign({},u.mapping),{body:u.mapping.body.map(((l,i)=>e===i?"custom_text"===a?`((editableVariable${i+10}))`:t:l))});else if("HEADER"===P&&(null===(o=null==u?void 0:u.mapping)||void 0===o?void 0:o.header))u.mapping=Object.assign(Object.assign({},u.mapping),{header:u.mapping.header.map(((l,i)=>e===i?"custom_text"===a?`((editableVariable${i+20}))`:t:l))});else if("BUTTONS"===P&&(null===(s=null==u?void 0:u.mapping)||void 0===s?void 0:s.buttons)){let l=-1,i=-1;d.forEach((t=>{var a;"BUTTONS"===t.type&&(null===(a=t.buttons)||void 0===a||a.forEach(((t,a)=>{"URL"===t.type&&(l++,a===e&&"URL"==t.type&&(i=l))})))})),u.mapping=Object.assign(Object.assign({},u.mapping),{buttons:u.mapping.buttons.map(((e,l)=>l===i?"custom_link"===a?"((customPlaceholderName))":t:e))})}null==X||X(Object.assign({},u))}return n((()=>{D&&(null==V||V())}),[D]),n((()=>{!function(){var e,t,l,a,i;const n="mobile"===G?"template_html_mobile":"template_html_desktop",o=document.getElementById(n),s=(null!==(a=null===(l=null===(t=null===(e=null==o?void 0:o.contentWindow)||void 0===e?void 0:e.document)||void 0===t?void 0:t.body)||void 0===l?void 0:l.innerHTML)&&void 0!==a?a:"")+(null===(i=null==o?void 0:o.contentWindow)||void 0===i?void 0:i.document.head.innerHTML);q===m.EMAIL&&(null==ee||ee(s))}()}),[Q]),n((()=>{var e,t;const l=[];let a=[];if(q!==m.MESSAGE||ae){"link"===(null==k?void 0:k.type)?(l.push({label:"",options:[_,y]}),$(_)):"date_time"===(null==k?void 0:k.type)?(l.push({label:"",options:[_,y]}),$(T)):(l.push({label:"",options:[_,y,T]}),$(y));const e=null!=le?le:[];W([...l,...e.map((e=>{var t,l;return Object.assign(Object.assign({},e),{label:h.toCapitilize(null===(l=null===(t=e.label)||void 0===t?void 0:t.replace(/([A-Z])/g," $1"))||void 0===l?void 0:l.toLowerCase())})}))]),a=[...l,...e]}else{const e=null!=le?le:[];W([{label:"",options:[y,_]},...e]),a=[{label:"",options:[y,_]},...e]}if((q===m.WHATSAPP||q===m.EMAIL||q===m.MESSAGE)&&k.updatedValue)if(p.test(k.updatedValue)&&q===m.WHATSAPP||k.updatedValue.startsWith("{{")&&q!==m.WHATSAPP){const e=function(e,t,l){var a;let i={label:"",value:""};const n=l===m.WHATSAPP?e.updatedValue.replace("[[","").replace("]]",""):e.updatedValue.replace("{{","").replace("}}","");if(E){let t=e.updatedValue;if(ie===v.CHATBOT&&"BUTTONS"===P){const l=null==B?void 0:B.filter((t=>t.placeHolder===e.updatedValue));l&&l.length>0&&(t=l[0].label)}i={label:t?t.replace("{{","").replace("}}","").trim().replace("."," "):"",value:null!==(a=e.updatedValue)&&void 0!==a?a:""}}else t.map((e=>{e.options.map((e=>{var t;(null===(t=e.value)||void 0===t?void 0:t.replace("{{","").replace("}}","").trim())===n.trim()&&(i=e)}))}));return i}(k,a,q);e.value&&$(e)}else"date_time"===k.type?($(T),U(k.updatedValue),ue(null!==(e=k.index)&&void 0!==e?e:0,k.updatedValue)):(null===(t=k.updatedValue)||void 0===t?void 0:t.startsWith("https"))?($(_),U(k.updatedValue.split("https://")[1])):($(y),U(k.updatedValue))}),[]),n((()=>{G&&R&&H&&setTimeout((()=>{se("custom_link"===(null==R?void 0:R.value)&&H?H.includes("https")?H:`https://${H}`:H,R.value)}),100)}),[G]),n((()=>{!Y&&R&&k.updatedValue&&setTimeout((()=>{se("custom_link"===(null==R?void 0:R.value)&&k.updatedValue?k.updatedValue.includes("https")?k.updatedValue:`https://${k.updatedValue}`:k.updatedValue,R.value),Z(!0)}),100)}),[R]),e(O,Object.assign({channel:q,focused:D,onMouseEnter:()=>N(!0),onMouseLeave:()=>N(!1)},{children:[t("div",Object.assign({style:{marginBottom:8}},{children:e(b,Object.assign({style:{color:F&&!R?x.content.negative:x.content.primary}},{children:[null===(C=k.variableName)||void 0===C?void 0:C.replace("{{","").replace("}}","")," ","link"===(null==k?void 0:k.type)?"link":"variable"]}))})),t("div",Object.assign({style:{marginBottom:12}},{children:E?e("div",Object.assign({style:{display:"flex",border:"#E0E0E0 1px solid",borderRadius:4,padding:10,justifyContent:(null==R?void 0:R.label)?"space-between":"flex-end"}},{children:[t(g,{children:c(null!==(L=null==R?void 0:R.label)&&void 0!==L?L:"",20,!0)}),t(l,{onClick:()=>{z(!I)},width:24,height:24,color:x.content.primary})]})):t(d,{options:M,isSearchable:!1,onSelect:ne,defaultOptions:R?[Object.assign(Object.assign({},R),{selected:!0})]:[]})})),("custom_text"===(null==R?void 0:R.value)||"custom_link"===(null==R?void 0:R.value))&&t(r,{labelText:"custom_text"===(null==R?void 0:R.value)?"Custom text value":"custom_link"===(null==R?void 0:R.value)?"Custom URL value":"",id:`variable-value-${null==R?void 0:R.value}-${A}`,value:H,errorMessage:F?H&&0!==H.trim().length?"custom_link"!==R.value||/^https?:\/\/(?:www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b(?:[-a-zA-Z0-9()@:%_\+.~#?&\/=]*)$/.test(`https://${H.trim()}`)&&0!==H.trim().length?"custom_link"!==R.value&&H.length>30?"Length cannot be more than 30":"BUTTONS"===P&&"custom_link"!==R.value?"Enter valid alpha numeric code":"":"Enter valid URL":"Required field":"",maxCharLimit:"custom_link"===(null==R?void 0:R.value)?2e3:"BUTTONS"===P?15:30,prefixText:"custom_link"===(null==R?void 0:R.value)?"https://":"",placeholder:"link"===k.type||"custom_link"===R.value?"Enter custom URL here":"Enter custom text here",onChangeText:e=>{oe(R.value,e)}}),"static_expiry"===(null==R?void 0:R.value)&&t(u,{placement:"auto",time:a(H?new Date(H):new Date,"hh:mm a"),date:H?new Date(H):new Date,minDate:new Date,error:"",setError:function(e){},onChange:e=>{console.log("vj: change date",e),oe("static_expiry",e.toISOString())}}),I&&t(s,{zIndex:2e3,data:null!=S?S:[],showVariable:I,setShowVariable:z,placeholder:"Add a variable",customTrigger:e=>{null==w||w(!1),"{{custom.url}}"===e.actualValue?ne({label:e.displayName,selected:!0,value:"custom_link"}):"{{custom.text}}"==e.actualValue?ne({label:e.displayName,selected:!0,value:"custom_text"}):"{{static.expiry}}"==e.actualValue?ne({label:e.displayName,selected:!0,value:"static_expiry"}):ne({label:e.displayName.replace("{{","").replace("}}","").trim().replace("."," "),selected:!0,value:e.actualValue,bikPlaceholderType:"string"})}})]}))};export{O as Container,V as default};
|