@bikdotai/bik-component-library 0.0.359-beta.20 → 0.0.359-beta.21
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/input-with-vars/InputWithVariables.d.ts +5 -1
- 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/esm/components/bik-layout/MockMenus.d.ts +0 -1
- package/dist/esm/components/input-with-vars/InputWithVariables.d.ts +5 -1
- 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/package.json +1 -1
|
@@ -1,10 +1,14 @@
|
|
|
1
|
+
import { Variable } from '../add-variableV2/AddVariableV2';
|
|
1
2
|
import { SelectedVariable } from '../add-variableV2/types';
|
|
2
3
|
export declare const InputWithVariables: (props: {
|
|
3
4
|
variablesList: any;
|
|
4
|
-
onChange: (val: SelectedVariable) => void;
|
|
5
|
+
onChange: (val: SelectedVariable | Variable) => void;
|
|
6
|
+
onBlur?: ((e: Event, val?: SelectedVariable | Variable) => void) | undefined;
|
|
5
7
|
addVarBoxRight: string;
|
|
6
8
|
allowMix: boolean;
|
|
7
9
|
prevVariable: SelectedVariable;
|
|
8
10
|
showHelp?: boolean | undefined;
|
|
9
11
|
onlyVariables?: boolean | undefined;
|
|
12
|
+
showSideVariablePanel?: boolean | undefined;
|
|
13
|
+
placeHolder?: string | undefined;
|
|
10
14
|
}) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -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 t=l.useRef(null),[
|
|
6
|
+
`;exports.InputWithVariables=r=>{const t=l.useRef(null),[c,b]=l.useState(!1),[V]=l.useState(i.v4()),[h,p]=l.useState(),[g,j]=l.useState(r.prevVariable),[x,T]=l.useState(!1),[y,f]=l.useState(!1);return l.useEffect((()=>{h&&h.actualValue&&(r.allowMix?j((e=>({actualValue:e.actualValue+h.actualValue,variableType:"string"}))):j((e=>({actualValue:h.actualValue,variableType:h.variableType,needsFetching:h.needsFetching}))))}),[h]),l.useEffect((()=>{r.onChange(g)}),[g]),e.jsxs(e.Fragment,{children:[e.jsxs(v,Object.assign({isVar:/^{{.*}}$/.test(g.actualValue)},{children:[e.jsx(o.Input,{id:V,ref:t,skipFocus:!0,textControl:!0,isActive:c,value:g.actualValue,validate:e=>[!0,""],errorMessage:"",placeholder:r.placeHolder||"Add a value",onChangeText:function(e,a){if(r.onlyVariables){const e=(null==a?void 0:a.keyCode)||(null==a?void 0:a.charCode);8!=e&&46!=e||j({actualValue:"",variableType:"string"})}else r.allowMix?j({actualValue:e,variableType:"string"}):j({actualValue:e.replace(/{{.*}}/,""),variableType:"string"})},onReferenceInit:()=>{},onFocus:e=>{var a;b(!0),f(!0),"Search..."!==(null===(a=e.relatedTarget)||void 0===a?void 0:a.placeholder)||x||T(!0)},onBlur:e=>{var a,l,i,d,s,u,o,n;null===(a=r.onBlur)||void 0===a||a.call(r,e,g),"addVar"===(null===(l=e.relatedTarget)||void 0===l?void 0:l.id)||"varList"===(null===(i=e.relatedTarget)||void 0===i?void 0:i.id)||(null===(s=null===(d=e.relatedTarget)||void 0===d?void 0:d.className)||void 0===s?void 0:s.includes("exlualr0"))||(null===(o=null===(u=e.relatedTarget)||void 0===u?void 0:u.className)||void 0===o?void 0:o.includes("sc-dZoequ "))?(t.current&&t.current.focus(),b(!0)):"Search..."===(null===(n=e.relatedTarget)||void 0===n?void 0:n.placeholder)?b(!0):(b(!1),T(!1),f(!1))}}),e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"row",justifyContent:"space-between"}},{children:[g.actualValue&&r.showHelp?e.jsx("div",Object.assign({style:{marginTop:4}},{children:e.jsx(n.BodyCaption,{children:`This value is of type ${g.variableType}`})})):e.jsx("div",{}),y&&e.jsx(u.AddVariableStyled,Object.assign({right:r.addVarBoxRight,id:"addVar",onClick:()=>{T(!x)}},{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"}))]}))}))]})),!r.showSideVariablePanel&&x&&e.jsx(s.AddVariableV2,{data:r.variablesList,showVariable:!0,setShowVariable:()=>{T(!1)},variableValue:h,setVariableValue:p,placeholder:"",pickerSize:"large",enableVariable:!0,selectWithTypes:!0,onSearchBlur:e=>{var a,l,r,i,d,s;"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 "))?t.current.focus():"Enter here"===(null===(s=e.relatedTarget)||void 0===s?void 0:s.placeholder)?e.relatedTarget.id!==V&&(T(!1),f(!1),b(!1)):(T(!1),f(!1),b(!1))}})]})),r.showSideVariablePanel&&x&&e.jsx(d.AddVariableV2SideModal,{zIndex:2e3,data:r.variablesList,showVariable:x,setShowVariable:T,placeholder:"Add a variable",customTrigger:e=>{j(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"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../../_virtual/_tslib.js"),i=require("react/jsx-runtime"),t=require("react"),a=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("./EditMediaV2.js");function d(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var u=d(t);exports.default=d=>{let{mediaComponent:c,template:p,updateTemplateImageUrl:v,whatsappSpecificPickerMeta:f,variableList:m}=d;var h,g;const[j,E]=t.useState(void 0),[b,x]=t.useState(),[y,_]=t.useState(!1),S=u.default.createRef(),[C,q]=t.useState(!1),[w,I]=t.useState("");let M;function A(i){return e.__awaiter(this,void 0,void 0,(function*(){if(i){if(i.startsWith("https")){q(!0),I("");const e=yield fetch(i),t=yield e.blob();yield T(t)}}else R()}))}function R(){var e;(null===(e=null==S?void 0:S.current)||void 0===e?void 0:e.click)&&S.current.click()}function T(i){var t;return e.__awaiter(this,void 0,void 0,(function*(){const e=new a.FileUploaderHelper;if(i instanceof Blob){const a=e.validate(i);if(a)I(a),_(!1),q(!1);else{const e=c.format===o.HEADER_TYPES.IMAGE,a=yield f.uploadMediaFiles({file:i,fileName:j,isImage:e});if(a.success){const[e]=i.type.split("/");v(null!==(t=a.url)&&void 0!==t?t:"","application"===e?o.HEADER_TYPES.DOCUMENT:o.HEADER_TYPES[e.toUpperCase()])}else I("An unknown technical error occured");q(!1),_(!1)}}else I("An unknown technical error occured"),_(!1),q(!1)}))}return M=c.format===o.HEADER_TYPES.IMAGE?"image/png, image/jpeg":c.format===o.HEADER_TYPES.VIDEO?"video/mp4":"application/pdf",i.jsxs(i.Fragment,{children:[i.jsx(l.StyledModal,Object.assign({open:y,zIndex:2e3,onClose:()=>_(!1),width:"480px"},{children:i.jsxs("div",Object.assign({style:{padding:16}},{children:[i.jsx(n.InputWithVariables,{addVarBoxRight:"16px",allowMix:!1,onChange:e=>{console.log(e)},prevVariable:{actualValue:"",variableType:"string"},variablesList:m,showSideVariablePanel:!0,placeHolder:"Enter url or add variable...",onBlur:(e,i)=>{i&&A(i.actualValue)}}),i.jsx("button",Object.assign({onClick:()=>A()},{children:"upload media"}))]}))})),!!b&&i.jsx(r.BikImageCropper,{aspectRatio:15/8,src:b,onCropComplete:function(i){return e.__awaiter(this,void 0,void 0,(function*(){q(!1),I("");const e=yield fetch(i);T(yield e.blob()).then((()=>{x(void 0)}))}))},onCancel:()=>{q(!1),x("")}}),i.jsx("input",{ref:S,style:{display:"none"},type:"file",onChange:function(e){var i;I(""),q(!0);const t=null===(i=e.target.files)||void 0===i?void 0:i[0];if(c.format===o.HEADER_TYPES.IMAGE){const e=new FileReader;x(""),E(""),e.onload=()=>{x(e.result),E(null==t?void 0:t.name)},t&&e.readAsDataURL(t)}else T(t)},accept:M}),i.jsx(s.default,{imageName:null!==(g=null===(h=null==c?void 0:c.example)||void 0===h?void 0:h.header_handle)&&void 0!==g?g:[],handleImageChange:R,mediaType:null==c?void 0:c.format,error:w,isLoading:C,setOpenEditMedia:_})]})};
|
|
@@ -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}`)}))]}))};
|
|
@@ -1,10 +1,14 @@
|
|
|
1
|
+
import { Variable } from '../add-variableV2/AddVariableV2';
|
|
1
2
|
import { SelectedVariable } from '../add-variableV2/types';
|
|
2
3
|
export declare const InputWithVariables: (props: {
|
|
3
4
|
variablesList: any;
|
|
4
|
-
onChange: (val: SelectedVariable) => void;
|
|
5
|
+
onChange: (val: SelectedVariable | Variable) => void;
|
|
6
|
+
onBlur?: ((e: Event, val?: SelectedVariable | Variable) => void) | undefined;
|
|
5
7
|
addVarBoxRight: string;
|
|
6
8
|
allowMix: boolean;
|
|
7
9
|
prevVariable: SelectedVariable;
|
|
8
10
|
showHelp?: boolean | undefined;
|
|
9
11
|
onlyVariables?: boolean | undefined;
|
|
12
|
+
showSideVariablePanel?: boolean | undefined;
|
|
13
|
+
placeHolder?: string | undefined;
|
|
10
14
|
}) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -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 o}from"react";import t 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=t=>{const n=i(null),[h,m]=d(!1),[g]=d(s()),[T,f]=d(),[y,j]=d(t.prevVariable),[x,w]=d(!1),[S,A]=d(!1);return o((()=>{T&&T.actualValue&&(t.allowMix?j((e=>({actualValue:e.actualValue+T.actualValue,variableType:"string"}))):j((e=>({actualValue:T.actualValue,variableType:T.variableType,needsFetching:T.needsFetching}))))}),[T]),o((()=>{t.onChange(y)}),[y]),e(a,{children:[e(V,Object.assign({isVar:/^{{.*}}$/.test(y.actualValue)},{children:[l(p,{id:g,ref:n,skipFocus:!0,textControl:!0,isActive:h,value:y.actualValue,validate:e=>[!0,""],errorMessage:"",placeholder:t.placeHolder||"Add a value",onChangeText:function(e,a){if(t.onlyVariables){const e=(null==a?void 0:a.keyCode)||(null==a?void 0:a.charCode);8!=e&&46!=e||j({actualValue:"",variableType:"string"})}else t.allowMix?j({actualValue:e,variableType:"string"}):j({actualValue:e.replace(/{{.*}}/,""),variableType:"string"})},onReferenceInit:()=>{},onFocus:e=>{var a;m(!0),A(!0),"Search..."!==(null===(a=e.relatedTarget)||void 0===a?void 0:a.placeholder)||x||w(!0)},onBlur:e=>{var a,l,r,i,d,o,s,c;null===(a=t.onBlur)||void 0===a||a.call(t,e,y),"addVar"===(null===(l=e.relatedTarget)||void 0===l?void 0:l.id)||"varList"===(null===(r=e.relatedTarget)||void 0===r?void 0:r.id)||(null===(d=null===(i=e.relatedTarget)||void 0===i?void 0:i.className)||void 0===d?void 0:d.includes("exlualr0"))||(null===(s=null===(o=e.relatedTarget)||void 0===o?void 0:o.className)||void 0===s?void 0:s.includes("sc-dZoequ "))?(n.current&&n.current.focus(),m(!0)):"Search..."===(null===(c=e.relatedTarget)||void 0===c?void 0:c.placeholder)?m(!0):(m(!1),w(!1),A(!1))}}),e("div",Object.assign({style:{display:"flex",flexDirection:"row",justifyContent:"space-between"}},{children:[y.actualValue&&t.showHelp?l("div",Object.assign({style:{marginTop:4}},{children:l(b,{children:`This value is of type ${y.variableType}`})})):l("div",{}),S&&l(v,Object.assign({right:t.addVarBoxRight,id:"addVar",onClick:()=>{w(!x)}},{children:e("div",Object.assign({className:"add"},{children:[l(r,{color:"white"}),l("div",Object.assign({className:"variable"},{children:"Add variable"}))]}))}))]})),!t.showSideVariablePanel&&x&&l(u,{data:t.variablesList,showVariable:!0,setShowVariable:()=>{w(!1)},variableValue:T,setVariableValue:f,placeholder:"",pickerSize:"large",enableVariable:!0,selectWithTypes:!0,onSearchBlur:e=>{var a,l,r,i,d,o;"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 "))?n.current.focus():"Enter here"===(null===(o=e.relatedTarget)||void 0===o?void 0:o.placeholder)?e.relatedTarget.id!==g&&(w(!1),A(!1),m(!1)):(w(!1),A(!1),m(!1))}})]})),t.showSideVariablePanel&&x&&l(c,{zIndex:2e3,data:t.variablesList,showVariable:x,setShowVariable:w,placeholder:"Add a variable",customTrigger:e=>{j(e)}})]})},V=t.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 i,Fragment as t,jsx as o}from"react/jsx-runtime";import a,{useState as n}from"react";import{FileUploaderHelper as r}from"../../helpers/FileUploaderHelper.js";import{BikImageCropper as l}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 d}from"../../input-with-vars/InputWithVariables.js";import{HEADER_TYPES as p}from"../../template-preview/models/TemplateMeta.js";import c from"./EditMediaV2.js";const m=m=>{let{mediaComponent:u,template:f,updateTemplateImageUrl:v,whatsappSpecificPickerMeta:h,variableList:g}=m;var b,j;const[y,C]=n(void 0),[I,M]=n(),[w,x]=n(!1),E=a.createRef(),[V,k]=n(!1),[A,O]=n("");let R;function T(i){return e(this,void 0,void 0,(function*(){if(i){if(i.startsWith("https")){k(!0),O("");const e=yield fetch(i),t=yield e.blob();yield B(t)}}else U()}))}function U(){var e;(null===(e=null==E?void 0:E.current)||void 0===e?void 0:e.click)&&E.current.click()}function B(i){var t;return e(this,void 0,void 0,(function*(){const e=new r;if(i instanceof Blob){const o=e.validate(i);if(o)O(o),x(!1),k(!1);else{const e=u.format===p.IMAGE,o=yield h.uploadMediaFiles({file:i,fileName:y,isImage:e});if(o.success){const[e]=i.type.split("/");v(null!==(t=o.url)&&void 0!==t?t:"","application"===e?p.DOCUMENT:p[e.toUpperCase()])}else O("An unknown technical error occured");k(!1),x(!1)}}else O("An unknown technical error occured"),x(!1),k(!1)}))}return R=u.format===p.IMAGE?"image/png, image/jpeg":u.format===p.VIDEO?"video/mp4":"application/pdf",i(t,{children:[o(s,Object.assign({open:w,zIndex:2e3,onClose:()=>x(!1),width:"480px"},{children:i("div",Object.assign({style:{padding:16}},{children:[o(d,{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,i)=>{i&&T(i.actualValue)}}),o("button",Object.assign({onClick:()=>T()},{children:"upload media"}))]}))})),!!I&&o(l,{aspectRatio:15/8,src:I,onCropComplete:function(i){return e(this,void 0,void 0,(function*(){k(!1),O("");const e=yield fetch(i);B(yield e.blob()).then((()=>{M(void 0)}))}))},onCancel:()=>{k(!1),M("")}}),o("input",{ref:E,style:{display:"none"},type:"file",onChange:function(e){var i;O(""),k(!0);const t=null===(i=e.target.files)||void 0===i?void 0:i[0];if(u.format===p.IMAGE){const e=new FileReader;M(""),C(""),e.onload=()=>{M(e.result),C(null==t?void 0:t.name)},t&&e.readAsDataURL(t)}else B(t)},accept:R}),o(c,{imageName:null!==(j=null===(b=null==u?void 0:u.example)||void 0===b?void 0:b.header_handle)&&void 0!==j?j:[],handleImageChange:U,mediaType:null==u?void 0:u.format,error:A,isLoading:V,setOpenEditMedia:x})]})};export{m 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};
|