@bikdotai/bik-component-library 0.0.264-beta.7 → 0.0.264-beta.9
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/bik-layout/MockMenus.d.ts +0 -1
- package/dist/cjs/components/stepper/WorkingStepper.d.ts +0 -1
- package/dist/cjs/components/template-context-mapper/TemplateContextMapper.d.ts +1 -1
- package/dist/cjs/components/template-context-mapper/TemplateContextMapper.js +1 -1
- package/dist/cjs/components/template-context-mapper/modalElements/Body.d.ts +1 -1
- package/dist/cjs/components/template-context-mapper/modalElements/EditWhatsAppTemplateV2.d.ts +1 -1
- package/dist/cjs/components/template-context-mapper/modalElements/TemplateSelectModalContent.d.ts +1 -1
- package/dist/cjs/components/template-context-mapper/modalElements/VariableConnector.js +3 -3
- package/dist/cjs/components/template-context-mapper/modalElements/VariableConnectorWhatsApp.d.ts +1 -1
- package/dist/cjs/components/template-context-mapper/modalElements/VariableConnectorsPanel.d.ts +1 -1
- package/dist/esm/components/bik-layout/MockMenus.d.ts +0 -1
- package/dist/esm/components/stepper/WorkingStepper.d.ts +0 -1
- package/dist/esm/components/template-context-mapper/TemplateContextMapper.d.ts +1 -1
- package/dist/esm/components/template-context-mapper/TemplateContextMapper.js +1 -1
- package/dist/esm/components/template-context-mapper/modalElements/Body.d.ts +1 -1
- package/dist/esm/components/template-context-mapper/modalElements/EditWhatsAppTemplateV2.d.ts +1 -1
- package/dist/esm/components/template-context-mapper/modalElements/TemplateSelectModalContent.d.ts +1 -1
- package/dist/esm/components/template-context-mapper/modalElements/VariableConnector.js +3 -3
- package/dist/esm/components/template-context-mapper/modalElements/VariableConnectorWhatsApp.d.ts +1 -1
- package/dist/esm/components/template-context-mapper/modalElements/VariableConnectorsPanel.d.ts +1 -1
- package/package.json +1 -1
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
import { VariableListInterfaceV2 } from "../add-variableV2";
|
|
2
|
+
import { VariableListInterfaceV2 } from "../add-variableV2/AddVariableV2";
|
|
3
3
|
import { CHANNEL_TYPE } from '../template-preview/models/Channels';
|
|
4
4
|
import { EmailTemplateType } from '../template-preview/models/EmailTemplate';
|
|
5
5
|
import { SMSTemplateType } from '../template-preview/models/SmsTemplate';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),l=require("../../utils/StringUtils.js"),a=require("../modals/styledModal.js"),i=require("../template-preview/models/Channels.js"),r=require("./context/templateModalContext.js"),s=require("./modalElements/Footer.js"),o=require("./modalElements/TemplateSelectModalContent.js"),n=require("./utils/convertPlaceholdersToBikDropdown.js");exports.TemplateContextMapper=d=>{let{selectedTemplate:c,closeDialog:u,showVariableMapping:p,channel:m,htmlContent:h,templateVariables:g,onTemplateSelect:S,globalPlaceholders:
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),l=require("../../utils/StringUtils.js"),a=require("../modals/styledModal.js"),i=require("../template-preview/models/Channels.js"),r=require("./context/templateModalContext.js"),s=require("./modalElements/Footer.js"),o=require("./modalElements/TemplateSelectModalContent.js"),n=require("./utils/convertPlaceholdersToBikDropdown.js");exports.TemplateContextMapper=d=>{let{selectedTemplate:c,closeDialog:u,showVariableMapping:p,channel:m,htmlContent:h,templateVariables:g,onTemplateSelect:S,globalPlaceholders:b,showOnlyContent:v,whatsappSpecificPickerMeta:j,zIndex:M,showVariableModal:T,variableList:E}=d;var x,C;t.useEffect((()=>{w(h)}),[h]);const[P,L]=t.useState(m===i.CHANNEL_TYPE.EMAIL?"desktop":"mobile"),[f,w]=t.useState(h),[q,y]=t.useState(!1),[A,N]=t.useState(c),[V,_]=t.useState(null!=g?g:[]),[H,I]=t.useState(!1);const O=t.useMemo((()=>n.convertPlaceholdersToBikDropdown(b)),[b]);return console.log({templateVariables:g}),e.jsx(r.TemplateModalContext.Provider,Object.assign({value:{template:A,setTemplate:N,device:P,setDevice:L,display_content:f,setDisplayContent:w,originalVariableList:V,setOriginalVariableList:_,isError:q,setIsError:y,channel:m,globalNormalizedPlaceholders:O,templateSelectionTriggered:H,setTemplateSelectionTriggered:I}},{children:v?e.jsx(o.default,{channel:i.CHANNEL_TYPE.EMAIL,hideHeader:!0}):e.jsxs(a.StyledModal,Object.assign({zIndex:M,centralContainerStyles:{width:m===i.CHANNEL_TYPE.EMAIL&&p?1e3:650},open:!0,onClose:()=>{null==u||u()},headingTitle:null==A?void 0:A.label,headingSubtitle:m===i.CHANNEL_TYPE.WHATSAPP?`${l.default.capitaliseFirstLetterOfString(null!==(x=null==A?void 0:A.category)&&void 0!==x?x:"")} • ${null!==(C=null==A?void 0:A.templateCategory)&&void 0!==C?C:""}`:""},{children:[e.jsx(o.default,{showVariableMapping:p,channel:m,whatsappSpecificPickerMeta:j,showVariableModal:T,variableList:E}),S?e.jsx(s.default,{onSelect:function(){const e=null==S?void 0:S(A,V,null!=f?f:"");e?y(!!e):I(!0)}}):e.jsx(e.Fragment,{})]}))}))};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
import { VariableListInterfaceV2 } from "../../add-variableV2";
|
|
2
|
+
import { VariableListInterfaceV2 } from "../../add-variableV2/AddVariableV2";
|
|
3
3
|
import { WhatsAppPickerMeta } from "../../template-preview/models/WhatsAppTemplate";
|
|
4
4
|
export interface BodyProps {
|
|
5
5
|
showVariableMapping: boolean;
|
package/dist/cjs/components/template-context-mapper/modalElements/EditWhatsAppTemplateV2.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
import { VariableListInterfaceV2 } from "../../add-variableV2";
|
|
2
|
+
import { VariableListInterfaceV2 } from "../../add-variableV2/AddVariableV2";
|
|
3
3
|
import { EmailTemplateType } from "../../template-preview/models/EmailTemplate";
|
|
4
4
|
import { SMSTemplateType } from "../../template-preview/models/SmsTemplate";
|
|
5
5
|
import { WhatsAppPickerMeta, WhatsAppTemplate } from "../../template-preview/models/WhatsAppTemplate";
|
package/dist/cjs/components/template-context-mapper/modalElements/TemplateSelectModalContent.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
import { VariableListInterfaceV2 } from "../../add-variableV2";
|
|
2
|
+
import { VariableListInterfaceV2 } from "../../add-variableV2/AddVariableV2";
|
|
3
3
|
import { CHANNEL_TYPE } from "../../template-preview/models/Channels";
|
|
4
4
|
import { WhatsAppPickerMeta } from "../../template-preview/models/WhatsAppTemplate";
|
|
5
5
|
export interface TemplateSelectModalContentProps {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),l=require("../../../assets/icons/edit.svg.js"),t=require("react"),a=require("styled-components"),n=require("../../add-variableV2/AddVariableV2SideModal.js"),o=require("../../dropdown/Dropdown.js"),i=require("../../input/Input.js"),s=require("../../template-preview/constants/regexPatterns.js"),u=require("../../template-preview/models/Channels.js"),d=require("../../TypographyStyle.js"),r=require("../../../utils/StringUtils.js"),c=require("../../../constants/Theme.js"),v=require("../context/templateModalContext.js"),p=require("../utils/getVariableNameEmail.js"),m=require("../utils/validateIsUrl.js");function b(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const g=b(a).default.div`
|
|
2
2
|
/* surface/$color-background-warning-light */
|
|
3
3
|
|
|
4
|
-
background: ${e=>e.focused&&e.channel===
|
|
4
|
+
background: ${e=>e.focused&&e.channel===u.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:_,index:h,showVariableModal:j,variableList:A}=a;var N;const[y,P]=
|
|
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:_,index:h,showVariableModal:j,variableList:A}=a;var N;const[y,P]=t.useState(!1),[T,C]=t.useState(""),[f,L]=t.useState([]),[O,S]=t.useState(),[k,H]=t.useState(!1),{device:V,channel:M,isError:q,originalVariableList:w,template:I,templateSelectionTriggered:Y,setTemplate:W,setDisplayContent:B,setOriginalVariableList:R,globalNormalizedPlaceholders:U}=v.useTemplateModalContext();function $(e,l){var t,a,n;const o=e;C(""),S(o),M===u.CHANNEL_TYPE.WHATSAPP?"custom_text"!==o.value&&"custom_link"!==o.value?(D(null!==(t=o.value)&&void 0!==t?t:"","string"),null==z||z(null!==(a=_.index)&&void 0!==a?a:0,`[[${o.value}]]`)):(null==z||z(null!==(n=_.index)&&void 0!==n?n:0,_.variableName),D("","url"===o.bikPlaceholderType?"link":"string")):"custom_text"!==o.value&&"custom_link"!==o.value?D(o.value,"url"===o.bikPlaceholderType?"link":"string"):(C(""),D("",o.value))}function D(e,l){var t,a;const n="custom_link"===l?"link":"custom_text"===l?"string":l;if(M!==u.CHANNEL_TYPE.WHATSAPP){const a=p.getVariableNameForEmailByIndex(h+1),o=null===document||void 0===document?void 0:document.getElementById("mobile"===V?"template_html_mobile":"template_html_desktop"),i=M===u.CHANNEL_TYPE.EMAIL?null===(t=null==o?void 0:o.contentWindow)||void 0===t?void 0:t.document.getElementById(a):document.getElementById(a);i&&(i.textContent="custom_text"!==l&&"custom_link"!==l||e?e:_.variableName);const s=w.map(((l,t)=>t===h?Object.assign(Object.assign({},l),{type:n,updatedValue:e}):l));null==R||R(s)}if(M===u.CHANNEL_TYPE.WHATSAPP){const l=null===(a=w.body)||void 0===a?void 0:a.map(((l,t)=>t===h?Object.assign(Object.assign({},l),{type:n,updatedValue:e}):l));null==R||R((e=>Object.assign(Object.assign({},e),{body:l,buttons:w.buttons})))}}function z(e,l){var t;const a=Object.assign({},I),n=null===(t=null==a?void 0:a.components)||void 0===t?void 0:t.map((t=>{var a,n,o,i,s;const u=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!==(s=null===(i=null===(o=u.example)||void 0===o?void 0:o.body_text)||void 0===i?void 0:i[0])&&void 0!==s?s:[]];t[e]=l.replace("{{","").replace("}}","").replace("((","").replace("))","");const a=Object.assign(Object.assign({},u.example),{body_text:[t]});return Object.assign(Object.assign({},u),{example:a})}return t}));a.components=n,null==W||W(a)}return t.useEffect((()=>{y&&(null==b||b())}),[y]),t.useEffect((()=>{!function(){var e,l,t,a,n;const o="mobile"===V?"template_html_mobile":"template_html_desktop",i=document.getElementById(o),s=(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===(n=null==i?void 0:i.contentWindow)||void 0===n?void 0:n.document.head.innerHTML);M===u.CHANNEL_TYPE.EMAIL&&(null==B||B(s))}()}),[Y]),t.useEffect((()=>{var e;const l=[];let t=[];if(M===u.CHANNEL_TYPE.MESSAGE){const e=null!=U?U:[];L([{label:"",options:[E,x]},...e]),t=[{label:"",options:[E,x]},...e]}else{"link"===(null==_?void 0:_.type)?(l.push({label:"",options:[x,E]}),S(x)):(l.push({label:"",options:[x,E]}),S(E));const e=null!=U?U:[];L([...l,...e.map((e=>{var l,t;return Object.assign(Object.assign({},e),{label:r.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((M===u.CHANNEL_TYPE.WHATSAPP||M===u.CHANNEL_TYPE.EMAIL||M===u.CHANNEL_TYPE.MESSAGE)&&(console.log("variable: ",_,{channel:M},"inside VC"),_.updatedValue))if(console.log("variable: ",_,{channel:M},"inside updated value"),s.placeHolderNamePattern.test(_.updatedValue)&&M===u.CHANNEL_TYPE.WHATSAPP||_.updatedValue.startsWith("{{")&&M!==u.CHANNEL_TYPE.WHATSAPP){const e=function(e,l,t){let a={label:"",value:""};const n=t===u.CHANNEL_TYPE.WHATSAPP?e.replace("[[","").replace("]]",""):e.replace("{{","").replace("}}","");return l.map((e=>{e.options.map((e=>{var l;(null===(l=e.value)||void 0===l?void 0:l.replace("{{","").replace("}}","").trim())===n.trim()&&(a=e)}))})),a}(_.updatedValue,t,M);console.log("preSelectedOption: ",e),e.value&&S(e)}else(null===(e=_.updatedValue)||void 0===e?void 0:e.startsWith("https"))?(S(x),C(_.updatedValue.split("https://")[1])):(S(E),C(_.updatedValue))}),[]),t.useEffect((()=>{console.log("selectedOption: ",O)}),[O]),e.jsxs(g,Object.assign({channel:M,focused:y,onMouseEnter:()=>P(!0),onMouseLeave:()=>P(!1)},{children:[e.jsx("div",Object.assign({style:{marginBottom:8}},{children:e.jsxs(d.BodySecondary,Object.assign({style:{color:q&&!O?c.COLORS.content.negative:c.COLORS.content.primary}},{children:[null===(N=_.variableName)||void 0===N?void 0:N.replace("{{","").replace("}}","")," ","link"===(null==_?void 0:_.type)?"link":"variable"]}))})),e.jsx("div",Object.assign({style:{marginBottom:12}},{children:j?e.jsx(i.Input,{state:"none",value:O?O.label:"Custom text",onChangeText:()=>{},rightIcon:{icon:()=>e.jsx(l.default,{onClick:()=>{H(!k)},width:24,height:24,color:c.COLORS.content.primary})}}):e.jsx(o.Dropdown,{options:f,isSearchable:!1,onSelect:$,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(i.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}-${h}`,value:T,errorMessage:q?T?"custom_link"!==O.value||m.validateIsUrl(T)?"":"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"===_.type||"custom_link"===O.value?"Enter custom URL here":"Enter custom text here",onChangeText:e=>function(e,l){var t;C(l);const a="custom_link"===(null==O?void 0:O.value)?`https://${l}`:l;D(a,e),M===u.CHANNEL_TYPE.WHATSAPP&&(null==z||z(null!==(t=_.index)&&void 0!==t?t:0,a))}(O.value,e)}),k&&e.jsx(n.AddVariableV2SideModal,{data:null!=A?A:[],showVariable:k,setShowVariable:H,placeholder:"Add a variable",customTrigger:e=>{"{{custom.url}}"===e.actualValue?$({label:e.displayName,selected:!0,value:"custom_link"}):"{{custom.text}}"==e.actualValue?$({label:e.displayName,selected:!0,value:"custom_text"}):$({label:e.displayName,selected:!0,value:e.actualValue,bikPlaceholderType:"string"})}})]}))};
|
package/dist/cjs/components/template-context-mapper/modalElements/VariableConnectorWhatsApp.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
import { VariableListInterfaceV2 } from "../../add-variableV2";
|
|
2
|
+
import { VariableListInterfaceV2 } from "../../add-variableV2/AddVariableV2";
|
|
3
3
|
import { WhatsAppTemplate, WhatsAppTemplateVariables } from "../../template-preview/models/WhatsAppTemplate";
|
|
4
4
|
export type ComponentType = WhatsAppTemplate['components'][0];
|
|
5
5
|
export interface VariableConnectorWhatsAppProps {
|
package/dist/cjs/components/template-context-mapper/modalElements/VariableConnectorsPanel.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
import { VariableListInterfaceV2 } from "../../add-variableV2";
|
|
2
|
+
import { VariableListInterfaceV2 } from "../../add-variableV2/AddVariableV2";
|
|
3
3
|
export declare const Container: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
4
4
|
export interface VariableConnectorsProps {
|
|
5
5
|
onFocus?: (variableIndex: number) => void;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
import { VariableListInterfaceV2 } from "../add-variableV2";
|
|
2
|
+
import { VariableListInterfaceV2 } from "../add-variableV2/AddVariableV2";
|
|
3
3
|
import { CHANNEL_TYPE } from '../template-preview/models/Channels';
|
|
4
4
|
import { EmailTemplateType } from '../template-preview/models/EmailTemplate';
|
|
5
5
|
import { SMSTemplateType } from '../template-preview/models/SmsTemplate';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsx as e,jsxs as
|
|
1
|
+
import{jsx as e,jsxs as l,Fragment as t}from"react/jsx-runtime";import{useEffect as o,useState as a,useMemo as i}from"react";import r from"../../utils/StringUtils.js";import{StyledModal as n}from"../modals/styledModal.js";import{CHANNEL_TYPE as s}from"../template-preview/models/Channels.js";import{TemplateModalContext as c}from"./context/templateModalContext.js";import m from"./modalElements/Footer.js";import p from"./modalElements/TemplateSelectModalContent.js";import{convertPlaceholdersToBikDropdown as d}from"./utils/convertPlaceholdersToBikDropdown.js";const h=h=>{let{selectedTemplate:g,closeDialog:b,showVariableMapping:u,channel:v,htmlContent:f,templateVariables:M,onTemplateSelect:S,globalPlaceholders:j,showOnlyContent:w,whatsappSpecificPickerMeta:T,zIndex:C,showVariableModal:L,variableList:P}=h;var V,y;o((()=>{A(f)}),[f]);const[E,x]=a(v===s.EMAIL?"desktop":"mobile"),[I,A]=a(f),[O,k]=a(!1),[D,z]=a(g),[F,H]=a(null!=M?M:[]),[$,B]=a(!1);const N=i((()=>d(j)),[j]);return console.log({templateVariables:M}),e(c.Provider,Object.assign({value:{template:D,setTemplate:z,device:E,setDevice:x,display_content:I,setDisplayContent:A,originalVariableList:F,setOriginalVariableList:H,isError:O,setIsError:k,channel:v,globalNormalizedPlaceholders:N,templateSelectionTriggered:$,setTemplateSelectionTriggered:B}},{children:w?e(p,{channel:s.EMAIL,hideHeader:!0}):l(n,Object.assign({zIndex:C,centralContainerStyles:{width:v===s.EMAIL&&u?1e3:650},open:!0,onClose:()=>{null==b||b()},headingTitle:null==D?void 0:D.label,headingSubtitle:v===s.WHATSAPP?`${r.capitaliseFirstLetterOfString(null!==(V=null==D?void 0:D.category)&&void 0!==V?V:"")} • ${null!==(y=null==D?void 0:D.templateCategory)&&void 0!==y?y:""}`:""},{children:[e(p,{showVariableMapping:u,channel:v,whatsappSpecificPickerMeta:T,showVariableModal:L,variableList:P}),S?e(m,{onSelect:function(){const e=null==S?void 0:S(D,F,null!=I?I:"");e?k(!!e):B(!0)}}):e(t,{})]}))}))};export{h as TemplateContextMapper};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
import { VariableListInterfaceV2 } from "../../add-variableV2";
|
|
2
|
+
import { VariableListInterfaceV2 } from "../../add-variableV2/AddVariableV2";
|
|
3
3
|
import { WhatsAppPickerMeta } from "../../template-preview/models/WhatsAppTemplate";
|
|
4
4
|
export interface BodyProps {
|
|
5
5
|
showVariableMapping: boolean;
|
package/dist/esm/components/template-context-mapper/modalElements/EditWhatsAppTemplateV2.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
import { VariableListInterfaceV2 } from "../../add-variableV2";
|
|
2
|
+
import { VariableListInterfaceV2 } from "../../add-variableV2/AddVariableV2";
|
|
3
3
|
import { EmailTemplateType } from "../../template-preview/models/EmailTemplate";
|
|
4
4
|
import { SMSTemplateType } from "../../template-preview/models/SmsTemplate";
|
|
5
5
|
import { WhatsAppPickerMeta, WhatsAppTemplate } from "../../template-preview/models/WhatsAppTemplate";
|
package/dist/esm/components/template-context-mapper/modalElements/TemplateSelectModalContent.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
import { VariableListInterfaceV2 } from "../../add-variableV2";
|
|
2
|
+
import { VariableListInterfaceV2 } from "../../add-variableV2/AddVariableV2";
|
|
3
3
|
import { CHANNEL_TYPE } from "../../template-preview/models/Channels";
|
|
4
4
|
import { WhatsAppPickerMeta } from "../../template-preview/models/WhatsAppTemplate";
|
|
5
5
|
export interface TemplateSelectModalContentProps {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import{jsxs as e,jsx as l}from"react/jsx-runtime";import t from"../../../assets/icons/edit.svg.js";import{useState as o,useEffect as
|
|
1
|
+
import{jsxs as e,jsx as l}from"react/jsx-runtime";import t from"../../../assets/icons/edit.svg.js";import{useState as o,useEffect as n}from"react";import a from"styled-components";import{AddVariableV2SideModal as i}from"../../add-variableV2/AddVariableV2SideModal.js";import{Dropdown as s}from"../../dropdown/Dropdown.js";import{Input as u}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";import{validateIsUrl as g}from"../utils/validateIsUrl.js";const h=a.div`
|
|
2
2
|
/* surface/$color-background-warning-light */
|
|
3
3
|
|
|
4
|
-
background: ${e=>e.focused&&e.channel===
|
|
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
|
-
`,x={value:"custom_link",label:"Custom URL"},f={value:"custom_text",label:"Custom text"},j=
|
|
7
|
+
`,x={value:"custom_link",label:"Custom URL"},f={value:"custom_text",label:"Custom text"},j=a=>{let{onFocus:j,variable:y,index:_,showVariableModal:k,variableList:A}=a;var O;const[T,V]=o(!1),[P,S]=o(""),[E,C]=o([]),[L,w]=o(),[M,W]=o(!1),{device:I,channel:H,isError:N,originalVariableList:B,template:$,templateSelectionTriggered:U,setTemplate:R,setDisplayContent:D,setOriginalVariableList:z,globalNormalizedPlaceholders:G}=p();function q(e,l){var t,o,n;const a=e;S(""),w(a),H===r.WHATSAPP?"custom_text"!==a.value&&"custom_link"!==a.value?(F(null!==(t=a.value)&&void 0!==t?t:"","string"),null==Y||Y(null!==(o=y.index)&&void 0!==o?o:0,`[[${a.value}]]`)):(null==Y||Y(null!==(n=y.index)&&void 0!==n?n:0,y.variableName),F("","url"===a.bikPlaceholderType?"link":"string")):"custom_text"!==a.value&&"custom_link"!==a.value?F(a.value,"url"===a.bikPlaceholderType?"link":"string"):(S(""),F("",a.value))}function F(e,l){var t,o;const n="custom_link"===l?"link":"custom_text"===l?"string":l;if(H!==r.WHATSAPP){const o=b(_+1),a=null===document||void 0===document?void 0:document.getElementById("mobile"===I?"template_html_mobile":"template_html_desktop"),i=H===r.EMAIL?null===(t=null==a?void 0:a.contentWindow)||void 0===t?void 0:t.document.getElementById(o):document.getElementById(o);i&&(i.textContent="custom_text"!==l&&"custom_link"!==l||e?e:y.variableName);const s=B.map(((l,t)=>t===_?Object.assign(Object.assign({},l),{type:n,updatedValue:e}):l));null==z||z(s)}if(H===r.WHATSAPP){const l=null===(o=B.body)||void 0===o?void 0:o.map(((l,t)=>t===_?Object.assign(Object.assign({},l),{type:n,updatedValue:e}):l));null==z||z((e=>Object.assign(Object.assign({},e),{body:l,buttons:B.buttons})))}}function Y(e,l){var t;const o=Object.assign({},$),n=null===(t=null==o?void 0:o.components)||void 0===t?void 0:t.map((t=>{var o,n,a,i,s;const u=Object.assign({},t);if("BODY"===t.type&&(null===(n=null===(o=t.example)||void 0===o?void 0:o.body_text)||void 0===n?void 0:n[0])){const t=[...null!==(s=null===(i=null===(a=u.example)||void 0===a?void 0:a.body_text)||void 0===i?void 0:i[0])&&void 0!==s?s:[]];t[e]=l.replace("{{","").replace("}}","").replace("((","").replace("))","");const o=Object.assign(Object.assign({},u.example),{body_text:[t]});return Object.assign(Object.assign({},u),{example:o})}return t}));o.components=n,null==R||R(o)}return n((()=>{T&&(null==j||j())}),[T]),n((()=>{!function(){var e,l,t,o,n;const a="mobile"===I?"template_html_mobile":"template_html_desktop",i=document.getElementById(a),s=(null!==(o=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!==o?o:"")+(null===(n=null==i?void 0:i.contentWindow)||void 0===n?void 0:n.document.head.innerHTML);H===r.EMAIL&&(null==D||D(s))}()}),[U]),n((()=>{var e;const l=[];let t=[];if(H===r.MESSAGE){const e=null!=G?G:[];C([{label:"",options:[f,x]},...e]),t=[{label:"",options:[f,x]},...e]}else{"link"===(null==y?void 0:y.type)?(l.push({label:"",options:[x,f]}),w(x)):(l.push({label:"",options:[x,f]}),w(f));const e=null!=G?G:[];C([...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((H===r.WHATSAPP||H===r.EMAIL||H===r.MESSAGE)&&(console.log("variable: ",y,{channel:H},"inside VC"),y.updatedValue))if(console.log("variable: ",y,{channel:H},"inside updated value"),d.test(y.updatedValue)&&H===r.WHATSAPP||y.updatedValue.startsWith("{{")&&H!==r.WHATSAPP){const e=function(e,l,t){let o={label:"",value:""};const n=t===r.WHATSAPP?e.replace("[[","").replace("]]",""):e.replace("{{","").replace("}}","");return 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)}))})),o}(y.updatedValue,t,H);console.log("preSelectedOption: ",e),e.value&&w(e)}else(null===(e=y.updatedValue)||void 0===e?void 0:e.startsWith("https"))?(w(x),S(y.updatedValue.split("https://")[1])):(w(f),S(y.updatedValue))}),[]),n((()=>{console.log("selectedOption: ",L)}),[L]),e(h,Object.assign({channel:H,focused:T,onMouseEnter:()=>V(!0),onMouseLeave:()=>V(!1)},{children:[l("div",Object.assign({style:{marginBottom:8}},{children:e(c,Object.assign({style:{color:N&&!L?v.content.negative:v.content.primary}},{children:[null===(O=y.variableName)||void 0===O?void 0:O.replace("{{","").replace("}}","")," ","link"===(null==y?void 0:y.type)?"link":"variable"]}))})),l("div",Object.assign({style:{marginBottom:12}},{children:k?l(u,{state:"none",value:L?L.label:"Custom text",onChangeText:()=>{},rightIcon:{icon:()=>l(t,{onClick:()=>{W(!M)},width:24,height:24,color:v.content.primary})}}):l(s,{options:E,isSearchable:!1,onSelect:q,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))&&l(u,{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}-${_}`,value:P,errorMessage:N?P?"custom_link"!==L.value||g(P)?"":"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"===y.type||"custom_link"===L.value?"Enter custom URL here":"Enter custom text here",onChangeText:e=>function(e,l){var t;S(l);const o="custom_link"===(null==L?void 0:L.value)?`https://${l}`:l;F(o,e),H===r.WHATSAPP&&(null==Y||Y(null!==(t=y.index)&&void 0!==t?t:0,o))}(L.value,e)}),M&&l(i,{data:null!=A?A:[],showVariable:M,setShowVariable:W,placeholder:"Add a variable",customTrigger:e=>{"{{custom.url}}"===e.actualValue?q({label:e.displayName,selected:!0,value:"custom_link"}):"{{custom.text}}"==e.actualValue?q({label:e.displayName,selected:!0,value:"custom_text"}):q({label:e.displayName,selected:!0,value:e.actualValue,bikPlaceholderType:"string"})}})]}))};export{h as Container,j as default};
|
package/dist/esm/components/template-context-mapper/modalElements/VariableConnectorWhatsApp.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
import { VariableListInterfaceV2 } from "../../add-variableV2";
|
|
2
|
+
import { VariableListInterfaceV2 } from "../../add-variableV2/AddVariableV2";
|
|
3
3
|
import { WhatsAppTemplate, WhatsAppTemplateVariables } from "../../template-preview/models/WhatsAppTemplate";
|
|
4
4
|
export type ComponentType = WhatsAppTemplate['components'][0];
|
|
5
5
|
export interface VariableConnectorWhatsAppProps {
|
package/dist/esm/components/template-context-mapper/modalElements/VariableConnectorsPanel.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
import { VariableListInterfaceV2 } from "../../add-variableV2";
|
|
2
|
+
import { VariableListInterfaceV2 } from "../../add-variableV2/AddVariableV2";
|
|
3
3
|
export declare const Container: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
4
4
|
export interface VariableConnectorsProps {
|
|
5
5
|
onFocus?: (variableIndex: number) => void;
|