@bikdotai/bik-component-library 0.0.314-beta.23 → 0.0.314-beta.25
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/template-context-mapper/modalElements/VariableConnector.js +1 -1
- package/dist/cjs/components/template-context-mapper/modalElements/VariableConnectorsPanel.js +3 -3
- package/dist/esm/components/template-context-mapper/modalElements/VariableConnector.js +2 -2
- package/dist/esm/components/template-context-mapper/modalElements/VariableConnectorsPanel.js +2 -2
- package/package.json +1 -1
|
@@ -4,4 +4,4 @@
|
|
|
4
4
|
background: ${e=>e.focused&&e.channel===s.CHANNEL_TYPE.EMAIL?c.COLORS.background.warning.light:"transparent"};
|
|
5
5
|
border-radius: 4px;
|
|
6
6
|
padding: 8px 10px;
|
|
7
|
-
`,g={value:"custom_link",label:"Custom URL"},h={value:"custom_text",label:"Custom text"};exports.Container=b,exports.default=a=>{let{onFocus:m,variable:x,index:E,showVariableModal:_,variableList:j,setShowDiscountCheckBox:A}=a;var T;const[f,N]=l.useState(!1),[P,y]=l.useState(""),[C,L]=l.useState([]),[
|
|
7
|
+
`,g={value:"custom_link",label:"Custom URL"},h={value:"custom_text",label:"Custom text"};exports.Container=b,exports.default=a=>{let{onFocus:m,variable:x,index:E,showVariableModal:_,variableList:j,setShowDiscountCheckBox:A}=a;var T;const[f,N]=l.useState(!1),[P,y]=l.useState(""),[C,L]=l.useState([]),[k,O]=l.useState(),[S,V]=l.useState(!1),[H,w]=l.useState(!1),{device:M,channel:q,isError:Y,originalVariableList:I,template:W,templateSelectionTriggered:$,setTemplate:B,setDisplayContent:R,setOriginalVariableList:z,globalNormalizedPlaceholders:D}=v.useTemplateModalContext();function U(e,t){var l,a,n;const o=e;y(""),O(o),q===s.CHANNEL_TYPE.WHATSAPP?"custom_text"!==o.value&&"custom_link"!==o.value?(Z(null!==(l=o.value)&&void 0!==l?l:"","string"),null==F||F(null!==(a=x.index)&&void 0!==a?a:0,`[[${o.value}]]`)):(null==F||F(null!==(n=x.index)&&void 0!==n?n:0,x.variableName),Z("","url"===o.bikPlaceholderType?"link":"string")):"custom_text"!==o.value&&"custom_link"!==o.value?Z(o.value,"url"===o.bikPlaceholderType?"link":"string"):(y(""),Z("",o.value))}function Z(e,t){var l,a;const n="custom_link"===t?"link":"custom_text"===t?"string":t;if(q!==s.CHANNEL_TYPE.WHATSAPP){const a=p.getVariableNameForEmailByIndex(E+1),o=null===document||void 0===document?void 0:document.getElementById("mobile"===M?"template_html_mobile":"template_html_desktop"),i=q===s.CHANNEL_TYPE.EMAIL?null===(l=null==o?void 0:o.contentWindow)||void 0===l?void 0:l.document.getElementById(a):document.getElementById(a);i&&(i.textContent="custom_text"!==t&&"custom_link"!==t||e?e:x.variableName);const u=I.map(((t,l)=>l===E?Object.assign(Object.assign({},t),{type:n,updatedValue:e}):t));null==z||z(u)}if(q===s.CHANNEL_TYPE.WHATSAPP){const t=null===(a=I.body)||void 0===a?void 0:a.map(((t,l)=>l===E?Object.assign(Object.assign({},t),{type:n,updatedValue:e}):t));null==z||z((e=>Object.assign(Object.assign({},e),{body:t,buttons:I.buttons})))}}function F(e,t){var l;const a=Object.assign({},W),n=null===(l=null==a?void 0:a.components)||void 0===l?void 0:l.map((l=>{var a,n,o,i,u;const s=Object.assign({},l);if("BODY"===l.type&&(null===(n=null===(a=l.example)||void 0===a?void 0:a.body_text)||void 0===n?void 0:n[0])){const l=[...null!==(u=null===(i=null===(o=s.example)||void 0===o?void 0:o.body_text)||void 0===i?void 0:i[0])&&void 0!==u?u:[]];l[e]=t.replace("{{","").replace("}}","").replace("((","").replace("))","");const a=Object.assign(Object.assign({},s.example),{body_text:[l]});return Object.assign(Object.assign({},s),{example:a})}return l}));a.components=n,null==B||B(a)}return l.useEffect((()=>{f&&(null==m||m())}),[f]),l.useEffect((()=>{!function(){var e,t,l,a,n;const o="mobile"===M?"template_html_mobile":"template_html_desktop",i=document.getElementById(o),u=(null!==(a=null===(l=null===(t=null===(e=null==i?void 0:i.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===(n=null==i?void 0:i.contentWindow)||void 0===n?void 0:n.document.head.innerHTML);q===s.CHANNEL_TYPE.EMAIL&&(null==R||R(u))}()}),[$]),l.useEffect((()=>{var e;const t=[];let l=[];if(q===s.CHANNEL_TYPE.MESSAGE){const e=null!=D?D:[];L([{label:"",options:[h,g]},...e]),l=[{label:"",options:[h,g]},...e]}else{"link"===(null==x?void 0:x.type)?(t.push({label:"",options:[g,h]}),O(g)):(t.push({label:"",options:[g,h]}),O(h));const e=null!=D?D:[];L([...t,...e.map((e=>{var t,l;return Object.assign(Object.assign({},e),{label:r.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())})}))]),l=[...t,...e]}if((q===s.CHANNEL_TYPE.WHATSAPP||q===s.CHANNEL_TYPE.EMAIL||q===s.CHANNEL_TYPE.MESSAGE)&&x.updatedValue)if(u.placeHolderNamePattern.test(x.updatedValue)&&q===s.CHANNEL_TYPE.WHATSAPP||x.updatedValue.startsWith("{{")&&q!==s.CHANNEL_TYPE.WHATSAPP){const e=function(e,t,l){var a;let n={label:"",value:""};const o=l===s.CHANNEL_TYPE.WHATSAPP?e.updatedValue.replace("[[","").replace("]]",""):e.updatedValue.replace("{{","").replace("}}","");_?n={label:e.updatedValue?e.updatedValue.replace("{{","").replace("}}","").trim().replace("."," "):"",value:null!==(a=e.updatedValue)&&void 0!==a?a:""}:t.map((e=>{e.options.map((e=>{var t;(null===(t=e.value)||void 0===t?void 0:t.replace("{{","").replace("}}","").trim())===o.trim()&&(n=e)}))}));return n}(x,l,q);e.value&&O(e)}else(null===(e=x.updatedValue)||void 0===e?void 0:e.startsWith("https"))?(O(g),y(x.updatedValue.split("https://")[1])):(O(h),y(x.updatedValue))}),[]),l.useEffect((()=>{M&&k&&P&&setTimeout((()=>{Z("custom_link"===(null==k?void 0:k.value)?`https://${P}`:P,k.value)}),100)}),[M]),l.useEffect((()=>{!H&&k&&x.updatedValue&&setTimeout((()=>{Z("custom_link"===(null==k?void 0:k.value)?`https://${x.updatedValue}`:x.updatedValue,k.value),w(!0)}),100)}),[k]),e.jsxs(b,Object.assign({channel:q,focused:f,onMouseEnter:()=>N(!0),onMouseLeave:()=>N(!1)},{children:[e.jsx("div",Object.assign({style:{marginBottom:8}},{children:e.jsxs(d.BodySecondary,Object.assign({style:{color:Y&&!k?c.COLORS.content.negative:c.COLORS.content.primary}},{children:[null===(T=x.variableName)||void 0===T?void 0:T.replace("{{","").replace("}}","")," ","link"===(null==x?void 0:x.type)?"link":"variable"]}))})),e.jsx("div",Object.assign({style:{marginBottom:12}},{children:_?e.jsx(i.Input,{state:"none",value:k?k.label:"Custom text",onChangeText:e=>{},onFocus:()=>{V(!S)},rightIcon:{icon:()=>e.jsx(t.default,{onClick:()=>{V(!S)},width:24,height:24,color:c.COLORS.content.primary})}}):e.jsx(o.Dropdown,{options:C,isSearchable:!1,onSelect:U,defaultOptions:k?[Object.assign(Object.assign({},k),{selected:!0})]:[]})})),("custom_text"===(null==k?void 0:k.value)||"custom_link"===(null==k?void 0:k.value))&&e.jsx(i.Input,{labelText:"custom_text"===(null==k?void 0:k.value)?"Custom text value":"custom_link"===(null==k?void 0:k.value)?"Custom URL value":"",id:`variable-value-${null==k?void 0:k.value}-${E}`,value:P,errorMessage:Y?P&&0!==P.trim().length?"custom_link"!==k.value||/^https?:\/\/(?:www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b(?:[-a-zA-Z0-9()@:%_\+.~#?&\/=]*)$/.test(`https://${P.trim()}`)&&0!==P.trim().length?P.length>30?"Length cannot be more that 30":30===P.trim().length?"Required field":"":"Enter valid URL":"Required field":"",maxCharLimit:"custom_link"===(null==k?void 0:k.value)?void 0:30,prefixText:"custom_link"===(null==k?void 0:k.value)?"https://":"",placeholder:"link"===x.type||"custom_link"===k.value?"Enter custom URL here":"Enter custom text here",onChangeText:e=>{console.log("valuevalue3: ",e),function(e,t){var l;y(t);const a="custom_link"===(null==k?void 0:k.value)?`https://${t}`:t;Z(a,e),q===s.CHANNEL_TYPE.WHATSAPP&&(null==F||F(null!==(l=x.index)&&void 0!==l?l:0,a))}(k.value,e)}}),S&&e.jsx(n.AddVariableV2SideModal,{zIndex:2e3,data:null!=j?j:[],showVariable:S,setShowVariable:V,placeholder:"Add a variable",customTrigger:e=>{A(!1),"{{custom.url}}"===e.actualValue?U({label:e.displayName,selected:!0,value:"custom_link"}):"{{custom.text}}"==e.actualValue?U({label:e.displayName,selected:!0,value:"custom_text"}):U({label:e.actualValue.replace("{{","").replace("}}","").trim().replace("."," "),selected:!0,value:e.actualValue,bikPlaceholderType:"string"})}})]}))};
|
package/dist/cjs/components/template-context-mapper/modalElements/VariableConnectorsPanel.js
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),a=require("../../../assets/icons/info.svg.js"),t=require("react"),i=require("styled-components"),s=require("../../add-variableV2/AddVariableV2SideModal.js"),l=require("../../../assets/icons/plus.svg.js");require("../../add-variableV2/AddVariableV2.styled.js"),require("../../button/Button.js"),require("../../icon-button/IconButton.js");var r=require("../../input/Input.js"),o=require("../../tooltips/Tooltip.js"),n=require("../../../constants/Theme.js"),d=require("../../TypographyStyle.js"),c=require("../../checkBox/CheckBox.js"),u=require("../../template-preview/models/Channels.js"),h=require("../context/templateModalContext.js"),p=require("./VariableConnector.js");function x(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),a=require("../../../assets/icons/info.svg.js"),t=require("react"),i=require("styled-components"),s=require("../../add-variableV2/AddVariableV2SideModal.js"),l=require("../../../assets/icons/plus.svg.js");require("../../add-variableV2/AddVariableV2.styled.js"),require("../../button/Button.js"),require("../../icon-button/IconButton.js");var r=require("../../input/Input.js"),o=require("../../tooltips/Tooltip.js"),n=require("../../../constants/Theme.js"),d=require("../../TypographyStyle.js"),c=require("../../checkBox/CheckBox.js"),u=require("../../template-preview/models/Channels.js"),h=require("../context/templateModalContext.js"),p=require("./VariableConnector.js");function x(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var g=x(i);const b=g.default.div`
|
|
2
2
|
overflow-y: auto;
|
|
3
3
|
display: flex;
|
|
4
4
|
flex-direction: column;
|
|
5
5
|
height: 100%;
|
|
6
|
-
`,j=
|
|
6
|
+
`,j=g.default.button`
|
|
7
7
|
padding: 2px 8px;
|
|
8
8
|
cursor: pointer;
|
|
9
9
|
color: white;
|
|
@@ -25,4 +25,4 @@
|
|
|
25
25
|
display: flex;
|
|
26
26
|
align-items: center;
|
|
27
27
|
}
|
|
28
|
-
`;exports.AddVariableStyled=j,exports.Container=
|
|
28
|
+
`;exports.AddVariableStyled=j,exports.Container=b,exports.default=i=>{let{onFocus:x,showVariableModal:g,variableList:f,discountCode:v,setDiscountCode:y}=i;const{originalVariableList:m,channel:V,isError:O}=h.useTemplateModalContext(),[C,w]=t.useState(!1),[q,S]=t.useState(!1),[k,T]=t.useState(!1),[L,B]=t.useState(!1),[E,A]=t.useState(""),M=t.useRef(),I=t.useRef();return t.useEffect((()=>{y&&y(v+E)}),[E]),t.useEffect((()=>{console.log("originalVariableList: ",m),m.forEach((e=>{console.log("variable.updatedValue: ",e.updatedValue),console.log("variable.value: ","checkout.checkoutUrl"===e.updatedValue.replace("{{","").replace("}}","")),"checkout.checkoutUrl"===e.updatedValue.replace("{{","").replace("}}","")&&(w(!0),v&&S(!0))})),console.log("showDiscountCheckBox: ",C)}),[m]),t.useEffect((()=>{console.log("showDiscountCheckBox22: ",C)}),[C]),e.jsxs(b,{children:[e.jsxs("div",Object.assign({style:{padding:8}},{children:[e.jsxs("div",Object.assign({style:{display:"flex",gap:8,alignItems:"center",marginBottom:4}},{children:[e.jsx(d.TitleRegular,Object.assign({style:{color:n.COLORS.content.primary}},{children:"Edit variables and links"})),e.jsx(o.Tooltip,Object.assign({body:"Variables are placeholder texts which can either be filled by data, eg: customer name or can have any custom text within them"},{children:e.jsx("div",Object.assign({style:{display:"flex"}},{children:e.jsx(a.default,{width:20,height:20,color:n.COLORS.content.placeholder})}))}))]})),e.jsx(d.BodySecondary,Object.assign({style:{color:n.COLORS.content.secondary}},{children:"You can view variables and links on the left underlined in purple colour."}))]})),null==m?void 0:m.map(((a,t)=>V!==u.CHANNEL_TYPE.EMAIL||a.isEditableVariable?e.jsx("div",Object.assign({style:{marginTop:16}},{children:e.jsx(p.default,{index:t,variable:a,onFocus:()=>null==x?void 0:x(t),showVariableModal:g,variableList:f,setShowDiscountCheckBox:w})}),t):e.jsxs("div",Object.assign({style:{margin:"16px 8px"}},{children:[e.jsxs(d.BodySecondary,Object.assign({style:{color:n.COLORS.content.primary}},{children:["Locked variable ",t+1]})),e.jsx(r.Input,{state:"disabled",placeholder:a.variableName,onChangeText:()=>{}})]}),t))),(C||v)&&e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"row",marginLeft:10,marginTop:8}},{children:[e.jsx(c.CheckBox,{isChecked:q,onValueChange:()=>{S(!q)}}),e.jsx(d.TitleSmall,Object.assign({style:{marginLeft:8}},{children:"Add discount codes"}))]})),q&&e.jsxs("div",Object.assign({ref:M,style:{margin:10}},{children:[e.jsx(r.Input,{placeholder:"Enter your discount code",onChangeText:e=>{y&&y(e)},value:v,onFocus:()=>{T(!0)},onBlur:e=>{var a;"addVar"===(null===(a=e.relatedTarget)||void 0===a?void 0:a.id)?(M.current&&M.current.focus(),T(!0)):(T(!1),B(!1))},errorMessage:O?v&&0!==v.trim().length?"":"Required field":""}),k&&e.jsx(j,Object.assign({ref:I,id:"addVar",onClick:e=>{e.stopPropagation(),B(!0)}},{children:e.jsxs("div",Object.assign({className:"add"},{children:[e.jsx(l.default,{width:20,height:20,color:"white"}),e.jsx("div",Object.assign({className:"variable"},{children:"Add variable"}))]}))}))]})),L&&e.jsx(s.AddVariableV2SideModal,{zIndex:2e3,data:null!=f?f:[],showVariable:L,setShowVariable:B,variableValue:E,setVariableValue:A,placeholder:"Add a variable",customTrigger:e=>{A(e.actualValue),T(!1)}})]})};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import{jsxs as e,jsx as
|
|
1
|
+
import{jsxs as e,jsx as t}from"react/jsx-runtime";import l from"../../../assets/icons/edit.svg.js";import{useState as a,useEffect as o}from"react";import n from"styled-components";import{AddVariableV2SideModal as i}from"../../add-variableV2/AddVariableV2SideModal.js";import{Dropdown as u}from"../../dropdown/Dropdown.js";import{Input as s}from"../../input/Input.js";import{placeHolderNamePattern as d}from"../../template-preview/constants/regexPatterns.js";import{CHANNEL_TYPE as r}from"../../template-preview/models/Channels.js";import{BodySecondary as c}from"../../TypographyStyle.js";import m from"../../../utils/StringUtils.js";import{COLORS as v}from"../../../constants/Theme.js";import{useTemplateModalContext as p}from"../context/templateModalContext.js";import{getVariableNameForEmailByIndex as b}from"../utils/getVariableNameEmail.js";const g=n.div`
|
|
2
2
|
/* surface/$color-background-warning-light */
|
|
3
3
|
|
|
4
4
|
background: ${e=>e.focused&&e.channel===r.EMAIL?v.background.warning.light:"transparent"};
|
|
5
5
|
border-radius: 4px;
|
|
6
6
|
padding: 8px 10px;
|
|
7
|
-
`,h={value:"custom_link",label:"Custom URL"},x={value:"custom_text",label:"Custom text"},_=n=>{let{onFocus:_,variable:f,index:j,showVariableModal:k,variableList:y,setShowDiscountCheckBox:V}=n;var A;const[T,O]=a(!1),[P,S]=a(""),[w,E]=a([]),[L,C]=a(),[M,W]=a(!1),[I,$]=a(!1),{device:H,channel:B,isError:N,originalVariableList:z,template:R,templateSelectionTriggered:U,setTemplate:D,setDisplayContent:Z,setOriginalVariableList:
|
|
7
|
+
`,h={value:"custom_link",label:"Custom URL"},x={value:"custom_text",label:"Custom text"},_=n=>{let{onFocus:_,variable:f,index:j,showVariableModal:k,variableList:y,setShowDiscountCheckBox:V}=n;var A;const[T,O]=a(!1),[P,S]=a(""),[w,E]=a([]),[L,C]=a(),[M,W]=a(!1),[I,$]=a(!1),{device:H,channel:B,isError:N,originalVariableList:z,template:R,templateSelectionTriggered:U,setTemplate:D,setDisplayContent:Z,setOriginalVariableList:q,globalNormalizedPlaceholders:F}=p();function G(e,t){var l,a,o;const n=e;S(""),C(n),B===r.WHATSAPP?"custom_text"!==n.value&&"custom_link"!==n.value?(Y(null!==(l=n.value)&&void 0!==l?l:"","string"),null==J||J(null!==(a=f.index)&&void 0!==a?a:0,`[[${n.value}]]`)):(null==J||J(null!==(o=f.index)&&void 0!==o?o:0,f.variableName),Y("","url"===n.bikPlaceholderType?"link":"string")):"custom_text"!==n.value&&"custom_link"!==n.value?Y(n.value,"url"===n.bikPlaceholderType?"link":"string"):(S(""),Y("",n.value))}function Y(e,t){var l,a;const o="custom_link"===t?"link":"custom_text"===t?"string":t;if(B!==r.WHATSAPP){const a=b(j+1),n=null===document||void 0===document?void 0:document.getElementById("mobile"===H?"template_html_mobile":"template_html_desktop"),i=B===r.EMAIL?null===(l=null==n?void 0:n.contentWindow)||void 0===l?void 0:l.document.getElementById(a):document.getElementById(a);i&&(i.textContent="custom_text"!==t&&"custom_link"!==t||e?e:f.variableName);const u=z.map(((t,l)=>l===j?Object.assign(Object.assign({},t),{type:o,updatedValue:e}):t));null==q||q(u)}if(B===r.WHATSAPP){const t=null===(a=z.body)||void 0===a?void 0:a.map(((t,l)=>l===j?Object.assign(Object.assign({},t),{type:o,updatedValue:e}):t));null==q||q((e=>Object.assign(Object.assign({},e),{body:t,buttons:z.buttons})))}}function J(e,t){var l;const a=Object.assign({},R),o=null===(l=null==a?void 0:a.components)||void 0===l?void 0:l.map((l=>{var a,o,n,i,u;const s=Object.assign({},l);if("BODY"===l.type&&(null===(o=null===(a=l.example)||void 0===a?void 0:a.body_text)||void 0===o?void 0:o[0])){const l=[...null!==(u=null===(i=null===(n=s.example)||void 0===n?void 0:n.body_text)||void 0===i?void 0:i[0])&&void 0!==u?u:[]];l[e]=t.replace("{{","").replace("}}","").replace("((","").replace("))","");const a=Object.assign(Object.assign({},s.example),{body_text:[l]});return Object.assign(Object.assign({},s),{example:a})}return l}));a.components=o,null==D||D(a)}return o((()=>{T&&(null==_||_())}),[T]),o((()=>{!function(){var e,t,l,a,o;const n="mobile"===H?"template_html_mobile":"template_html_desktop",i=document.getElementById(n),u=(null!==(a=null===(l=null===(t=null===(e=null==i?void 0:i.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===(o=null==i?void 0:i.contentWindow)||void 0===o?void 0:o.document.head.innerHTML);B===r.EMAIL&&(null==Z||Z(u))}()}),[U]),o((()=>{var e;const t=[];let l=[];if(B===r.MESSAGE){const e=null!=F?F:[];E([{label:"",options:[x,h]},...e]),l=[{label:"",options:[x,h]},...e]}else{"link"===(null==f?void 0:f.type)?(t.push({label:"",options:[h,x]}),C(h)):(t.push({label:"",options:[h,x]}),C(x));const e=null!=F?F:[];E([...t,...e.map((e=>{var t,l;return Object.assign(Object.assign({},e),{label:m.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())})}))]),l=[...t,...e]}if((B===r.WHATSAPP||B===r.EMAIL||B===r.MESSAGE)&&f.updatedValue)if(d.test(f.updatedValue)&&B===r.WHATSAPP||f.updatedValue.startsWith("{{")&&B!==r.WHATSAPP){const e=function(e,t,l){var a;let o={label:"",value:""};const n=l===r.WHATSAPP?e.updatedValue.replace("[[","").replace("]]",""):e.updatedValue.replace("{{","").replace("}}","");k?o={label:e.updatedValue?e.updatedValue.replace("{{","").replace("}}","").trim().replace("."," "):"",value:null!==(a=e.updatedValue)&&void 0!==a?a:""}:t.map((e=>{e.options.map((e=>{var t;(null===(t=e.value)||void 0===t?void 0:t.replace("{{","").replace("}}","").trim())===n.trim()&&(o=e)}))}));return o}(f,l,B);e.value&&C(e)}else(null===(e=f.updatedValue)||void 0===e?void 0:e.startsWith("https"))?(C(h),S(f.updatedValue.split("https://")[1])):(C(x),S(f.updatedValue))}),[]),o((()=>{H&&L&&P&&setTimeout((()=>{Y("custom_link"===(null==L?void 0:L.value)?`https://${P}`:P,L.value)}),100)}),[H]),o((()=>{!I&&L&&f.updatedValue&&setTimeout((()=>{Y("custom_link"===(null==L?void 0:L.value)?`https://${f.updatedValue}`:f.updatedValue,L.value),$(!0)}),100)}),[L]),e(g,Object.assign({channel:B,focused:T,onMouseEnter:()=>O(!0),onMouseLeave:()=>O(!1)},{children:[t("div",Object.assign({style:{marginBottom:8}},{children:e(c,Object.assign({style:{color:N&&!L?v.content.negative:v.content.primary}},{children:[null===(A=f.variableName)||void 0===A?void 0:A.replace("{{","").replace("}}","")," ","link"===(null==f?void 0:f.type)?"link":"variable"]}))})),t("div",Object.assign({style:{marginBottom:12}},{children:k?t(s,{state:"none",value:L?L.label:"Custom text",onChangeText:e=>{},onFocus:()=>{W(!M)},rightIcon:{icon:()=>t(l,{onClick:()=>{W(!M)},width:24,height:24,color:v.content.primary})}}):t(u,{options:w,isSearchable:!1,onSelect:G,defaultOptions:L?[Object.assign(Object.assign({},L),{selected:!0})]:[]})})),("custom_text"===(null==L?void 0:L.value)||"custom_link"===(null==L?void 0:L.value))&&t(s,{labelText:"custom_text"===(null==L?void 0:L.value)?"Custom text value":"custom_link"===(null==L?void 0:L.value)?"Custom URL value":"",id:`variable-value-${null==L?void 0:L.value}-${j}`,value:P,errorMessage:N?P&&0!==P.trim().length?"custom_link"!==L.value||/^https?:\/\/(?:www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b(?:[-a-zA-Z0-9()@:%_\+.~#?&\/=]*)$/.test(`https://${P.trim()}`)&&0!==P.trim().length?P.length>30?"Length cannot be more that 30":30===P.trim().length?"Required field":"":"Enter valid URL":"Required field":"",maxCharLimit:"custom_link"===(null==L?void 0:L.value)?void 0:30,prefixText:"custom_link"===(null==L?void 0:L.value)?"https://":"",placeholder:"link"===f.type||"custom_link"===L.value?"Enter custom URL here":"Enter custom text here",onChangeText:e=>{console.log("valuevalue3: ",e),function(e,t){var l;S(t);const a="custom_link"===(null==L?void 0:L.value)?`https://${t}`:t;Y(a,e),B===r.WHATSAPP&&(null==J||J(null!==(l=f.index)&&void 0!==l?l:0,a))}(L.value,e)}}),M&&t(i,{zIndex:2e3,data:null!=y?y:[],showVariable:M,setShowVariable:W,placeholder:"Add a variable",customTrigger:e=>{V(!1),"{{custom.url}}"===e.actualValue?G({label:e.displayName,selected:!0,value:"custom_link"}):"{{custom.text}}"==e.actualValue?G({label:e.displayName,selected:!0,value:"custom_text"}):G({label:e.actualValue.replace("{{","").replace("}}","").trim().replace("."," "),selected:!0,value:e.actualValue,bikPlaceholderType:"string"})}})]}))};export{g as Container,_ as default};
|
package/dist/esm/components/template-context-mapper/modalElements/VariableConnectorsPanel.js
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import{jsxs as e,jsx as o}from"react/jsx-runtime";import
|
|
1
|
+
import{jsxs as e,jsx as o}from"react/jsx-runtime";import i from"../../../assets/icons/info.svg.js";import{useState as a,useRef as t,useEffect as r}from"react";import l from"styled-components";import{AddVariableV2SideModal as n}from"../../add-variableV2/AddVariableV2SideModal.js";import s from"../../../assets/icons/plus.svg.js";import"../../add-variableV2/AddVariableV2.styled.js";import"../../button/Button.js";import"../../icon-button/IconButton.js";import{Input as c}from"../../input/Input.js";import{Tooltip as d}from"../../tooltips/Tooltip.js";import{COLORS as p}from"../../../constants/Theme.js";import{TitleRegular as h,BodySecondary as m,TitleSmall as u}from"../../TypographyStyle.js";import{CheckBox as g}from"../../checkBox/CheckBox.js";import{CHANNEL_TYPE as b}from"../../template-preview/models/Channels.js";import{useTemplateModalContext as f}from"../context/templateModalContext.js";import v from"./VariableConnector.js";const x=l.div`
|
|
2
2
|
overflow-y: auto;
|
|
3
3
|
display: flex;
|
|
4
4
|
flex-direction: column;
|
|
5
5
|
height: 100%;
|
|
6
|
-
`,y=
|
|
6
|
+
`,y=l=>{let{onFocus:y,showVariableModal:V,variableList:w,discountCode:k,setDiscountCode:O}=l;const{originalVariableList:C,channel:B,isError:T}=f(),[L,A]=a(!1),[E,I]=a(!1),[M,D]=a(!1),[S,F]=a(!1),[N,z]=a(""),U=t(),q=t();return r((()=>{O&&O(k+N)}),[N]),r((()=>{console.log("originalVariableList: ",C),C.forEach((e=>{console.log("variable.updatedValue: ",e.updatedValue),console.log("variable.value: ","checkout.checkoutUrl"===e.updatedValue.replace("{{","").replace("}}","")),"checkout.checkoutUrl"===e.updatedValue.replace("{{","").replace("}}","")&&(A(!0),k&&I(!0))})),console.log("showDiscountCheckBox: ",L)}),[C]),r((()=>{console.log("showDiscountCheckBox22: ",L)}),[L]),e(x,{children:[e("div",Object.assign({style:{padding:8}},{children:[e("div",Object.assign({style:{display:"flex",gap:8,alignItems:"center",marginBottom:4}},{children:[o(h,Object.assign({style:{color:p.content.primary}},{children:"Edit variables and links"})),o(d,Object.assign({body:"Variables are placeholder texts which can either be filled by data, eg: customer name or can have any custom text within them"},{children:o("div",Object.assign({style:{display:"flex"}},{children:o(i,{width:20,height:20,color:p.content.placeholder})}))}))]})),o(m,Object.assign({style:{color:p.content.secondary}},{children:"You can view variables and links on the left underlined in purple colour."}))]})),null==C?void 0:C.map(((i,a)=>B!==b.EMAIL||i.isEditableVariable?o("div",Object.assign({style:{marginTop:16}},{children:o(v,{index:a,variable:i,onFocus:()=>null==y?void 0:y(a),showVariableModal:V,variableList:w,setShowDiscountCheckBox:A})}),a):e("div",Object.assign({style:{margin:"16px 8px"}},{children:[e(m,Object.assign({style:{color:p.content.primary}},{children:["Locked variable ",a+1]})),o(c,{state:"disabled",placeholder:i.variableName,onChangeText:()=>{}})]}),a))),(L||k)&&e("div",Object.assign({style:{display:"flex",flexDirection:"row",marginLeft:10,marginTop:8}},{children:[o(g,{isChecked:E,onValueChange:()=>{I(!E)}}),o(u,Object.assign({style:{marginLeft:8}},{children:"Add discount codes"}))]})),E&&e("div",Object.assign({ref:U,style:{margin:10}},{children:[o(c,{placeholder:"Enter your discount code",onChangeText:e=>{O&&O(e)},value:k,onFocus:()=>{D(!0)},onBlur:e=>{var o;"addVar"===(null===(o=e.relatedTarget)||void 0===o?void 0:o.id)?(U.current&&U.current.focus(),D(!0)):(D(!1),F(!1))},errorMessage:T?k&&0!==k.trim().length?"":"Required field":""}),M&&o(j,Object.assign({ref:q,id:"addVar",onClick:e=>{e.stopPropagation(),F(!0)}},{children:e("div",Object.assign({className:"add"},{children:[o(s,{width:20,height:20,color:"white"}),o("div",Object.assign({className:"variable"},{children:"Add variable"}))]}))}))]})),S&&o(n,{zIndex:2e3,data:null!=w?w:[],showVariable:S,setShowVariable:F,variableValue:N,setVariableValue:z,placeholder:"Add a variable",customTrigger:e=>{z(e.actualValue),D(!1)}})]})},j=l.button`
|
|
7
7
|
padding: 2px 8px;
|
|
8
8
|
cursor: pointer;
|
|
9
9
|
color: white;
|