@bikdotai/bik-component-library 0.0.324-beta.15 → 0.0.324-beta.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/components/bik-layout/MockMenus.d.ts +0 -1
- package/dist/cjs/components/input-with-vars/InputWithVariables.d.ts +1 -1
- package/dist/cjs/components/input-with-vars/InputWithVariables.js +6 -6
- package/dist/cjs/components/template-context-mapper/modalElements/VariableConnectorsPanel.js +2 -2
- package/dist/esm/components/bik-layout/MockMenus.d.ts +0 -1
- package/dist/esm/components/input-with-vars/InputWithVariables.d.ts +1 -1
- package/dist/esm/components/input-with-vars/InputWithVariables.js +5 -5
- package/dist/esm/components/template-context-mapper/modalElements/VariableConnectorsPanel.js +1 -1
- package/package.json +1 -1
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),a=require("
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
`;exports.InputWithVariables=r=>{const
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),a=require("react"),l=require("uuid"),r=require("styled-components"),i=require("../input/Input.js"),t=require("../TypographyStyle.js"),s=require("../../constants/Theme.js"),d=require("../../assets/icons/PlusIcon.js"),u=require("../add-variableV2/AddVariableBox.styled.js"),o=require("../add-variableV2/AddVariableV2.js");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const c=n(r).default.div`
|
|
2
|
+
margin-bottom: 32px;
|
|
3
|
+
input {
|
|
4
|
+
color: ${e=>e.isVar?s.COLORS.stroke.brand:"black"}
|
|
5
|
+
}
|
|
6
|
+
`;exports.InputWithVariables=r=>{const s=a.useRef(null),[n,v]=a.useState(!1),[b]=a.useState(l.v4()),[p,V]=a.useState(),[g,h]=a.useState(r.prevVariable),[j,x]=a.useState(!1),[y,T]=a.useState(!1);return a.useEffect((()=>{p&&p.actualValue&&(r.allowMix?h((e=>({actualValue:e.actualValue+p.actualValue,variableType:"string"}))):h((e=>({actualValue:p.actualValue,variableType:p.variableType,needsFetching:p.needsFetching}))))}),[p]),a.useEffect((()=>{r.onChange(g)}),[g]),e.jsxs(c,Object.assign({isVar:/^{{.*}}$/.test(g.actualValue)},{children:[e.jsx(i.Input,{id:b,ref:s,skipFocus:!0,textControl:!0,isActive:n,value:g.actualValue,validate:e=>[!0,""],errorMessage:"",placeholder:"Add a value",onChangeText:function(e,a){if(r.onlyVariables){const e=(null==a?void 0:a.keyCode)||(null==a?void 0:a.charCode);8!=e&&46!=e||h({actualValue:"",variableType:"string"})}else r.allowMix?h({actualValue:e,variableType:"string"}):h({actualValue:e.replace(/{{.*}}/,""),variableType:"string"})},onReferenceInit:()=>{},onFocus:e=>{var a;v(!0),T(!0),"Search..."!==(null===(a=e.relatedTarget)||void 0===a?void 0:a.placeholder)||j||x(!0)},onBlur:e=>{var a,l,r,i,t,d,u;"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===(d=null===(t=e.relatedTarget)||void 0===t?void 0:t.className)||void 0===d?void 0:d.includes("sc-dZoequ "))?(s.current&&s.current.focus(),v(!0)):"Search..."===(null===(u=e.relatedTarget)||void 0===u?void 0:u.placeholder)?v(!0):(v(!1),x(!1),T(!1))}}),e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"row",justifyContent:"space-between"}},{children:[g.actualValue&&r.showHelp?e.jsx("div",Object.assign({style:{marginTop:4}},{children:e.jsx(t.BodyCaption,{children:`This value is of type ${g.variableType}`})})):e.jsx("div",{}),y&&e.jsx(u.AddVariableStyled,Object.assign({right:r.addVarBoxRight,id:"addVar",onClick:()=>{x(!j)}},{children:e.jsxs("div",Object.assign({className:"add"},{children:[e.jsx(d.default,{color:"white"}),e.jsx("div",Object.assign({className:"variable"},{children:"Add variable"}))]}))}))]})),j&&e.jsx(o.AddVariableV2,{data:r.variablesList,showVariable:!0,setShowVariable:()=>{x(!1)},variableValue:p,setVariableValue:V,placeholder:"",pickerSize:"large",enableVariable:!0,selectWithTypes:!0,onSearchBlur:e=>{var a,l,r,i,t,d;"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===(t=null===(i=e.relatedTarget)||void 0===i?void 0:i.className)||void 0===t?void 0:t.includes("sc-dZoequ "))?s.current.focus():"Enter here"===(null===(d=e.relatedTarget)||void 0===d?void 0:d.placeholder)?e.relatedTarget.id!==b&&(x(!1),T(!1),v(!1)):(x(!1),T(!1),v(!1))}})]}))};
|
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,T]=t.useState(!1),[k,L]=t.useState(""),[B,
|
|
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,T]=t.useState(!1),[k,L]=t.useState(""),[B,A]=t.useState(!1),E=t.useRef(),I=t.useRef();return t.useEffect((()=>{y&&y(v+k)}),[k]),t.useEffect((()=>{console.log("originalVariableList: ",m),m.forEach((e=>{"checkout.checkoutUrl"===e.updatedValue.replace("{{","").replace("}}","")&&(C(!0),v&&A&&A(!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:()=>{A&&A(!B)}}),e.jsx(d.TitleSmall,Object.assign({style:{marginLeft:8}},{children:"Add discount codes"}))]})),B&&e.jsxs("div",Object.assign({ref:E,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)?(E.current&&E.current.focus(),q(!0)):(q(!1),T(!1))}}),S&&e.jsx(g,Object.assign({ref:I,id:"addVar",onClick:e=>{e.stopPropagation(),T(!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:T,variableValue:k,setVariableValue:L,placeholder:"Add a variable",customTrigger:e=>{L(e.actualValue),q(!1)}})]})};
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import{jsxs as e,jsx as a}from"react/jsx-runtime";import
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
1
|
+
import{jsxs as e,jsx as a}from"react/jsx-runtime";import{useRef as l,useState as r,useEffect as i}from"react";import{v4 as t}from"uuid";import o from"styled-components";import{Input as d}from"../input/Input.js";import{BodyCaption as s}from"../TypographyStyle.js";import{COLORS as n}from"../../constants/Theme.js";import c from"../../assets/icons/PlusIcon.js";import{AddVariableStyled as u}from"../add-variableV2/AddVariableBox.styled.js";import{AddVariableV2 as v}from"../add-variableV2/AddVariableV2.js";const p=o=>{const n=l(null),[p,g]=r(!1),[m]=r(t()),[h,V]=r(),[T,f]=r(o.prevVariable),[y,j]=r(!1),[x,w]=r(!1);return i((()=>{h&&h.actualValue&&(o.allowMix?f((e=>({actualValue:e.actualValue+h.actualValue,variableType:"string"}))):f((e=>({actualValue:h.actualValue,variableType:h.variableType,needsFetching:h.needsFetching}))))}),[h]),i((()=>{o.onChange(T)}),[T]),e(b,Object.assign({isVar:/^{{.*}}$/.test(T.actualValue)},{children:[a(d,{id:m,ref:n,skipFocus:!0,textControl:!0,isActive:p,value:T.actualValue,validate:e=>[!0,""],errorMessage:"",placeholder:"Add a value",onChangeText:function(e,a){if(o.onlyVariables){const e=(null==a?void 0:a.keyCode)||(null==a?void 0:a.charCode);8!=e&&46!=e||f({actualValue:"",variableType:"string"})}else o.allowMix?f({actualValue:e,variableType:"string"}):f({actualValue:e.replace(/{{.*}}/,""),variableType:"string"})},onReferenceInit:()=>{},onFocus:e=>{var a;g(!0),w(!0),"Search..."!==(null===(a=e.relatedTarget)||void 0===a?void 0:a.placeholder)||y||j(!0)},onBlur:e=>{var a,l,r,i,t,o,d;"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===(t=e.relatedTarget)||void 0===t?void 0:t.className)||void 0===o?void 0:o.includes("sc-dZoequ "))?(n.current&&n.current.focus(),g(!0)):"Search..."===(null===(d=e.relatedTarget)||void 0===d?void 0:d.placeholder)?g(!0):(g(!1),j(!1),w(!1))}}),e("div",Object.assign({style:{display:"flex",flexDirection:"row",justifyContent:"space-between"}},{children:[T.actualValue&&o.showHelp?a("div",Object.assign({style:{marginTop:4}},{children:a(s,{children:`This value is of type ${T.variableType}`})})):a("div",{}),x&&a(u,Object.assign({right:o.addVarBoxRight,id:"addVar",onClick:()=>{j(!y)}},{children:e("div",Object.assign({className:"add"},{children:[a(c,{color:"white"}),a("div",Object.assign({className:"variable"},{children:"Add variable"}))]}))}))]})),y&&a(v,{data:o.variablesList,showVariable:!0,setShowVariable:()=>{j(!1)},variableValue:h,setVariableValue:V,placeholder:"",pickerSize:"large",enableVariable:!0,selectWithTypes:!0,onSearchBlur:e=>{var a,l,r,i,t,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===(t=null===(i=e.relatedTarget)||void 0===i?void 0:i.className)||void 0===t?void 0:t.includes("sc-dZoequ "))?n.current.focus():"Enter here"===(null===(o=e.relatedTarget)||void 0===o?void 0:o.placeholder)?e.relatedTarget.id!==m&&(j(!1),w(!1),g(!1)):(j(!1),w(!1),g(!1))}})]}))},b=o.div`
|
|
2
|
+
margin-bottom: 32px;
|
|
3
|
+
input {
|
|
4
|
+
color: ${e=>e.isVar?n.stroke.brand:"black"}
|
|
5
|
+
}
|
|
6
6
|
`;export{p as InputWithVariables};
|
package/dist/esm/components/template-context-mapper/modalElements/VariableConnectorsPanel.js
CHANGED
|
@@ -3,7 +3,7 @@ import{jsxs as e,jsx as i}from"react/jsx-runtime";import t from"../../../assets/
|
|
|
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
|
|
6
|
+
`,y=l=>{let{onFocus:y,showVariableModal:V,variableList:w,discountCode:O,setDiscountCode:k}=l;const{originalVariableList:C,channel:T}=f(),[L,B]=a(!1),[A,I]=a(!1),[E,M]=a(!1),[S,D]=a(""),[F,N]=a(!1),z=o(),P=o();return r((()=>{k&&k(O+S)}),[S]),r((()=>{console.log("originalVariableList: ",C),C.forEach((e=>{"checkout.checkoutUrl"===e.updatedValue.replace("{{","").replace("}}","")&&(B(!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,a)=>T!==u.EMAIL||t.isEditableVariable?i("div",Object.assign({style:{marginTop:16}},{children:i(v,{index:a,variable:t,onFocus:()=>null==y?void 0:y(a),showVariableModal:V,variableList:w,setShowDiscountCheckBox:B})}),a):e("div",Object.assign({style:{margin:"16px 8px"}},{children:[e(m,Object.assign({style:{color:p.content.primary}},{children:["Locked variable ",a+1]})),i(d,{state:"disabled",placeholder:t.variableName,onChangeText:()=>{}})]}),a))),(L||O)&&e("div",Object.assign({style:{display:"flex",flexDirection:"row",marginLeft:10,marginTop:8}},{children:[i(g,{isChecked:F,onValueChange:()=>{N&&N(!F)}}),i(b,Object.assign({style:{marginLeft:8}},{children:"Add discount codes"}))]})),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:()=>{I(!0)},onBlur:e=>{var i;"addVar"===(null===(i=e.relatedTarget)||void 0===i?void 0:i.id)?(z.current&&z.current.focus(),I(!0)):(I(!1),M(!1))}}),A&&i(j,Object.assign({ref:P,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"}))]}))}))]})),E&&i(n,{zIndex:2e3,data:null!=w?w:[],showVariable:E,setShowVariable:M,variableValue:S,setVariableValue:D,placeholder:"Add a variable",customTrigger:e=>{D(e.actualValue),I(!1)}})]})},j=l.button`
|
|
7
7
|
padding: 2px 8px;
|
|
8
8
|
cursor: pointer;
|
|
9
9
|
color: white;
|