@bikdotai/bik-component-library 0.0.388-beta.11 → 0.0.388-beta.13
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 +2 -1
- package/dist/cjs/components/input-with-vars/InputWithVariables.js +3 -3
- 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/EditMediaModal.js +1 -1
- package/dist/cjs/components/template-context-mapper/modalElements/EditMediaV2.d.ts +1 -1
- package/dist/cjs/components/template-context-mapper/modalElements/EditMediaV2.js +1 -1
- package/dist/cjs/components/template-context-mapper/modalElements/EditWhatsAppTemplateMediaV2.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 +2 -1
- package/dist/esm/components/input-with-vars/InputWithVariables.js +2 -2
- 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/EditMediaModal.js +1 -1
- package/dist/esm/components/template-context-mapper/modalElements/EditMediaV2.d.ts +1 -1
- package/dist/esm/components/template-context-mapper/modalElements/EditMediaV2.js +1 -1
- package/dist/esm/components/template-context-mapper/modalElements/EditWhatsAppTemplateMediaV2.js +1 -1
- package/dist/esm/components/template-context-mapper/modalElements/VariableConnectorWhatsApp.js +1 -1
- package/package.json +1 -1
|
@@ -3,7 +3,7 @@ import { Variable } from '../add-variableV2/AddVariableV2';
|
|
|
3
3
|
import { SelectedVariable } from '../add-variableV2/types';
|
|
4
4
|
interface InputWithVariablesProps {
|
|
5
5
|
variablesList: any;
|
|
6
|
-
onChange: (val: SelectedVariable
|
|
6
|
+
onChange: (val: SelectedVariable) => void;
|
|
7
7
|
onBlur?: (e: Event, val?: SelectedVariable | Variable) => void;
|
|
8
8
|
addVarBoxRight: string;
|
|
9
9
|
allowMix: boolean;
|
|
@@ -14,6 +14,7 @@ interface InputWithVariablesProps {
|
|
|
14
14
|
placeHolder?: string;
|
|
15
15
|
showAddButton?: boolean;
|
|
16
16
|
errorMessage?: string;
|
|
17
|
+
showSideModal?: boolean;
|
|
17
18
|
}
|
|
18
19
|
export declare const InputWithVariables: React.FC<InputWithVariablesProps>;
|
|
19
20
|
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"),d=require("
|
|
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"),d=require("../../constants/Theme.js"),t=require("../add-variableV2/AddVariableBox.styled.js"),s=require("../add-variableV2/AddVariableV2.js"),u=require("../input/Input.js"),o=require("../TypographyStyle.js"),n=require("../add-variableV2/AddVariableV2SideModal.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: 16px;
|
|
3
3
|
input {
|
|
4
|
-
color: ${e=>e.isVar?
|
|
4
|
+
color: ${e=>e.isVar?d.COLORS.stroke.brand:"black"};
|
|
5
5
|
}
|
|
6
|
-
`;exports.InputWithVariables=r=>{let{addVarBoxRight:
|
|
6
|
+
`;exports.InputWithVariables=r=>{let{addVarBoxRight:d,allowMix:c,onChange:b,prevVariable:g,variablesList:V,onBlur:h,onlyVariables:p,placeHolder:T,showAddButton:j=!0,showHelp:x,showSideVariablePanel:y,errorMessage:f,showSideModal:S}=r;const m=l.useRef(null),[q,w]=l.useState(!1),[A]=l.useState(i.v4()),[O,C]=l.useState(),[B,N]=l.useState(g),[M,k]=l.useState(!1),[I,F]=l.useState(!1),[L,E]=l.useState(f||"");return l.useEffect((()=>{O&&O.actualValue&&N(c?e=>({actualValue:e.actualValue+O.actualValue,variableType:"string"}):e=>({actualValue:O.actualValue,variableType:O.variableType,needsFetching:O.needsFetching}))}),[O]),l.useEffect((()=>{b(B)}),[B]),e.jsxs(e.Fragment,{children:[e.jsxs(v,Object.assign({isVar:/^{{.*}}$/.test(B.actualValue)},{children:[e.jsx(u.Input,{id:A,ref:m,skipFocus:!0,textControl:!0,isActive:q,value:B.actualValue,validate:e=>[!0,""],errorMessage:L,placeholder:T||"Add a value",onChangeText:(e,a)=>{if(E(""),p){const e=(null==a?void 0:a.keyCode)||(null==a?void 0:a.charCode);8!==e&&46!==e||N({actualValue:"",variableType:"string"})}else N(c?{actualValue:e,variableType:"string"}:{actualValue:e.replace(/{{.*}}/,""),variableType:"string"})},onReferenceInit:()=>{},onFocus:e=>{var a;w(!0),F(!0),"Search..."!==(null===(a=e.relatedTarget)||void 0===a?void 0:a.placeholder)||M||k(!0)},onBlur:e=>{var a,l,r,i,d,t,s;null==h||h(e,B),"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 "))?(m.current&&m.current.focus(),w(!0)):"Search..."===(null===(s=e.relatedTarget)||void 0===s?void 0:s.placeholder)?w(!0):(w(!1),k(!1),F(!1))}}),e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"row",justifyContent:"space-between"}},{children:[B.actualValue&&x&&e.jsx("div",Object.assign({style:{marginTop:4}},{children:e.jsx(o.BodyCaption,{children:`This value is of type ${B.variableType}`})})),j&&I&&e.jsx("div",Object.assign({style:{marginTop:f?"-24px":"0px"}},{children:e.jsx(t.AddVariableStyled,Object.assign({right:d,id:"addVar",onClick:()=>{k(!M)}},{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&&M&&e.jsx(s.AddVariableV2,{data:V,showVariable:!0,setShowVariable:()=>{k(!1)},variableValue:O,setVariableValue:C,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 "))?m.current.focus():"Enter here"===(null===(t=e.relatedTarget)||void 0===t?void 0:t.placeholder)?e.relatedTarget.id!==A&&(k(!1),F(!1),w(!1)):(k(!1),F(!1),w(!1))}})]})),y&&M&&e.jsx(n.AddVariableV2SideModal,{zIndex:2e3,data:null!=V?V:[],showVariable:M,setShowVariable:()=>{k(!1)},placeholder:"Add a variable",customTrigger:e=>{C({actualValue:e.actualValue,variableType:"string"}),N(e)},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 "))?m.current.focus():"Enter here"===(null===(t=e.relatedTarget)||void 0===t?void 0:t.placeholder)?e.relatedTarget.id!==A&&(k(!1),F(!1),w(!1)):(k(!1),F(!1),w(!1))}})]})};
|
|
@@ -28,4 +28,4 @@ export interface TemplateContextMapperProps {
|
|
|
28
28
|
showSampleValues?: boolean;
|
|
29
29
|
disableEditVariable?: boolean;
|
|
30
30
|
}
|
|
31
|
-
export declare const TemplateContextMapper: ({ selectedTemplate, closeDialog, showVariableMapping, channel, htmlContent, templateVariables, onTemplateSelect, globalPlaceholders, showOnlyContent, whatsappSpecificPickerMeta, zIndex, showVariableModal, variableList, discountCode, setDiscountCode, onBackPress, enabledCustomText, variableListForImage, showSampleValues,
|
|
31
|
+
export declare const TemplateContextMapper: ({ selectedTemplate, closeDialog, showVariableMapping, channel, htmlContent, templateVariables, onTemplateSelect, globalPlaceholders, showOnlyContent, whatsappSpecificPickerMeta, zIndex, showVariableModal, variableList, discountCode, setDiscountCode, onBackPress, enabledCustomText, disableEditVariable, variableListForImage, showSampleValues, }: TemplateContextMapperProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -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"),s=require("../template-preview/models/Channels.js"),i=require("./context/templateModalContext.js"),o=require("./modalElements/Footer.js"),r=require("./modalElements/TemplateSelectModalContent.js"),n=require("./utils/convertPlaceholdersToBikDropdown.js");exports.TemplateContextMapper=d=>{let{selectedTemplate:u,closeDialog:c,showVariableMapping:p,channel:m,htmlContent:h,templateVariables:b,onTemplateSelect:g,globalPlaceholders:v,showOnlyContent:C,whatsappSpecificPickerMeta:S,zIndex:T,showVariableModal:E,variableList:j,discountCode:x,setDiscountCode:M,onBackPress:P,enabledCustomText:L,
|
|
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"),s=require("../template-preview/models/Channels.js"),i=require("./context/templateModalContext.js"),o=require("./modalElements/Footer.js"),r=require("./modalElements/TemplateSelectModalContent.js"),n=require("./utils/convertPlaceholdersToBikDropdown.js");exports.TemplateContextMapper=d=>{let{selectedTemplate:u,closeDialog:c,showVariableMapping:p,channel:m,htmlContent:h,templateVariables:b,onTemplateSelect:g,globalPlaceholders:v,showOnlyContent:C,whatsappSpecificPickerMeta:S,zIndex:T,showVariableModal:E,variableList:j,discountCode:x,setDiscountCode:M,onBackPress:P,enabledCustomText:L,disableEditVariable:w,variableListForImage:f,showSampleValues:V}=d;var q,y;t.useEffect((()=>{k(h)}),[h]);const[A,N]=t.useState(m===s.CHANNEL_TYPE.EMAIL?"desktop":"mobile"),[I,k]=t.useState(h),[D,_]=t.useState(!1),[H,O]=t.useState(u),[F,B]=t.useState(null!=b?b:[]),[Y,z]=t.useState(!1);const $=t.useMemo((()=>n.convertPlaceholdersToBikDropdown(v)),[v]);return e.jsx(i.TemplateModalContext.Provider,Object.assign({value:{template:H,setTemplate:O,device:A,setDevice:N,display_content:I,setDisplayContent:k,originalVariableList:F,setOriginalVariableList:B,isError:D,setIsError:_,channel:m,globalNormalizedPlaceholders:$,templateSelectionTriggered:Y,setTemplateSelectionTriggered:z,enabledCustomText:L,disableEditVariable:w}},{children:C?e.jsx(r.default,{channel:s.CHANNEL_TYPE.EMAIL,hideHeader:!0}):e.jsxs(a.StyledModal,Object.assign({zIndex:T,centralContainerStyles:{width:m===s.CHANNEL_TYPE.EMAIL&&p?1e3:650},open:!0,onClose:()=>{null==c||c()},headingTitle:null==H?void 0:H.label,headingSubtitle:m===s.CHANNEL_TYPE.WHATSAPP?`${l.default.capitaliseFirstLetterOfString(null!==(q=null==H?void 0:H.category)&&void 0!==q?q:"")} • ${null!==(y=null==H?void 0:H.templateCategory)&&void 0!==y?y:""}`:"",onBackPress:()=>{null==P||P()}},{children:[e.jsx(r.default,{showSampleValues:V,showVariableMapping:p,channel:m,whatsappSpecificPickerMeta:S,showVariableModal:E,variableList:j,discountCode:x,setDiscountCode:M,variableListForImage:f&&(null==f?void 0:f.length)>0?f:j}),g?e.jsx(o.default,{onSelect:function(){const e=null==g?void 0:g(H,F,null!=I?I:"");e?_(!!e):z(!0)}}):e.jsx(e.Fragment,{})]}))}))};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../button/Button.js"),s=require("../../input-with-vars/InputWithVariables.js"),a=require("../../modals/styledModal.js");require("../../template-preview/TemplatePreview.js"),require("../../template-preview/WhatsApp/WhatsAppLikePreview.js"),require("../../template-preview/WhatsApp/WhatsAppLikePreviewV2.js");var i=require("../../../constants/Theme.js"),r=require("../../template-preview/models/TemplateMeta.js"),l=require("../../TypographyStyle.js"),d=require("../../../assets/icons/file.svg.js"),o=require("../../../assets/icons/filePdf.svg.js"),n=require("../../../assets/icons/image.svg.js"),c=require("../../../assets/icons/upload.svg.js");exports.default=u=>{let{setOpenEditMedia:p,mediaComponentFormat:h,variableListForImage:j,openEditMedia:g,uploadMedia:x}=u;return e.jsx(a.StyledModal,Object.assign({open:g,zIndex:2e3,onClose:()=>p(!1),width:"440px"},{children:e.jsxs("div",Object.assign({style:{padding:24,borderRadius:4}},{children:[e.jsx(l.TitleMedium,Object.assign({style:{marginBottom:16}},{children:"Update media"})),e.jsxs("div",Object.assign({style:{padding:24,border:`1px dashed ${i.DEFAULT_THEME.colorsV2.stroke.primary}`,backgroundColor:i.DEFAULT_THEME.colorsV2.surface.subdued}},{children:[e.jsxs("div",Object.assign({style:{marginBottom:24,display:"flex",justifyContent:"center",flexDirection:"column",alignItems:"center",gap:16}},{children:[e.jsx("div",Object.assign({style:{height:80,width:80,borderRadius:"100%",display:"flex",alignItems:"center",justifyContent:"center",backgroundColor:i.DEFAULT_THEME.colorsV2.background.base}},{children:h===r.HEADER_TYPES.IMAGE?e.jsx(n.default,{width:40,height:40}):h===r.HEADER_TYPES.VIDEO?e.jsx(d.default,{width:40,height:40}):e.jsx(o.default,{width:40,height:40})})),e.jsx(l.TitleMedium,{children:h===r.HEADER_TYPES.IMAGE?"Upload an image":h===r.HEADER_TYPES.VIDEO?"Upload a video":"Upload a document"}),e.jsx(l.BodySecondary,{children:h===r.HEADER_TYPES.IMAGE?"JPEG/ PNG format • Max 5MB":h===r.HEADER_TYPES.VIDEO?"Mp4 format video • Max
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../button/Button.js"),s=require("../../input-with-vars/InputWithVariables.js"),a=require("../../modals/styledModal.js");require("../../template-preview/TemplatePreview.js"),require("../../template-preview/WhatsApp/WhatsAppLikePreview.js"),require("../../template-preview/WhatsApp/WhatsAppLikePreviewV2.js");var i=require("../../../constants/Theme.js"),r=require("../../template-preview/models/TemplateMeta.js"),l=require("../../TypographyStyle.js"),d=require("../../../assets/icons/file.svg.js"),o=require("../../../assets/icons/filePdf.svg.js"),n=require("../../../assets/icons/image.svg.js"),c=require("../../../assets/icons/upload.svg.js");exports.default=u=>{let{setOpenEditMedia:p,mediaComponentFormat:h,variableListForImage:j,openEditMedia:g,uploadMedia:x}=u;return e.jsx(a.StyledModal,Object.assign({open:g,zIndex:2e3,onClose:()=>p(!1),width:"440px"},{children:e.jsxs("div",Object.assign({style:{padding:24,borderRadius:4}},{children:[e.jsx(l.TitleMedium,Object.assign({style:{marginBottom:16}},{children:"Update media"})),e.jsxs("div",Object.assign({style:{padding:24,border:`1px dashed ${i.DEFAULT_THEME.colorsV2.stroke.primary}`,backgroundColor:i.DEFAULT_THEME.colorsV2.surface.subdued}},{children:[e.jsxs("div",Object.assign({style:{marginBottom:24,display:"flex",justifyContent:"center",flexDirection:"column",alignItems:"center",gap:16}},{children:[e.jsx("div",Object.assign({style:{height:80,width:80,borderRadius:"100%",display:"flex",alignItems:"center",justifyContent:"center",backgroundColor:i.DEFAULT_THEME.colorsV2.background.base}},{children:h===r.HEADER_TYPES.IMAGE?e.jsx(n.default,{width:40,height:40}):h===r.HEADER_TYPES.VIDEO?e.jsx(d.default,{width:40,height:40}):e.jsx(o.default,{width:40,height:40})})),e.jsx(l.TitleMedium,{children:h===r.HEADER_TYPES.IMAGE?"Upload an image":h===r.HEADER_TYPES.VIDEO?"Upload a video":"Upload a document"}),e.jsx(l.BodySecondary,{children:h===r.HEADER_TYPES.IMAGE?"JPEG/ PNG format • Max 5MB":h===r.HEADER_TYPES.VIDEO?"Mp4 format video • Max 16MB":"Pdf format a document • Max 100MB"})]})),e.jsxs("div",Object.assign({style:{marginBottom:16}},{children:[e.jsx(l.BodyRegular,{children:"Media"}),e.jsx(s.InputWithVariables,{addVarBoxRight:"46px",allowMix:!1,onChange:e=>{},prevVariable:{actualValue:"",variableType:"string"},variablesList:j,showSideVariablePanel:!0,placeHolder:"Enter URL or add variable...",onBlur:(e,t)=>{t&&t.actualValue&&x(t.actualValue)},showAddButton:h===r.HEADER_TYPES.IMAGE})]})),e.jsxs("div",Object.assign({style:{display:"flex",alignItems:"center",justifyContent:"space-between",gap:4}},{children:[e.jsx("hr",{style:{height:"2px",flex:.5,backgroundColor:"black"}}),e.jsx(l.BodyCaption,Object.assign({style:{flex:1}},{children:"Or upload media from device"})),e.jsx("hr",{style:{height:"2px",flex:.5,backgroundColor:"black"}})]})),e.jsx("div",Object.assign({style:{display:"flex",width:"100%"}},{children:e.jsx(t.Button,{matchParentWidth:!0,buttonText:"Upload",buttonType:"secondary",LeadingIcon:c.default,onClick:()=>x()})}))]}))]}))}))};
|
|
@@ -8,8 +8,8 @@ export interface EditMediaV2Props {
|
|
|
8
8
|
isLoading?: boolean;
|
|
9
9
|
mediaType?: HEADER_TYPES;
|
|
10
10
|
handleImageChange?: () => void;
|
|
11
|
-
setOpenEditMedia?: React.Dispatch<React.SetStateAction<boolean>>;
|
|
12
11
|
disableEditVariable?: boolean;
|
|
12
|
+
setOpenEditMedia?: React.Dispatch<React.SetStateAction<boolean>>;
|
|
13
13
|
}
|
|
14
14
|
declare const EditMediaV2: (props: EditMediaV2Props) => import("react/jsx-runtime").JSX.Element;
|
|
15
15
|
export default EditMediaV2;
|
|
@@ -5,4 +5,4 @@
|
|
|
5
5
|
height: 24px;
|
|
6
6
|
border-left: 1px solid ${c.COLORS.stroke.primary};
|
|
7
7
|
cursor: pointer;
|
|
8
|
-
`;exports.default=n=>{const{imageName:h,error:j,isLoading:p,mediaType:x,handleImageChange:O,
|
|
8
|
+
`;exports.default=n=>{const{imageName:h,error:j,isLoading:p,mediaType:x,handleImageChange:O,disableEditVariable:y,selectedVariable:m,setOpenEditMedia:f}=n,v=null==h?void 0:h[0].split("/"),C=null==v?void 0:v[v.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:m||a.default.toCapitilize(null==x?void 0:x.toLowerCase())||C}))})),!!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}))]})),!y&&!j&&!p&&e.jsx(g,Object.assign({onClick:()=>null==f?void 0:f(!0),onKeyDown:()=>null==f?void 0:f(!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.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../../_virtual/_tslib.js"),t=require("react/jsx-runtime"),i=require("react"),a=require("../../helpers/FileUploaderHelper.js"),n=require("../../image-cropper/BikImageCropper.js");require("../../image-compress/ImageCompress.js"),require("../../states/StateComponent.js"),require("../../../constants/zindex.js"),require("../../modals/styledModal.js"),require("../../spinner/Spinner.js");var o=require("../../template-preview/models/TemplateMeta.js"),r=require("../context/templateModalContext.js"),l=require("./EditMediaModal.js"),s=require("./EditMediaV2.js");function d(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var c=d(i);exports.default=d=>{let{mediaComponent:p,template:u,updateTemplateImageUrl:m,whatsappSpecificPickerMeta:f,variableListForImage:v}=d;var E,g,j;const{disableEditVariable:h}=r.useTemplateModalContext(),[b,M]=i.useState(void 0),[_,x]=i.useState(),[y,A]=i.useState(),[C,S]=i.useState(!1),T=c.default.createRef(),[I,q]=i.useState(!1),[R,O]=i.useState(""),{template:w,setTemplate:D}=r.useTemplateModalContext();let H;function k(){var e;(null===(e=null==T?void 0:T.current)||void 0===e?void 0:e.click)&&T.current.click()}function P(t){var i;return e.__awaiter(this,void 0,void 0,(function*(){const e=new a.FileUploaderHelper;if(t instanceof Blob){const a=e.validate(t);if(a)O(a),q(!1);else{const e=p.format===o.HEADER_TYPES.IMAGE,a=yield f.uploadMediaFiles({file:t,fileName:b,isImage:e});if(a.success){const[e]=t.type.split("/");m(null!==(i=a.url)&&void 0!==i?i:"","application"===e?o.HEADER_TYPES.DOCUMENT:o.HEADER_TYPES[e.toUpperCase()])}else O("An unknown technical error occured");q(!1)}}else O("An unknown technical error occured"),q(!1)}))}return H=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.default,{mediaComponentFormat:null!==(E=p.format)&&void 0!==E?E:o.HEADER_TYPES.IMAGE,uploadMedia:function(t){var i;return e.__awaiter(this,void 0,void 0,(function*(){if(O(""),A(""),S(!1),t)if(t.startsWith("https"))try{q(!0);const e=yield fetch(t),i=yield e.blob();yield P(i)}catch(e){O("An unknown technical error occurred")}else if(/^{{.*}}$/.test(t)){A(t);const e=Object.assign({},w);if(e.components){const t=null===(i=null==e?void 0:e.components)||void 0===i?void 0:i.findIndex((e=>{if("HEADER"===e.type&&"NONE"!==e.format&&"TEXT"!==e.format)return!0}));if(void 0!==t&&t>-1&&(null==e?void 0:e.components[t])){const i=Object.assign(Object.assign({},e.components[t]),{format:p.format,example:{header_handle:["https://jkfenner.com/wp-content/uploads/2019/11/default.jpg"]}}),a=[...e.components];a[t]=i,e.components=a}}e.mapping&&(e.mapping=Object.assign(Object.assign({},e.mapping),{header:[t]})),q(!1),null==D||D(Object.assign({},e))}else q(!1),O("Invalid URL or variable");else k()}))},variableListForImage:v||[],setOpenEditMedia:S,openEditMedia:C}),!!_&&t.jsx(n.BikImageCropper,{aspectRatio:15/8,src:_,onCropComplete:function(t){return e.__awaiter(this,void 0,void 0,(function*(){q(!1),O("");const e=yield fetch(t);P(yield e.blob()).then((()=>{x(void 0)}))}))},onCancel:()=>{q(!1),x("")}}),t.jsx("input",{ref:T,style:{display:"none"},type:"file",onChange:function(e){var t;O(""),q(!0);const i=null===(t=e.target.files)||void 0===t?void 0:t[0];if(p.format===o.HEADER_TYPES.IMAGE){const e=new FileReader;x(""),M(""),e.onload=()=>{x(e.result),M(null==i?void 0:i.name)},i&&e.readAsDataURL(i)}else P(i)},accept:H}),t.jsx(s.default,{imageName:null!==(j=null===(g=null==p?void 0:p.example)||void 0===g?void 0:g.header_handle)&&void 0!==j?j:[],handleImageChange:k,mediaType:null==p?void 0:p.format,error:R,isLoading:I,setOpenEditMedia:S,selectedVariable:y,disableEditVariable:h})]})};
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../../_virtual/_tslib.js"),t=require("react/jsx-runtime"),i=require("react"),a=require("../../helpers/FileUploaderHelper.js"),n=require("../../image-cropper/BikImageCropper.js");require("../../image-compress/ImageCompress.js"),require("../../states/StateComponent.js"),require("../../../constants/zindex.js"),require("../../modals/styledModal.js"),require("../../spinner/Spinner.js");var o=require("../../template-preview/models/TemplateMeta.js"),r=require("../context/templateModalContext.js"),l=require("./EditMediaModal.js"),s=require("./EditMediaV2.js");function d(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var c=d(i);exports.default=d=>{let{mediaComponent:p,template:u,updateTemplateImageUrl:m,whatsappSpecificPickerMeta:f,variableListForImage:v}=d;var E,g,j;const{disableEditVariable:h}=r.useTemplateModalContext(),[b,M]=i.useState(void 0),[_,x]=i.useState(),[y,A]=i.useState(),[C,S]=i.useState(!1),T=c.default.createRef(),[I,q]=i.useState(!1),[R,O]=i.useState(""),{template:w,setTemplate:D}=r.useTemplateModalContext();let H;function k(){var e;(null===(e=null==T?void 0:T.current)||void 0===e?void 0:e.click)&&T.current.click()}function P(t){var i;return e.__awaiter(this,void 0,void 0,(function*(){const e=new a.FileUploaderHelper;if(t instanceof Blob){const a=e.validate(t);if(a)O(a),q(!1);else{const e=p.format===o.HEADER_TYPES.IMAGE,a=yield f.uploadMediaFiles({file:t,fileName:b,isImage:e});if(a.success){const[e]=t.type.split("/");m(null!==(i=a.url)&&void 0!==i?i:"","application"===e?o.HEADER_TYPES.DOCUMENT:o.HEADER_TYPES[e.toUpperCase()])}else O("An unknown technical error occured");q(!1)}}else O("An unknown technical error occured"),q(!1)}))}return console.log("vj: ignore",h),H=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.default,{mediaComponentFormat:null!==(E=p.format)&&void 0!==E?E:o.HEADER_TYPES.IMAGE,uploadMedia:function(t){var i;return e.__awaiter(this,void 0,void 0,(function*(){if(O(""),A(""),S(!1),t)if(t.startsWith("https"))try{q(!0);const e=yield fetch(t),i=yield e.blob();yield P(i)}catch(e){O("An unknown technical error occurred")}else if(/^{{.*}}$/.test(t)){A(t);const e=Object.assign({},w);if(e.components){const t=null===(i=null==e?void 0:e.components)||void 0===i?void 0:i.findIndex((e=>{if("HEADER"===e.type&&"NONE"!==e.format&&"TEXT"!==e.format)return!0}));if(void 0!==t&&t>-1&&(null==e?void 0:e.components[t])){const i=Object.assign(Object.assign({},e.components[t]),{format:p.format,example:{header_handle:["https://jkfenner.com/wp-content/uploads/2019/11/default.jpg"]}}),a=[...e.components];a[t]=i,e.components=a}}e.mapping&&(e.mapping=Object.assign(Object.assign({},e.mapping),{header:[t]})),q(!1),null==D||D(Object.assign({},e))}else q(!1),O("Invalid URL or variable");else k()}))},variableListForImage:v||[],setOpenEditMedia:S,openEditMedia:C}),!!_&&t.jsx(n.BikImageCropper,{aspectRatio:15/8,src:_,onCropComplete:function(t){return e.__awaiter(this,void 0,void 0,(function*(){q(!1),O("");const e=yield fetch(t);P(yield e.blob()).then((()=>{x(void 0)}))}))},onCancel:()=>{q(!1),x("")}}),t.jsx("input",{ref:T,style:{display:"none"},type:"file",onChange:function(e){var t;O(""),q(!0);const i=null===(t=e.target.files)||void 0===t?void 0:t[0];if(p.format===o.HEADER_TYPES.IMAGE){const e=new FileReader;x(""),M(""),e.onload=()=>{x(e.result),M(null==i?void 0:i.name)},i&&e.readAsDataURL(i)}else P(i)},accept:H}),t.jsx(s.default,{imageName:null!==(j=null===(g=null==p?void 0:p.example)||void 0===g?void 0:g.header_handle)&&void 0!==j?j:[],handleImageChange:k,mediaType:null==p?void 0:p.format,error:R,isLoading:I,setOpenEditMedia:S,selectedVariable:y,disableEditVariable:h})]})};
|
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:d,showVariableModal:o,variableList:
|
|
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:d,showVariableModal:o,variableList:p}=s;var c,b;const{originalVariableList:x,disableEditVariable:u}=t.useTemplateModalContext();return"BODY"===n.type?e.jsx("div",{children:null===(c=null==x?void 0:x.body)||void 0===c?void 0:c.map(((t,s)=>u||!t.isEditableVariable?e.jsxs("div",Object.assign({style:{margin:"16px 8px"}},{children:[e.jsxs(i.BodySecondary,Object.assign({style:{color:r.COLORS.content.primary}},{children:["HEADER"===d?"Header":""," Locked variable ",s+1]})),e.jsx(a.Input,{state:"disabled",placeholder:t.variableName,onChangeText:()=>{}})]}),s):e.jsx(l.default,{index:s,variable:t,showVariableModal:o,variableList:p,componentType:n.type},`${s}-${t.index}`)))}):"HEADER"===n.type?e.jsx("div",{children:null===(b=null==x?void 0:x.header)||void 0===b?void 0:b.map(((t,s)=>t.isEditableVariable?e.jsx(l.default,{index:s,variable:t,showVariableModal:o,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"===d?"Header":""," Locked variable ",s+1]})),e.jsx(a.Input,{state:"disabled",placeholder:t.variableName,onChangeText:()=>{}})]}),s)))}):e.jsx(e.Fragment,{})};
|
|
@@ -3,7 +3,7 @@ import { Variable } from '../add-variableV2/AddVariableV2';
|
|
|
3
3
|
import { SelectedVariable } from '../add-variableV2/types';
|
|
4
4
|
interface InputWithVariablesProps {
|
|
5
5
|
variablesList: any;
|
|
6
|
-
onChange: (val: SelectedVariable
|
|
6
|
+
onChange: (val: SelectedVariable) => void;
|
|
7
7
|
onBlur?: (e: Event, val?: SelectedVariable | Variable) => void;
|
|
8
8
|
addVarBoxRight: string;
|
|
9
9
|
allowMix: boolean;
|
|
@@ -14,6 +14,7 @@ interface InputWithVariablesProps {
|
|
|
14
14
|
placeHolder?: string;
|
|
15
15
|
showAddButton?: boolean;
|
|
16
16
|
errorMessage?: string;
|
|
17
|
+
showSideModal?: boolean;
|
|
17
18
|
}
|
|
18
19
|
export declare const InputWithVariables: React.FC<InputWithVariablesProps>;
|
|
19
20
|
export {};
|
|
@@ -1,6 +1,6 @@
|
|
|
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
|
|
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{AddVariableStyled as u}from"../add-variableV2/AddVariableBox.styled.js";import{AddVariableV2 as c}from"../add-variableV2/AddVariableV2.js";import{Input as v}from"../input/Input.js";import{BodyCaption as p}from"../TypographyStyle.js";import{AddVariableV2SideModal as g}from"../add-variableV2/AddVariableV2SideModal.js";const h=t=>{let{addVarBoxRight:n,allowMix:h,onChange:m,prevVariable:V,variablesList:T,onBlur:y,onlyVariables:f,placeHolder:j,showAddButton:x=!0,showHelp:w,showSideVariablePanel:S,errorMessage:A,showSideModal:N}=t;const B=i(null),[C,O]=d(!1),[k]=d(s()),[M,F]=d(),[I,L]=d(V),[q,Z]=d(!1),[$,z]=d(!1),[E,H]=d(A||"");return o((()=>{M&&M.actualValue&&L(h?e=>({actualValue:e.actualValue+M.actualValue,variableType:"string"}):e=>({actualValue:M.actualValue,variableType:M.variableType,needsFetching:M.needsFetching}))}),[M]),o((()=>{m(I)}),[I]),e(a,{children:[e(b,Object.assign({isVar:/^{{.*}}$/.test(I.actualValue)},{children:[l(v,{id:k,ref:B,skipFocus:!0,textControl:!0,isActive:C,value:I.actualValue,validate:e=>[!0,""],errorMessage:E,placeholder:j||"Add a value",onChangeText:(e,a)=>{if(H(""),f){const e=(null==a?void 0:a.keyCode)||(null==a?void 0:a.charCode);8!==e&&46!==e||L({actualValue:"",variableType:"string"})}else L(h?{actualValue:e,variableType:"string"}:{actualValue:e.replace(/{{.*}}/,""),variableType:"string"})},onReferenceInit:()=>{},onFocus:e=>{var a;O(!0),z(!0),"Search..."!==(null===(a=e.relatedTarget)||void 0===a?void 0:a.placeholder)||q||Z(!0)},onBlur:e=>{var a,l,r,i,d,o,t;null==y||y(e,I),"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===(o=null===(d=e.relatedTarget)||void 0===d?void 0:d.className)||void 0===o?void 0:o.includes("sc-dZoequ "))?(B.current&&B.current.focus(),O(!0)):"Search..."===(null===(t=e.relatedTarget)||void 0===t?void 0:t.placeholder)?O(!0):(O(!1),Z(!1),z(!1))}}),e("div",Object.assign({style:{display:"flex",flexDirection:"row",justifyContent:"space-between"}},{children:[I.actualValue&&w&&l("div",Object.assign({style:{marginTop:4}},{children:l(p,{children:`This value is of type ${I.variableType}`})})),x&&$&&l("div",Object.assign({style:{marginTop:A?"-24px":"0px"}},{children:l(u,Object.assign({right:n,id:"addVar",onClick:()=>{Z(!q)}},{children:e("div",Object.assign({className:"add"},{children:[l(r,{color:"white"}),l("div",Object.assign({className:"variable"},{children:"Add variable"}))]}))}))}))]})),!S&&q&&l(c,{data:T,showVariable:!0,setShowVariable:()=>{Z(!1)},variableValue:M,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 "))?B.current.focus():"Enter here"===(null===(o=e.relatedTarget)||void 0===o?void 0:o.placeholder)?e.relatedTarget.id!==k&&(Z(!1),z(!1),O(!1)):(Z(!1),z(!1),O(!1))}})]})),S&&q&&l(g,{zIndex:2e3,data:null!=T?T:[],showVariable:q,setShowVariable:()=>{Z(!1)},placeholder:"Add a variable",customTrigger:e=>{F({actualValue:e.actualValue,variableType:"string"}),L(e)},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 "))?B.current.focus():"Enter here"===(null===(o=e.relatedTarget)||void 0===o?void 0:o.placeholder)?e.relatedTarget.id!==k&&(Z(!1),z(!1),O(!1)):(Z(!1),z(!1),O(!1))}})]})},b=t.div`
|
|
2
2
|
margin-bottom: 16px;
|
|
3
3
|
input {
|
|
4
|
-
color: ${e=>e.isVar?
|
|
4
|
+
color: ${e=>e.isVar?n.stroke.brand:"black"};
|
|
5
5
|
}
|
|
6
6
|
`;export{h as InputWithVariables};
|
|
@@ -28,4 +28,4 @@ export interface TemplateContextMapperProps {
|
|
|
28
28
|
showSampleValues?: boolean;
|
|
29
29
|
disableEditVariable?: boolean;
|
|
30
30
|
}
|
|
31
|
-
export declare const TemplateContextMapper: ({ selectedTemplate, closeDialog, showVariableMapping, channel, htmlContent, templateVariables, onTemplateSelect, globalPlaceholders, showOnlyContent, whatsappSpecificPickerMeta, zIndex, showVariableModal, variableList, discountCode, setDiscountCode, onBackPress, enabledCustomText, variableListForImage, showSampleValues,
|
|
31
|
+
export declare const TemplateContextMapper: ({ selectedTemplate, closeDialog, showVariableMapping, channel, htmlContent, templateVariables, onTemplateSelect, globalPlaceholders, showOnlyContent, whatsappSpecificPickerMeta, zIndex, showVariableModal, variableList, discountCode, setDiscountCode, onBackPress, enabledCustomText, disableEditVariable, variableListForImage, showSampleValues, }: TemplateContextMapperProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -1 +1 @@
|
|
|
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 n from"../../utils/StringUtils.js";import{StyledModal as r}from"../modals/styledModal.js";import{CHANNEL_TYPE as s}from"../template-preview/models/Channels.js";import{TemplateModalContext as d}from"./context/templateModalContext.js";import c from"./modalElements/Footer.js";import m from"./modalElements/TemplateSelectModalContent.js";import{convertPlaceholdersToBikDropdown as p}from"./utils/convertPlaceholdersToBikDropdown.js";const u=u=>{let{selectedTemplate:h,closeDialog:b,showVariableMapping:g,channel:v,htmlContent:C,templateVariables:S,onTemplateSelect:f,globalPlaceholders:w,showOnlyContent:M,whatsappSpecificPickerMeta:T,zIndex:V,showVariableModal:j,variableList:L,discountCode:P,setDiscountCode:E,onBackPress:x,enabledCustomText:I,
|
|
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 n from"../../utils/StringUtils.js";import{StyledModal as r}from"../modals/styledModal.js";import{CHANNEL_TYPE as s}from"../template-preview/models/Channels.js";import{TemplateModalContext as d}from"./context/templateModalContext.js";import c from"./modalElements/Footer.js";import m from"./modalElements/TemplateSelectModalContent.js";import{convertPlaceholdersToBikDropdown as p}from"./utils/convertPlaceholdersToBikDropdown.js";const u=u=>{let{selectedTemplate:h,closeDialog:b,showVariableMapping:g,channel:v,htmlContent:C,templateVariables:S,onTemplateSelect:f,globalPlaceholders:w,showOnlyContent:M,whatsappSpecificPickerMeta:T,zIndex:V,showVariableModal:j,variableList:L,discountCode:P,setDiscountCode:E,onBackPress:x,enabledCustomText:I,disableEditVariable:y,variableListForImage:k,showSampleValues:D}=u;var A,O;o((()=>{H(C)}),[C]);const[F,z]=a(v===s.EMAIL?"desktop":"mobile"),[B,H]=a(C),[$,N]=a(!1),[U,W]=a(h),[_,q]=a(null!=S?S:[]),[G,J]=a(!1);const K=i((()=>p(w)),[w]);return e(d.Provider,Object.assign({value:{template:U,setTemplate:W,device:F,setDevice:z,display_content:B,setDisplayContent:H,originalVariableList:_,setOriginalVariableList:q,isError:$,setIsError:N,channel:v,globalNormalizedPlaceholders:K,templateSelectionTriggered:G,setTemplateSelectionTriggered:J,enabledCustomText:I,disableEditVariable:y}},{children:M?e(m,{channel:s.EMAIL,hideHeader:!0}):l(r,Object.assign({zIndex:V,centralContainerStyles:{width:v===s.EMAIL&&g?1e3:650},open:!0,onClose:()=>{null==b||b()},headingTitle:null==U?void 0:U.label,headingSubtitle:v===s.WHATSAPP?`${n.capitaliseFirstLetterOfString(null!==(A=null==U?void 0:U.category)&&void 0!==A?A:"")} • ${null!==(O=null==U?void 0:U.templateCategory)&&void 0!==O?O:""}`:"",onBackPress:()=>{null==x||x()}},{children:[e(m,{showSampleValues:D,showVariableMapping:g,channel:v,whatsappSpecificPickerMeta:T,showVariableModal:j,variableList:L,discountCode:P,setDiscountCode:E,variableListForImage:k&&(null==k?void 0:k.length)>0?k:L}),f?e(c,{onSelect:function(){const e=null==f?void 0:f(U,_,null!=B?B:"");e?N(!!e):J(!0)}}):e(t,{})]}))}))};export{u as TemplateContextMapper};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsx as e,jsxs as t}from"react/jsx-runtime";import{Button as i}from"../../button/Button.js";import{InputWithVariables as a}from"../../input-with-vars/InputWithVariables.js";import{StyledModal as o}from"../../modals/styledModal.js";import"../../template-preview/TemplatePreview.js";import"../../template-preview/WhatsApp/WhatsAppLikePreview.js";import"../../template-preview/WhatsApp/WhatsAppLikePreviewV2.js";import{DEFAULT_THEME as r}from"../../../constants/Theme.js";import{HEADER_TYPES as s}from"../../template-preview/models/TemplateMeta.js";import{TitleMedium as l,BodySecondary as d,BodyRegular as n,BodyCaption as p}from"../../TypographyStyle.js";import m from"../../../assets/icons/file.svg.js";import c from"../../../assets/icons/filePdf.svg.js";import h from"../../../assets/icons/image.svg.js";import g from"../../../assets/icons/upload.svg.js";const u=u=>{let{setOpenEditMedia:b,mediaComponentFormat:f,variableListForImage:j,openEditMedia:v,uploadMedia:y}=u;return e(o,Object.assign({open:v,zIndex:2e3,onClose:()=>b(!1),width:"440px"},{children:t("div",Object.assign({style:{padding:24,borderRadius:4}},{children:[e(l,Object.assign({style:{marginBottom:16}},{children:"Update media"})),t("div",Object.assign({style:{padding:24,border:`1px dashed ${r.colorsV2.stroke.primary}`,backgroundColor:r.colorsV2.surface.subdued}},{children:[t("div",Object.assign({style:{marginBottom:24,display:"flex",justifyContent:"center",flexDirection:"column",alignItems:"center",gap:16}},{children:[e("div",Object.assign({style:{height:80,width:80,borderRadius:"100%",display:"flex",alignItems:"center",justifyContent:"center",backgroundColor:r.colorsV2.background.base}},{children:f===s.IMAGE?e(h,{width:40,height:40}):f===s.VIDEO?e(m,{width:40,height:40}):e(c,{width:40,height:40})})),e(l,{children:f===s.IMAGE?"Upload an image":f===s.VIDEO?"Upload a video":"Upload a document"}),e(d,{children:f===s.IMAGE?"JPEG/ PNG format • Max 5MB":f===s.VIDEO?"Mp4 format video • Max
|
|
1
|
+
import{jsx as e,jsxs as t}from"react/jsx-runtime";import{Button as i}from"../../button/Button.js";import{InputWithVariables as a}from"../../input-with-vars/InputWithVariables.js";import{StyledModal as o}from"../../modals/styledModal.js";import"../../template-preview/TemplatePreview.js";import"../../template-preview/WhatsApp/WhatsAppLikePreview.js";import"../../template-preview/WhatsApp/WhatsAppLikePreviewV2.js";import{DEFAULT_THEME as r}from"../../../constants/Theme.js";import{HEADER_TYPES as s}from"../../template-preview/models/TemplateMeta.js";import{TitleMedium as l,BodySecondary as d,BodyRegular as n,BodyCaption as p}from"../../TypographyStyle.js";import m from"../../../assets/icons/file.svg.js";import c from"../../../assets/icons/filePdf.svg.js";import h from"../../../assets/icons/image.svg.js";import g from"../../../assets/icons/upload.svg.js";const u=u=>{let{setOpenEditMedia:b,mediaComponentFormat:f,variableListForImage:j,openEditMedia:v,uploadMedia:y}=u;return e(o,Object.assign({open:v,zIndex:2e3,onClose:()=>b(!1),width:"440px"},{children:t("div",Object.assign({style:{padding:24,borderRadius:4}},{children:[e(l,Object.assign({style:{marginBottom:16}},{children:"Update media"})),t("div",Object.assign({style:{padding:24,border:`1px dashed ${r.colorsV2.stroke.primary}`,backgroundColor:r.colorsV2.surface.subdued}},{children:[t("div",Object.assign({style:{marginBottom:24,display:"flex",justifyContent:"center",flexDirection:"column",alignItems:"center",gap:16}},{children:[e("div",Object.assign({style:{height:80,width:80,borderRadius:"100%",display:"flex",alignItems:"center",justifyContent:"center",backgroundColor:r.colorsV2.background.base}},{children:f===s.IMAGE?e(h,{width:40,height:40}):f===s.VIDEO?e(m,{width:40,height:40}):e(c,{width:40,height:40})})),e(l,{children:f===s.IMAGE?"Upload an image":f===s.VIDEO?"Upload a video":"Upload a document"}),e(d,{children:f===s.IMAGE?"JPEG/ PNG format • Max 5MB":f===s.VIDEO?"Mp4 format video • Max 16MB":"Pdf format a document • Max 100MB"})]})),t("div",Object.assign({style:{marginBottom:16}},{children:[e(n,{children:"Media"}),e(a,{addVarBoxRight:"46px",allowMix:!1,onChange:e=>{},prevVariable:{actualValue:"",variableType:"string"},variablesList:j,showSideVariablePanel:!0,placeHolder:"Enter URL or add variable...",onBlur:(e,t)=>{t&&t.actualValue&&y(t.actualValue)},showAddButton:f===s.IMAGE})]})),t("div",Object.assign({style:{display:"flex",alignItems:"center",justifyContent:"space-between",gap:4}},{children:[e("hr",{style:{height:"2px",flex:.5,backgroundColor:"black"}}),e(p,Object.assign({style:{flex:1}},{children:"Or upload media from device"})),e("hr",{style:{height:"2px",flex:.5,backgroundColor:"black"}})]})),e("div",Object.assign({style:{display:"flex",width:"100%"}},{children:e(i,{matchParentWidth:!0,buttonText:"Upload",buttonType:"secondary",LeadingIcon:g,onClick:()=>y()})}))]}))]}))}))};export{u as default};
|
|
@@ -8,8 +8,8 @@ export interface EditMediaV2Props {
|
|
|
8
8
|
isLoading?: boolean;
|
|
9
9
|
mediaType?: HEADER_TYPES;
|
|
10
10
|
handleImageChange?: () => void;
|
|
11
|
-
setOpenEditMedia?: React.Dispatch<React.SetStateAction<boolean>>;
|
|
12
11
|
disableEditVariable?: boolean;
|
|
12
|
+
setOpenEditMedia?: React.Dispatch<React.SetStateAction<boolean>>;
|
|
13
13
|
}
|
|
14
14
|
declare const EditMediaV2: (props: EditMediaV2Props) => import("react/jsx-runtime").JSX.Element;
|
|
15
15
|
export default EditMediaV2;
|
|
@@ -5,4 +5,4 @@ import{jsxs as e,jsx as t,Fragment as i}from"react/jsx-runtime";import o from"..
|
|
|
5
5
|
height: 24px;
|
|
6
6
|
border-left: 1px solid ${g.stroke.primary};
|
|
7
7
|
cursor: pointer;
|
|
8
|
-
`,u=l=>{const{imageName:u,error:b,isLoading:x,mediaType:w,handleImageChange:O,
|
|
8
|
+
`,u=l=>{const{imageName:u,error:b,isLoading:x,mediaType:w,handleImageChange:O,disableEditVariable:C,selectedVariable:E,setOpenEditMedia:L}=l,M=null==u?void 0:u[0].split("/"),T=null==M?void 0:M[M.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===a.IMAGE?t("img",{alt:"",src:null==u?void 0:u[0],style:{width:"100%",height:"56px",borderRadius:8,objectFit:"cover"}}):w===a.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(c,Object.assign({style:{marginLeft:8}},{children:"Your media is getting loaded..."})):t(m,Object.assign({style:{color:g.content.primary,marginLeft:8}},{children:E||h.toCapitilize(null==w?void 0:w.toLowerCase())||T}))})),!!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}))]})),!C&&!b&&!x&&t(y,Object.assign({onClick:()=>null==L?void 0:L(!0),onKeyDown:()=>null==L?void 0:L(!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.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{__awaiter as e}from"../../../_virtual/_tslib.js";import{jsxs as t,Fragment as o,jsx as i}from"react/jsx-runtime";import n,{useState as a}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"../../modals/styledModal.js";import"../../spinner/Spinner.js";import{HEADER_TYPES as s}from"../../template-preview/models/TemplateMeta.js";import{useTemplateModalContext as d}from"../context/templateModalContext.js";import p from"./EditMediaModal.js";import m from"./EditMediaV2.js";const c=c=>{let{mediaComponent:f,template:u,updateTemplateImageUrl:v,whatsappSpecificPickerMeta:g,variableListForImage:h}=c;var j,b,E;const{disableEditVariable:M}=d(),[y,I]=a(void 0),[C,O]=a(),[A,k]=a(),[w,x]=a(!1),T=n.createRef(),[F,R]=a(!1),[U,L]=a(""),{template:N,setTemplate:V}=d();let D;function G(){var e;(null===(e=null==T?void 0:T.current)||void 0===e?void 0:e.click)&&T.current.click()}function _(t){var o;return e(this,void 0,void 0,(function*(){const e=new r;if(t instanceof Blob){const i=e.validate(t);if(i)L(i),R(!1);else{const e=f.format===s.IMAGE,i=yield g.uploadMediaFiles({file:t,fileName:y,isImage:e});if(i.success){const[e]=t.type.split("/");v(null!==(o=i.url)&&void 0!==o?o:"","application"===e?s.DOCUMENT:s[e.toUpperCase()])}else L("An unknown technical error occured");R(!1)}}else L("An unknown technical error occured"),R(!1)}))}return D=f.format===s.IMAGE?"image/png, image/jpeg":f.format===s.VIDEO?"video/mp4":"application/pdf",t(o,{children:[i(p,{mediaComponentFormat:null!==(j=f.format)&&void 0!==j?j:s.IMAGE,uploadMedia:function(t){var o;return e(this,void 0,void 0,(function*(){if(L(""),k(""),x(!1),t)if(t.startsWith("https"))try{R(!0);const e=yield fetch(t),o=yield e.blob();yield _(o)}catch(e){L("An unknown technical error occurred")}else if(/^{{.*}}$/.test(t)){k(t);const e=Object.assign({},N);if(e.components){const t=null===(o=null==e?void 0:e.components)||void 0===o?void 0:o.findIndex((e=>{if("HEADER"===e.type&&"NONE"!==e.format&&"TEXT"!==e.format)return!0}));if(void 0!==t&&t>-1&&(null==e?void 0:e.components[t])){const o=Object.assign(Object.assign({},e.components[t]),{format:f.format,example:{header_handle:["https://jkfenner.com/wp-content/uploads/2019/11/default.jpg"]}}),i=[...e.components];i[t]=o,e.components=i}}e.mapping&&(e.mapping=Object.assign(Object.assign({},e.mapping),{header:[t]})),R(!1),null==V||V(Object.assign({},e))}else R(!1),L("Invalid URL or variable");else G()}))},variableListForImage:h||[],setOpenEditMedia:x,openEditMedia:w}),!!C&&i(l,{aspectRatio:15/8,src:C,onCropComplete:function(t){return e(this,void 0,void 0,(function*(){R(!1),L("");const e=yield fetch(t);_(yield e.blob()).then((()=>{O(void 0)}))}))},onCancel:()=>{R(!1),O("")}}),i("input",{ref:T,style:{display:"none"},type:"file",onChange:function(e){var t;L(""),R(!0);const o=null===(t=e.target.files)||void 0===t?void 0:t[0];if(f.format===s.IMAGE){const e=new FileReader;O(""),I(""),e.onload=()=>{O(e.result),I(null==o?void 0:o.name)},o&&e.readAsDataURL(o)}else _(o)},accept:D}),i(m,{imageName:null!==(E=null===(b=null==f?void 0:f.example)||void 0===b?void 0:b.header_handle)&&void 0!==E?E:[],handleImageChange:G,mediaType:null==f?void 0:f.format,error:U,isLoading:F,setOpenEditMedia:x,selectedVariable:A,disableEditVariable:M})]})};export{c as default};
|
|
1
|
+
import{__awaiter as e}from"../../../_virtual/_tslib.js";import{jsxs as t,Fragment as o,jsx as i}from"react/jsx-runtime";import n,{useState as a}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"../../modals/styledModal.js";import"../../spinner/Spinner.js";import{HEADER_TYPES as s}from"../../template-preview/models/TemplateMeta.js";import{useTemplateModalContext as d}from"../context/templateModalContext.js";import p from"./EditMediaModal.js";import m from"./EditMediaV2.js";const c=c=>{let{mediaComponent:f,template:u,updateTemplateImageUrl:v,whatsappSpecificPickerMeta:g,variableListForImage:h}=c;var j,b,E;const{disableEditVariable:M}=d(),[y,I]=a(void 0),[C,O]=a(),[A,k]=a(),[w,x]=a(!1),T=n.createRef(),[F,R]=a(!1),[U,L]=a(""),{template:N,setTemplate:V}=d();let D;function G(){var e;(null===(e=null==T?void 0:T.current)||void 0===e?void 0:e.click)&&T.current.click()}function _(t){var o;return e(this,void 0,void 0,(function*(){const e=new r;if(t instanceof Blob){const i=e.validate(t);if(i)L(i),R(!1);else{const e=f.format===s.IMAGE,i=yield g.uploadMediaFiles({file:t,fileName:y,isImage:e});if(i.success){const[e]=t.type.split("/");v(null!==(o=i.url)&&void 0!==o?o:"","application"===e?s.DOCUMENT:s[e.toUpperCase()])}else L("An unknown technical error occured");R(!1)}}else L("An unknown technical error occured"),R(!1)}))}return console.log("vj: ignore",M),D=f.format===s.IMAGE?"image/png, image/jpeg":f.format===s.VIDEO?"video/mp4":"application/pdf",t(o,{children:[i(p,{mediaComponentFormat:null!==(j=f.format)&&void 0!==j?j:s.IMAGE,uploadMedia:function(t){var o;return e(this,void 0,void 0,(function*(){if(L(""),k(""),x(!1),t)if(t.startsWith("https"))try{R(!0);const e=yield fetch(t),o=yield e.blob();yield _(o)}catch(e){L("An unknown technical error occurred")}else if(/^{{.*}}$/.test(t)){k(t);const e=Object.assign({},N);if(e.components){const t=null===(o=null==e?void 0:e.components)||void 0===o?void 0:o.findIndex((e=>{if("HEADER"===e.type&&"NONE"!==e.format&&"TEXT"!==e.format)return!0}));if(void 0!==t&&t>-1&&(null==e?void 0:e.components[t])){const o=Object.assign(Object.assign({},e.components[t]),{format:f.format,example:{header_handle:["https://jkfenner.com/wp-content/uploads/2019/11/default.jpg"]}}),i=[...e.components];i[t]=o,e.components=i}}e.mapping&&(e.mapping=Object.assign(Object.assign({},e.mapping),{header:[t]})),R(!1),null==V||V(Object.assign({},e))}else R(!1),L("Invalid URL or variable");else G()}))},variableListForImage:h||[],setOpenEditMedia:x,openEditMedia:w}),!!C&&i(l,{aspectRatio:15/8,src:C,onCropComplete:function(t){return e(this,void 0,void 0,(function*(){R(!1),L("");const e=yield fetch(t);_(yield e.blob()).then((()=>{O(void 0)}))}))},onCancel:()=>{R(!1),O("")}}),i("input",{ref:T,style:{display:"none"},type:"file",onChange:function(e){var t;L(""),R(!0);const o=null===(t=e.target.files)||void 0===t?void 0:t[0];if(f.format===s.IMAGE){const e=new FileReader;O(""),I(""),e.onload=()=>{O(e.result),I(null==o?void 0:o.name)},o&&e.readAsDataURL(o)}else _(o)},accept:D}),i(m,{imageName:null!==(E=null===(b=null==f?void 0:f.example)||void 0===b?void 0:b.header_handle)&&void 0!==E?E:[],handleImageChange:G,mediaType:null==f?void 0:f.format,error:U,isLoading:F,setOpenEditMedia:x,selectedVariable:A,disableEditVariable:M})]})};export{c 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
|
|
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 l}from"../../../constants/Theme.js";import{useTemplateModalContext as o}from"../context/templateModalContext.js";import n from"./VariableConnector.js";const d=d=>{let{descriptionComponent:s,type:p,showVariableModal:b,variableList:c}=d;var m,v;const{originalVariableList:y,disableEditVariable:h}=o();return"BODY"===s.type?e("div",{children:null===(m=null==y?void 0:y.body)||void 0===m?void 0:m.map(((i,o)=>h||!i.isEditableVariable?a("div",Object.assign({style:{margin:"16px 8px"}},{children:[a(r,Object.assign({style:{color:l.content.primary}},{children:["HEADER"===p?"Header":""," Locked variable ",o+1]})),e(t,{state:"disabled",placeholder:i.variableName,onChangeText:()=>{}})]}),o):e(n,{index:o,variable:i,showVariableModal:b,variableList:c,componentType:s.type},`${o}-${i.index}`)))}):"HEADER"===s.type?e("div",{children:null===(v=null==y?void 0:y.header)||void 0===v?void 0:v.map(((i,o)=>i.isEditableVariable?e(n,{index:o,variable:i,showVariableModal:b,variableList:c,componentType:s.type},`${o}-${i.index}`):a("div",Object.assign({style:{margin:"16px 8px"}},{children:[a(r,Object.assign({style:{color:l.content.primary}},{children:["HEADER"===p?"Header":""," Locked variable ",o+1]})),e(t,{state:"disabled",placeholder:i.variableName,onChangeText:()=>{}})]}),o)))}):e(i,{})};export{d as default};
|