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