@bikdotai/bik-component-library 0.0.394-beta.3 → 0.0.394-beta.5

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.
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("react"),t=require("../../checkBox/CheckBox.js"),s=require("../../TypographyStyle.js"),a=require("../../input/Input.js");exports.BackTrackComponent=i=>{const{backTrackMessage:n,setBackTrackMessage:c}=i,[l,o]=r.useState(!!n);return e.jsxs(e.Fragment,{children:[e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"row",marginLeft:10,marginTop:8}},{children:[e.jsx(t.CheckBox,{isChecked:l,onValueChange:()=>{l&&c&&c(""),o(!l)}}),e.jsx(s.TitleSmall,Object.assign({style:{marginLeft:8}},{children:"Prevent BackTracking"}))]})),l&&e.jsx("div",Object.assign({style:{margin:10}},{children:e.jsx(a.Input,{placeholder:"Enter your text here",labelText:"Message if user tries backtracking",onChangeText:e=>{c&&c(e)},height:"120px",value:n,noErrorHint:!0,validate:e=>[!0,""]})}))]})};
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("react"),t=require("../../checkBox/CheckBox.js"),a=require("../../TypographyStyle.js"),s=require("../../input/Input.js");exports.BackTrackComponent=i=>{const{backTrackMessage:n,setBackTrackMessage:c}=i,[l,o]=r.useState(!!n);return e.jsxs(e.Fragment,{children:[e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"row",marginLeft:10,marginTop:8}},{children:[e.jsx(t.CheckBox,{isChecked:l,onValueChange:()=>{l&&c&&c(""),o(!l)}}),e.jsx(a.TitleSmall,Object.assign({style:{marginLeft:8}},{children:"Prevent BackTracking"}))]})),l&&e.jsx("div",Object.assign({style:{margin:10}},{children:e.jsx(s.Input,{type:"multiline",placeholder:"Enter your text here",labelText:"Message if user tries backtracking",onChangeText:e=>{c&&c(e)},height:"120px",maxCharLimit:1024,value:n,noErrorHint:!0,validate:e=>[!0,""]})}))]})};
@@ -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 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()})}))]}))]}))}))};
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:E,openEditMedia:j,uploadMedia:g}=u;return e.jsx(a.StyledModal,Object.assign({open:j,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:E,showSideVariablePanel:!0,placeHolder:"Enter URL or add variable...",onBlur:(e,t)=>{t&&t.actualValue&&g(t.actualValue)},showAddButton:[r.HEADER_TYPES.IMAGE,r.HEADER_TYPES.VIDEO,r.HEADER_TYPES.DOCUMENT].includes(h)})]})),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:()=>g()})}))]}))]}))}))};
@@ -1,4 +1,4 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),a=require("styled-components"),i=require("../../template-preview/TemplatePreview.js");require("../../template-preview/WhatsApp/WhatsAppLikePreview.js"),require("../../template-preview/WhatsApp/WhatsAppLikePreviewV2.js"),require("../../../constants/Theme.js"),require("../../template-preview/models/TemplateMeta.js");var r=require("../../template-preview/models/Channels.js");function s(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var o=s(t),l=s(a);const p=l.default.div`
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),a=require("styled-components"),i=require("../../template-preview/TemplatePreview.js");require("../../template-preview/WhatsApp/WhatsAppLikePreview.js"),require("../../template-preview/WhatsApp/WhatsAppLikePreviewV2.js"),require("../../../constants/Theme.js"),require("../../template-preview/models/TemplateMeta.js");var r=require("../../template-preview/models/Channels.js"),o=require("../context/templateModalContext.js");function s(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var l=s(t),p=s(a);const n=p.default.div`
2
2
  position: relative;
3
3
  height: 100%;
4
4
  border-radius: 31px;
@@ -6,7 +6,7 @@
6
6
  background-color: white;
7
7
  margin: auto;
8
8
  overflow-y: auto;
9
- `,n=l.default.div`
9
+ `,d=p.default.div`
10
10
  position: absolute;
11
11
  flex: 1;
12
12
  background-color: white;
@@ -17,4 +17,4 @@
17
17
  height: calc(100% - 17px);
18
18
  border-radius: 16px;
19
19
  overflow-y: auto;
20
- `,d=o.default.forwardRef(((t,a)=>{let{display_content:s,channel:o,template:l,showSampleValues:d}=t;return e.jsx("div",{children:e.jsxs(p,Object.assign({channel:o},{children:[e.jsx("img",{alt:"",src:"https://firebasestorage.googleapis.com/v0/b/staging-bikayi.appspot.com/o/bik%2FkNwEVoGlLpVjOsXoO1M8WgvWicP2%2F6f07b850-8b4b-4d58-96cc-8ba6df7b4e4a-Device___Frame.jpg?alt=media&token=253f1bfe-8481-4f54-bdef-3c0a73697d6a",style:{width:o===r.CHANNEL_TYPE.WHATSAPP?236:300,height:443}}),e.jsx(n,Object.assign({ref:a},{children:e.jsx(i.TemplatePreview,{showSampleValues:d,template:l,channel:o,smsSpecificMeta:{smsDisplayContent:s},whatsAppSpecificMeta:{showWhatsAppHeader:!0,whatsAppExtras:!0,containerStyle:{border:"none",borderBottomRightRadius:0,borderBottomLeftRadius:0,minHeight:426,width:236}},size:"small",hideHeader:!0,emailSpecificMeta:{emailDisplayContent:s,hideViewButtonForEmail:!0,emailHtmlContainerId:"template_html_mobile",containerStyle:{height:"100%",width:"100%"},templateContainerStyles:{height:"100%"}}})}))]}))})}));d.displayName="MobilePreview",exports.default=d;
20
+ `,c=l.default.forwardRef(((t,a)=>{let{display_content:s,channel:l,template:p,showSampleValues:c}=t;const{pod:h}=o.useTemplateModalContext();return e.jsx("div",{children:e.jsxs(n,Object.assign({channel:l},{children:[e.jsx("img",{alt:"",src:"https://firebasestorage.googleapis.com/v0/b/staging-bikayi.appspot.com/o/bik%2FkNwEVoGlLpVjOsXoO1M8WgvWicP2%2F6f07b850-8b4b-4d58-96cc-8ba6df7b4e4a-Device___Frame.jpg?alt=media&token=253f1bfe-8481-4f54-bdef-3c0a73697d6a",style:{width:l===r.CHANNEL_TYPE.WHATSAPP?236:300,height:443}}),e.jsx(d,Object.assign({ref:a},{children:e.jsx(i.TemplatePreview,{showSampleValues:c,template:p,channel:l,smsSpecificMeta:{smsDisplayContent:s},whatsAppSpecificMeta:{showWhatsAppHeader:!0,whatsAppExtras:"CHATBOT"!==h,containerStyle:{border:"none",borderBottomRightRadius:0,borderBottomLeftRadius:0,minHeight:426,width:236}},size:"small",hideHeader:!0,emailSpecificMeta:{emailDisplayContent:s,hideViewButtonForEmail:!0,emailHtmlContainerId:"template_html_mobile",containerStyle:{height:"100%",width:"100%"},templateContainerStyles:{height:"100%"}}})}))]}))})}));c.displayName="MobilePreview",exports.default=c;
@@ -7,13 +7,14 @@
7
7
  border-bottom-left-radius: 12px;
8
8
  position: relative;
9
9
  padding: 8px 0px;
10
- `,d=i.default(t.Caption)`
10
+ `,p=i.default(t.Caption)`
11
11
  color: ${r.COLORS.content.secondary};
12
12
  max-width: 80px;
13
13
  text-overflow: ellipsis;
14
14
  white-space: nowrap;
15
15
  overflow: hidden;
16
- `,n=i.default.div`
16
+ text-wrap: wrap;
17
+ `,d=i.default.div`
17
18
  border-radius: 8px;
18
19
  display: flex;
19
20
  flex-direction: column;
@@ -22,7 +23,7 @@
22
23
  min-height: 152px;
23
24
  margin-bottom: 4px;
24
25
  margin: 0px 8px;
25
- `,p=i.default.div`
26
+ `,n=i.default.div`
26
27
  padding: 12px;
27
28
  display: flex;
28
29
  flex-direction: row;
@@ -31,7 +32,6 @@
31
32
  border-top: 1px solid ${r.COLORS.stroke.primary};
32
33
  `,s=i.default.div`
33
34
  display: flex;
34
-
35
35
  flex-direction: row;
36
36
  justify-content: space-between;
37
37
  margin: 8px 12px;
@@ -53,4 +53,4 @@
53
53
  position: absolute;
54
54
  top: 16px;
55
55
  right: 16px;
56
- `,exports.ChatBtnContainer=p,exports.Container=a,exports.FooterWrapper=s,exports.MediaContainer=n,exports.TimeStamp=d;
56
+ `,exports.ChatBtnContainer=n,exports.Container=a,exports.FooterWrapper=s,exports.MediaContainer=d,exports.TimeStamp=p;
@@ -1 +1 @@
1
- import{jsxs as e,Fragment as r,jsx as t}from"react/jsx-runtime";import{useState as i}from"react";import{CheckBox as a}from"../../checkBox/CheckBox.js";import{TitleSmall as n}from"../../TypographyStyle.js";import{Input as s}from"../../input/Input.js";const c=c=>{const{backTrackMessage:o,setBackTrackMessage:l}=c,[g,m]=i(!!o);return e(r,{children:[e("div",Object.assign({style:{display:"flex",flexDirection:"row",marginLeft:10,marginTop:8}},{children:[t(a,{isChecked:g,onValueChange:()=>{g&&l&&l(""),m(!g)}}),t(n,Object.assign({style:{marginLeft:8}},{children:"Prevent BackTracking"}))]})),g&&t("div",Object.assign({style:{margin:10}},{children:t(s,{placeholder:"Enter your text here",labelText:"Message if user tries backtracking",onChangeText:e=>{l&&l(e)},height:"120px",value:o,noErrorHint:!0,validate:e=>[!0,""]})}))]})};export{c as BackTrackComponent};
1
+ import{jsxs as e,Fragment as r,jsx as t}from"react/jsx-runtime";import{useState as i}from"react";import{CheckBox as a}from"../../checkBox/CheckBox.js";import{TitleSmall as n}from"../../TypographyStyle.js";import{Input as s}from"../../input/Input.js";const c=c=>{const{backTrackMessage:o,setBackTrackMessage:l}=c,[m,g]=i(!!o);return e(r,{children:[e("div",Object.assign({style:{display:"flex",flexDirection:"row",marginLeft:10,marginTop:8}},{children:[t(a,{isChecked:m,onValueChange:()=>{m&&l&&l(""),g(!m)}}),t(n,Object.assign({style:{marginLeft:8}},{children:"Prevent BackTracking"}))]})),m&&t("div",Object.assign({style:{margin:10}},{children:t(s,{type:"multiline",placeholder:"Enter your text here",labelText:"Message if user tries backtracking",onChangeText:e=>{l&&l(e)},height:"120px",maxCharLimit:1024,value:o,noErrorHint:!0,validate:e=>[!0,""]})}))]})};export{c as BackTrackComponent};
@@ -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 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};
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 s}from"../../../constants/Theme.js";import{HEADER_TYPES as r}from"../../template-preview/models/TemplateMeta.js";import{TitleMedium as l,BodySecondary as d,BodyRegular as n,BodyCaption as p}from"../../TypographyStyle.js";import c from"../../../assets/icons/file.svg.js";import m 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 ${s.colorsV2.stroke.primary}`,backgroundColor:s.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:s.colorsV2.background.base}},{children:f===r.IMAGE?e(h,{width:40,height:40}):f===r.VIDEO?e(c,{width:40,height:40}):e(m,{width:40,height:40})})),e(l,{children:f===r.IMAGE?"Upload an image":f===r.VIDEO?"Upload a video":"Upload a document"}),e(d,{children:f===r.IMAGE?"JPEG/ PNG format • Max 5MB":f===r.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:[r.IMAGE,r.VIDEO,r.DOCUMENT].includes(f)})]})),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};
@@ -1,12 +1,12 @@
1
- import{jsx as e,jsxs as t}from"react/jsx-runtime";import i from"react";import a from"styled-components";import{TemplatePreview as o}from"../../template-preview/TemplatePreview.js";import"../../template-preview/WhatsApp/WhatsAppLikePreview.js";import"../../template-preview/WhatsApp/WhatsAppLikePreviewV2.js";import"../../../constants/Theme.js";import"../../template-preview/models/TemplateMeta.js";import{CHANNEL_TYPE as r}from"../../template-preview/models/Channels.js";const p=a.div`
1
+ import{jsx as e,jsxs as t}from"react/jsx-runtime";import i from"react";import a from"styled-components";import{TemplatePreview as o}from"../../template-preview/TemplatePreview.js";import"../../template-preview/WhatsApp/WhatsAppLikePreview.js";import"../../template-preview/WhatsApp/WhatsAppLikePreviewV2.js";import"../../../constants/Theme.js";import"../../template-preview/models/TemplateMeta.js";import{CHANNEL_TYPE as p}from"../../template-preview/models/Channels.js";import{useTemplateModalContext as r}from"../context/templateModalContext.js";const l=a.div`
2
2
  position: relative;
3
3
  height: 100%;
4
4
  border-radius: 31px;
5
- width: ${e=>e.channel===r.WHATSAPP?"236px":"300px"};
5
+ width: ${e=>e.channel===p.WHATSAPP?"236px":"300px"};
6
6
  background-color: white;
7
7
  margin: auto;
8
8
  overflow-y: auto;
9
- `,l=a.div`
9
+ `,s=a.div`
10
10
  position: absolute;
11
11
  flex: 1;
12
12
  background-color: white;
@@ -17,4 +17,4 @@ import{jsx as e,jsxs as t}from"react/jsx-runtime";import i from"react";import a
17
17
  height: calc(100% - 17px);
18
18
  border-radius: 16px;
19
19
  overflow-y: auto;
20
- `,s=i.forwardRef(((i,a)=>{let{display_content:s,channel:m,template:n,showSampleValues:h}=i;return e("div",{children:t(p,Object.assign({channel:m},{children:[e("img",{alt:"",src:"https://firebasestorage.googleapis.com/v0/b/staging-bikayi.appspot.com/o/bik%2FkNwEVoGlLpVjOsXoO1M8WgvWicP2%2F6f07b850-8b4b-4d58-96cc-8ba6df7b4e4a-Device___Frame.jpg?alt=media&token=253f1bfe-8481-4f54-bdef-3c0a73697d6a",style:{width:m===r.WHATSAPP?236:300,height:443}}),e(l,Object.assign({ref:a},{children:e(o,{showSampleValues:h,template:n,channel:m,smsSpecificMeta:{smsDisplayContent:s},whatsAppSpecificMeta:{showWhatsAppHeader:!0,whatsAppExtras:!0,containerStyle:{border:"none",borderBottomRightRadius:0,borderBottomLeftRadius:0,minHeight:426,width:236}},size:"small",hideHeader:!0,emailSpecificMeta:{emailDisplayContent:s,hideViewButtonForEmail:!0,emailHtmlContainerId:"template_html_mobile",containerStyle:{height:"100%",width:"100%"},templateContainerStyles:{height:"100%"}}})}))]}))})}));s.displayName="MobilePreview";export{s as default};
20
+ `,m=i.forwardRef(((i,a)=>{let{display_content:m,channel:n,template:h,showSampleValues:c}=i;const{pod:d}=r();return e("div",{children:t(l,Object.assign({channel:n},{children:[e("img",{alt:"",src:"https://firebasestorage.googleapis.com/v0/b/staging-bikayi.appspot.com/o/bik%2FkNwEVoGlLpVjOsXoO1M8WgvWicP2%2F6f07b850-8b4b-4d58-96cc-8ba6df7b4e4a-Device___Frame.jpg?alt=media&token=253f1bfe-8481-4f54-bdef-3c0a73697d6a",style:{width:n===p.WHATSAPP?236:300,height:443}}),e(s,Object.assign({ref:a},{children:e(o,{showSampleValues:c,template:h,channel:n,smsSpecificMeta:{smsDisplayContent:m},whatsAppSpecificMeta:{showWhatsAppHeader:!0,whatsAppExtras:"CHATBOT"!==d,containerStyle:{border:"none",borderBottomRightRadius:0,borderBottomLeftRadius:0,minHeight:426,width:236}},size:"small",hideHeader:!0,emailSpecificMeta:{emailDisplayContent:m,hideViewButtonForEmail:!0,emailHtmlContainerId:"template_html_mobile",containerStyle:{height:"100%",width:"100%"},templateContainerStyles:{height:"100%"}}})}))]}))})}));m.displayName="MobilePreview";export{m as default};
@@ -13,6 +13,7 @@ import t from"styled-components";import{Caption as e}from"../../TypographyStyle.
13
13
  text-overflow: ellipsis;
14
14
  white-space: nowrap;
15
15
  overflow: hidden;
16
+ text-wrap: wrap;
16
17
  `,p=t.div`
17
18
  border-radius: 8px;
18
19
  display: flex;
@@ -31,7 +32,6 @@ import t from"styled-components";import{Caption as e}from"../../TypographyStyle.
31
32
  border-top: 1px solid ${o.stroke.primary};
32
33
  `,n=t.div`
33
34
  display: flex;
34
-
35
35
  flex-direction: row;
36
36
  justify-content: space-between;
37
37
  margin: 8px 12px;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bikdotai/bik-component-library",
3
- "version": "0.0.394-beta.3",
3
+ "version": "0.0.394-beta.5",
4
4
  "description": "Bik Component Library",
5
5
  "repository": {
6
6
  "type": "git",