@bikdotai/bik-component-library 0.0.369-beta.16 → 0.0.369-beta.21
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/components/modals/Modal.js +1 -1
- package/dist/cjs/components/template-context-mapper/modalElements/VariableConnectorsPanel.js +2 -2
- package/dist/cjs/components/template-preview/SmsTemplatePreview.js +1 -1
- package/dist/esm/components/modals/Modal.js +1 -1
- package/dist/esm/components/template-context-mapper/modalElements/VariableConnectorsPanel.js +2 -2
- package/dist/esm/components/template-preview/SmsTemplatePreview.js +1 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),s=require("./modal.styled.js"),n=require("../../constants/Theme.js"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),s=require("./modal.styled.js"),n=require("../../constants/Theme.js"),o=require("../../assets/icons/cross.svg.js");exports.Modal=t=>{var i;return e.jsx(e.Fragment,{children:t.open&&e.jsx("div",Object.assign({id:t.id||"bik-modal"},{children:e.jsx(s.RootContainer,Object.assign({zIndex:t.zIndex,onClick:e=>{t.closeOnOutsideClick&&t.onClose?t.onClose():e.stopPropagation()}},{children:e.jsx(s.CentralContainer,Object.assign({style:Object.assign({},null!==(i=t.centralContainerStyles)&&void 0!==i?i:{}),onClick:e=>{e.stopPropagation()},width:t.width},{children:e.jsxs(e.Fragment,{children:[!(null==t?void 0:t.hideCrossButton)&&e.jsx(s.CloseButtonContainer,Object.assign({onClick:()=>t.onClose&&t.onClose()},{children:e.jsx(o.default,{height:20,width:20,color:n.COLORS.content.secondary})})),t.children]})}))}))}))})};
|
package/dist/cjs/components/template-context-mapper/modalElements/VariableConnectorsPanel.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),a=require("../../../assets/icons/info.svg.js"),t=require("react"),i=require("styled-components"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),a=require("../../../assets/icons/info.svg.js"),t=require("react"),i=require("styled-components"),s=require("../../add-variableV2/AddVariableV2SideModal.js"),r=require("../../../assets/icons/plus.svg.js");require("../../add-variableV2/AddVariableV2.styled.js"),require("../../button/Button.js"),require("../../icon-button/IconButton.js");var l=require("../../input/Input.js"),n=require("../../tooltips/Tooltip.js"),o=require("../../../constants/Theme.js"),d=require("../../TypographyStyle.js"),c=require("../../checkBox/CheckBox.js"),u=require("../../template-preview/models/Channels.js"),h=require("../context/templateModalContext.js"),x=require("./VariableConnector.js");function p(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var b=p(i);const j=b.default.div`
|
|
2
2
|
overflow-y: auto;
|
|
3
3
|
display: flex;
|
|
4
4
|
flex-direction: column;
|
|
@@ -25,4 +25,4 @@
|
|
|
25
25
|
display: flex;
|
|
26
26
|
align-items: center;
|
|
27
27
|
}
|
|
28
|
-
`;exports.AddVariableStyled=g,exports.Container=j,exports.default=i=>{let{onFocus:p,showVariableModal:b,variableList:f,discountCode:v,setDiscountCode:y}=i;const{originalVariableList:m,channel:V}=h.useTemplateModalContext(),[O,C]=t.useState(!1),[S,q]=t.useState(!1),[w,
|
|
28
|
+
`;exports.AddVariableStyled=g,exports.Container=j,exports.default=i=>{let{onFocus:p,showVariableModal:b,variableList:f,discountCode:v,setDiscountCode:y}=i;const{originalVariableList:m,channel:V}=h.useTemplateModalContext(),[O,C]=t.useState(!1),[S,q]=t.useState(!1),[w,k]=t.useState(!1),[T,L]=t.useState(""),[B,E]=t.useState(!1),A=t.useRef(),I=t.useRef();return t.useEffect((()=>{y&&y(v+T)}),[T]),t.useEffect((()=>{m.forEach((e=>{"checkout.checkoutUrl"===e.updatedValue.replace("{{","").replace("}}","")&&(C(!0),v&&E&&E(!0))}))}),[m]),e.jsxs(j,{children:[e.jsxs("div",Object.assign({style:{padding:8}},{children:[e.jsxs("div",Object.assign({style:{display:"flex",gap:8,alignItems:"center",marginBottom:4}},{children:[e.jsx(d.TitleRegular,Object.assign({style:{color:o.COLORS.content.primary}},{children:"Edit variables and links"})),e.jsx(n.Tooltip,Object.assign({body:"Variables are placeholder texts which can either be filled by data, eg: customer name or can have any custom text within them"},{children:e.jsx("div",Object.assign({style:{display:"flex"}},{children:e.jsx(a.default,{width:20,height:20,color:o.COLORS.content.placeholder})}))}))]})),e.jsx(d.BodySecondary,Object.assign({style:{color:o.COLORS.content.secondary}},{children:"You can view variables and links on the left underlined in purple colour."}))]})),null==m?void 0:m.map(((a,t)=>V!==u.CHANNEL_TYPE.EMAIL||a.isEditableVariable?e.jsx("div",Object.assign({style:{marginTop:16}},{children:e.jsx(x.default,{index:t,variable:a,onFocus:()=>null==p?void 0:p(t),showVariableModal:b,variableList:f,setShowDiscountCheckBox:C})}),t):e.jsxs("div",Object.assign({style:{margin:"16px 8px"}},{children:[e.jsxs(d.BodySecondary,Object.assign({style:{color:o.COLORS.content.primary}},{children:["Locked variable ",t+1]})),e.jsx(l.Input,{state:"disabled",placeholder:a.variableName,onChangeText:()=>{}})]}),t))),(O||v)&&e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"row",marginLeft:10,marginTop:8}},{children:[e.jsx(c.CheckBox,{isChecked:B,onValueChange:()=>{E(!B),console.log("isChecked: ",B),!B&&y&&(console.log("isChecked: ","inside"),y(""))}}),e.jsx(d.TitleSmall,Object.assign({style:{marginLeft:8}},{children:"Add discount code"}))]})),B&&e.jsxs("div",Object.assign({ref:A,style:{margin:10}},{children:[e.jsx(l.Input,{placeholder:"Enter your discount code",onChangeText:e=>{y&&y(e)},value:v,onFocus:()=>{q(!0)},onBlur:e=>{var a;"addVar"===(null===(a=e.relatedTarget)||void 0===a?void 0:a.id)?(A.current&&A.current.focus(),q(!0)):(q(!1),k(!1))},noErrorHint:!0,validate:e=>[!0,""]}),S&&e.jsx(g,Object.assign({ref:I,id:"addVar",onClick:e=>{e.stopPropagation(),k(!0)}},{children:e.jsxs("div",Object.assign({className:"add"},{children:[e.jsx(r.default,{width:20,height:20,color:"white"}),e.jsx("div",Object.assign({className:"variable"},{children:"Add variable"}))]}))}))]})),w&&e.jsx(s.AddVariableV2SideModal,{zIndex:2e3,data:null!=f?f:[],showVariable:w,setShowVariable:k,variableValue:T,setVariableValue:L,placeholder:"Add a variable",customTrigger:e=>{L(e.actualValue),q(!1)}})]})};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),s=require("../../assets/icons/arrow_left.svg.js"),r=require("../../assets/icons/more_vertical.svg.js"),t=require("../../assets/icons/search.svg.js"),i=require("../../constants/Theme.js"),l=require("../TypographyStyle.js"),n=require("./helpers/SmsTemplateHelper.js"),a=require("./SMS/SMSBubble.js"),o=require("./SmsTemplatePreview.styled.js");exports.default=d=>{let{template:c,variableStore:
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),s=require("../../assets/icons/arrow_left.svg.js"),r=require("../../assets/icons/more_vertical.svg.js"),t=require("../../assets/icons/search.svg.js"),i=require("../../constants/Theme.js"),l=require("../TypographyStyle.js"),n=require("./helpers/SmsTemplateHelper.js"),a=require("./SMS/SMSBubble.js"),o=require("./SmsTemplatePreview.styled.js");exports.default=d=>{let{template:c,variableStore:u,hideHeader:j,display_content:h,onlyTemplateContent:x,size:g}=d;var p;const S=null==c?void 0:c.content;return e.jsxs(e.Fragment,{children:[!j&&!x&&e.jsx(o.SMSCardHeader,{children:e.jsx(l.TitleRegular,Object.assign({style:{maxWidth:"100%"}},{children:c.name}))}),!x&&e.jsx(o.SMSHeader,{children:e.jsxs(e.Fragment,{children:[e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"row",gap:8}},{children:[e.jsx(s.default,{width:16,height:16,color:i.COLORS.content.secondary}),e.jsx(l.Caption,{children:null===(p=null==c?void 0:c.headers)||void 0===p?void 0:p[0]})]})),e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"row",gap:8}},{children:[e.jsx(t.default,{width:16,height:16,color:i.COLORS.content.secondary}),e.jsx(r.default,{width:16,height:16,color:i.COLORS.content.secondary})]}))]})}),e.jsx(o.SMSBubbleContainer,Object.assign({size:g},{children:e.jsx(a.default,{size:null!=g?g:"large",content:null!=h?h:n.renderVariableUIForPreview(S,null!=u?u:[])})}))]})};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsx as
|
|
1
|
+
import{jsx as o,Fragment as n,jsxs as s}from"react/jsx-runtime";import{RootContainer as e,CentralContainer as i,CloseButtonContainer as t}from"./modal.styled.js";import{COLORS as r}from"../../constants/Theme.js";import l from"../../assets/icons/cross.svg.js";const c=c=>{var d;return o(n,{children:c.open&&o("div",Object.assign({id:c.id||"bik-modal"},{children:o(e,Object.assign({zIndex:c.zIndex,onClick:o=>{c.closeOnOutsideClick&&c.onClose?c.onClose():o.stopPropagation()}},{children:o(i,Object.assign({style:Object.assign({},null!==(d=c.centralContainerStyles)&&void 0!==d?d:{}),onClick:o=>{o.stopPropagation()},width:c.width},{children:s(n,{children:[!(null==c?void 0:c.hideCrossButton)&&o(t,Object.assign({onClick:()=>c.onClose&&c.onClose()},{children:o(l,{height:20,width:20,color:r.content.secondary})})),c.children]})}))}))}))})};export{c as Modal};
|
package/dist/esm/components/template-context-mapper/modalElements/VariableConnectorsPanel.js
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import{jsxs as e,jsx as i}from"react/jsx-runtime";import t from"../../../assets/icons/info.svg.js";import{useState as
|
|
1
|
+
import{jsxs as e,jsx as i}from"react/jsx-runtime";import t from"../../../assets/icons/info.svg.js";import{useState as o,useRef as a,useEffect as r}from"react";import l from"styled-components";import{AddVariableV2SideModal as n}from"../../add-variableV2/AddVariableV2SideModal.js";import s from"../../../assets/icons/plus.svg.js";import"../../add-variableV2/AddVariableV2.styled.js";import"../../button/Button.js";import"../../icon-button/IconButton.js";import{Input as d}from"../../input/Input.js";import{Tooltip as c}from"../../tooltips/Tooltip.js";import{COLORS as p}from"../../../constants/Theme.js";import{TitleRegular as h,BodySecondary as m,TitleSmall as g}from"../../TypographyStyle.js";import{CheckBox as b}from"../../checkBox/CheckBox.js";import{CHANNEL_TYPE as u}from"../../template-preview/models/Channels.js";import{useTemplateModalContext as f}from"../context/templateModalContext.js";import v from"./VariableConnector.js";const x=l.div`
|
|
2
2
|
overflow-y: auto;
|
|
3
3
|
display: flex;
|
|
4
4
|
flex-direction: column;
|
|
5
5
|
height: 100%;
|
|
6
|
-
`,y=l=>{let{onFocus:y,showVariableModal:V,variableList:w,discountCode:O,setDiscountCode:k}=l;const{originalVariableList:C,channel:T}=f(),[B,L]=
|
|
6
|
+
`,y=l=>{let{onFocus:y,showVariableModal:V,variableList:w,discountCode:O,setDiscountCode:k}=l;const{originalVariableList:C,channel:T}=f(),[B,L]=o(!1),[A,E]=o(!1),[I,M]=o(!1),[S,D]=o(""),[F,N]=o(!1),z=a(),H=a();return r((()=>{k&&k(O+S)}),[S]),r((()=>{C.forEach((e=>{"checkout.checkoutUrl"===e.updatedValue.replace("{{","").replace("}}","")&&(L(!0),O&&N&&N(!0))}))}),[C]),e(x,{children:[e("div",Object.assign({style:{padding:8}},{children:[e("div",Object.assign({style:{display:"flex",gap:8,alignItems:"center",marginBottom:4}},{children:[i(h,Object.assign({style:{color:p.content.primary}},{children:"Edit variables and links"})),i(c,Object.assign({body:"Variables are placeholder texts which can either be filled by data, eg: customer name or can have any custom text within them"},{children:i("div",Object.assign({style:{display:"flex"}},{children:i(t,{width:20,height:20,color:p.content.placeholder})}))}))]})),i(m,Object.assign({style:{color:p.content.secondary}},{children:"You can view variables and links on the left underlined in purple colour."}))]})),null==C?void 0:C.map(((t,o)=>T!==u.EMAIL||t.isEditableVariable?i("div",Object.assign({style:{marginTop:16}},{children:i(v,{index:o,variable:t,onFocus:()=>null==y?void 0:y(o),showVariableModal:V,variableList:w,setShowDiscountCheckBox:L})}),o):e("div",Object.assign({style:{margin:"16px 8px"}},{children:[e(m,Object.assign({style:{color:p.content.primary}},{children:["Locked variable ",o+1]})),i(d,{state:"disabled",placeholder:t.variableName,onChangeText:()=>{}})]}),o))),(B||O)&&e("div",Object.assign({style:{display:"flex",flexDirection:"row",marginLeft:10,marginTop:8}},{children:[i(b,{isChecked:F,onValueChange:()=>{N(!F),console.log("isChecked: ",F),!F&&k&&(console.log("isChecked: ","inside"),k(""))}}),i(g,Object.assign({style:{marginLeft:8}},{children:"Add discount code"}))]})),F&&e("div",Object.assign({ref:z,style:{margin:10}},{children:[i(d,{placeholder:"Enter your discount code",onChangeText:e=>{k&&k(e)},value:O,onFocus:()=>{E(!0)},onBlur:e=>{var i;"addVar"===(null===(i=e.relatedTarget)||void 0===i?void 0:i.id)?(z.current&&z.current.focus(),E(!0)):(E(!1),M(!1))},noErrorHint:!0,validate:e=>[!0,""]}),A&&i(j,Object.assign({ref:H,id:"addVar",onClick:e=>{e.stopPropagation(),M(!0)}},{children:e("div",Object.assign({className:"add"},{children:[i(s,{width:20,height:20,color:"white"}),i("div",Object.assign({className:"variable"},{children:"Add variable"}))]}))}))]})),I&&i(n,{zIndex:2e3,data:null!=w?w:[],showVariable:I,setShowVariable:M,variableValue:S,setVariableValue:D,placeholder:"Add a variable",customTrigger:e=>{D(e.actualValue),E(!1)}})]})},j=l.button`
|
|
7
7
|
padding: 2px 8px;
|
|
8
8
|
cursor: pointer;
|
|
9
9
|
color: white;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsxs as e,Fragment as t,jsx as r}from"react/jsx-runtime";import s from"../../assets/icons/arrow_left.svg.js";import o from"../../assets/icons/more_vertical.svg.js";import i from"../../assets/icons/search.svg.js";import{COLORS as l}from"../../constants/Theme.js";import{TitleRegular as n,Caption as c}from"../TypographyStyle.js";import{renderVariableUIForPreview as a}from"./helpers/SmsTemplateHelper.js";import d from"./SMS/SMSBubble.js";import{SMSCardHeader as m,SMSHeader as h,SMSBubbleContainer as p}from"./SmsTemplatePreview.styled.js";const f=f=>{let{template:g,variableStore:y,hideHeader:j,display_content:v,onlyTemplateContent:u,size:S}=f;var b;const w=null==g?void 0:g.content;return e(t,{children:[!j&&!u&&r(m,{children:r(n,Object.assign({style:{maxWidth:"100%"}},{children:g.name}))}),!u&&r(h,{children:e(t,{children:[e("div",Object.assign({style:{display:"flex",flexDirection:"row",gap:8}},{children:[r(s,{width:16,height:16,color:l.content.secondary}),r(c,{children:null===(b=g.headers)||void 0===b?void 0:b[0]})]})),e("div",Object.assign({style:{display:"flex",flexDirection:"row",gap:8}},{children:[r(i,{width:16,height:16,color:l.content.secondary}),r(o,{width:16,height:16,color:l.content.secondary})]}))]})}),r(p,Object.assign({size:S},{children:r(d,{size:null!=S?S:"large",content:null!=v?v:a(w,null!=y?y:[])})}))]})};export{f as default};
|
|
1
|
+
import{jsxs as e,Fragment as t,jsx as r}from"react/jsx-runtime";import s from"../../assets/icons/arrow_left.svg.js";import o from"../../assets/icons/more_vertical.svg.js";import i from"../../assets/icons/search.svg.js";import{COLORS as l}from"../../constants/Theme.js";import{TitleRegular as n,Caption as c}from"../TypographyStyle.js";import{renderVariableUIForPreview as a}from"./helpers/SmsTemplateHelper.js";import d from"./SMS/SMSBubble.js";import{SMSCardHeader as m,SMSHeader as h,SMSBubbleContainer as p}from"./SmsTemplatePreview.styled.js";const f=f=>{let{template:g,variableStore:y,hideHeader:j,display_content:v,onlyTemplateContent:u,size:S}=f;var b;const w=null==g?void 0:g.content;return e(t,{children:[!j&&!u&&r(m,{children:r(n,Object.assign({style:{maxWidth:"100%"}},{children:g.name}))}),!u&&r(h,{children:e(t,{children:[e("div",Object.assign({style:{display:"flex",flexDirection:"row",gap:8}},{children:[r(s,{width:16,height:16,color:l.content.secondary}),r(c,{children:null===(b=null==g?void 0:g.headers)||void 0===b?void 0:b[0]})]})),e("div",Object.assign({style:{display:"flex",flexDirection:"row",gap:8}},{children:[r(i,{width:16,height:16,color:l.content.secondary}),r(o,{width:16,height:16,color:l.content.secondary})]}))]})}),r(p,Object.assign({size:S},{children:r(d,{size:null!=S?S:"large",content:null!=v?v:a(w,null!=y?y:[])})}))]})};export{f as default};
|