@bikdotai/bik-component-library 0.0.359-beta.20 → 0.0.359-beta.22
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-with-vars/InputWithVariables.d.ts +13 -5
- package/dist/cjs/components/input-with-vars/InputWithVariables.js +2 -2
- package/dist/cjs/components/template-context-mapper/modalElements/EditMediaV2.d.ts +2 -0
- package/dist/cjs/components/template-context-mapper/modalElements/EditMediaV2.js +3 -3
- package/dist/cjs/components/template-context-mapper/modalElements/EditWhatsAppTemplateMediaV2.d.ts +2 -0
- package/dist/cjs/components/template-context-mapper/modalElements/EditWhatsAppTemplateMediaV2.js +1 -1
- package/dist/cjs/components/template-context-mapper/modalElements/EditWhatsAppTemplateV2.js +1 -1
- package/dist/cjs/components/template-context-mapper/modalElements/VariableConnectorWhatsApp.js +1 -1
- package/dist/esm/components/input-with-vars/InputWithVariables.d.ts +13 -5
- package/dist/esm/components/input-with-vars/InputWithVariables.js +3 -3
- package/dist/esm/components/template-context-mapper/modalElements/EditMediaV2.d.ts +2 -0
- package/dist/esm/components/template-context-mapper/modalElements/EditMediaV2.js +3 -3
- package/dist/esm/components/template-context-mapper/modalElements/EditWhatsAppTemplateMediaV2.d.ts +2 -0
- package/dist/esm/components/template-context-mapper/modalElements/EditWhatsAppTemplateMediaV2.js +1 -1
- package/dist/esm/components/template-context-mapper/modalElements/EditWhatsAppTemplateV2.js +1 -1
- package/dist/esm/components/template-context-mapper/modalElements/VariableConnectorWhatsApp.js +1 -1
- package/package.json +1 -1
|
@@ -1,10 +1,18 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { Variable } from '../add-variableV2/AddVariableV2';
|
|
1
3
|
import { SelectedVariable } from '../add-variableV2/types';
|
|
2
|
-
|
|
4
|
+
interface InputWithVariablesProps {
|
|
3
5
|
variablesList: any;
|
|
4
|
-
onChange: (val: SelectedVariable) => void;
|
|
6
|
+
onChange: (val: SelectedVariable | Variable) => void;
|
|
7
|
+
onBlur?: (e: Event, val?: SelectedVariable | Variable) => void;
|
|
5
8
|
addVarBoxRight: string;
|
|
6
9
|
allowMix: boolean;
|
|
7
10
|
prevVariable: SelectedVariable;
|
|
8
|
-
showHelp?: boolean
|
|
9
|
-
onlyVariables?: boolean
|
|
10
|
-
|
|
11
|
+
showHelp?: boolean;
|
|
12
|
+
onlyVariables?: boolean;
|
|
13
|
+
showSideVariablePanel?: boolean;
|
|
14
|
+
placeHolder?: string;
|
|
15
|
+
showAddButton?: boolean;
|
|
16
|
+
}
|
|
17
|
+
export declare const InputWithVariables: React.FC<InputWithVariablesProps>;
|
|
18
|
+
export {};
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),a=require("../../assets/icons/PlusIcon.js"),l=require("react"),r=require("styled-components"),i=require("uuid"),t=require("../../constants/Theme.js"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),a=require("../../assets/icons/PlusIcon.js"),l=require("react"),r=require("styled-components"),i=require("uuid"),t=require("../../constants/Theme.js"),d=require("../add-variableV2/AddVariableV2SideModal.js"),s=require("../add-variableV2/AddVariableV2.js"),u=require("../add-variableV2/AddVariableBox.styled.js"),o=require("../input/Input.js"),n=require("../TypographyStyle.js");function c(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const v=c(r).default.div`
|
|
2
2
|
margin-bottom: 32px;
|
|
3
3
|
input {
|
|
4
4
|
color: ${e=>e.isVar?t.COLORS.stroke.brand:"black"};
|
|
5
5
|
}
|
|
6
|
-
`;exports.InputWithVariables=r=>{const
|
|
6
|
+
`;exports.InputWithVariables=r=>{let{addVarBoxRight:t,allowMix:c,onChange:b,prevVariable:V,variablesList:h,onBlur:p,onlyVariables:g,placeHolder:j,showAddButton:x=!0,showHelp:T,showSideVariablePanel:y}=r;const f=l.useRef(null),[S,m]=l.useState(!1),[q]=l.useState(i.v4()),[w,A]=l.useState(),[C,O]=l.useState(V),[B,k]=l.useState(!1),[I,N]=l.useState(!1);return l.useEffect((()=>{w&&w.actualValue&&O(c?e=>({actualValue:e.actualValue+w.actualValue,variableType:"string"}):e=>({actualValue:w.actualValue,variableType:w.variableType,needsFetching:w.needsFetching}))}),[w]),l.useEffect((()=>{b(C)}),[C]),e.jsxs(e.Fragment,{children:[e.jsxs(v,Object.assign({isVar:/^{{.*}}$/.test(C.actualValue)},{children:[e.jsx(o.Input,{id:q,ref:f,skipFocus:!0,textControl:!0,isActive:S,value:C.actualValue,validate:e=>[!0,""],errorMessage:"",placeholder:j||"Add a value",onChangeText:function(e,a){if(g){const e=(null==a?void 0:a.keyCode)||(null==a?void 0:a.charCode);8!=e&&46!=e||O({actualValue:"",variableType:"string"})}else O(c?{actualValue:e,variableType:"string"}:{actualValue:e.replace(/{{.*}}/,""),variableType:"string"})},onReferenceInit:()=>{},onFocus:e=>{var a;m(!0),N(!0),"Search..."!==(null===(a=e.relatedTarget)||void 0===a?void 0:a.placeholder)||B||k(!0)},onBlur:e=>{var a,l,r,i,t,d,s;null==p||p(e,C),"addVar"===(null===(a=e.relatedTarget)||void 0===a?void 0:a.id)||"varList"===(null===(l=e.relatedTarget)||void 0===l?void 0:l.id)||(null===(i=null===(r=e.relatedTarget)||void 0===r?void 0:r.className)||void 0===i?void 0:i.includes("exlualr0"))||(null===(d=null===(t=e.relatedTarget)||void 0===t?void 0:t.className)||void 0===d?void 0:d.includes("sc-dZoequ "))?(f.current&&f.current.focus(),m(!0)):"Search..."===(null===(s=e.relatedTarget)||void 0===s?void 0:s.placeholder)?m(!0):(m(!1),k(!1),N(!1))}}),e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"row",justifyContent:"space-between"}},{children:[C.actualValue&&T?e.jsx("div",Object.assign({style:{marginTop:4}},{children:e.jsx(n.BodyCaption,{children:`This value is of type ${C.variableType}`})})):e.jsx("div",{}),x&&I&&e.jsx(u.AddVariableStyled,Object.assign({right:t,id:"addVar",onClick:()=>{k(!B)}},{children:e.jsxs("div",Object.assign({className:"add"},{children:[e.jsx(a.default,{color:"white"}),e.jsx("div",Object.assign({className:"variable"},{children:"Add variable"}))]}))}))]})),!y&&B&&e.jsx(s.AddVariableV2,{data:h,showVariable:!0,setShowVariable:()=>{k(!1)},variableValue:w,setVariableValue:A,placeholder:"",pickerSize:"large",enableVariable:!0,selectWithTypes:!0,onSearchBlur:e=>{var a,l,r,i,t,d;"varList"===(null===(a=e.relatedTarget)||void 0===a?void 0:a.id)||(null===(r=null===(l=e.relatedTarget)||void 0===l?void 0:l.className)||void 0===r?void 0:r.includes("exlualr0"))||(null===(t=null===(i=e.relatedTarget)||void 0===i?void 0:i.className)||void 0===t?void 0:t.includes("sc-dZoequ "))?f.current.focus():"Enter here"===(null===(d=e.relatedTarget)||void 0===d?void 0:d.placeholder)?e.relatedTarget.id!==q&&(k(!1),N(!1),m(!1)):(k(!1),N(!1),m(!1))}})]})),y&&B&&e.jsx(d.AddVariableV2SideModal,{zIndex:2e3,data:h,showVariable:B,setShowVariable:k,placeholder:"Add a variable",customTrigger:e=>{O(e)}})]})};
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
1
2
|
import { HEADER_TYPES } from "../../template-preview/models/TemplateMeta";
|
|
2
3
|
export interface EditMediaV2Props {
|
|
3
4
|
imageName: string[];
|
|
@@ -6,6 +7,7 @@ export interface EditMediaV2Props {
|
|
|
6
7
|
isLoading?: boolean;
|
|
7
8
|
mediaType?: HEADER_TYPES;
|
|
8
9
|
handleImageChange?: () => void;
|
|
10
|
+
setOpenEditMedia?: React.Dispatch<React.SetStateAction<boolean>>;
|
|
9
11
|
}
|
|
10
12
|
declare const EditMediaV2: (props: EditMediaV2Props) => import("react/jsx-runtime").JSX.Element;
|
|
11
13
|
export default EditMediaV2;
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../../assets/icons/document_pdf.svg.js"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../../assets/icons/document_pdf.svg.js"),i=require("../../../assets/icons/edit.svg.js"),s=require("../../../assets/icons/refresh.svg.js"),r=require("../../../assets/icons/video_camcorder.svg.js"),n=require("styled-components"),o=require("../../spinner/Spinner.js"),l=require("../../template-preview/models/TemplateMeta.js"),d=require("../../TypographyStyle.js"),a=require("../../../utils/StringUtils.js"),c=require("../../../constants/Theme.js"),u=require("./EditMediaV2.style.js");function h(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const g=h(n).default.div`
|
|
2
2
|
padding-left: 14px;
|
|
3
3
|
padding-right: 6px;
|
|
4
4
|
width: 44px;
|
|
5
5
|
height: 24px;
|
|
6
|
-
border-left: 1px solid ${
|
|
6
|
+
border-left: 1px solid ${c.COLORS.stroke.primary};
|
|
7
7
|
cursor: pointer;
|
|
8
|
-
`;exports.default=n=>{const{imageName:
|
|
8
|
+
`;exports.default=n=>{const{imageName:h,error:j,isLoading:p,mediaType:x,handleImageChange:O,setOpenEditMedia:y}=n,m=null==h?void 0:h[0].split("/"),f=null==m?void 0:m[m.length-1];return e.jsxs(u.Container,{children:[e.jsx(u.ImageContainer,Object.assign({error:!!j,onClick:j?O:void 0},{children:j?e.jsx(s.default,{color:c.COLORS.content.brand,width:32,height:32}):p?e.jsx(o.Spinner,{size:"small"}):x===l.HEADER_TYPES.IMAGE?e.jsx("img",{alt:"",src:null==h?void 0:h[0],style:{width:"100%",height:"56px",borderRadius:8,objectFit:"cover"}}):x===l.HEADER_TYPES.VIDEO?e.jsx(r.default,{width:18,height:22,color:c.COLORS.content.placeholder}):e.jsx(t.default,{width:18,height:22,color:c.COLORS.content.placeholder})})),e.jsxs(u.RightComponent,{children:[e.jsx("div",Object.assign({style:{flex:1}},{children:h&&j?e.jsx(e.Fragment,{}):p?e.jsx(d.BodyCaption,Object.assign({style:{marginLeft:8}},{children:"Your media is getting loaded..."})):e.jsx(d.BodySecondary,Object.assign({style:{color:c.COLORS.content.primary,marginLeft:8}},{children:a.default.toCapitilize(null==x?void 0:x.toLowerCase())||f}))})),!!j&&e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"column",marginLeft:8}},{children:[e.jsxs(d.BodySecondary,Object.assign({style:{color:c.COLORS.content.negative}},{children:["Error loading this ",null==x?void 0:x.toLowerCase(),". Retry"]})),e.jsx(d.Caption,Object.assign({style:{color:c.COLORS.content.secondary}},{children:j}))]})),!j&&!p&&e.jsx(g,Object.assign({onClick:()=>null==y?void 0:y(!0),onKeyDown:()=>null==y?void 0:y(!0),role:"presentation"},{children:e.jsx(i.default,{width:24,height:24,color:c.COLORS.content.placeholder})}))]})]})};
|
package/dist/cjs/components/template-context-mapper/modalElements/EditWhatsAppTemplateMediaV2.d.ts
CHANGED
|
@@ -1,9 +1,11 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
+
import { VariableListInterfaceV2 } from "../../add-variableV2";
|
|
2
3
|
import { WhatsAppPickerMeta, WhatsAppTemplate } from "../../template-preview/models/WhatsAppTemplate";
|
|
3
4
|
declare const EditMediaTemplateMediaV2: React.FC<{
|
|
4
5
|
mediaComponent: WhatsAppTemplate['components'][0];
|
|
5
6
|
template: WhatsAppTemplate;
|
|
6
7
|
whatsappSpecificPickerMeta: WhatsAppPickerMeta;
|
|
7
8
|
updateTemplateImageUrl(url: string, format: WhatsAppTemplate['components'][0]['format']): void;
|
|
9
|
+
variableList?: VariableListInterfaceV2[];
|
|
8
10
|
}>;
|
|
9
11
|
export default EditMediaTemplateMediaV2;
|
package/dist/cjs/components/template-context-mapper/modalElements/EditWhatsAppTemplateMediaV2.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../../_virtual/_tslib.js"),t=require("react/jsx-runtime"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../../_virtual/_tslib.js"),t=require("react/jsx-runtime"),a=require("react"),i=require("../../helpers/FileUploaderHelper.js"),r=require("../../image-cropper/BikImageCropper.js");require("../../image-compress/ImageCompress.js"),require("../../states/StateComponent.js"),require("../../../constants/zindex.js");var l=require("../../modals/styledModal.js");require("../../spinner/Spinner.js");var n=require("../../input-with-vars/InputWithVariables.js"),o=require("../../template-preview/models/TemplateMeta.js"),s=require("../context/templateModalContext.js"),d=require("./EditMediaV2.js");function u(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var c=u(a);exports.default=u=>{let{mediaComponent:p,template:m,updateTemplateImageUrl:f,whatsappSpecificPickerMeta:v,variableList:g}=u;var h,j;const[E,b]=a.useState(void 0),[x,y]=a.useState(),[_,w]=a.useState(!1),C=c.default.createRef(),[S,M]=a.useState(!1),[A,I]=a.useState(""),{template:T,setTemplate:q}=s.useTemplateModalContext();let R;function O(t){return e.__awaiter(this,void 0,void 0,(function*(){if(M(!0),I(""),t)if(t.startsWith("https")){const e=yield fetch(t),a=yield e.blob();yield H(a)}else{if(!/^{{.*}}$/.test(t))throw new Error("Invalid url or variable");{const e=yield fetch("https://jkfenner.com/wp-content/uploads/2019/11/default.jpg"),a=yield e.blob();yield H(a);const i=Object.assign({},T);i.mapping&&(i.mapping=Object.assign(Object.assign({},i.mapping),{header:[t]}),null==q||q(Object.assign({},i)))}}else D()}))}function D(){var e;(null===(e=null==C?void 0:C.current)||void 0===e?void 0:e.click)&&C.current.click()}function H(t){var a;return e.__awaiter(this,void 0,void 0,(function*(){const e=new i.FileUploaderHelper;if(t instanceof Blob){const i=e.validate(t);if(i)I(i),w(!1),M(!1);else{const e=p.format===o.HEADER_TYPES.IMAGE,i=yield v.uploadMediaFiles({file:t,fileName:E,isImage:e});if(i.success){const[e]=t.type.split("/");f(null!==(a=i.url)&&void 0!==a?a:"","application"===e?o.HEADER_TYPES.DOCUMENT:o.HEADER_TYPES[e.toUpperCase()])}else I("An unknown technical error occured");M(!1),w(!1)}}else I("An unknown technical error occured"),w(!1),M(!1)}))}return console.log("currentTemplate",T),R=p.format===o.HEADER_TYPES.IMAGE?"image/png, image/jpeg":p.format===o.HEADER_TYPES.VIDEO?"video/mp4":"application/pdf",t.jsxs(t.Fragment,{children:[t.jsx(l.StyledModal,Object.assign({open:_,zIndex:2e3,onClose:()=>w(!1),width:"480px"},{children:t.jsxs("div",Object.assign({style:{padding:16}},{children:[t.jsx(n.InputWithVariables,{addVarBoxRight:"16px",allowMix:!1,onChange:e=>{console.log(e)},prevVariable:{actualValue:"",variableType:"string"},variablesList:g,showSideVariablePanel:!0,placeHolder:"Enter url or add variable...",onBlur:(e,t)=>{t&&t.actualValue&&(console.log(t),O(t.actualValue))},showAddButton:p.format===o.HEADER_TYPES.IMAGE}),t.jsx("button",Object.assign({onClick:()=>O()},{children:"upload media"}))]}))})),!!x&&t.jsx(r.BikImageCropper,{aspectRatio:15/8,src:x,onCropComplete:function(t){return e.__awaiter(this,void 0,void 0,(function*(){M(!1),I("");const e=yield fetch(t);H(yield e.blob()).then((()=>{y(void 0)}))}))},onCancel:()=>{M(!1),y("")}}),t.jsx("input",{ref:C,style:{display:"none"},type:"file",onChange:function(e){var t;I(""),M(!0);const a=null===(t=e.target.files)||void 0===t?void 0:t[0];if(p.format===o.HEADER_TYPES.IMAGE){const e=new FileReader;y(""),b(""),e.onload=()=>{y(e.result),b(null==a?void 0:a.name)},a&&e.readAsDataURL(a)}else H(a)},accept:R}),t.jsx(d.default,{imageName:null!==(j=null===(h=null==p?void 0:p.example)||void 0===h?void 0:h.header_handle)&&void 0!==j?j:[],handleImageChange:D,mediaType:null==p?void 0:p.format,error:A,isLoading:S,setOpenEditMedia:w})]})};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../context/templateModalContext.js"),o=require("../utils/getDataFromTemplateComponent.js"),n=require("./EditMediaV2.style.js"),i=require("./EditWhatsAppTemplateMediaV2.js"),l=require("./VariableConnectorsPanel.js"),a=require("./VariableConnectorWhatsApp.js"),s=require("./VariableEditorHeader.js"),d=require("./WhatsAppTemplateCardButtonV2.js");exports.default=r=>{let{template:p,onTemplateChange:u,whatsappSpecificPickerMeta:c,showVariableModal:
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../context/templateModalContext.js"),o=require("../utils/getDataFromTemplateComponent.js"),n=require("./EditMediaV2.style.js"),i=require("./EditWhatsAppTemplateMediaV2.js"),l=require("./VariableConnectorsPanel.js"),a=require("./VariableConnectorWhatsApp.js"),s=require("./VariableEditorHeader.js"),d=require("./WhatsAppTemplateCardButtonV2.js");exports.default=r=>{let{template:p,onTemplateChange:u,whatsappSpecificPickerMeta:c,showVariableModal:b,variableList:m}=r;var v,g,h,f,j,x,T,O,y,C,E,V;const{originalVariableList:w}=t.useTemplateModalContext(),{descriptionComponents:L,urlBtns:B,qrbBtns:I,imageComponent:M,bodyVariables:q,headerVariables:R}=o.getAllDataFromTemplateComponent(p);function A(e,t){var o,n,i,l;const a=Object.assign({},p),s=null==a?void 0:a.components.findIndex((e=>"BUTTONS"===e.type));if(void 0!==s&&s>-1){const d=null===(o=null==a?void 0:a.components[s].buttons)||void 0===o?void 0:o.findIndex((e=>"URL"===e.type));if(void 0!==d&&d>-1){const o="custom"===t&&"string"==typeof e,r=[...null!==(l=null===(i=null===(n=a.components)||void 0===n?void 0:n[s])||void 0===i?void 0:i.buttons)&&void 0!==l?l:[]];r[d]=Object.assign(Object.assign({},r[d]),{url:"https://d.bik.ai/{{1}}",example:[o?e:"string"!=typeof e?e.defaultValue:""]});const p=Object.assign(Object.assign({},a.components[s]),{buttons:r}),u=Object.assign(Object.assign({},a.mapping),{buttons:o?["((customBtnPlaceholder))"]:"string"!=typeof e?[e.placeHolder]:void 0});a.mapping=u;const c=[...a.components];c[s]=p,a.components=c}}null==u||u(a)}function U(e,t,o){var n;const i=Object.assign({},p),l=null==i?void 0:i.components.findIndex((e=>"BUTTONS"===e.type));if(void 0!==l&&l>-1){const t=null===(n=null==i?void 0:i.components[l].buttons)||void 0===n?void 0:n.filter((e=>"QUICK_REPLY"===e.type));t&&(t[o]=Object.assign(Object.assign({},t[o]),{flowId:e.flowId,flowName:e.flowName}));const a=Object.assign(Object.assign({},i.components[l]),{buttons:t}),s=[...i.components];s[l]=a,i.components=s}null==u||u(i)}return e.jsxs(l.Container,Object.assign({style:{flexDirection:"column",maxHeight:460}},{children:[!!M&&e.jsx(n.EditTemplateMediaContainer,{children:e.jsx(i.default,{whatsappSpecificPickerMeta:c,mediaComponent:M,updateTemplateImageUrl:function(e,t){var o;let n=Object.assign({},p);const i=null===(o=null==n?void 0:n.components)||void 0===o?void 0:o.findIndex((e=>{if("HEADER"===e.type&&"NONE"!==e.format&&"TEXT"!==e.format)return!0}));if(void 0!==i&&i>-1&&(null==n?void 0:n.components[i])){const o=Object.assign(Object.assign({},n.components[i]),{format:t,example:{header_handle:[e]}}),l=[...n.components];l[i]=o,n=Object.assign(Object.assign({},n),{components:l})}null==u||u(n)},template:p,variableList:m})}),(q.length>0||R.length>0)&&e.jsx(s.default,{containerStyle:{paddingTop:M?24:8},headerText:"Edit variable values",subText:"Edit values for the variables used in template",toolTipInfo:"Variables are placeholder texts which can either be filled through data or custom texts. These can be edited through the dropdowns below"}),null==L?void 0:L.map(((t,o)=>e.jsx(a.default,{originalVariableList:w,type:t.type,descriptionComponent:t.component,variableMapping:"HEADER"===t.type?p.mapping.header:p.mapping.body,showVariableModal:b,variableList:m},o))),(null===(g=null===(v=B[0])||void 0===v?void 0:v.component)||void 0===g?void 0:g.buttons)&&(null===(j=null===(f=null===(h=B[0])||void 0===h?void 0:h.component)||void 0===f?void 0:f.buttons)||void 0===j?void 0:j.length)>0&&e.jsx(s.default,{headerText:"Edit buttons",subText:"Edit the link connected to the CTA button"}),null===(x=null==w?void 0:w.buttons)||void 0===x?void 0:x.map(((t,o)=>{if("URL"===t.type)return e.jsx(d.default,{CTAoptions:null==c?void 0:c.CTAoptions,button:t,originalVariableList:w,updateSelectedURLTemplateBtn:A},`${o}`)})),(null===(O=null===(T=I[0])||void 0===T?void 0:T.component)||void 0===O?void 0:O.buttons)&&(null===(E=null===(C=null===(y=I[0])||void 0===y?void 0:y.component)||void 0===C?void 0:C.buttons)||void 0===E?void 0:E.length)>0&&e.jsx(s.default,{headerText:"Edit buttons",subText:"Edit the chatflows triggered on clicking the buttons",toolTipInfo:"There is an option to trigger chatflows through the buttons which can keep the user engaged"}),null===(V=null==w?void 0:w.buttons)||void 0===V?void 0:V.map(((t,o)=>{if("QUICK_REPLY"===t.type)return e.jsx(d.default,{QRBoptions:null==c?void 0:c.QRBoptions,button:t,originalVariableList:w,updateSelectedQRBTemplateBtn:U},`${o}`)}))]}))};
|
package/dist/cjs/components/template-context-mapper/modalElements/VariableConnectorWhatsApp.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),a=require("../../input/Input.js"),i=require("../../TypographyStyle.js"),r=require("../../../constants/Theme.js"),t=require("../context/templateModalContext.js"),l=require("./VariableConnector.js");exports.default=s=>{let{descriptionComponent:n,type:o,showVariableModal:d,variableList:p}=s;var c,
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),a=require("../../input/Input.js"),i=require("../../TypographyStyle.js"),r=require("../../../constants/Theme.js"),t=require("../context/templateModalContext.js"),l=require("./VariableConnector.js");exports.default=s=>{let{descriptionComponent:n,type:o,showVariableModal:d,variableList:p}=s;var c,x;const{originalVariableList:b}=t.useTemplateModalContext();return"BODY"===n.type?e.jsx("div",{children:null===(c=null==b?void 0:b.body)||void 0===c?void 0:c.map(((t,s)=>t.isEditableVariable?e.jsx(l.default,{index:s,variable:t,showVariableModal:d,variableList:p,componentType:n.type},`${s}-${t.index}`):e.jsxs("div",Object.assign({style:{margin:"16px 8px"}},{children:[e.jsxs(i.BodySecondary,Object.assign({style:{color:r.COLORS.content.primary}},{children:["HEADER"===o?"Header":""," Locked variable ",s+1]})),e.jsx(a.Input,{state:"disabled",placeholder:t.variableName,onChangeText:()=>{}})]}),s)))}):"HEADER"===n.type?e.jsx("div",{children:null===(x=null==b?void 0:b.header)||void 0===x?void 0:x.map(((t,s)=>t.isEditableVariable?e.jsx(l.default,{index:s,variable:t,showVariableModal:d,variableList:p,componentType:n.type},`${s}-${t.index}`):e.jsxs("div",Object.assign({style:{margin:"16px 8px"}},{children:[e.jsxs(i.BodySecondary,Object.assign({style:{color:r.COLORS.content.primary}},{children:["HEADER"===o?"Header":""," Locked variable ",s+1]})),e.jsx(a.Input,{state:"disabled",placeholder:t.variableName,onChangeText:()=>{}})]}),s)))}):e.jsx(e.Fragment,{})};
|
|
@@ -1,10 +1,18 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { Variable } from '../add-variableV2/AddVariableV2';
|
|
1
3
|
import { SelectedVariable } from '../add-variableV2/types';
|
|
2
|
-
|
|
4
|
+
interface InputWithVariablesProps {
|
|
3
5
|
variablesList: any;
|
|
4
|
-
onChange: (val: SelectedVariable) => void;
|
|
6
|
+
onChange: (val: SelectedVariable | Variable) => void;
|
|
7
|
+
onBlur?: (e: Event, val?: SelectedVariable | Variable) => void;
|
|
5
8
|
addVarBoxRight: string;
|
|
6
9
|
allowMix: boolean;
|
|
7
10
|
prevVariable: SelectedVariable;
|
|
8
|
-
showHelp?: boolean
|
|
9
|
-
onlyVariables?: boolean
|
|
10
|
-
|
|
11
|
+
showHelp?: boolean;
|
|
12
|
+
onlyVariables?: boolean;
|
|
13
|
+
showSideVariablePanel?: boolean;
|
|
14
|
+
placeHolder?: string;
|
|
15
|
+
showAddButton?: boolean;
|
|
16
|
+
}
|
|
17
|
+
export declare const InputWithVariables: React.FC<InputWithVariablesProps>;
|
|
18
|
+
export {};
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import{jsxs as e,jsx as
|
|
1
|
+
import{jsxs as e,Fragment as a,jsx as l}from"react/jsx-runtime";import r from"../../assets/icons/PlusIcon.js";import{useRef as i,useState as d,useEffect as t}from"react";import o from"styled-components";import{v4 as s}from"uuid";import{COLORS as n}from"../../constants/Theme.js";import{AddVariableV2SideModal as c}from"../add-variableV2/AddVariableV2SideModal.js";import{AddVariableV2 as u}from"../add-variableV2/AddVariableV2.js";import{AddVariableStyled as v}from"../add-variableV2/AddVariableBox.styled.js";import{Input as p}from"../input/Input.js";import{BodyCaption as b}from"../TypographyStyle.js";const h=o=>{let{addVarBoxRight:n,allowMix:h,onChange:m,prevVariable:g,variablesList:T,onBlur:f,onlyVariables:y,placeHolder:j,showAddButton:x=!0,showHelp:w,showSideVariablePanel:S}=o;const A=i(null),[C,k]=d(!1),[B]=d(s()),[N,O]=d(),[F,I]=d(g),[L,M]=d(!1),[$,q]=d(!1);return t((()=>{N&&N.actualValue&&I(h?e=>({actualValue:e.actualValue+N.actualValue,variableType:"string"}):e=>({actualValue:N.actualValue,variableType:N.variableType,needsFetching:N.needsFetching}))}),[N]),t((()=>{m(F)}),[F]),e(a,{children:[e(V,Object.assign({isVar:/^{{.*}}$/.test(F.actualValue)},{children:[l(p,{id:B,ref:A,skipFocus:!0,textControl:!0,isActive:C,value:F.actualValue,validate:e=>[!0,""],errorMessage:"",placeholder:j||"Add a value",onChangeText:function(e,a){if(y){const e=(null==a?void 0:a.keyCode)||(null==a?void 0:a.charCode);8!=e&&46!=e||I({actualValue:"",variableType:"string"})}else I(h?{actualValue:e,variableType:"string"}:{actualValue:e.replace(/{{.*}}/,""),variableType:"string"})},onReferenceInit:()=>{},onFocus:e=>{var a;k(!0),q(!0),"Search..."!==(null===(a=e.relatedTarget)||void 0===a?void 0:a.placeholder)||L||M(!0)},onBlur:e=>{var a,l,r,i,d,t,o;null==f||f(e,F),"addVar"===(null===(a=e.relatedTarget)||void 0===a?void 0:a.id)||"varList"===(null===(l=e.relatedTarget)||void 0===l?void 0:l.id)||(null===(i=null===(r=e.relatedTarget)||void 0===r?void 0:r.className)||void 0===i?void 0:i.includes("exlualr0"))||(null===(t=null===(d=e.relatedTarget)||void 0===d?void 0:d.className)||void 0===t?void 0:t.includes("sc-dZoequ "))?(A.current&&A.current.focus(),k(!0)):"Search..."===(null===(o=e.relatedTarget)||void 0===o?void 0:o.placeholder)?k(!0):(k(!1),M(!1),q(!1))}}),e("div",Object.assign({style:{display:"flex",flexDirection:"row",justifyContent:"space-between"}},{children:[F.actualValue&&w?l("div",Object.assign({style:{marginTop:4}},{children:l(b,{children:`This value is of type ${F.variableType}`})})):l("div",{}),x&&$&&l(v,Object.assign({right:n,id:"addVar",onClick:()=>{M(!L)}},{children:e("div",Object.assign({className:"add"},{children:[l(r,{color:"white"}),l("div",Object.assign({className:"variable"},{children:"Add variable"}))]}))}))]})),!S&&L&&l(u,{data:T,showVariable:!0,setShowVariable:()=>{M(!1)},variableValue:N,setVariableValue:O,placeholder:"",pickerSize:"large",enableVariable:!0,selectWithTypes:!0,onSearchBlur:e=>{var a,l,r,i,d,t;"varList"===(null===(a=e.relatedTarget)||void 0===a?void 0:a.id)||(null===(r=null===(l=e.relatedTarget)||void 0===l?void 0:l.className)||void 0===r?void 0:r.includes("exlualr0"))||(null===(d=null===(i=e.relatedTarget)||void 0===i?void 0:i.className)||void 0===d?void 0:d.includes("sc-dZoequ "))?A.current.focus():"Enter here"===(null===(t=e.relatedTarget)||void 0===t?void 0:t.placeholder)?e.relatedTarget.id!==B&&(M(!1),q(!1),k(!1)):(M(!1),q(!1),k(!1))}})]})),S&&L&&l(c,{zIndex:2e3,data:T,showVariable:L,setShowVariable:M,placeholder:"Add a variable",customTrigger:e=>{I(e)}})]})},V=o.div`
|
|
2
2
|
margin-bottom: 32px;
|
|
3
3
|
input {
|
|
4
|
-
color: ${e=>e.isVar?
|
|
4
|
+
color: ${e=>e.isVar?n.stroke.brand:"black"};
|
|
5
5
|
}
|
|
6
|
-
`;export{
|
|
6
|
+
`;export{h as InputWithVariables};
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
1
2
|
import { HEADER_TYPES } from "../../template-preview/models/TemplateMeta";
|
|
2
3
|
export interface EditMediaV2Props {
|
|
3
4
|
imageName: string[];
|
|
@@ -6,6 +7,7 @@ export interface EditMediaV2Props {
|
|
|
6
7
|
isLoading?: boolean;
|
|
7
8
|
mediaType?: HEADER_TYPES;
|
|
8
9
|
handleImageChange?: () => void;
|
|
10
|
+
setOpenEditMedia?: React.Dispatch<React.SetStateAction<boolean>>;
|
|
9
11
|
}
|
|
10
12
|
declare const EditMediaV2: (props: EditMediaV2Props) => import("react/jsx-runtime").JSX.Element;
|
|
11
13
|
export default EditMediaV2;
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import{jsxs as e,jsx as t,Fragment as i}from"react/jsx-runtime";import o from"../../../assets/icons/document_pdf.svg.js";import r from"../../../assets/icons/edit.svg.js";import s from"../../../assets/icons/refresh.svg.js";import n from"../../../assets/icons/video_camcorder.svg.js";import l from"styled-components";import{
|
|
1
|
+
import{jsxs as e,jsx as t,Fragment as i}from"react/jsx-runtime";import o from"../../../assets/icons/document_pdf.svg.js";import r from"../../../assets/icons/edit.svg.js";import s from"../../../assets/icons/refresh.svg.js";import n from"../../../assets/icons/video_camcorder.svg.js";import l from"styled-components";import{Spinner as d}from"../../spinner/Spinner.js";import{HEADER_TYPES as c}from"../../template-preview/models/TemplateMeta.js";import{BodyCaption as a,BodySecondary as m,Caption as p}from"../../TypographyStyle.js";import h from"../../../utils/StringUtils.js";import{COLORS as g}from"../../../constants/Theme.js";import{Container as f,ImageContainer as j,RightComponent as v}from"./EditMediaV2.style.js";const y=l.div`
|
|
2
2
|
padding-left: 14px;
|
|
3
3
|
padding-right: 6px;
|
|
4
4
|
width: 44px;
|
|
5
5
|
height: 24px;
|
|
6
|
-
border-left: 1px solid ${
|
|
6
|
+
border-left: 1px solid ${g.stroke.primary};
|
|
7
7
|
cursor: pointer;
|
|
8
|
-
`,
|
|
8
|
+
`,u=l=>{const{imageName:u,error:b,isLoading:x,mediaType:w,handleImageChange:O,setOpenEditMedia:C}=l,L=null==u?void 0:u[0].split("/"),E=null==L?void 0:L[L.length-1];return e(f,{children:[t(j,Object.assign({error:!!b,onClick:b?O:void 0},{children:b?t(s,{color:g.content.brand,width:32,height:32}):x?t(d,{size:"small"}):w===c.IMAGE?t("img",{alt:"",src:null==u?void 0:u[0],style:{width:"100%",height:"56px",borderRadius:8,objectFit:"cover"}}):w===c.VIDEO?t(n,{width:18,height:22,color:g.content.placeholder}):t(o,{width:18,height:22,color:g.content.placeholder})})),e(v,{children:[t("div",Object.assign({style:{flex:1}},{children:u&&b?t(i,{}):x?t(a,Object.assign({style:{marginLeft:8}},{children:"Your media is getting loaded..."})):t(m,Object.assign({style:{color:g.content.primary,marginLeft:8}},{children:h.toCapitilize(null==w?void 0:w.toLowerCase())||E}))})),!!b&&e("div",Object.assign({style:{display:"flex",flexDirection:"column",marginLeft:8}},{children:[e(m,Object.assign({style:{color:g.content.negative}},{children:["Error loading this ",null==w?void 0:w.toLowerCase(),". Retry"]})),t(p,Object.assign({style:{color:g.content.secondary}},{children:b}))]})),!b&&!x&&t(y,Object.assign({onClick:()=>null==C?void 0:C(!0),onKeyDown:()=>null==C?void 0:C(!0),role:"presentation"},{children:t(r,{width:24,height:24,color:g.content.placeholder})}))]})]})};export{u as default};
|
package/dist/esm/components/template-context-mapper/modalElements/EditWhatsAppTemplateMediaV2.d.ts
CHANGED
|
@@ -1,9 +1,11 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
+
import { VariableListInterfaceV2 } from "../../add-variableV2";
|
|
2
3
|
import { WhatsAppPickerMeta, WhatsAppTemplate } from "../../template-preview/models/WhatsAppTemplate";
|
|
3
4
|
declare const EditMediaTemplateMediaV2: React.FC<{
|
|
4
5
|
mediaComponent: WhatsAppTemplate['components'][0];
|
|
5
6
|
template: WhatsAppTemplate;
|
|
6
7
|
whatsappSpecificPickerMeta: WhatsAppPickerMeta;
|
|
7
8
|
updateTemplateImageUrl(url: string, format: WhatsAppTemplate['components'][0]['format']): void;
|
|
9
|
+
variableList?: VariableListInterfaceV2[];
|
|
8
10
|
}>;
|
|
9
11
|
export default EditMediaTemplateMediaV2;
|
package/dist/esm/components/template-context-mapper/modalElements/EditWhatsAppTemplateMediaV2.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{__awaiter as e}from"../../../_virtual/_tslib.js";import{jsxs as
|
|
1
|
+
import{__awaiter as e}from"../../../_virtual/_tslib.js";import{jsxs as t,Fragment as i,jsx as o}from"react/jsx-runtime";import a,{useState as n}from"react";import{FileUploaderHelper as l}from"../../helpers/FileUploaderHelper.js";import{BikImageCropper as r}from"../../image-cropper/BikImageCropper.js";import"../../image-compress/ImageCompress.js";import"../../states/StateComponent.js";import"../../../constants/zindex.js";import{StyledModal as s}from"../../modals/styledModal.js";import"../../spinner/Spinner.js";import{InputWithVariables as p}from"../../input-with-vars/InputWithVariables.js";import{HEADER_TYPES as d}from"../../template-preview/models/TemplateMeta.js";import{useTemplateModalContext as c}from"../context/templateModalContext.js";import m from"./EditMediaV2.js";const u=u=>{let{mediaComponent:f,template:v,updateTemplateImageUrl:g,whatsappSpecificPickerMeta:h,variableList:b}=u;var j,y;const[C,w]=n(void 0),[I,M]=n(),[x,E]=n(!1),O=a.createRef(),[V,k]=n(!1),[A,T]=n(""),{template:B,setTemplate:R}=c();let U;function G(t){return e(this,void 0,void 0,(function*(){if(k(!0),T(""),t)if(t.startsWith("https")){const e=yield fetch(t),i=yield e.blob();yield S(i)}else{if(!/^{{.*}}$/.test(t))throw new Error("Invalid url or variable");{const e=yield fetch("https://jkfenner.com/wp-content/uploads/2019/11/default.jpg"),i=yield e.blob();yield S(i);const o=Object.assign({},B);o.mapping&&(o.mapping=Object.assign(Object.assign({},o.mapping),{header:[t]}),null==R||R(Object.assign({},o)))}}else L()}))}function L(){var e;(null===(e=null==O?void 0:O.current)||void 0===e?void 0:e.click)&&O.current.click()}function S(t){var i;return e(this,void 0,void 0,(function*(){const e=new l;if(t instanceof Blob){const o=e.validate(t);if(o)T(o),E(!1),k(!1);else{const e=f.format===d.IMAGE,o=yield h.uploadMediaFiles({file:t,fileName:C,isImage:e});if(o.success){const[e]=t.type.split("/");g(null!==(i=o.url)&&void 0!==i?i:"","application"===e?d.DOCUMENT:d[e.toUpperCase()])}else T("An unknown technical error occured");k(!1),E(!1)}}else T("An unknown technical error occured"),E(!1),k(!1)}))}return console.log("currentTemplate",B),U=f.format===d.IMAGE?"image/png, image/jpeg":f.format===d.VIDEO?"video/mp4":"application/pdf",t(i,{children:[o(s,Object.assign({open:x,zIndex:2e3,onClose:()=>E(!1),width:"480px"},{children:t("div",Object.assign({style:{padding:16}},{children:[o(p,{addVarBoxRight:"16px",allowMix:!1,onChange:e=>{console.log(e)},prevVariable:{actualValue:"",variableType:"string"},variablesList:b,showSideVariablePanel:!0,placeHolder:"Enter url or add variable...",onBlur:(e,t)=>{t&&t.actualValue&&(console.log(t),G(t.actualValue))},showAddButton:f.format===d.IMAGE}),o("button",Object.assign({onClick:()=>G()},{children:"upload media"}))]}))})),!!I&&o(r,{aspectRatio:15/8,src:I,onCropComplete:function(t){return e(this,void 0,void 0,(function*(){k(!1),T("");const e=yield fetch(t);S(yield e.blob()).then((()=>{M(void 0)}))}))},onCancel:()=>{k(!1),M("")}}),o("input",{ref:O,style:{display:"none"},type:"file",onChange:function(e){var t;T(""),k(!0);const i=null===(t=e.target.files)||void 0===t?void 0:t[0];if(f.format===d.IMAGE){const e=new FileReader;M(""),w(""),e.onload=()=>{M(e.result),w(null==i?void 0:i.name)},i&&e.readAsDataURL(i)}else S(i)},accept:U}),o(m,{imageName:null!==(y=null===(j=null==f?void 0:f.example)||void 0===j?void 0:j.header_handle)&&void 0!==y?y:[],handleImageChange:L,mediaType:null==f?void 0:f.format,error:A,isLoading:V,setOpenEditMedia:E})]})};export{u as default};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsxs as t,jsx as o}from"react/jsx-runtime";import{useTemplateModalContext as e}from"../context/templateModalContext.js";import{getAllDataFromTemplateComponent as n}from"../utils/getDataFromTemplateComponent.js";import{EditTemplateMediaContainer as i}from"./EditMediaV2.style.js";import l from"./EditWhatsAppTemplateMediaV2.js";import{Container as a}from"./VariableConnectorsPanel.js";import s from"./VariableConnectorWhatsApp.js";import d from"./VariableEditorHeader.js";import p from"./WhatsAppTemplateCardButtonV2.js";const r=r=>{let{template:c,onTemplateChange:u,whatsappSpecificPickerMeta:m,showVariableModal:b,variableList:v}=r;var g,h,f,j,T,O,x,y,E,V,C,w;const{originalVariableList:
|
|
1
|
+
import{jsxs as t,jsx as o}from"react/jsx-runtime";import{useTemplateModalContext as e}from"../context/templateModalContext.js";import{getAllDataFromTemplateComponent as n}from"../utils/getDataFromTemplateComponent.js";import{EditTemplateMediaContainer as i}from"./EditMediaV2.style.js";import l from"./EditWhatsAppTemplateMediaV2.js";import{Container as a}from"./VariableConnectorsPanel.js";import s from"./VariableConnectorWhatsApp.js";import d from"./VariableEditorHeader.js";import p from"./WhatsAppTemplateCardButtonV2.js";const r=r=>{let{template:c,onTemplateChange:u,whatsappSpecificPickerMeta:m,showVariableModal:b,variableList:v}=r;var g,h,f,j,T,O,x,y,E,V,C,w;const{originalVariableList:L}=e(),{descriptionComponents:B,urlBtns:I,qrbBtns:R,imageComponent:A,bodyVariables:M,headerVariables:U}=n(c);function S(t,o){var e,n,i,l;const a=Object.assign({},c),s=null==a?void 0:a.components.findIndex((t=>"BUTTONS"===t.type));if(void 0!==s&&s>-1){const d=null===(e=null==a?void 0:a.components[s].buttons)||void 0===e?void 0:e.findIndex((t=>"URL"===t.type));if(void 0!==d&&d>-1){const e="custom"===o&&"string"==typeof t,p=[...null!==(l=null===(i=null===(n=a.components)||void 0===n?void 0:n[s])||void 0===i?void 0:i.buttons)&&void 0!==l?l:[]];p[d]=Object.assign(Object.assign({},p[d]),{url:"https://d.bik.ai/{{1}}",example:[e?t:"string"!=typeof t?t.defaultValue:""]});const r=Object.assign(Object.assign({},a.components[s]),{buttons:p}),c=Object.assign(Object.assign({},a.mapping),{buttons:e?["((customBtnPlaceholder))"]:"string"!=typeof t?[t.placeHolder]:void 0});a.mapping=c;const u=[...a.components];u[s]=r,a.components=u}}null==u||u(a)}function k(t,o,e){var n;const i=Object.assign({},c),l=null==i?void 0:i.components.findIndex((t=>"BUTTONS"===t.type));if(void 0!==l&&l>-1){const o=null===(n=null==i?void 0:i.components[l].buttons)||void 0===n?void 0:n.filter((t=>"QUICK_REPLY"===t.type));o&&(o[e]=Object.assign(Object.assign({},o[e]),{flowId:t.flowId,flowName:t.flowName}));const a=Object.assign(Object.assign({},i.components[l]),{buttons:o}),s=[...i.components];s[l]=a,i.components=s}null==u||u(i)}return t(a,Object.assign({style:{flexDirection:"column",maxHeight:460}},{children:[!!A&&o(i,{children:o(l,{whatsappSpecificPickerMeta:m,mediaComponent:A,updateTemplateImageUrl:function(t,o){var e;let n=Object.assign({},c);const i=null===(e=null==n?void 0:n.components)||void 0===e?void 0:e.findIndex((t=>{if("HEADER"===t.type&&"NONE"!==t.format&&"TEXT"!==t.format)return!0}));if(void 0!==i&&i>-1&&(null==n?void 0:n.components[i])){const e=Object.assign(Object.assign({},n.components[i]),{format:o,example:{header_handle:[t]}}),l=[...n.components];l[i]=e,n=Object.assign(Object.assign({},n),{components:l})}null==u||u(n)},template:c,variableList:v})}),(M.length>0||U.length>0)&&o(d,{containerStyle:{paddingTop:A?24:8},headerText:"Edit variable values",subText:"Edit values for the variables used in template",toolTipInfo:"Variables are placeholder texts which can either be filled through data or custom texts. These can be edited through the dropdowns below"}),null==B?void 0:B.map(((t,e)=>o(s,{originalVariableList:L,type:t.type,descriptionComponent:t.component,variableMapping:"HEADER"===t.type?c.mapping.header:c.mapping.body,showVariableModal:b,variableList:v},e))),(null===(h=null===(g=I[0])||void 0===g?void 0:g.component)||void 0===h?void 0:h.buttons)&&(null===(T=null===(j=null===(f=I[0])||void 0===f?void 0:f.component)||void 0===j?void 0:j.buttons)||void 0===T?void 0:T.length)>0&&o(d,{headerText:"Edit buttons",subText:"Edit the link connected to the CTA button"}),null===(O=null==L?void 0:L.buttons)||void 0===O?void 0:O.map(((t,e)=>{if("URL"===t.type)return o(p,{CTAoptions:null==m?void 0:m.CTAoptions,button:t,originalVariableList:L,updateSelectedURLTemplateBtn:S},`${e}`)})),(null===(y=null===(x=R[0])||void 0===x?void 0:x.component)||void 0===y?void 0:y.buttons)&&(null===(C=null===(V=null===(E=R[0])||void 0===E?void 0:E.component)||void 0===V?void 0:V.buttons)||void 0===C?void 0:C.length)>0&&o(d,{headerText:"Edit buttons",subText:"Edit the chatflows triggered on clicking the buttons",toolTipInfo:"There is an option to trigger chatflows through the buttons which can keep the user engaged"}),null===(w=null==L?void 0:L.buttons)||void 0===w?void 0:w.map(((t,e)=>{if("QUICK_REPLY"===t.type)return o(p,{QRBoptions:null==m?void 0:m.QRBoptions,button:t,originalVariableList:L,updateSelectedQRBTemplateBtn:k},`${e}`)}))]}))};export{r as default};
|
package/dist/esm/components/template-context-mapper/modalElements/VariableConnectorWhatsApp.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsx as e,jsxs as a,Fragment as i}from"react/jsx-runtime";import{Input as t}from"../../input/Input.js";import{BodySecondary as
|
|
1
|
+
import{jsx as e,jsxs as a,Fragment as i}from"react/jsx-runtime";import{Input as t}from"../../input/Input.js";import{BodySecondary as r}from"../../TypographyStyle.js";import{COLORS as o}from"../../../constants/Theme.js";import{useTemplateModalContext as l}from"../context/templateModalContext.js";import n from"./VariableConnector.js";const d=d=>{let{descriptionComponent:s,type:p,showVariableModal:c,variableList:m}=d;var b,v;const{originalVariableList:y}=l();return"BODY"===s.type?e("div",{children:null===(b=null==y?void 0:y.body)||void 0===b?void 0:b.map(((i,l)=>i.isEditableVariable?e(n,{index:l,variable:i,showVariableModal:c,variableList:m,componentType:s.type},`${l}-${i.index}`):a("div",Object.assign({style:{margin:"16px 8px"}},{children:[a(r,Object.assign({style:{color:o.content.primary}},{children:["HEADER"===p?"Header":""," Locked variable ",l+1]})),e(t,{state:"disabled",placeholder:i.variableName,onChangeText:()=>{}})]}),l)))}):"HEADER"===s.type?e("div",{children:null===(v=null==y?void 0:y.header)||void 0===v?void 0:v.map(((i,l)=>i.isEditableVariable?e(n,{index:l,variable:i,showVariableModal:c,variableList:m,componentType:s.type},`${l}-${i.index}`):a("div",Object.assign({style:{margin:"16px 8px"}},{children:[a(r,Object.assign({style:{color:o.content.primary}},{children:["HEADER"===p?"Header":""," Locked variable ",l+1]})),e(t,{state:"disabled",placeholder:i.variableName,onChangeText:()=>{}})]}),l)))}):e(i,{})};export{d as default};
|