@bikdotai/bik-component-library 0.0.314-beta.35 → 0.0.315

package/dist/esm/components/template-context-mapper/modalElements/VariableConnectorsPanel.js

@@ -1,28 +1,6 @@
-import{jsxs as e,jsx as i}from"react/jsx-runtime";import t from"../../../assets/icons/info.svg.js";import{useState as a,useRef as o,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 b}from"../../TypographyStyle.js";import{CheckBox as g}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`
+import{jsxs as e,jsx as i}from"react/jsx-runtime";import t from"../../../assets/icons/info.svg.js";import o from"styled-components";import{Input as a}from"../../input/Input.js";import{CHANNEL_TYPE as l}from"../../template-preview/models/Channels.js";import{Tooltip as r}from"../../tooltips/Tooltip.js";import{TitleRegular as n,BodySecondary as s}from"../../TypographyStyle.js";import{COLORS as c}from"../../../constants/Theme.js";import{useTemplateModalContext as d}from"../context/templateModalContext.js";import m from"./VariableConnector.js";const p=o.div`
 	overflow-y: auto;
 	display: flex;
 	flex-direction: column;
 	height: 100%;
-`,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`
-	padding: 2px 8px;
-	cursor: pointer;
-	color: white;
-	background-color: black;
-	width: fit-content;
-	float: right;
-	margin-top: 0px;
-	font-family: Inter;
-	font-style: normal;
-	font-weight: 600;
-	font-size: 14px;
-	line-height: 20px;
-	align-self: flex-end;
-	border-radius: 4px;
-	border: 1px solid #ccc;
-	margin-right: 1px;
-
-	.add {
-		display: flex;
-		align-items: center;
-	}
-`;export{j as AddVariableStyled,x as Container,y as default};
+`,h=o=>{let{onFocus:h,showVariableModal:b,variableList:v}=o;const{originalVariableList:y,channel:g}=d();return e(p,{children:[e("div",Object.assign({style:{padding:8}},{children:[e("div",Object.assign({style:{display:"flex",gap:8}},{children:[i(n,Object.assign({style:{color:c.content.primary}},{children:"Edit variables and links"})),i(r,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",{children:i(t,{width:20,height:20,color:c.content.placeholder})})}))]})),i(s,Object.assign({style:{color:c.content.secondary}},{children:"You can view variables and links on the left underlined in purple colour."}))]})),null==y?void 0:y.map(((t,o)=>g!==l.EMAIL||t.isEditableVariable?i("div",Object.assign({style:{marginTop:16}},{children:i(m,{index:o,variable:t,onFocus:()=>null==h?void 0:h(o),showVariableModal:b,variableList:v})}),o):e("div",Object.assign({style:{margin:"16px 8px"}},{children:[e(s,Object.assign({style:{color:c.content.primary}},{children:["Locked variable ",o+1]})),i(a,{state:"disabled",placeholder:t.variableName,onChangeText:()=>{}})]}),o)))]})};export{p as Container,h as default};

package/dist/esm/components/template-preview/EmailTemplatePreview.styled.js

@@ -4,7 +4,7 @@ import r from"styled-components";import{COLORS as e,BASE_COLORS as o}from"../../
 	border-top-left-radius: 4px;
 	border-top-right-radius: 4px;
 	border: 1px solid ${e.stroke.primary};
-`,i=r.div`
+`,d=r.div`
 	width: 100%;
 	display: flex;
 	align-items: center;
@@ -14,7 +14,7 @@ import r from"styled-components";import{COLORS as e,BASE_COLORS as o}from"../../
 	border-top-color: ${e.stroke.primary};
 	border-top-width: ${r=>r.hideHeader?"1px":"0px"};
 	overflow: scroll;
-`,d=r.div`
+`,i=r.div`
 	width: 100%;
 	height: 100%;
 	background-color: ${o.grayscale[100]};
@@ -25,8 +25,7 @@ import r from"styled-components";import{COLORS as e,BASE_COLORS as o}from"../../
 	align-items: center;
 	justify-content: center;
 	flex-grow: 1;
-	min-height: 180px;
-`,p=r.div`
+`,a=r.div`
 	display: flex;
 	justify-content: center;
 	width: 100%;
@@ -34,10 +33,10 @@ import r from"styled-components";import{COLORS as e,BASE_COLORS as o}from"../../
 	border-bottom-left-radius: 4px;
 	border-bottom-right-radius: 4px;
 	border: 1px solid ${e.stroke.primary};
-`,a=r.div`
+`,p=r.div`
 	border-radius: 4px;
 	background-color: ${e.surface.standard};
 	margin-top: ${r=>r.hideHeader?0:16};
 	display: flex;
 	flex-direction: column;
-`;export{d as CardLoadingContainer,a as EmailContainer,t as Header,s as IframeContainer,i as ImageContainer,p as ViewButton};
+`;export{i as CardLoadingContainer,p as EmailContainer,t as Header,s as IframeContainer,d as ImageContainer,a as ViewButton};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@bikdotai/bik-component-library",
-	"version": "0.0.314-beta.35",
+	"version": "0.0.315",
 	"description": "Bik Component Library",
 	"repository": {
 		"type": "git",