@bikdotai/bik-component-library 0.0.511-beta.tcm-2 → 0.0.511-beta.tcm-4
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/template-context-mapper/modalElements/Body.js +9 -8
- package/dist/cjs/components/template-context-mapper/modalElements/MobilePreview.js +5 -3
- package/dist/esm/components/template-context-mapper/modalElements/Body.js +5 -4
- package/dist/esm/components/template-context-mapper/modalElements/MobilePreview.js +5 -3
- package/package.json +1 -1
|
@@ -1,19 +1,20 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),a=require("styled-components"),i=require("../../carousel-preview/CarouselPreview.js"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),a=require("styled-components"),i=require("../../carousel-preview/CarouselPreview.js"),l=require("./EditWhatsAppCarouselTemplateV2.js"),o=require("../../template-preview/models/Channels.js"),n=require("../../../constants/Theme.js"),s=require("../context/templateModalContext.js"),r=require("../utils/getVariableNameEmail.js"),d=require("../utils/highlightFor.js"),u=require("./DesktopPreview.js"),p=require("./EditWhatsAppTemplateV2.js"),c=require("./MobilePreview.js"),h=require("./VariableConnectorsPanel.js");function m(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var v=m(a);const f=v.default.div`
|
|
2
2
|
display: flex;
|
|
3
3
|
// height: 100%;
|
|
4
|
-
`,
|
|
4
|
+
`,C=v.default.div`
|
|
5
5
|
padding: 16px 14px;
|
|
6
6
|
max-width: 450px;
|
|
7
7
|
|
|
8
|
-
height: ${e=>e.channel===
|
|
8
|
+
height: ${e=>e.channel===o.CHANNEL_TYPE.WHATSAPP?"500px":"475px"};
|
|
9
9
|
overflow-y: auto;
|
|
10
10
|
padding-bottom: 24px;
|
|
11
|
-
border-left: ${
|
|
12
|
-
border-top: ${e=>e.isWhatsappCarousel?`${
|
|
13
|
-
`,
|
|
11
|
+
border-left: ${n.COLORS.stroke.primary} 1px solid;
|
|
12
|
+
border-top: ${e=>e.isWhatsappCarousel?`${n.COLORS.stroke.primary} 1px solid`:void 0};
|
|
13
|
+
`,b=v.default.div`
|
|
14
14
|
padding: ${e=>e.isWhatsappCarousel?void 0:e.showOnlyContent?"16px 14px":"16px 32px"};
|
|
15
15
|
flex: 1;
|
|
16
16
|
height: ${e=>e.isWhatsappCarousel||e.hideDeviceContainerInPreview?"500px":"475px"};
|
|
17
17
|
overflow-y: auto;
|
|
18
|
-
background-image: ${e=>e.hideDeviceContainerInPreview&&e.channel===
|
|
19
|
-
|
|
18
|
+
background-image: ${e=>e.hideDeviceContainerInPreview&&e.channel===o.CHANNEL_TYPE.WHATSAPP?"url('https://firebasestorage.googleapis.com/v0/b/bikayi-chat.appspot.com/o/images-uid%2F341dba50-e84e-4457-b5b5-d9d8a0b95a73?alt=media&token=6fd32f23-8bb2-4980-bbee-bef39b38fd9f');":"none"};
|
|
19
|
+
display: ${e=>e.hideDeviceContainerInPreview&&e.channel===o.CHANNEL_TYPE.WHATSAPP?"flex":"initial"};
|
|
20
|
+
`;exports.default=a=>{const{showVariableMapping:m,showOnlyContent:v,whatsappSpecificPickerMeta:g,showVariableModal:P,variableList:w,discountCode:x,setDiscountCode:E,variableListForImage:j,showSampleValues:A,fileName:T,setFileName:N}=a,L=t.useRef(),y=t.useRef(),{device:S,display_content:_,channel:W,template:M,setTemplate:H,isWhatsappCarousel:V,isProductCarouselType:q,hideDeviceContainerInPreview:I}=s.useTemplateModalContext();const O=e=>{let t=0;for(;e;)t+=e.offsetTop,e=e.offsetParent;return t};return e.jsxs(f,{children:[e.jsx(b,Object.assign({showOnlyContent:v,showVariableMapping:m,isWhatsappCarousel:V,hideDeviceContainerInPreview:I,channel:W},{children:"mobile"===S?e.jsx(c.default,{ref:y,display_content:null!=_?_:"",channel:W,template:M,showSampleValues:A}):W===o.CHANNEL_TYPE.WHATSAPP&&V?e.jsx(i.CarouselPreview,{ref:L,channel:W,template:M,showSampleValues:A,isPreview:!1}):W!==o.CHANNEL_TYPE.MESSAGE?e.jsx(u.default,{ref:L,channel:W,display_content:null!=_?_:"",showSampleValues:A}):e.jsx(e.Fragment,{})})),(q||m)&&e.jsx(C,Object.assign({channel:W,isWhatsappCarousel:V},{children:W!==o.CHANNEL_TYPE.WHATSAPP?e.jsx(h.default,{onFocus:W===o.CHANNEL_TYPE.EMAIL?function(e){var t,a,i;const l=null===document||void 0===document?void 0:document.getElementById("mobile"===S?"template_html_mobile":"template_html_desktop"),s=r.getVariableNameForEmailByIndex(e+1),u=W===o.CHANNEL_TYPE.EMAIL?null===(t=null==l?void 0:l.contentWindow)||void 0===t?void 0:t.document.getElementById(s):document.getElementById(s),p=O(u),c=null==u?void 0:u.offsetLeft;"desktop"===S?p&&L.current&&(null===(a=null==l?void 0:l.contentWindow)||void 0===a||a.scrollTo(null!=c?c:0,p),d.highlightFor(s,n.COLORS.background.warning.light,2,W,S)):p&&y.current&&(null===(i=null==l?void 0:l.contentWindow)||void 0===i||i.scrollTo(null!=c?c:0,p),d.highlightFor(s,n.COLORS.background.warning.light,2,W,S))}:void 0,showVariableModal:P,variableList:w,discountCode:x,setDiscountCode:E}):W===o.CHANNEL_TYPE.WHATSAPP&&V?e.jsx(l.default,{whatsappSpecificPickerMeta:g,template:M,showVariableModal:P,variableList:w,variableListForImage:j,discountCode:x,setDiscountCode:E}):e.jsx(p.default,{whatsappSpecificPickerMeta:g,template:M,onTemplateChange:e=>{null==H||H(e)},showVariableModal:P,variableList:w,variableListForImage:j,discountCode:x,setDiscountCode:E,fileName:T,setFileName:N})}))]})};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),i=require("styled-components"),a=require("../../template-preview/TemplatePreview.js");require("../../template-preview/WhatsApp/WhatsAppLikePreview.js"),require("../../template-preview/WhatsApp/WhatsAppLikePreviewV2.js"),require("../../../constants/Theme.js"),require("../../curtain/CurtainHelper.js"),require("../../template-preview/models/TemplateMeta.js");var r=require("../../template-preview/models/WhatsAppTemplate.js"),s=require("../context/templateModalContext.js"),l=require("../utils/getPreviewDimension.js");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),i=require("styled-components"),a=require("../../template-preview/TemplatePreview.js");require("../../template-preview/WhatsApp/WhatsAppLikePreview.js"),require("../../template-preview/WhatsApp/WhatsAppLikePreviewV2.js"),require("../../../constants/Theme.js"),require("../../curtain/CurtainHelper.js"),require("../../template-preview/models/TemplateMeta.js");var r=require("../../template-preview/models/WhatsAppTemplate.js"),s=require("../context/templateModalContext.js"),l=require("../utils/getPreviewDimension.js");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var n=o(t),p=o(i);const c=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
|
-
`,
|
|
9
|
+
`,d=p.default.div`
|
|
10
10
|
position: absolute;
|
|
11
11
|
flex: 1;
|
|
12
12
|
background-color: white;
|
|
@@ -17,7 +17,9 @@
|
|
|
17
17
|
height: calc(100% - 17px);
|
|
18
18
|
border-radius: 16px;
|
|
19
19
|
overflow-y: auto;
|
|
20
|
-
`,h=
|
|
20
|
+
`,h=n.default.forwardRef(((t,i)=>{let{display_content:o,channel:n,template:p,showSampleValues:h}=t;const{pod:u,hideDeviceContainerInPreview:w}=s.useTemplateModalContext(),f={showSampleValues:h,template:p,channel:n,smsSpecificMeta:{smsDisplayContent:o},whatsAppSpecificMeta:{showWhatsAppHeader:!0,whatsAppExtras:u!==r.POD.CHATBOT,containerStyle:{border:"none",borderBottomRightRadius:0,borderBottomLeftRadius:0,minHeight:426,width:240}},size:"small",hideHeader:!0,emailSpecificMeta:{emailDisplayContent:o,hideViewButtonForEmail:!0,emailHtmlContainerId:"template_html_mobile",containerStyle:{height:"100%",width:"100%"},templateContainerStyles:{height:"100%"}},isPreview:!0};return w?e.jsx(m,{children:e.jsx(a.TemplatePreview,Object.assign({},f))}):e.jsx(e.Fragment,{children:e.jsxs(c,Object.assign({channel:n},{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.getPreviewWidth(n),height:443}}),e.jsx(d,Object.assign({ref:i},{children:e.jsx(a.TemplatePreview,Object.assign({},f))}))]}))})}));h.displayName="MobilePreview";const m=p.default.div`
|
|
21
21
|
display: flex;
|
|
22
22
|
align-items: center;
|
|
23
|
+
justify-content: center;
|
|
24
|
+
flex: 1;
|
|
23
25
|
`;exports.default=h;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import{jsxs as e,jsx as o,Fragment as t}from"react/jsx-runtime";import{useRef as
|
|
1
|
+
import{jsxs as e,jsx as o,Fragment as t}from"react/jsx-runtime";import{useRef as i}from"react";import a from"styled-components";import{CarouselPreview as l}from"../../carousel-preview/CarouselPreview.js";import n from"./EditWhatsAppCarouselTemplateV2.js";import{CHANNEL_TYPE as s}from"../../template-preview/models/Channels.js";import{COLORS as r}from"../../../constants/Theme.js";import{useTemplateModalContext as p}from"../context/templateModalContext.js";import{getVariableNameForEmailByIndex as d}from"../utils/getVariableNameEmail.js";import{highlightFor as m}from"../utils/highlightFor.js";import c from"./DesktopPreview.js";import h from"./EditWhatsAppTemplateV2.js";import u from"./MobilePreview.js";import f from"./VariableConnectorsPanel.js";const v=a.div`
|
|
2
2
|
display: flex;
|
|
3
3
|
// height: 100%;
|
|
4
|
-
`,b=
|
|
4
|
+
`,b=a.div`
|
|
5
5
|
padding: 16px 14px;
|
|
6
6
|
max-width: 450px;
|
|
7
7
|
|
|
@@ -10,10 +10,11 @@ import{jsxs as e,jsx as o,Fragment as t}from"react/jsx-runtime";import{useRef as
|
|
|
10
10
|
padding-bottom: 24px;
|
|
11
11
|
border-left: ${r.stroke.primary} 1px solid;
|
|
12
12
|
border-top: ${e=>e.isWhatsappCarousel?`${r.stroke.primary} 1px solid`:void 0};
|
|
13
|
-
`,w=
|
|
13
|
+
`,w=a.div`
|
|
14
14
|
padding: ${e=>e.isWhatsappCarousel?void 0:e.showOnlyContent?"16px 14px":"16px 32px"};
|
|
15
15
|
flex: 1;
|
|
16
16
|
height: ${e=>e.isWhatsappCarousel||e.hideDeviceContainerInPreview?"500px":"475px"};
|
|
17
17
|
overflow-y: auto;
|
|
18
18
|
background-image: ${e=>e.hideDeviceContainerInPreview&&e.channel===s.WHATSAPP?"url('https://firebasestorage.googleapis.com/v0/b/bikayi-chat.appspot.com/o/images-uid%2F341dba50-e84e-4457-b5b5-d9d8a0b95a73?alt=media&token=6fd32f23-8bb2-4980-bbee-bef39b38fd9f');":"none"};
|
|
19
|
-
|
|
19
|
+
display: ${e=>e.hideDeviceContainerInPreview&&e.channel===s.WHATSAPP?"flex":"initial"};
|
|
20
|
+
`,g=a=>{const{showVariableMapping:g,showOnlyContent:C,whatsappSpecificPickerMeta:P,showVariableModal:x,variableList:y,discountCode:A,setDiscountCode:W,variableListForImage:S,showSampleValues:T,fileName:j,setFileName:M}=a,V=i(),k=i(),{device:I,display_content:D,channel:E,template:L,setTemplate:F,isWhatsappCarousel:$,isProductCarouselType:_,hideDeviceContainerInPreview:H}=p();const N=e=>{let o=0;for(;e;)o+=e.offsetTop,e=e.offsetParent;return o};return e(v,{children:[o(w,Object.assign({showOnlyContent:C,showVariableMapping:g,isWhatsappCarousel:$,hideDeviceContainerInPreview:H,channel:E},{children:"mobile"===I?o(u,{ref:k,display_content:null!=D?D:"",channel:E,template:L,showSampleValues:T}):E===s.WHATSAPP&&$?o(l,{ref:V,channel:E,template:L,showSampleValues:T,isPreview:!1}):E!==s.MESSAGE?o(c,{ref:V,channel:E,display_content:null!=D?D:"",showSampleValues:T}):o(t,{})})),(_||g)&&o(b,Object.assign({channel:E,isWhatsappCarousel:$},{children:E!==s.WHATSAPP?o(f,{onFocus:E===s.EMAIL?function(e){var o,t,i;const a=null===document||void 0===document?void 0:document.getElementById("mobile"===I?"template_html_mobile":"template_html_desktop"),l=d(e+1),n=E===s.EMAIL?null===(o=null==a?void 0:a.contentWindow)||void 0===o?void 0:o.document.getElementById(l):document.getElementById(l),p=N(n),c=null==n?void 0:n.offsetLeft;"desktop"===I?p&&V.current&&(null===(t=null==a?void 0:a.contentWindow)||void 0===t||t.scrollTo(null!=c?c:0,p),m(l,r.background.warning.light,2,E,I)):p&&k.current&&(null===(i=null==a?void 0:a.contentWindow)||void 0===i||i.scrollTo(null!=c?c:0,p),m(l,r.background.warning.light,2,E,I))}:void 0,showVariableModal:x,variableList:y,discountCode:A,setDiscountCode:W}):E===s.WHATSAPP&&$?o(n,{whatsappSpecificPickerMeta:P,template:L,showVariableModal:x,variableList:y,variableListForImage:S,discountCode:A,setDiscountCode:W}):o(h,{whatsappSpecificPickerMeta:P,template:L,onTemplateChange:e=>{null==F||F(e)},showVariableModal:x,variableList:y,variableListForImage:S,discountCode:A,setDiscountCode:W,fileName:j,setFileName:M})}))]})};export{g as default};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{jsx as e,Fragment as t,jsxs as i}from"react/jsx-runtime";import a from"react";import o from"styled-components";import{TemplatePreview as r}from"../../template-preview/TemplatePreview.js";import"../../template-preview/WhatsApp/WhatsAppLikePreview.js";import"../../template-preview/WhatsApp/WhatsAppLikePreviewV2.js";import"../../../constants/Theme.js";import"../../curtain/CurtainHelper.js";import"../../template-preview/models/TemplateMeta.js";import{POD as p}from"../../template-preview/models/WhatsAppTemplate.js";import{useTemplateModalContext as s}from"../context/templateModalContext.js";import{getPreviewWidth as l}from"../utils/getPreviewDimension.js";const
|
|
1
|
+
import{jsx as e,Fragment as t,jsxs as i}from"react/jsx-runtime";import a from"react";import o from"styled-components";import{TemplatePreview as r}from"../../template-preview/TemplatePreview.js";import"../../template-preview/WhatsApp/WhatsAppLikePreview.js";import"../../template-preview/WhatsApp/WhatsAppLikePreviewV2.js";import"../../../constants/Theme.js";import"../../curtain/CurtainHelper.js";import"../../template-preview/models/TemplateMeta.js";import{POD as p}from"../../template-preview/models/WhatsAppTemplate.js";import{useTemplateModalContext as s}from"../context/templateModalContext.js";import{getPreviewWidth as l}from"../utils/getPreviewDimension.js";const n=o.div`
|
|
2
2
|
position: relative;
|
|
3
3
|
height: 100%;
|
|
4
4
|
border-radius: 31px;
|
|
@@ -6,7 +6,7 @@ import{jsx as e,Fragment as t,jsxs as i}from"react/jsx-runtime";import a from"re
|
|
|
6
6
|
background-color: white;
|
|
7
7
|
margin: auto;
|
|
8
8
|
overflow-y: auto;
|
|
9
|
-
`,
|
|
9
|
+
`,m=o.div`
|
|
10
10
|
position: absolute;
|
|
11
11
|
flex: 1;
|
|
12
12
|
background-color: white;
|
|
@@ -17,7 +17,9 @@ import{jsx as e,Fragment as t,jsxs as i}from"react/jsx-runtime";import a from"re
|
|
|
17
17
|
height: calc(100% - 17px);
|
|
18
18
|
border-radius: 16px;
|
|
19
19
|
overflow-y: auto;
|
|
20
|
-
`,c=a.forwardRef(((a,o)=>{let{display_content:c,channel:d,template:
|
|
20
|
+
`,c=a.forwardRef(((a,o)=>{let{display_content:c,channel:d,template:f,showSampleValues:w}=a;const{pod:b,hideDeviceContainerInPreview:g}=s(),v={showSampleValues:w,template:f,channel:d,smsSpecificMeta:{smsDisplayContent:c},whatsAppSpecificMeta:{showWhatsAppHeader:!0,whatsAppExtras:b!==p.CHATBOT,containerStyle:{border:"none",borderBottomRightRadius:0,borderBottomLeftRadius:0,minHeight:426,width:240}},size:"small",hideHeader:!0,emailSpecificMeta:{emailDisplayContent:c,hideViewButtonForEmail:!0,emailHtmlContainerId:"template_html_mobile",containerStyle:{height:"100%",width:"100%"},templateContainerStyles:{height:"100%"}},isPreview:!0};return g?e(h,{children:e(r,Object.assign({},v))}):e(t,{children:i(n,Object.assign({channel:d},{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:l(d),height:443}}),e(m,Object.assign({ref:o},{children:e(r,Object.assign({},v))}))]}))})}));c.displayName="MobilePreview";const h=o.div`
|
|
21
21
|
display: flex;
|
|
22
22
|
align-items: center;
|
|
23
|
+
justify-content: center;
|
|
24
|
+
flex: 1;
|
|
23
25
|
`;export{c as default};
|