@bikdotai/bik-component-library 0.0.359-beta.13 → 0.0.359-beta.17
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/TemplateContextMapper.js +1 -1
- package/dist/cjs/components/template-context-mapper/modalElements/MobilePreview.js +3 -3
- package/dist/cjs/components/template-context-mapper/modalElements/VariableConnector.js +3 -3
- package/dist/cjs/components/template-context-mapper/modalElements/VariableConnectorWhatsApp.d.ts +1 -2
- package/dist/cjs/components/template-preview/utils/TemplateHelperUtils.js +1 -1
- package/dist/esm/components/template-context-mapper/TemplateContextMapper.js +1 -1
- package/dist/esm/components/template-context-mapper/modalElements/MobilePreview.js +3 -3
- package/dist/esm/components/template-context-mapper/modalElements/VariableConnector.js +2 -2
- package/dist/esm/components/template-context-mapper/modalElements/VariableConnectorWhatsApp.d.ts +1 -2
- package/dist/esm/components/template-preview/utils/TemplateHelperUtils.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"),t=require("react"),l=require("../../utils/StringUtils.js"),a=require("../modals/styledModal.js"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),l=require("../../utils/StringUtils.js"),a=require("../modals/styledModal.js"),s=require("../template-preview/models/Channels.js"),o=require("./context/templateModalContext.js"),i=require("./modalElements/Footer.js"),n=require("./modalElements/TemplateSelectModalContent.js"),r=require("./utils/convertPlaceholdersToBikDropdown.js");exports.TemplateContextMapper=d=>{let{selectedTemplate:c,closeDialog:u,showVariableMapping:p,channel:m,htmlContent:h,templateVariables:C,onTemplateSelect:g,globalPlaceholders:b,showOnlyContent:S,whatsappSpecificPickerMeta:T,zIndex:v,showVariableModal:j,variableList:x,discountCode:M,setDiscountCode:E,onBackPress:P,enabledCustomText:L}=d;var f,w;t.useEffect((()=>{N(h)}),[h]);const[q,y]=t.useState(m===s.CHANNEL_TYPE.EMAIL?"desktop":"mobile"),[A,N]=t.useState(h),[k,D]=t.useState(!1),[V,_]=t.useState(c),[H,I]=t.useState(null!=C?C:[]),[O,B]=t.useState(!1);const Y=t.useMemo((()=>r.convertPlaceholdersToBikDropdown(b)),[b]);return e.jsx(o.TemplateModalContext.Provider,Object.assign({value:{template:V,setTemplate:_,device:q,setDevice:y,display_content:A,setDisplayContent:N,originalVariableList:H,setOriginalVariableList:I,isError:k,setIsError:D,channel:m,globalNormalizedPlaceholders:Y,templateSelectionTriggered:O,setTemplateSelectionTriggered:B,enabledCustomText:L}},{children:S?e.jsx(n.default,{channel:s.CHANNEL_TYPE.EMAIL,hideHeader:!0}):e.jsxs(a.StyledModal,Object.assign({zIndex:v,centralContainerStyles:{width:m===s.CHANNEL_TYPE.EMAIL&&p?1e3:650},open:!0,onClose:()=>{null==u||u()},headingTitle:null==V?void 0:V.label,headingSubtitle:m===s.CHANNEL_TYPE.WHATSAPP?`${l.default.capitaliseFirstLetterOfString(null!==(f=null==V?void 0:V.category)&&void 0!==f?f:"")} • ${null!==(w=null==V?void 0:V.templateCategory)&&void 0!==w?w:""}`:"",onBackPress:()=>{null==P||P()}},{children:[e.jsx(n.default,{showVariableMapping:p,channel:m,whatsappSpecificPickerMeta:T,showVariableModal:j,variableList:x,discountCode:M,setDiscountCode:E}),g?e.jsx(i.default,{onSelect:function(){const e=null==g?void 0:g(V,H,null!=A?A:"");e?D(!!e):B(!0)}}):e.jsx(e.Fragment,{})]}))}))};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),
|
|
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("../../template-preview/models/TemplateMeta.js");var r=require("../../template-preview/models/Channels.js");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var s=o(t),l=o(i);const p=l.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=
|
|
9
|
+
`,n=l.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
|
-
`,c=
|
|
20
|
+
`,c=s.default.forwardRef(((t,i)=>{let{display_content:o,channel:s,template:l}=t;return e.jsx("div",{children:e.jsxs(p,Object.assign({channel:s},{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:s===r.CHANNEL_TYPE.WHATSAPP?236:213,height:443}}),e.jsx(n,Object.assign({ref:i},{children:e.jsx(a.TemplatePreview,{template:l,channel:s,smsSpecificMeta:{smsDisplayContent:o},whatsAppSpecificMeta:{showWhatsAppHeader:!0,whatsAppExtras:!0,containerStyle:{border:"none",borderBottomRightRadius:0,borderBottomLeftRadius:0,minHeight:426}},size:"small",hideHeader:!0,emailSpecificMeta:{emailDisplayContent:o,hideViewButtonForEmail:!0,emailHtmlContainerId:"template_html_mobile",containerStyle:{height:"100%"},templateContainerStyles:{height:"100%"}}})}))]}))})}));c.displayName="MobilePreview",exports.default=c;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),l=require("../../../assets/icons/edit.svg.js"),t=require("react"),a=require("styled-components"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),l=require("../../../assets/icons/edit.svg.js"),t=require("react"),a=require("styled-components"),n=require("../../add-variableV2/AddVariableV2SideModal.js"),i=require("../../dropdown/Dropdown.js"),o=require("../../input/Input.js"),u=require("../../product-picker-v2/collectionScreen.js"),s=require("../../template-preview/constants/regexPatterns.js"),d=require("../../template-preview/models/Channels.js"),r=require("../../TypographyStyle.js"),c=require("../../../utils/StringUtils.js"),v=require("../../../constants/Theme.js"),p=require("../context/templateModalContext.js"),m=require("../utils/getVariableNameEmail.js");function b(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const g=b(a).default.div`
|
|
2
2
|
/* surface/$color-background-warning-light */
|
|
3
3
|
|
|
4
|
-
background: ${e=>e.focused&&e.channel===d.CHANNEL_TYPE.EMAIL?
|
|
4
|
+
background: ${e=>e.focused&&e.channel===d.CHANNEL_TYPE.EMAIL?v.COLORS.background.warning.light:"transparent"};
|
|
5
5
|
border-radius: 4px;
|
|
6
6
|
padding: 8px 10px;
|
|
7
|
-
`,x={value:"custom_link",label:"Custom URL"},h={value:"custom_text",label:"Custom text"};exports.Container=g,exports.default=a=>{let{onFocus:b,variable:E,index:_,showVariableModal:j,variableList:y,setShowDiscountCheckBox:A}=a;var f,
|
|
7
|
+
`,x={value:"custom_link",label:"Custom URL"},h={value:"custom_text",label:"Custom text"};exports.Container=g,exports.default=a=>{let{onFocus:b,variable:E,index:_,showVariableModal:j,variableList:y,setShowDiscountCheckBox:A}=a;var f,T;const[N,P]=t.useState(!1),[C,O]=t.useState(""),[L,k]=t.useState([]),[S,V]=t.useState(),[H,w]=t.useState(!1),[M,q]=t.useState(!1),{device:Y,channel:W,isError:I,originalVariableList:B,template:R,templateSelectionTriggered:$,setTemplate:z,setDisplayContent:D,setOriginalVariableList:U,globalNormalizedPlaceholders:Z,enabledCustomText:F}=p.useTemplateModalContext();function G(e,l){var t,a,n;const i=e;O(""),V(i),W===d.CHANNEL_TYPE.WHATSAPP?"custom_text"!==i.value&&"custom_link"!==i.value?(J(null!==(t=i.value)&&void 0!==t?t:"","string"),null==K||K(null!==(a=E.index)&&void 0!==a?a:0,i.value,!0)):(null==K||K(null!==(n=E.index)&&void 0!==n?n:0,E.variableName),J("","url"===i.bikPlaceholderType?"link":"string")):"custom_text"!==i.value&&"custom_link"!==i.value?J(i.value,"url"===i.bikPlaceholderType?"link":"string"):(O(""),J("",i.value))}function J(e,l){var t,a;const n="custom_link"===l?"link":"custom_text"===l?"string":l;if(W!==d.CHANNEL_TYPE.WHATSAPP){const a=m.getVariableNameForEmailByIndex(_+1),i=null===document||void 0===document?void 0:document.getElementById("mobile"===Y?"template_html_mobile":"template_html_desktop"),o=W===d.CHANNEL_TYPE.EMAIL?null===(t=null==i?void 0:i.contentWindow)||void 0===t?void 0:t.document.getElementById(a):document.getElementById(a);o&&(o.textContent="custom_text"!==l&&"custom_link"!==l||e?e:E.variableName);const u=B.map(((l,t)=>t===_?Object.assign(Object.assign({},l),{type:n,updatedValue:e}):l));null==U||U(u)}if(W===d.CHANNEL_TYPE.WHATSAPP){const l=null===(a=B.body)||void 0===a?void 0:a.map(((l,t)=>t===_?Object.assign(Object.assign({},l),{type:n,updatedValue:e}):l));null==U||U((e=>Object.assign(Object.assign({},e),{body:l,buttons:B.buttons})))}}function K(e,l,t){var a,n;const i=Object.assign({},R),o=null===(a=null==i?void 0:i.components)||void 0===a?void 0:a.map((t=>{var a,n,i,o,u;const s=Object.assign({},t);if("BODY"===t.type&&(null===(n=null===(a=t.example)||void 0===a?void 0:a.body_text)||void 0===n?void 0:n[0])){const t=[...null!==(u=null===(o=null===(i=s.example)||void 0===i?void 0:i.body_text)||void 0===o?void 0:o[0])&&void 0!==u?u:[]];t[e]=l.replace("{{","").replace("}}","").replace("((","").replace("))","");const a=Object.assign(Object.assign({},s.example),{body_text:[t]});return Object.assign(Object.assign({},s),{example:a})}return t}));i.components=o,t&&Array.isArray(null===(n=null==i?void 0:i.mapping)||void 0===n?void 0:n.body)&&(i.mapping=Object.assign(Object.assign({},i.mapping),{body:i.mapping.body.map(((t,a)=>e===a?l:t))})),null==z||z(Object.assign({},i))}return t.useEffect((()=>{N&&(null==b||b())}),[N]),t.useEffect((()=>{!function(){var e,l,t,a,n;const i="mobile"===Y?"template_html_mobile":"template_html_desktop",o=document.getElementById(i),u=(null!==(a=null===(t=null===(l=null===(e=null==o?void 0:o.contentWindow)||void 0===e?void 0:e.document)||void 0===l?void 0:l.body)||void 0===t?void 0:t.innerHTML)&&void 0!==a?a:"")+(null===(n=null==o?void 0:o.contentWindow)||void 0===n?void 0:n.document.head.innerHTML);W===d.CHANNEL_TYPE.EMAIL&&(null==D||D(u))}()}),[$]),t.useEffect((()=>{var e;const l=[];let t=[];if(W!==d.CHANNEL_TYPE.MESSAGE||F){"link"===(null==E?void 0:E.type)?(l.push({label:"",options:[x,h]}),V(x)):(l.push({label:"",options:[x,h]}),V(h));const e=null!=Z?Z:[];k([...l,...e.map((e=>{var l,t;return Object.assign(Object.assign({},e),{label:c.default.toCapitilize(null===(t=null===(l=e.label)||void 0===l?void 0:l.replace(/([A-Z])/g," $1"))||void 0===t?void 0:t.toLowerCase())})}))]),t=[...l,...e]}else{const e=null!=Z?Z:[];k([{label:"",options:[h,x]},...e]),t=[{label:"",options:[h,x]},...e]}if((W===d.CHANNEL_TYPE.WHATSAPP||W===d.CHANNEL_TYPE.EMAIL||W===d.CHANNEL_TYPE.MESSAGE)&&E.updatedValue)if(s.placeHolderNamePattern.test(E.updatedValue)&&W===d.CHANNEL_TYPE.WHATSAPP||E.updatedValue.startsWith("{{")&&W!==d.CHANNEL_TYPE.WHATSAPP){const e=function(e,l,t){var a;let n={label:"",value:""};const i=t===d.CHANNEL_TYPE.WHATSAPP?e.updatedValue.replace("[[","").replace("]]",""):e.updatedValue.replace("{{","").replace("}}","");j?n={label:e.updatedValue?e.updatedValue.replace("{{","").replace("}}","").trim().replace("."," "):"",value:null!==(a=e.updatedValue)&&void 0!==a?a:""}:l.map((e=>{e.options.map((e=>{var l;(null===(l=e.value)||void 0===l?void 0:l.replace("{{","").replace("}}","").trim())===i.trim()&&(n=e)}))}));return n}(E,t,W);e.value&&V(e)}else(null===(e=E.updatedValue)||void 0===e?void 0:e.startsWith("https"))?(V(x),O(E.updatedValue.split("https://")[1])):(V(h),O(E.updatedValue))}),[]),t.useEffect((()=>{Y&&S&&C&&setTimeout((()=>{J("custom_link"===(null==S?void 0:S.value)?`https://${C}`:C,S.value)}),100)}),[Y]),t.useEffect((()=>{!M&&S&&E.updatedValue&&setTimeout((()=>{J("custom_link"===(null==S?void 0:S.value)?`https://${E.updatedValue}`:E.updatedValue,S.value),q(!0)}),100)}),[S]),e.jsxs(g,Object.assign({channel:W,focused:N,onMouseEnter:()=>P(!0),onMouseLeave:()=>P(!1)},{children:[e.jsx("div",Object.assign({style:{marginBottom:8}},{children:e.jsxs(r.BodySecondary,Object.assign({style:{color:I&&!S?v.COLORS.content.negative:v.COLORS.content.primary}},{children:[null===(f=E.variableName)||void 0===f?void 0:f.replace("{{","").replace("}}","")," ","link"===(null==E?void 0:E.type)?"link":"variable"]}))})),e.jsx("div",Object.assign({style:{marginBottom:12}},{children:j?e.jsxs("div",Object.assign({style:{display:"flex",border:"#E0E0E0 1px solid",borderRadius:4,padding:10,justifyContent:(null==S?void 0:S.label)?"space-between":"flex-end"}},{children:[e.jsx(r.BodyPrimary,{children:u.truncate(null!==(T=null==S?void 0:S.label)&&void 0!==T?T:"",20,!0)}),e.jsx(l.default,{onClick:()=>{w(!H)},width:24,height:24,color:v.COLORS.content.primary})]})):e.jsx(i.Dropdown,{options:L,isSearchable:!1,onSelect:G,defaultOptions:S?[Object.assign(Object.assign({},S),{selected:!0})]:[]})})),("custom_text"===(null==S?void 0:S.value)||"custom_link"===(null==S?void 0:S.value))&&e.jsx(o.Input,{labelText:"custom_text"===(null==S?void 0:S.value)?"Custom text value":"custom_link"===(null==S?void 0:S.value)?"Custom URL value":"",id:`variable-value-${null==S?void 0:S.value}-${_}`,value:C,errorMessage:I?C&&0!==C.trim().length?"custom_link"!==S.value||/^https?:\/\/(?:www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b(?:[-a-zA-Z0-9()@:%_\+.~#?&\/=]*)$/.test(`https://${C.trim()}`)&&0!==C.trim().length?"custom_link"!==S.value&&C.length>30?"Length cannot be more than 30":"":"Enter valid URL":"Required field":"",maxCharLimit:"custom_link"===(null==S?void 0:S.value)?void 0:30,prefixText:"custom_link"===(null==S?void 0:S.value)?"https://":"",placeholder:"link"===E.type||"custom_link"===S.value?"Enter custom URL here":"Enter custom text here",onChangeText:e=>{!function(e,l){var t;O(l);const a="custom_link"===(null==S?void 0:S.value)?`https://${l}`:l;J(a,e),W===d.CHANNEL_TYPE.WHATSAPP&&(null==K||K(null!==(t=E.index)&&void 0!==t?t:0,a))}(S.value,e)}}),H&&e.jsx(n.AddVariableV2SideModal,{zIndex:2e3,data:null!=y?y:[],showVariable:H,setShowVariable:w,placeholder:"Add a variable",customTrigger:e=>{null==A||A(!1),"{{custom.url}}"===e.actualValue?G({label:e.displayName,selected:!0,value:"custom_link"}):"{{custom.text}}"==e.actualValue?G({label:e.displayName,selected:!0,value:"custom_text"}):G({label:e.displayName.replace("{{","").replace("}}","").trim().replace("."," "),selected:!0,value:e.actualValue,bikPlaceholderType:"string"})}})]}))};
|
package/dist/cjs/components/template-context-mapper/modalElements/VariableConnectorWhatsApp.d.ts
CHANGED
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
1
|
import { VariableListInterfaceV2 } from "../../add-variableV2/AddVariableV2";
|
|
3
2
|
import { WhatsAppTemplate, WhatsAppTemplateVariables } from "../../template-preview/models/WhatsAppTemplate";
|
|
4
3
|
export type ComponentType = WhatsAppTemplate['components'][0];
|
|
@@ -10,5 +9,5 @@ export interface VariableConnectorWhatsAppProps {
|
|
|
10
9
|
showVariableModal?: boolean;
|
|
11
10
|
variableList?: VariableListInterfaceV2[];
|
|
12
11
|
}
|
|
13
|
-
declare const VariableConnectorWhatsApp:
|
|
12
|
+
declare const VariableConnectorWhatsApp: ({ descriptionComponent, type, showVariableModal, variableList, }: VariableConnectorWhatsAppProps) => import("react/jsx-runtime").JSX.Element;
|
|
14
13
|
export default VariableConnectorWhatsApp;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../constants/regexPatterns.js");exports.TemplateHelperUtils=class{fillVariablesValInBodyText(l,a){let t=arguments.length>2&&void 0!==arguments[2]&&arguments[2];const r=l.match(e.templateVariablePattern),i=l.split(e.templateVariablePattern);if(l&&(null==r?void 0:r.length)){return i.map(((e,l)=>{var n,o,v,d,
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../constants/regexPatterns.js");exports.TemplateHelperUtils=class{fillVariablesValInBodyText(l,a){let t=arguments.length>2&&void 0!==arguments[2]&&arguments[2];const r=l.match(e.templateVariablePattern),i=l.split(e.templateVariablePattern);if(l&&(null==r?void 0:r.length)){return i.map(((e,l)=>{var n,o,v,d,u;const p=null===(n=null==r?void 0:r[l])||void 0===n?void 0:n.replace("{{","").replace("}}","");return i.length-1===l?e:(null===(v=null===(o=null==a?void 0:a[l])||void 0===o?void 0:o.variableName)||void 0===v?void 0:v.trim())===p.trim()||(null===(u=null===(d=null==a?void 0:a[l])||void 0===d?void 0:d.variableVal)||void 0===u?void 0:u.trim())===p.trim()?a[l].editable?`${e}${t?"{{":""}${a[l].variableVal}${t?"}}":""}`:`${e}${t?"{{":""}${a[l].variableName}${t?"}}":""}`:e})).join("")}return l}getTemplateVariablesFromState(l){var a;return null===(a=l.match(e.globalVariablePattern))||void 0===a?void 0:a.map((e=>e.replace("{{","").replace("}}","")))}whatsappOnlyFillVariablesValueInBodyText(l,a){let t=arguments.length>2&&void 0!==arguments[2]&&arguments[2];const r=l.match(e.templateVariablePattern),i=l.split(e.templateVariablePattern);if(l&&(null==r?void 0:r.length)){return i.map(((e,l)=>{var n;const o=null===(n=null==r?void 0:r[l])||void 0===n?void 0:n.replace("{{","").replace("}}","");if(i.length-1===l)return e;const v=a.findIndex((e=>e.variableName===o));if(v>-1){let l=a[v].variableVal;return t||(l=!a[v].variableVal&&a[v].variableName.startsWith("editableVariable")?a[v].variableName:null==l?void 0:l.replace("[[","").replace("]]","")),a[v].editable?`${e}${t?"{{":""}${l}${t?"}}":""}`:`${e}${t?"{{":""}${o}${t?"}}":""}`}return e})).join("")}return l}};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsx as e,jsxs as
|
|
1
|
+
import{jsx as e,jsxs as t,Fragment as l}from"react/jsx-runtime";import{useEffect as o,useState as a,useMemo as i}from"react";import n from"../../utils/StringUtils.js";import{StyledModal as r}from"../modals/styledModal.js";import{CHANNEL_TYPE as s}from"../template-preview/models/Channels.js";import{TemplateModalContext as c}from"./context/templateModalContext.js";import d from"./modalElements/Footer.js";import m from"./modalElements/TemplateSelectModalContent.js";import{convertPlaceholdersToBikDropdown as p}from"./utils/convertPlaceholdersToBikDropdown.js";const u=u=>{let{selectedTemplate:h,closeDialog:g,showVariableMapping:b,channel:v,htmlContent:C,templateVariables:f,onTemplateSelect:M,globalPlaceholders:S,showOnlyContent:T,whatsappSpecificPickerMeta:j,zIndex:w,showVariableModal:P,variableList:x,discountCode:L,setDiscountCode:y,onBackPress:E,enabledCustomText:V}=u;var k,D;o((()=>{z(C)}),[C]);const[I,A]=a(v===s.EMAIL?"desktop":"mobile"),[O,z]=a(C),[B,F]=a(!1),[H,$]=a(h),[N,U]=a(null!=f?f:[]),[W,_]=a(!1);const q=i((()=>p(S)),[S]);return e(c.Provider,Object.assign({value:{template:H,setTemplate:$,device:I,setDevice:A,display_content:O,setDisplayContent:z,originalVariableList:N,setOriginalVariableList:U,isError:B,setIsError:F,channel:v,globalNormalizedPlaceholders:q,templateSelectionTriggered:W,setTemplateSelectionTriggered:_,enabledCustomText:V}},{children:T?e(m,{channel:s.EMAIL,hideHeader:!0}):t(r,Object.assign({zIndex:w,centralContainerStyles:{width:v===s.EMAIL&&b?1e3:650},open:!0,onClose:()=>{null==g||g()},headingTitle:null==H?void 0:H.label,headingSubtitle:v===s.WHATSAPP?`${n.capitaliseFirstLetterOfString(null!==(k=null==H?void 0:H.category)&&void 0!==k?k:"")} • ${null!==(D=null==H?void 0:H.templateCategory)&&void 0!==D?D:""}`:"",onBackPress:()=>{null==E||E()}},{children:[e(m,{showVariableMapping:b,channel:v,whatsappSpecificPickerMeta:j,showVariableModal:P,variableList:x,discountCode:L,setDiscountCode:y}),M?e(d,{onSelect:function(){const e=null==M?void 0:M(H,N,null!=O?O:"");e?F(!!e):_(!0)}}):e(l,{})]}))}))};export{u as TemplateContextMapper};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{jsx as e,jsxs as t}from"react/jsx-runtime";import i from"react";import
|
|
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`
|
|
2
2
|
position: relative;
|
|
3
3
|
height: 100%;
|
|
4
4
|
border-radius: 31px;
|
|
@@ -6,7 +6,7 @@ import{jsx as e,jsxs as t}from"react/jsx-runtime";import i from"react";import o
|
|
|
6
6
|
background-color: white;
|
|
7
7
|
margin: auto;
|
|
8
8
|
overflow-y: auto;
|
|
9
|
-
`,l=
|
|
9
|
+
`,l=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 o
|
|
|
17
17
|
height: calc(100% - 17px);
|
|
18
18
|
border-radius: 16px;
|
|
19
19
|
overflow-y: auto;
|
|
20
|
-
`,s=i.forwardRef(((i,
|
|
20
|
+
`,s=i.forwardRef(((i,a)=>{let{display_content:s,channel:m,template:n}=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:213,height:443}}),e(l,Object.assign({ref:a},{children:e(o,{template:n,channel:m,smsSpecificMeta:{smsDisplayContent:s},whatsAppSpecificMeta:{showWhatsAppHeader:!0,whatsAppExtras:!0,containerStyle:{border:"none",borderBottomRightRadius:0,borderBottomLeftRadius:0,minHeight:426}},size:"small",hideHeader:!0,emailSpecificMeta:{emailDisplayContent:s,hideViewButtonForEmail:!0,emailHtmlContainerId:"template_html_mobile",containerStyle:{height:"100%"},templateContainerStyles:{height:"100%"}}})}))]}))})}));s.displayName="MobilePreview";export{s as default};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import{jsxs as e,jsx as l}from"react/jsx-runtime";import t from"../../../assets/icons/edit.svg.js";import{useState as
|
|
1
|
+
import{jsxs as e,jsx as l}from"react/jsx-runtime";import t from"../../../assets/icons/edit.svg.js";import{useState as a,useEffect as o}from"react";import n from"styled-components";import{AddVariableV2SideModal as i}from"../../add-variableV2/AddVariableV2SideModal.js";import{Dropdown as u}from"../../dropdown/Dropdown.js";import{Input as s}from"../../input/Input.js";import{truncate as d}from"../../product-picker-v2/collectionScreen.js";import{placeHolderNamePattern as r}from"../../template-preview/constants/regexPatterns.js";import{CHANNEL_TYPE as c}from"../../template-preview/models/Channels.js";import{BodySecondary as m,BodyPrimary as p}from"../../TypographyStyle.js";import v from"../../../utils/StringUtils.js";import{COLORS as b}from"../../../constants/Theme.js";import{useTemplateModalContext as g}from"../context/templateModalContext.js";import{getVariableNameForEmailByIndex as h}from"../utils/getVariableNameEmail.js";const x=n.div`
|
|
2
2
|
/* surface/$color-background-warning-light */
|
|
3
3
|
|
|
4
4
|
background: ${e=>e.focused&&e.channel===c.EMAIL?b.background.warning.light:"transparent"};
|
|
5
5
|
border-radius: 4px;
|
|
6
6
|
padding: 8px 10px;
|
|
7
|
-
`,y={value:"custom_link",label:"Custom URL"},
|
|
7
|
+
`,y={value:"custom_link",label:"Custom URL"},j={value:"custom_text",label:"Custom text"},f=n=>{let{onFocus:f,variable:_,index:k,showVariableModal:A,variableList:V,setShowDiscountCheckBox:O}=n;var T,E;const[P,S]=a(!1),[w,L]=a(""),[C,M]=a([]),[W,H]=a(),[I,$]=a(!1),[B,N]=a(!1),{device:z,channel:R,isError:U,originalVariableList:D,template:Z,templateSelectionTriggered:G,setTemplate:q,setDisplayContent:F,setOriginalVariableList:Y,globalNormalizedPlaceholders:J,enabledCustomText:K}=g();function Q(e,l){var t,a,o;const n=e;L(""),H(n),R===c.WHATSAPP?"custom_text"!==n.value&&"custom_link"!==n.value?(X(null!==(t=n.value)&&void 0!==t?t:"","string"),null==ee||ee(null!==(a=_.index)&&void 0!==a?a:0,n.value,!0)):(null==ee||ee(null!==(o=_.index)&&void 0!==o?o:0,_.variableName),X("","url"===n.bikPlaceholderType?"link":"string")):"custom_text"!==n.value&&"custom_link"!==n.value?X(n.value,"url"===n.bikPlaceholderType?"link":"string"):(L(""),X("",n.value))}function X(e,l){var t,a;const o="custom_link"===l?"link":"custom_text"===l?"string":l;if(R!==c.WHATSAPP){const a=h(k+1),n=null===document||void 0===document?void 0:document.getElementById("mobile"===z?"template_html_mobile":"template_html_desktop"),i=R===c.EMAIL?null===(t=null==n?void 0:n.contentWindow)||void 0===t?void 0:t.document.getElementById(a):document.getElementById(a);i&&(i.textContent="custom_text"!==l&&"custom_link"!==l||e?e:_.variableName);const u=D.map(((l,t)=>t===k?Object.assign(Object.assign({},l),{type:o,updatedValue:e}):l));null==Y||Y(u)}if(R===c.WHATSAPP){const l=null===(a=D.body)||void 0===a?void 0:a.map(((l,t)=>t===k?Object.assign(Object.assign({},l),{type:o,updatedValue:e}):l));null==Y||Y((e=>Object.assign(Object.assign({},e),{body:l,buttons:D.buttons})))}}function ee(e,l,t){var a,o;const n=Object.assign({},Z),i=null===(a=null==n?void 0:n.components)||void 0===a?void 0:a.map((t=>{var a,o,n,i,u;const s=Object.assign({},t);if("BODY"===t.type&&(null===(o=null===(a=t.example)||void 0===a?void 0:a.body_text)||void 0===o?void 0:o[0])){const t=[...null!==(u=null===(i=null===(n=s.example)||void 0===n?void 0:n.body_text)||void 0===i?void 0:i[0])&&void 0!==u?u:[]];t[e]=l.replace("{{","").replace("}}","").replace("((","").replace("))","");const a=Object.assign(Object.assign({},s.example),{body_text:[t]});return Object.assign(Object.assign({},s),{example:a})}return t}));n.components=i,t&&Array.isArray(null===(o=null==n?void 0:n.mapping)||void 0===o?void 0:o.body)&&(n.mapping=Object.assign(Object.assign({},n.mapping),{body:n.mapping.body.map(((t,a)=>e===a?l:t))})),null==q||q(Object.assign({},n))}return o((()=>{P&&(null==f||f())}),[P]),o((()=>{!function(){var e,l,t,a,o;const n="mobile"===z?"template_html_mobile":"template_html_desktop",i=document.getElementById(n),u=(null!==(a=null===(t=null===(l=null===(e=null==i?void 0:i.contentWindow)||void 0===e?void 0:e.document)||void 0===l?void 0:l.body)||void 0===t?void 0:t.innerHTML)&&void 0!==a?a:"")+(null===(o=null==i?void 0:i.contentWindow)||void 0===o?void 0:o.document.head.innerHTML);R===c.EMAIL&&(null==F||F(u))}()}),[G]),o((()=>{var e;const l=[];let t=[];if(R!==c.MESSAGE||K){"link"===(null==_?void 0:_.type)?(l.push({label:"",options:[y,j]}),H(y)):(l.push({label:"",options:[y,j]}),H(j));const e=null!=J?J:[];M([...l,...e.map((e=>{var l,t;return Object.assign(Object.assign({},e),{label:v.toCapitilize(null===(t=null===(l=e.label)||void 0===l?void 0:l.replace(/([A-Z])/g," $1"))||void 0===t?void 0:t.toLowerCase())})}))]),t=[...l,...e]}else{const e=null!=J?J:[];M([{label:"",options:[j,y]},...e]),t=[{label:"",options:[j,y]},...e]}if((R===c.WHATSAPP||R===c.EMAIL||R===c.MESSAGE)&&_.updatedValue)if(r.test(_.updatedValue)&&R===c.WHATSAPP||_.updatedValue.startsWith("{{")&&R!==c.WHATSAPP){const e=function(e,l,t){var a;let o={label:"",value:""};const n=t===c.WHATSAPP?e.updatedValue.replace("[[","").replace("]]",""):e.updatedValue.replace("{{","").replace("}}","");A?o={label:e.updatedValue?e.updatedValue.replace("{{","").replace("}}","").trim().replace("."," "):"",value:null!==(a=e.updatedValue)&&void 0!==a?a:""}:l.map((e=>{e.options.map((e=>{var l;(null===(l=e.value)||void 0===l?void 0:l.replace("{{","").replace("}}","").trim())===n.trim()&&(o=e)}))}));return o}(_,t,R);e.value&&H(e)}else(null===(e=_.updatedValue)||void 0===e?void 0:e.startsWith("https"))?(H(y),L(_.updatedValue.split("https://")[1])):(H(j),L(_.updatedValue))}),[]),o((()=>{z&&W&&w&&setTimeout((()=>{X("custom_link"===(null==W?void 0:W.value)?`https://${w}`:w,W.value)}),100)}),[z]),o((()=>{!B&&W&&_.updatedValue&&setTimeout((()=>{X("custom_link"===(null==W?void 0:W.value)?`https://${_.updatedValue}`:_.updatedValue,W.value),N(!0)}),100)}),[W]),e(x,Object.assign({channel:R,focused:P,onMouseEnter:()=>S(!0),onMouseLeave:()=>S(!1)},{children:[l("div",Object.assign({style:{marginBottom:8}},{children:e(m,Object.assign({style:{color:U&&!W?b.content.negative:b.content.primary}},{children:[null===(T=_.variableName)||void 0===T?void 0:T.replace("{{","").replace("}}","")," ","link"===(null==_?void 0:_.type)?"link":"variable"]}))})),l("div",Object.assign({style:{marginBottom:12}},{children:A?e("div",Object.assign({style:{display:"flex",border:"#E0E0E0 1px solid",borderRadius:4,padding:10,justifyContent:(null==W?void 0:W.label)?"space-between":"flex-end"}},{children:[l(p,{children:d(null!==(E=null==W?void 0:W.label)&&void 0!==E?E:"",20,!0)}),l(t,{onClick:()=>{$(!I)},width:24,height:24,color:b.content.primary})]})):l(u,{options:C,isSearchable:!1,onSelect:Q,defaultOptions:W?[Object.assign(Object.assign({},W),{selected:!0})]:[]})})),("custom_text"===(null==W?void 0:W.value)||"custom_link"===(null==W?void 0:W.value))&&l(s,{labelText:"custom_text"===(null==W?void 0:W.value)?"Custom text value":"custom_link"===(null==W?void 0:W.value)?"Custom URL value":"",id:`variable-value-${null==W?void 0:W.value}-${k}`,value:w,errorMessage:U?w&&0!==w.trim().length?"custom_link"!==W.value||/^https?:\/\/(?:www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b(?:[-a-zA-Z0-9()@:%_\+.~#?&\/=]*)$/.test(`https://${w.trim()}`)&&0!==w.trim().length?"custom_link"!==W.value&&w.length>30?"Length cannot be more than 30":"":"Enter valid URL":"Required field":"",maxCharLimit:"custom_link"===(null==W?void 0:W.value)?void 0:30,prefixText:"custom_link"===(null==W?void 0:W.value)?"https://":"",placeholder:"link"===_.type||"custom_link"===W.value?"Enter custom URL here":"Enter custom text here",onChangeText:e=>{!function(e,l){var t;L(l);const a="custom_link"===(null==W?void 0:W.value)?`https://${l}`:l;X(a,e),R===c.WHATSAPP&&(null==ee||ee(null!==(t=_.index)&&void 0!==t?t:0,a))}(W.value,e)}}),I&&l(i,{zIndex:2e3,data:null!=V?V:[],showVariable:I,setShowVariable:$,placeholder:"Add a variable",customTrigger:e=>{null==O||O(!1),"{{custom.url}}"===e.actualValue?Q({label:e.displayName,selected:!0,value:"custom_link"}):"{{custom.text}}"==e.actualValue?Q({label:e.displayName,selected:!0,value:"custom_text"}):Q({label:e.displayName.replace("{{","").replace("}}","").trim().replace("."," "),selected:!0,value:e.actualValue,bikPlaceholderType:"string"})}})]}))};export{x as Container,f as default};
|
package/dist/esm/components/template-context-mapper/modalElements/VariableConnectorWhatsApp.d.ts
CHANGED
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
1
|
import { VariableListInterfaceV2 } from "../../add-variableV2/AddVariableV2";
|
|
3
2
|
import { WhatsAppTemplate, WhatsAppTemplateVariables } from "../../template-preview/models/WhatsAppTemplate";
|
|
4
3
|
export type ComponentType = WhatsAppTemplate['components'][0];
|
|
@@ -10,5 +9,5 @@ export interface VariableConnectorWhatsAppProps {
|
|
|
10
9
|
showVariableModal?: boolean;
|
|
11
10
|
variableList?: VariableListInterfaceV2[];
|
|
12
11
|
}
|
|
13
|
-
declare const VariableConnectorWhatsApp:
|
|
12
|
+
declare const VariableConnectorWhatsApp: ({ descriptionComponent, type, showVariableModal, variableList, }: VariableConnectorWhatsAppProps) => import("react/jsx-runtime").JSX.Element;
|
|
14
13
|
export default VariableConnectorWhatsApp;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{templateVariablePattern as l,globalVariablePattern as e}from"../constants/regexPatterns.js";class a{fillVariablesValInBodyText(e,a){let i=arguments.length>2&&void 0!==arguments[2]&&arguments[2];const r=e.match(l),t=e.split(l);if(e&&(null==r?void 0:r.length)){return t.map(((l,e)=>{var n,o,v,d,u;const
|
|
1
|
+
import{templateVariablePattern as l,globalVariablePattern as e}from"../constants/regexPatterns.js";class a{fillVariablesValInBodyText(e,a){let i=arguments.length>2&&void 0!==arguments[2]&&arguments[2];const r=e.match(l),t=e.split(l);if(e&&(null==r?void 0:r.length)){return t.map(((l,e)=>{var n,o,v,d,u;const m=null===(n=null==r?void 0:r[e])||void 0===n?void 0:n.replace("{{","").replace("}}","");return t.length-1===e?l:(null===(v=null===(o=null==a?void 0:a[e])||void 0===o?void 0:o.variableName)||void 0===v?void 0:v.trim())===m.trim()||(null===(u=null===(d=null==a?void 0:a[e])||void 0===d?void 0:d.variableVal)||void 0===u?void 0:u.trim())===m.trim()?a[e].editable?`${l}${i?"{{":""}${a[e].variableVal}${i?"}}":""}`:`${l}${i?"{{":""}${a[e].variableName}${i?"}}":""}`:l})).join("")}return e}getTemplateVariablesFromState(l){var a;return null===(a=l.match(e))||void 0===a?void 0:a.map((l=>l.replace("{{","").replace("}}","")))}whatsappOnlyFillVariablesValueInBodyText(e,a){let i=arguments.length>2&&void 0!==arguments[2]&&arguments[2];const r=e.match(l),t=e.split(l);if(e&&(null==r?void 0:r.length)){return t.map(((l,e)=>{var n;const o=null===(n=null==r?void 0:r[e])||void 0===n?void 0:n.replace("{{","").replace("}}","");if(t.length-1===e)return l;const v=a.findIndex((l=>l.variableName===o));if(v>-1){let e=a[v].variableVal;return i||(e=!a[v].variableVal&&a[v].variableName.startsWith("editableVariable")?a[v].variableName:null==e?void 0:e.replace("[[","").replace("]]","")),a[v].editable?`${l}${i?"{{":""}${e}${i?"}}":""}`:`${l}${i?"{{":""}${o}${i?"}}":""}`}return l})).join("")}return e}}export{a as TemplateHelperUtils};
|