@bikdotai/bik-component-library 0.0.586-am.2 → 0.0.586-am.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/discount-modal/DiscountModal.d.ts +1 -0
- package/dist/cjs/components/discount-modal/DiscountModal.js +1 -1
- package/dist/cjs/components/discount-modal/DynamicCoupon/DynamicCoupon.d.ts +1 -0
- package/dist/cjs/components/discount-modal/DynamicCoupon/DynamicCoupon.js +1 -1
- package/dist/cjs/components/template-context-mapper/TemplateContextMapper.d.ts +3 -1
- package/dist/cjs/components/template-context-mapper/TemplateContextMapper.js +1 -1
- package/dist/cjs/components/template-context-mapper/context/templateModalContext.d.ts +4 -0
- package/dist/cjs/components/template-context-mapper/context/templateModalContext.js +1 -1
- package/dist/cjs/components/template-context-mapper/modalElements/EditWhatsAppTemplateV2.js +2 -2
- package/dist/cjs/components/template-context-mapper/modalElements/VariableConnector.js +8 -5
- package/dist/cjs/components/template-context-mapper/modalElements/VariableConnectorWhatsApp.d.ts +1 -1
- package/dist/cjs/components/template-context-mapper/modalElements/VariableConnectorWhatsApp.js +1 -1
- package/dist/cjs/components/template-context-mapper/modalElements/VariableConnectorsPanel.js +2 -2
- package/dist/cjs/components/template-context-mapper/modalElements/WhatsAppTemplateCardButtonV2.js +1 -1
- package/dist/cjs/components/template-preview/models/TemplateMeta.d.ts +1 -0
- package/dist/esm/components/discount-modal/DiscountModal.d.ts +1 -0
- package/dist/esm/components/discount-modal/DiscountModal.js +1 -1
- package/dist/esm/components/discount-modal/DynamicCoupon/DynamicCoupon.d.ts +1 -0
- package/dist/esm/components/discount-modal/DynamicCoupon/DynamicCoupon.js +1 -1
- package/dist/esm/components/template-context-mapper/TemplateContextMapper.d.ts +3 -1
- package/dist/esm/components/template-context-mapper/TemplateContextMapper.js +1 -1
- package/dist/esm/components/template-context-mapper/context/templateModalContext.d.ts +4 -0
- package/dist/esm/components/template-context-mapper/context/templateModalContext.js +1 -1
- package/dist/esm/components/template-context-mapper/modalElements/EditWhatsAppTemplateV2.js +1 -1
- package/dist/esm/components/template-context-mapper/modalElements/VariableConnector.js +8 -5
- package/dist/esm/components/template-context-mapper/modalElements/VariableConnectorWhatsApp.d.ts +1 -1
- package/dist/esm/components/template-context-mapper/modalElements/VariableConnectorWhatsApp.js +1 -1
- package/dist/esm/components/template-context-mapper/modalElements/VariableConnectorsPanel.js +2 -2
- package/dist/esm/components/template-context-mapper/modalElements/WhatsAppTemplateCardButtonV2.js +1 -1
- package/dist/esm/components/template-preview/models/TemplateMeta.d.ts +1 -0
- package/package.json +1 -1
|
@@ -1,16 +1,19 @@
|
|
|
1
|
-
import{jsxs as e,jsx as t,Fragment as l}from"react/jsx-runtime";import a from"../../../assets/icons/edit.svg.js";import{format as
|
|
1
|
+
import{jsxs as e,jsx as t,Fragment as l}from"react/jsx-runtime";import a from"../../../assets/icons/edit.svg.js";import i from"../../../assets/icons/info.svg.js";import{format as n}from"date-fns";import{cloneDeep as o}from"lodash";import{useState as s,useEffect as u}from"react";import d from"styled-components";import{Alert as r}from"../../alerts/Alert.js";import{ALERT_TYPES as c}from"../../alerts/AlertHelper.js";import{CustomDateTime as p}from"../../custom-date-time/CustomDateTime.js";import{Dropdown as m}from"../../dropdown/Dropdown.js";import{Input as v}from"../../input/Input.js";import{truncate as b}from"../../product-picker-v2/collectionScreen.js";import{placeHolderNamePattern as g}from"../../template-preview/constants/regexPatterns.js";import{CHANNEL_TYPE as O}from"../../template-preview/models/Channels.js";import{WEB_PUSH_COMPONENT_TYPE as y}from"../../template-preview/models/WebpushTemplate.js";import{POD as h,BUTTON_TYPE as j}from"../../template-preview/models/WhatsAppTemplate.js";import{BodySecondary as f,BodyPrimary as x}from"../../TypographyStyle.js";import _ from"../../../utils/StringUtils.js";import{COLORS as T}from"../../../constants/Theme.js";import{useTemplateModalContext as E}from"../context/templateModalContext.js";import{updateVariables as C}from"../custom-hooks/useAdditionalVariables.js";import{getVariableNameForEmailByIndex as V}from"../utils/getVariableNameEmail.js";import{QueryParamsComponent as k}from"./QueryParamsComponent.js";const S=d.div`
|
|
2
2
|
/* surface/$color-background-warning-light */
|
|
3
3
|
|
|
4
|
-
background: ${e=>e.focused&&e.channel===
|
|
4
|
+
background: ${e=>e.focused&&e.channel===O.EMAIL?T.background.warning.light:"transparent"};
|
|
5
5
|
border-radius: 4px;
|
|
6
6
|
padding: 8px 10px;
|
|
7
|
-
`,
|
|
7
|
+
`,B=d.div`
|
|
8
8
|
position: absolute;
|
|
9
9
|
top: 0;
|
|
10
10
|
left: 0;
|
|
11
11
|
width: 100%;
|
|
12
12
|
height: 100%;
|
|
13
|
-
background-color: rgba(0, 0, 0, 0.1);
|
|
14
13
|
z-index: 1000;
|
|
15
14
|
cursor: not-allowed;
|
|
16
|
-
`,C={value:"custom_link",label:"Custom URL"},S={value:"custom_text",label:"Custom text"},B={value:"static_expiry",label:"Static Expiry"},P=u=>{var P,D,A,L,w,N,U,H,W;const{onFocus:R,variable:I,index:Y,showVariableModal:M,setShowDiscountCheckBox:$,componentType:z,CTAoptions:Z,buttonType:q}=u;I.isEditableVariable,console.log("VariableConnector props",u);const[G,F]=o(!1),[K,Q]=o(""),[J,X]=o([]),[ee,te]=o(),[le,ae]=o(!1),{variableList:ie,setVariableList:ne,setVariableCallback:oe,setShowVariablePicker:se,device:ue,channel:de,isError:re,originalVariableList:ce,template:pe,templateSelectionTriggered:me,setTemplate:ve,setDisplayContent:be,setOriginalVariableList:ge,globalNormalizedPlaceholders:Oe,enabledCustomText:je,pod:ye,selectedCarouselIndex:he,isProductCarouselType:fe,isWhatsappCarousel:xe,disableEditVariable:_e,disableEditExpiry:Te,templateErrorIndexes:Ee,maxCharLimit:Ve,disableDatePicker:ke}=x();function Ce(e,t){var l,a,i,n;const o=e;Q(""),te(o),de===v.WHATSAPP?"custom_text"!==o.value&&"custom_link"!==o.value&&"static_expiry"!==o.value?(Be(null!==(l=o.value)&&void 0!==l?l:"","string"),null==Pe||Pe(null!==(a=I.index)&&void 0!==a?a:0,o.value,!0)):(null==Pe||Pe(null!==(i=I.index)&&void 0!==i?i:0,"",!0,o.value),Be("","url"===o.bikPlaceholderType?"link":"string")):"custom_text"!==o.value&&"custom_link"!==o.value?(Be(o.value,"url"===o.bikPlaceholderType?"link":"string"),de==v.WEBPUSH&&(null==Ae||Ae(null!==(n=I.index)&&void 0!==n?n:0,o.value))):(Q(""),Be("",o.value))}function Se(e,t){var l,a;Q(t);const i="custom_link"===(null==ee?void 0:ee.value)&&t?t.includes("https")?t:`https://${t}`:t;Be(i,"static_expiry"===e?"string":e),de===v.WHATSAPP&&(null==Pe||Pe(null!==(l=I.index)&&void 0!==l?l:0,i,"custom_link"===e,e)),de===v.WEBPUSH&&(null==Ae||Ae(null!==(a=I.index)&&void 0!==a?a:0,i))}function Be(e,t,l){var a,i,o,s;const u="custom_link"===t?"link":"custom_text"===t?"string":t;if(de!==v.WHATSAPP&&de!==v.WEBPUSH){const l=T(Y+1),i=null===document||void 0===document?void 0:document.getElementById("mobile"===ue?"template_html_mobile":"template_html_desktop"),n=de===v.EMAIL?null===(a=null==i?void 0:i.contentWindow)||void 0===a?void 0:a.document.getElementById(l):document.getElementById(l);n&&(n.textContent="custom_text"!==t&&"custom_link"!==t||e?e:I.variableName);const o=ce.map(((t,l)=>l===Y?Object.assign(Object.assign({},t),{type:u,updatedValue:e}):t));null==ge||ge(o)}if(de===v.WEBPUSH){const t=ce,l=t=>null==t?void 0:t.map(((t,l)=>l===Y?Object.assign(Object.assign({},t),{type:u,updatedValue:e}):t)),a={BODY:"BODY"===z?l(t.body):t.body,TITLE:z===b.TITLE.toUpperCase()?l(t.title):t.title};null==ge||ge((e=>Object.assign(Object.assign({},e),{title:a.TITLE,body:a.BODY,buttons:t.buttons})))}if(de===v.WHATSAPP){if(null!=he&&he>-1&&fe){const l=Object.assign({},ce).cards.map(((l,a)=>{var i,n;return"BODY"===z?Object.assign(Object.assign({},l),{body:null===(i=l.body)||void 0===i?void 0:i.map(((t,l)=>Y===l?Object.assign(Object.assign({},t),{type:u,updatedValue:e}):t))}):"BUTTONS"===z?Object.assign(Object.assign({},l),{buttons:null===(n=l.buttons)||void 0===n?void 0:n.map(((l,a)=>a===Y?Object.assign(Object.assign({},l),{buttonVariable:"custom_link"===t?"((customPlaceholderName))":e,example:"COPY_CODE"===l.type?e:[e]}):l))}):l}));return void(null==ge||ge((e=>Object.assign(Object.assign({},e),{cards:l}))))}const a=null!=he&&he>-1?ce.cards[he]:ce;let d=a.body,r=a.header,c=a.buttons;if("BODY"===z?d=null===(i=a.body)||void 0===i?void 0:i.map(((t,l)=>l===Y?Object.assign(Object.assign({},t),{type:u,updatedValue:e}):t)):"HEADER"===z?r=null===(o=a.header)||void 0===o?void 0:o.map(((t,l)=>l===Y?Object.assign(Object.assign({},t),{type:u,updatedValue:e}):t)):"BUTTONS"===z&&(c=null===(s=a.buttons)||void 0===s?void 0:s.map(((a,i)=>i===Y?Object.assign(Object.assign({},a),{buttonVariable:"custom_link"===t?"((customPlaceholderName))":e,example:"COPY_CODE"===a.type?e:[e],queryParams:null!=l?l:[]}):a))),null!=he&&he>-1){const e=n(ce.cards);e[he]={header:r,body:d,buttons:c},null==ge||ge((t=>Object.assign(Object.assign({},t),{cards:e})))}else null==ge||ge((e=>Object.assign(Object.assign({},e),{header:r,body:d,buttons:c})))}}function Pe(e,t,l,a){var i,o,s,u,d,r,c;if(null!=he&&he>-1&&fe){const o=Object.assign({},pe).components.map((l=>{var a;return"CAROUSEL"===l.type?Object.assign(Object.assign({},l),{cards:null===(a=l.cards)||void 0===a?void 0:a.map((l=>Object.assign(Object.assign({},l),{components:l.components.map((l=>{var a,i,n,o,s,u;if("BODY"===l.type&&"BODY"===z){if(null===(i=null===(a=l.example)||void 0===a?void 0:a.body_text)||void 0===i?void 0:i[0]){const a=[...null!==(s=null===(o=null===(n=l.example)||void 0===n?void 0:n.body_text)||void 0===o?void 0:o[0])&&void 0!==s?s:[]];a[e]=t.replace("{{","").replace("}}","").replace("((","").replace("))","");const i=Object.assign(Object.assign({},l.example),{body_text:[a]});return Object.assign(Object.assign({},l),{example:i})}return l}if("BUTTONS"===l.type&&"BUTTONS"===z){const a=null===(u=l.buttons)||void 0===u?void 0:u.map(((l,a)=>a===e?Object.assign(Object.assign({},l),{example:[t]}):l));return a?Object.assign(Object.assign({},l),{buttons:a}):l}return l}))})))}):l})),s=n(pe);if(l){const l=null===(i=Object.assign({},pe).mapping.cards)||void 0===i?void 0:i.map(((l,i)=>{var n,o,s;if("BODY"===z)return Object.assign(Object.assign({},l),{body:null===(n=l.body)||void 0===n?void 0:n.map(((l,i)=>e===i?"custom_text"===a?`((editableVariable${i+10}))`:t:l))});if("BUTTONS"===z&&(null==l?void 0:l.buttons)){let n=-1,u=-1;return null===(o=pe.components[1].cards)||void 0===o||o[i].components.forEach((t=>{var l;"BUTTONS"===t.type&&(null===(l=t.buttons)||void 0===l||l.forEach(((t,l)=>{"URL"===t.type&&(n++,l===e&&"URL"==t.type&&(u=n))})))})),Object.assign(Object.assign({},l),{buttons:null===(s=l.buttons)||void 0===s?void 0:s.map(((e,l)=>l===u?"custom_link"===a?"((customPlaceholderName))":t:e))})}return l}));s.mapping.cards=l}return s.components=o,void(null==ve||ve(s))}const p=null!=he&&he>-1?{components:null===(o=Object.assign({},pe).components[1].cards)||void 0===o?void 0:o[he].components,mapping:null===(s=Object.assign({},pe).mapping.cards)||void 0===s?void 0:s[he]}:Object.assign({},pe),m=null===(u=null==p?void 0:p.components)||void 0===u?void 0:u.map((l=>{var a,i,n,o,s,u,d,r,c;const p=Object.assign({},l);if("BODY"===l.type&&"BODY"===z){if(null===(i=null===(a=l.example)||void 0===a?void 0:a.body_text)||void 0===i?void 0:i[0]){const l=[...null!==(s=null===(o=null===(n=p.example)||void 0===n?void 0:n.body_text)||void 0===o?void 0:o[0])&&void 0!==s?s:[]];l[e]=t.replace("{{","").replace("}}","").replace("((","").replace("))","");const a=Object.assign(Object.assign({},p.example),{body_text:[l]});return Object.assign(Object.assign({},p),{example:a})}}else if("HEADER"===l.type&&"HEADER"===z){if(null===(u=l.example)||void 0===u?void 0:u.header_text){const l=[...null!==(r=null===(d=p.example)||void 0===d?void 0:d.header_text)&&void 0!==r?r:[]];l[e]=t.replace("{{","").replace("}}","").replace("((","").replace("))","");const a=Object.assign(Object.assign({},p.example),{header_text:l});return Object.assign(Object.assign({},p),{example:a})}}else{if("BUTTONS"===l.type&&"BUTTONS"===z){const a=null===(c=l.buttons)||void 0===c?void 0:c.map(((l,a)=>a===e?Object.assign(Object.assign({},l),{example:"COPY_CODE"===l.type?t:[t]}):l));return a?Object.assign(Object.assign({},p),{buttons:a}):p}if("limited_time_offer"===l.type&&"limited_time_offer"===z)return Object.assign(Object.assign({},p),{example:Object.assign(Object.assign({},p.example),{limited_time_offer:t})})}return l}));if(p.components=m,l)if("BODY"===z&&(null===(d=null==p?void 0:p.mapping)||void 0===d?void 0:d.body))p.mapping=Object.assign(Object.assign({},p.mapping),{body:p.mapping.body.map(((l,i)=>e===i?"custom_text"===a?`((editableVariable${i+10}))`:t:l))});else if("HEADER"===z&&(null===(r=null==p?void 0:p.mapping)||void 0===r?void 0:r.header))p.mapping=Object.assign(Object.assign({},p.mapping),{header:p.mapping.header.map(((l,i)=>e===i?"custom_text"===a?`((editableVariable${i+20}))`:t:l))});else if("BUTTONS"===z&&(null===(c=null==p?void 0:p.mapping)||void 0===c?void 0:c.buttons)){let l=-1,i=-1;m.forEach((t=>{var a;"BUTTONS"===t.type&&(null===(a=t.buttons)||void 0===a||a.forEach(((t,a)=>{"URL"===t.type&&(l++,a===e&&"URL"==t.type&&(i=l))})))})),p.mapping=Object.assign(Object.assign({},p.mapping),{buttons:p.mapping.buttons.map(((e,l)=>l===i?"custom_link"===a?"((customPlaceholderName))":t:e))})}if(null!=he&&he>-1&&pe){const e=n(pe);e.components[1].cards[he].components=p.components,e.mapping.cards[he]=p.mapping,null==ve||ve(e)}else null==ve||ve(Object.assign({},p))}console.log("disableDatePicker",ke),s((()=>{G&&(null==R||R())}),[G]),s((()=>{!function(){var e,t,l,a,i;const n="mobile"===ue?"template_html_mobile":"template_html_desktop",o=document.getElementById(n),s=(null!==(a=null===(l=null===(t=null===(e=null==o?void 0:o.contentWindow)||void 0===e?void 0:e.document)||void 0===t?void 0:t.body)||void 0===l?void 0:l.innerHTML)&&void 0!==a?a:"")+(null===(i=null==o?void 0:o.contentWindow)||void 0===i?void 0:i.document.head.innerHTML);de===v.EMAIL&&(null==be||be(s))}()}),[me]),s((()=>{!function(){var e,t;const l=[];let a=[];if(de!==v.MESSAGE||je){"link"===(null==I?void 0:I.type)?(l.push({label:"",options:[C,S]}),te(C)):"date_time"===(null==I?void 0:I.type)?(l.push({label:"",options:[C,S]}),te(B)):(l.push({label:"",options:[C,S,B]}),te(S));const e=null!=Oe?Oe:[];X([...l,...e.map((e=>{var t,l;return Object.assign(Object.assign({},e),{label:h.toCapitilize(null===(l=null===(t=e.label)||void 0===t?void 0:t.replace(/([A-Z])/g," $1"))||void 0===l?void 0:l.toLowerCase())})}))]),a=[...l,...e]}else{const e=null!=Oe?Oe:[];X([{label:"",options:[S,C]},...e]),a=[{label:"",options:[S,C]},...e]}if((de===v.WHATSAPP||de===v.EMAIL||de===v.MESSAGE||de===v.WEBPUSH)&&I.updatedValue)if(m.test(I.updatedValue)&&de===v.WHATSAPP||I.updatedValue.startsWith("{{")&&de!==v.WHATSAPP){const e=function(e,t,l){var a;let i={label:"",value:""};const n=l===v.WHATSAPP?e.updatedValue.replace("[[","").replace("]]",""):e.updatedValue.replace("{{","").replace("}}","");if(M){let t=e.updatedValue;if(ye===g.CHATBOT&&"BUTTONS"===z){const l=null==Z?void 0:Z.filter((t=>t.placeHolder===e.updatedValue));l&&l.length>0&&(t=l[0].label)}i={label:t?t.replace("{{","").replace("}}","").trim().replace("."," "):"",value:null!==(a=e.updatedValue)&&void 0!==a?a:""}}else t.map((e=>{e.options.map((e=>{var t;(null===(t=e.value)||void 0===t?void 0:t.replace("{{","").replace("}}","").trim())===n.trim()&&(i=e)}))}));return i}(I,a,de);e.value&&te(e)}else"date_time"===I.type?(te(B),Q(I.updatedValue),Pe(null!==(e=I.index)&&void 0!==e?e:0,I.updatedValue)):(null===(t=I.updatedValue)||void 0===t?void 0:t.startsWith("https"))?(te(C),Q(I.updatedValue.split("https://")[1])):(te(S),Q(I.updatedValue))}()}),[he]),s((()=>{ue&&ee&&K&&setTimeout((()=>{Be("custom_link"===(null==ee?void 0:ee.value)&&K?K.includes("https")?K:`https://${K}`:K,ee.value)}),100)}),[ue]),s((()=>{!le&&ee&&I.updatedValue&&setTimeout((()=>{Be("custom_link"===(null==ee?void 0:ee.value)&&I.updatedValue?I.updatedValue.includes("https")?I.updatedValue:`https://${I.updatedValue}`:I.updatedValue,ee.value),ae(!0)}),100)}),[ee]);const De=e=>{null==$||$(!1),"{{custom.url}}"===e.actualValue?Ce({label:e.displayName,selected:!0,value:"custom_link"}):"{{custom.text}}"==e.actualValue?Ce({label:e.displayName,selected:!0,value:"custom_text"}):"{{static.expiry}}"==e.actualValue?Ce({label:e.displayName,selected:!0,value:"static_expiry"}):Ce({label:e.displayName.replace("{{","").replace("}}","").trim().replace("."," "),selected:!0,value:e.actualValue,bikPlaceholderType:"string"})};function Ae(e,t){var l;const a=n(pe),i=z.toLocaleLowerCase();(null===(l=a.webpushBroadcastConfig)||void 0===l?void 0:l[i])&&(a.webpushBroadcastConfig[i][e]=t),null==ve||ve(Object.assign({},a))}return console.log("selectedOption",ee),e(V,Object.assign({channel:de,focused:G,onMouseEnter:()=>F(!0),onMouseLeave:()=>F(!1)},{children:[t("div",Object.assign({style:{marginBottom:8}},{children:e(j,Object.assign({style:{color:re&&!ee?f.content.negative:f.content.primary}},{children:[null===(P=I.variableName)||void 0===P?void 0:P.replace("{{","").replace("}}","")," ","link"===(null==I?void 0:I.type)?"link":"variable"]}))})),t("div",Object.assign({style:{marginBottom:12}},{children:M?e("div",Object.assign({style:{display:"flex",border:"#E0E0E0 1px solid",borderRadius:4,padding:10,justifyContent:(null==ee?void 0:ee.label)?"space-between":"flex-end"}},{children:[t(y,Object.assign({numberOfLines:1},{children:ye===g.CHATBOT?["static_expiry","custom_text","custom_link"].includes(null!==(D=null==ee?void 0:ee.value)&&void 0!==D?D:"")?null==ee?void 0:ee.label:null==ee?void 0:ee.value:p(null!==(A=null==ee?void 0:ee.label)&&void 0!==A?A:"",20,!0)})),_e||"date_time"===(null==I?void 0:I.type)&&Te?t(l,{}):t(a,{onClick:()=>{(()=>{if(q===O.URL&&ye===g.CHATBOT){const e=_({variableList:ie,categoryDisplayName:"Custom Variables",variableDisplayName:"Custom URL",variableValue:"{{custom.url}}"});ne(e)}else if("limited_time_offer"===z){const e=_({variableList:ie,categoryDisplayName:"Static Variables",variableDisplayName:"Static Expiry",variableValue:"{{static.expiry}}"});ne(e)}else if(q===O.COPY_CODE){const e=_({variableList:ie,categoryDisplayName:"Custom Variables",variableDisplayName:"Custom Text",variableValue:"{{custom.text}}"});ne(e)}})(),oe((()=>De)),se(!0)},width:24,height:24,color:f.content.primary})]})):t(r,{disabled:_e,options:J,isSearchable:!1,onSelect:Ce,defaultOptions:ee?[Object.assign(Object.assign({},ee),{selected:!0})]:[]})})),("custom_text"===(null==ee?void 0:ee.value)||"custom_link"===(null==ee?void 0:ee.value))&&t(c,{state:_e?"disabled":"none",labelText:"custom_text"===(null==ee?void 0:ee.value)?"Custom text value":"custom_link"===(null==ee?void 0:ee.value)?"Custom URL value":"",id:`variable-value-${null==ee?void 0:ee.value}-${Y}`,value:K,errorMessage:re&&(null===(L=null==Ee?void 0:Ee.buttons)||void 0===L?void 0:L.includes(null!==(w=null==I?void 0:I.index)&&void 0!==w?w:-1))?K&&0!==K.trim().length?"custom_link"!==ee.value||/^https?:\/\/(?:www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b(?:[-a-zA-Z0-9()@:%_\+.~#?&\/=]*)$/.test(`https://${K.trim()}`)&&0!==K.trim().length?"custom_link"!==ee.value&&K.length>30?"Length cannot be more than 30":"BUTTONS"===z&&"custom_link"!==ee.value?"Enter valid alpha numeric code":"":"Enter valid URL":"Required field":"",maxCharLimit:Ve||("custom_link"===(null==ee?void 0:ee.value)?2e3:"BUTTONS"===z?15:30),noKeyDownChange:!0,prefixText:"custom_link"===(null==ee?void 0:ee.value)?"https://":"",placeholder:"link"===I.type||"custom_link"===ee.value?"Enter custom URL here":"Enter custom text here",onChangeText:e=>{Se(ee.value,e)}}),"static_expiry"===(null==ee?void 0:ee.value)&&e("div",Object.assign({style:{position:"relative"}},{children:[(_e||ke)&&t(k,{onClick:e=>e.preventDefault()}),t(d,{placement:"auto",time:i(K?new Date(K):new Date,"hh:mm a"),date:K?new Date(K):new Date,minDate:new Date,error:"",setError:()=>{},onChange:e=>{Se("static_expiry",e.toISOString())}})]})),"link"===I.type&&"custom_link"!==(null==ee?void 0:ee.value)&&!fe&&!xe&&ye===g.CHATBOT&&t(E,{isError:null!==(H=null===(N=null==Ee?void 0:Ee.buttons)||void 0===N?void 0:N.includes(null!==(U=null==I?void 0:I.index)&&void 0!==U?U:-1))&&void 0!==H&&H,params:null!==(W=I.queryParams)&&void 0!==W?W:[],onChange:e=>{Be(I.updatedValue,"link",e)},variableValue:I.updatedValue})]}))};export{V as Container,P as default};
|
|
15
|
+
`,A=d.div`
|
|
16
|
+
height: 100%;
|
|
17
|
+
width: 48%;
|
|
18
|
+
background: rgba(0, 0, 0, 0.1);
|
|
19
|
+
`,P={value:"custom_link",label:"Custom URL"},D={value:"custom_text",label:"Custom text"},w={value:"static_expiry",label:"Static Expiry"},L=d=>{var L,N,U,H,W,R,I,Y,M;const{onFocus:$,variable:z,index:Z,showVariableModal:q,setShowDiscountCheckBox:G,componentType:F,CTAoptions:K,buttonType:Q}=d,[J,X]=s(!1),[ee,te]=s(""),[le,ae]=s([]),[ie,ne]=s(),[oe,se]=s(!1),{variableList:ue,setVariableList:de,setVariableCallback:re,setShowVariablePicker:ce,device:pe,channel:me,isError:ve,originalVariableList:be,template:ge,templateSelectionTriggered:Oe,setTemplate:ye,setDisplayContent:he,setOriginalVariableList:je,globalNormalizedPlaceholders:fe,enabledCustomText:xe,pod:_e,selectedCarouselIndex:Te,isProductCarouselType:Ee,isWhatsappCarousel:Ce,disableEditVariable:Ve,disableEditExpiry:ke,templateErrorIndexes:Se,maxCharLimit:Be,disableDatePicker:Ae,showDiscountCodeExpiryInfo:Pe}=E();function De(e,t){var l,a,i,n;const o=e;te(""),ne(o),me===O.WHATSAPP?"custom_text"!==o.value&&"custom_link"!==o.value&&"static_expiry"!==o.value?(Le(null!==(l=o.value)&&void 0!==l?l:"","string"),null==Ne||Ne(null!==(a=z.index)&&void 0!==a?a:0,o.value,!0)):(null==Ne||Ne(null!==(i=z.index)&&void 0!==i?i:0,"",!0,o.value),Le("","url"===o.bikPlaceholderType?"link":"string")):"custom_text"!==o.value&&"custom_link"!==o.value?(Le(o.value,"url"===o.bikPlaceholderType?"link":"string"),me==O.WEBPUSH&&(null==He||He(null!==(n=z.index)&&void 0!==n?n:0,o.value))):(te(""),Le("",o.value))}function we(e,t){var l,a;te(t);const i="custom_link"===(null==ie?void 0:ie.value)&&t?t.includes("https")?t:`https://${t}`:t;Le(i,"static_expiry"===e?"string":e),me===O.WHATSAPP&&(null==Ne||Ne(null!==(l=z.index)&&void 0!==l?l:0,i,"custom_link"===e,e)),me===O.WEBPUSH&&(null==He||He(null!==(a=z.index)&&void 0!==a?a:0,i))}function Le(e,t,l){var a,i,n,s;const u="custom_link"===t?"link":"custom_text"===t?"string":t;if(me!==O.WHATSAPP&&me!==O.WEBPUSH){const l=V(Z+1),i=null===document||void 0===document?void 0:document.getElementById("mobile"===pe?"template_html_mobile":"template_html_desktop"),n=me===O.EMAIL?null===(a=null==i?void 0:i.contentWindow)||void 0===a?void 0:a.document.getElementById(l):document.getElementById(l);n&&(n.textContent="custom_text"!==t&&"custom_link"!==t||e?e:z.variableName);const o=be.map(((t,l)=>l===Z?Object.assign(Object.assign({},t),{type:u,updatedValue:e}):t));null==je||je(o)}if(me===O.WEBPUSH){const t=be,l=t=>null==t?void 0:t.map(((t,l)=>l===Z?Object.assign(Object.assign({},t),{type:u,updatedValue:e}):t)),a={BODY:"BODY"===F?l(t.body):t.body,TITLE:F===y.TITLE.toUpperCase()?l(t.title):t.title};null==je||je((e=>Object.assign(Object.assign({},e),{title:a.TITLE,body:a.BODY,buttons:t.buttons})))}if(me===O.WHATSAPP){if(null!=Te&&Te>-1&&Ee){const l=Object.assign({},be).cards.map(((l,a)=>{var i,n;return"BODY"===F?Object.assign(Object.assign({},l),{body:null===(i=l.body)||void 0===i?void 0:i.map(((t,l)=>Z===l?Object.assign(Object.assign({},t),{type:u,updatedValue:e}):t))}):"BUTTONS"===F?Object.assign(Object.assign({},l),{buttons:null===(n=l.buttons)||void 0===n?void 0:n.map(((l,a)=>a===Z?Object.assign(Object.assign({},l),{buttonVariable:"custom_link"===t?"((customPlaceholderName))":e,example:"COPY_CODE"===l.type?e:[e]}):l))}):l}));return void(null==je||je((e=>Object.assign(Object.assign({},e),{cards:l}))))}const a=null!=Te&&Te>-1?be.cards[Te]:be;let d=a.body,r=a.header,c=a.buttons;if("BODY"===F?d=null===(i=a.body)||void 0===i?void 0:i.map(((t,l)=>l===Z?Object.assign(Object.assign({},t),{type:u,updatedValue:e}):t)):"HEADER"===F?r=null===(n=a.header)||void 0===n?void 0:n.map(((t,l)=>l===Z?Object.assign(Object.assign({},t),{type:u,updatedValue:e}):t)):"BUTTONS"===F&&(c=null===(s=a.buttons)||void 0===s?void 0:s.map(((a,i)=>i===Z?Object.assign(Object.assign({},a),{buttonVariable:"custom_link"===t?"((customPlaceholderName))":e,example:"COPY_CODE"===a.type?e:[e],queryParams:null!=l?l:[]}):a))),null!=Te&&Te>-1){const e=o(be.cards);e[Te]={header:r,body:d,buttons:c},null==je||je((t=>Object.assign(Object.assign({},t),{cards:e})))}else null==je||je((e=>Object.assign(Object.assign({},e),{header:r,body:d,buttons:c})))}}function Ne(e,t,l,a){var i,n,s,u,d,r,c;if(null!=Te&&Te>-1&&Ee){const n=Object.assign({},ge).components.map((l=>{var a;return"CAROUSEL"===l.type?Object.assign(Object.assign({},l),{cards:null===(a=l.cards)||void 0===a?void 0:a.map((l=>Object.assign(Object.assign({},l),{components:l.components.map((l=>{var a,i,n,o,s,u;if("BODY"===l.type&&"BODY"===F){if(null===(i=null===(a=l.example)||void 0===a?void 0:a.body_text)||void 0===i?void 0:i[0]){const a=[...null!==(s=null===(o=null===(n=l.example)||void 0===n?void 0:n.body_text)||void 0===o?void 0:o[0])&&void 0!==s?s:[]];a[e]=t.replace("{{","").replace("}}","").replace("((","").replace("))","");const i=Object.assign(Object.assign({},l.example),{body_text:[a]});return Object.assign(Object.assign({},l),{example:i})}return l}if("BUTTONS"===l.type&&"BUTTONS"===F){const a=null===(u=l.buttons)||void 0===u?void 0:u.map(((l,a)=>a===e?Object.assign(Object.assign({},l),{example:[t]}):l));return a?Object.assign(Object.assign({},l),{buttons:a}):l}return l}))})))}):l})),s=o(ge);if(l){const l=null===(i=Object.assign({},ge).mapping.cards)||void 0===i?void 0:i.map(((l,i)=>{var n,o,s;if("BODY"===F)return Object.assign(Object.assign({},l),{body:null===(n=l.body)||void 0===n?void 0:n.map(((l,i)=>e===i?"custom_text"===a?`((editableVariable${i+10}))`:t:l))});if("BUTTONS"===F&&(null==l?void 0:l.buttons)){let n=-1,u=-1;return null===(o=ge.components[1].cards)||void 0===o||o[i].components.forEach((t=>{var l;"BUTTONS"===t.type&&(null===(l=t.buttons)||void 0===l||l.forEach(((t,l)=>{"URL"===t.type&&(n++,l===e&&"URL"==t.type&&(u=n))})))})),Object.assign(Object.assign({},l),{buttons:null===(s=l.buttons)||void 0===s?void 0:s.map(((e,l)=>l===u?"custom_link"===a?"((customPlaceholderName))":t:e))})}return l}));s.mapping.cards=l}return s.components=n,void(null==ye||ye(s))}const p=null!=Te&&Te>-1?{components:null===(n=Object.assign({},ge).components[1].cards)||void 0===n?void 0:n[Te].components,mapping:null===(s=Object.assign({},ge).mapping.cards)||void 0===s?void 0:s[Te]}:Object.assign({},ge),m=null===(u=null==p?void 0:p.components)||void 0===u?void 0:u.map((l=>{var a,i,n,o,s,u,d,r,c;const p=Object.assign({},l);if("BODY"===l.type&&"BODY"===F){if(null===(i=null===(a=l.example)||void 0===a?void 0:a.body_text)||void 0===i?void 0:i[0]){const l=[...null!==(s=null===(o=null===(n=p.example)||void 0===n?void 0:n.body_text)||void 0===o?void 0:o[0])&&void 0!==s?s:[]];l[e]=t.replace("{{","").replace("}}","").replace("((","").replace("))","");const a=Object.assign(Object.assign({},p.example),{body_text:[l]});return Object.assign(Object.assign({},p),{example:a})}}else if("HEADER"===l.type&&"HEADER"===F){if(null===(u=l.example)||void 0===u?void 0:u.header_text){const l=[...null!==(r=null===(d=p.example)||void 0===d?void 0:d.header_text)&&void 0!==r?r:[]];l[e]=t.replace("{{","").replace("}}","").replace("((","").replace("))","");const a=Object.assign(Object.assign({},p.example),{header_text:l});return Object.assign(Object.assign({},p),{example:a})}}else{if("BUTTONS"===l.type&&"BUTTONS"===F){const a=null===(c=l.buttons)||void 0===c?void 0:c.map(((l,a)=>a===e?Object.assign(Object.assign({},l),{example:"COPY_CODE"===l.type?t:[t]}):l));return a?Object.assign(Object.assign({},p),{buttons:a}):p}if("limited_time_offer"===l.type&&"limited_time_offer"===F)return Object.assign(Object.assign({},p),{example:Object.assign(Object.assign({},p.example),{limited_time_offer:t})})}return l}));if(p.components=m,l)if("BODY"===F&&(null===(d=null==p?void 0:p.mapping)||void 0===d?void 0:d.body))p.mapping=Object.assign(Object.assign({},p.mapping),{body:p.mapping.body.map(((l,i)=>e===i?"custom_text"===a?`((editableVariable${i+10}))`:t:l))});else if("HEADER"===F&&(null===(r=null==p?void 0:p.mapping)||void 0===r?void 0:r.header))p.mapping=Object.assign(Object.assign({},p.mapping),{header:p.mapping.header.map(((l,i)=>e===i?"custom_text"===a?`((editableVariable${i+20}))`:t:l))});else if("BUTTONS"===F&&(null===(c=null==p?void 0:p.mapping)||void 0===c?void 0:c.buttons)){let l=-1,i=-1;m.forEach((t=>{var a;"BUTTONS"===t.type&&(null===(a=t.buttons)||void 0===a||a.forEach(((t,a)=>{"URL"===t.type&&(l++,a===e&&"URL"==t.type&&(i=l))})))})),p.mapping=Object.assign(Object.assign({},p.mapping),{buttons:p.mapping.buttons.map(((e,l)=>l===i?"custom_link"===a?"((customPlaceholderName))":t:e))})}if(null!=Te&&Te>-1&&ge){const e=o(ge);e.components[1].cards[Te].components=p.components,e.mapping.cards[Te]=p.mapping,null==ye||ye(e)}else null==ye||ye(Object.assign({},p))}u((()=>{J&&(null==$||$())}),[J]),u((()=>{!function(){var e,t,l,a,i;const n="mobile"===pe?"template_html_mobile":"template_html_desktop",o=document.getElementById(n),s=(null!==(a=null===(l=null===(t=null===(e=null==o?void 0:o.contentWindow)||void 0===e?void 0:e.document)||void 0===t?void 0:t.body)||void 0===l?void 0:l.innerHTML)&&void 0!==a?a:"")+(null===(i=null==o?void 0:o.contentWindow)||void 0===i?void 0:i.document.head.innerHTML);me===O.EMAIL&&(null==he||he(s))}()}),[Oe]),u((()=>{!function(){var e,t;const l=[];let a=[];if(me!==O.MESSAGE||xe){"link"===(null==z?void 0:z.type)?(l.push({label:"",options:[P,D]}),ne(P)):"date_time"===(null==z?void 0:z.type)?(l.push({label:"",options:[P,D]}),ne(w)):(l.push({label:"",options:[P,D,w]}),ne(D));const e=null!=fe?fe:[];ae([...l,...e.map((e=>{var t,l;return Object.assign(Object.assign({},e),{label:_.toCapitilize(null===(l=null===(t=e.label)||void 0===t?void 0:t.replace(/([A-Z])/g," $1"))||void 0===l?void 0:l.toLowerCase())})}))]),a=[...l,...e]}else{const e=null!=fe?fe:[];ae([{label:"",options:[D,P]},...e]),a=[{label:"",options:[D,P]},...e]}if((me===O.WHATSAPP||me===O.EMAIL||me===O.MESSAGE||me===O.WEBPUSH)&&z.updatedValue)if(g.test(z.updatedValue)&&me===O.WHATSAPP||z.updatedValue.startsWith("{{")&&me!==O.WHATSAPP){const e=function(e,t,l){var a;let i={label:"",value:""};const n=l===O.WHATSAPP?e.updatedValue.replace("[[","").replace("]]",""):e.updatedValue.replace("{{","").replace("}}","");if(q){let t=e.updatedValue;if(_e===h.CHATBOT&&"BUTTONS"===F){const l=null==K?void 0:K.filter((t=>t.placeHolder===e.updatedValue));l&&l.length>0&&(t=l[0].label)}i={label:t?t.replace("{{","").replace("}}","").trim().replace("."," "):"",value:null!==(a=e.updatedValue)&&void 0!==a?a:""}}else t.map((e=>{e.options.map((e=>{var t;(null===(t=e.value)||void 0===t?void 0:t.replace("{{","").replace("}}","").trim())===n.trim()&&(i=e)}))}));return i}(z,a,me);e.value&&ne(e)}else"date_time"===z.type?(ne(w),te(z.updatedValue),Ne(null!==(e=z.index)&&void 0!==e?e:0,z.updatedValue)):(null===(t=z.updatedValue)||void 0===t?void 0:t.startsWith("https"))?(ne(P),te(z.updatedValue.split("https://")[1])):(ne(D),te(z.updatedValue))}()}),[Te]),u((()=>{pe&&ie&&ee&&setTimeout((()=>{Le("custom_link"===(null==ie?void 0:ie.value)&&ee?ee.includes("https")?ee:`https://${ee}`:ee,ie.value)}),100)}),[pe]),u((()=>{!oe&&ie&&z.updatedValue&&setTimeout((()=>{Le("custom_link"===(null==ie?void 0:ie.value)&&z.updatedValue?z.updatedValue.includes("https")?z.updatedValue:`https://${z.updatedValue}`:z.updatedValue,ie.value),se(!0)}),100)}),[ie]);const Ue=e=>{null==G||G(!1),"{{custom.url}}"===e.actualValue?De({label:e.displayName,selected:!0,value:"custom_link"}):"{{custom.text}}"==e.actualValue?De({label:e.displayName,selected:!0,value:"custom_text"}):"{{static.expiry}}"==e.actualValue?De({label:e.displayName,selected:!0,value:"static_expiry"}):De({label:e.displayName.replace("{{","").replace("}}","").trim().replace("."," "),selected:!0,value:e.actualValue,bikPlaceholderType:"string"})};function He(e,t){var l;const a=o(ge),i=F.toLocaleLowerCase();(null===(l=a.webpushBroadcastConfig)||void 0===l?void 0:l[i])&&(a.webpushBroadcastConfig[i][e]=t),null==ye||ye(Object.assign({},a))}return e(S,Object.assign({channel:me,focused:J,onMouseEnter:()=>X(!0),onMouseLeave:()=>X(!1)},{children:[t("div",Object.assign({style:{marginBottom:8}},{children:e(f,Object.assign({style:{color:ve&&!ie?T.content.negative:T.content.primary}},{children:[null===(L=z.variableName)||void 0===L?void 0:L.replace("{{","").replace("}}","")," ","link"===(null==z?void 0:z.type)?"link":"variable"]}))})),t("div",Object.assign({style:{marginBottom:12}},{children:q?e("div",Object.assign({style:{display:"flex",border:"#E0E0E0 1px solid",borderRadius:4,padding:10,justifyContent:(null==ie?void 0:ie.label)?"space-between":"flex-end"}},{children:[t(x,Object.assign({numberOfLines:1},{children:_e===h.CHATBOT?["static_expiry","custom_text","custom_link"].includes(null!==(N=null==ie?void 0:ie.value)&&void 0!==N?N:"")?null==ie?void 0:ie.label:null==ie?void 0:ie.value:b(null!==(U=null==ie?void 0:ie.label)&&void 0!==U?U:"",20,!0)})),Ve||"date_time"===(null==z?void 0:z.type)&&ke?t(l,{}):t(a,{onClick:()=>{(()=>{if(Q===j.URL&&_e===h.CHATBOT){const e=C({variableList:ue,categoryDisplayName:"Custom Variables",variableDisplayName:"Custom URL",variableValue:"{{custom.url}}"});de(e)}else if("limited_time_offer"===F){const e=C({variableList:ue,categoryDisplayName:"Static Variables",variableDisplayName:"Static Expiry",variableValue:"{{static.expiry}}"});de(e)}else if(Q===j.COPY_CODE){const e=C({variableList:ue,categoryDisplayName:"Custom Variables",variableDisplayName:"Custom Text",variableValue:"{{custom.text}}"});de(e)}})(),re((()=>Ue)),ce(!0)},width:24,height:24,color:T.content.primary})]})):t(m,{disabled:Ve,options:le,isSearchable:!1,onSelect:De,defaultOptions:ie?[Object.assign(Object.assign({},ie),{selected:!0})]:[]})})),("custom_text"===(null==ie?void 0:ie.value)||"custom_link"===(null==ie?void 0:ie.value))&&t(v,{state:Ve?"disabled":"none",labelText:"custom_text"===(null==ie?void 0:ie.value)?"Custom text value":"custom_link"===(null==ie?void 0:ie.value)?"Custom URL value":"",id:`variable-value-${null==ie?void 0:ie.value}-${Z}`,value:ee,errorMessage:ve&&(null===(H=null==Se?void 0:Se.buttons)||void 0===H?void 0:H.includes(null!==(W=null==z?void 0:z.index)&&void 0!==W?W:-1))?ee&&0!==ee.trim().length?"custom_link"!==ie.value||/^https?:\/\/(?:www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b(?:[-a-zA-Z0-9()@:%_\+.~#?&\/=]*)$/.test(`https://${ee.trim()}`)&&0!==ee.trim().length?"custom_link"!==ie.value&&ee.length>30?"Length cannot be more than 30":"BUTTONS"===F&&"custom_link"!==ie.value?"Enter valid alpha numeric code":"":"Enter valid URL":"Required field":"",maxCharLimit:Be||("custom_link"===(null==ie?void 0:ie.value)?2e3:"BUTTONS"===F?15:30),noKeyDownChange:!0,prefixText:"custom_link"===(null==ie?void 0:ie.value)?"https://":"",placeholder:"link"===z.type||"custom_link"===ie.value?"Enter custom URL here":"Enter custom text here",onChangeText:e=>{we(ie.value,e)}}),"static_expiry"===(null==ie?void 0:ie.value)&&e("div",Object.assign({style:{position:"relative"}},{children:[(Ve||Ae)&&e(B,Object.assign({onClick:e=>e.preventDefault(),style:{display:"flex",justifyContent:"space-between"}},{children:[t(A,{}),t(A,{})]})),t(p,{placement:"auto",time:n(ee?new Date(ee):new Date,"hh:mm a"),date:ee?new Date(ee):new Date,minDate:new Date,error:"",setError:()=>{},onChange:e=>{we("static_expiry",e.toISOString())}})]})),"static_expiry"===(null==ie?void 0:ie.value)&&Pe&&t("div",Object.assign({style:{marginTop:8}},{children:t(r,{containerStyle:{padding:"4px 8px"},icon:()=>t(i,{width:16,height:16,color:T.content.secondary}),type:c.NEUTRAL,text:"Please use the same expiration code that you applied when creating \nthe code on Shopify"})})),"link"===z.type&&"custom_link"!==(null==ie?void 0:ie.value)&&!Ee&&!Ce&&_e===h.CHATBOT&&t(k,{isError:null!==(Y=null===(R=null==Se?void 0:Se.buttons)||void 0===R?void 0:R.includes(null!==(I=null==z?void 0:z.index)&&void 0!==I?I:-1))&&void 0!==Y&&Y,params:null!==(M=z.queryParams)&&void 0!==M?M:[],onChange:e=>{Le(z.updatedValue,"link",e)},variableValue:z.updatedValue})]}))};export{S as Container,L as default};
|
package/dist/esm/components/template-context-mapper/modalElements/VariableConnectorWhatsApp.d.ts
CHANGED
|
@@ -10,5 +10,5 @@ export interface VariableConnectorWhatsAppProps {
|
|
|
10
10
|
originalList?: WhatsAppTemplateVariables | WebpushTemplateVariables | AllTemplateVariables;
|
|
11
11
|
channel?: CHANNEL_TYPE;
|
|
12
12
|
}
|
|
13
|
-
declare const VariableConnectorWhatsApp: (
|
|
13
|
+
declare const VariableConnectorWhatsApp: (props: VariableConnectorWhatsAppProps) => import("react/jsx-runtime").JSX.Element;
|
|
14
14
|
export default VariableConnectorWhatsApp;
|
package/dist/esm/components/template-context-mapper/modalElements/VariableConnectorWhatsApp.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsx as e,jsxs as i,Fragment as
|
|
1
|
+
import{jsx as e,jsxs as i,Fragment as t}from"react/jsx-runtime";import{Input as a}from"../../input/Input.js";import"../../template-preview/TemplatePreview.js";import"../../template-preview/WhatsApp/WhatsAppLikePreview.js";import"../../template-preview/WhatsApp/WhatsAppLikePreviewV2.js";import{COLORS as l}from"../../../constants/Theme.js";import"../../curtain/CurtainHelper.js";import"../../variable-picker-v3/model.js";import"../../template-preview/models/TemplateMeta.js";import"../../template-preview/models/WhatsAppTemplate.js";import{CHANNEL_TYPE as r}from"../../template-preview/models/Channels.js";import{BodySecondary as o}from"../../TypographyStyle.js";import{useTemplateModalContext as n}from"../context/templateModalContext.js";import p from"./VariableConnector.js";const d=d=>{var s,m,v,c,b,h;const{descriptionComponent:u,type:x,showVariableModal:f,originalList:j,channel:y}=d,{originalVariableList:T,disableEditVariable:w,selectedCarouselIndex:E,initialExpiryDateTime:g}=n();let V=T;y&&y==r.WHATSAPP&&j&&(V=j);const A=u.type;if("BODY"===A||"TITLE"===A.toLocaleUpperCase())return e("div",{children:null===(s=null!=E&&E>-1?V.cards[E].body:"TITLE"===A.toLocaleUpperCase()?null==V?void 0:V.title:null==V?void 0:V.body)||void 0===s?void 0:s.map(((t,r)=>w||!t.isEditableVariable?i("div",Object.assign({style:{margin:"16px 8px"}},{children:[i(o,Object.assign({style:{color:l.content.primary}},{children:["HEADER"===x?"Header":""," Locked variable ",r+1]})),e(a,{state:"disabled",placeholder:t.variableName,onChangeText:()=>{}})]}),r):e(p,{index:r,variable:t,showVariableModal:f,componentType:A},`${r}-${t.index}`)))});if("HEADER"===A)return e("div",{children:null===(m=null!=E&&E>-1?V.cards[E].header:null==V?void 0:V.header)||void 0===m?void 0:m.map(((t,r)=>t.isEditableVariable?e(p,{index:r,variable:t,showVariableModal:f,componentType:A},`${r}-${t.index}`):i("div",Object.assign({style:{margin:"16px 8px"}},{children:[i(o,Object.assign({style:{color:l.content.primary}},{children:["HEADER"===x?"Header":""," Locked variable ",r+1]})),e(a,{state:"disabled",placeholder:t.variableName,onChangeText:()=>{}})]}),r)))});if("limited_time_offer"===A){let i=null!==(c=null===(v=u.example)||void 0===v?void 0:v.limited_time_offer)&&void 0!==c?c:(new Date).toISOString();return g&&(i=new Date(g).toISOString()),e("div",{children:e(p,{index:0,variable:{variableName:null!==(h=null===(b=null==u?void 0:u.limited_time_offer)||void 0===b?void 0:b.text)&&void 0!==h?h:"Expires after",updatedValue:i,type:"date_time",isEditableVariable:!0,index:0},showVariableModal:f,componentType:A},`${A}`)})}return e(t,{})};export{d as default};
|
package/dist/esm/components/template-context-mapper/modalElements/VariableConnectorsPanel.js
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
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
|
|
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 n from"styled-components";import{CheckBox as l}from"../../checkBox/CheckBox.js";import{Input as s}from"../../input/Input.js";import{Tooltip as c}from"../../tooltips/Tooltip.js";import{TitleRegular as d,BodySecondary as p,TitleSmall as h}from"../../TypographyStyle.js";import{COLORS as m}from"../../../constants/Theme.js";import g from"../../../assets/icons/plus.svg.js";import{useTemplateModalContext as b}from"../context/templateModalContext.js";import u from"./VariableConnector.js";const f=n.div`
|
|
2
2
|
display: flex;
|
|
3
3
|
flex-direction: column;
|
|
4
4
|
height: 100%;
|
|
5
|
-
`,x=
|
|
5
|
+
`,x=n=>{let{onFocus:x,showVariableModal:v,discountCode:j,setDiscountCode:O}=n;const{originalVariableList:k,disableEditVariable:w,setVariableCallback:V,setShowVariablePicker:C}=b(),[T,B]=o(!1),[E,L]=o(!1),[D,F]=o(""),[I,M]=o(!1),N=a(),S=a();r((()=>{O&&O(j+D)}),[D]);r((()=>{k.some((e=>"checkout.checkoutUrl"===e.updatedValue.replace("{{","").replace("}}","")))?(B(!0),j&&M(!0)):(B(!1),null==M||M(!1),null==O||O(""))}),[k]);const A=e=>{F(e.actualValue)};return e(f,{children:[e("div",Object.assign({style:{padding:8}},{children:[e("div",Object.assign({style:{display:"flex",gap:8,alignItems:"center",marginBottom:4}},{children:[i(d,Object.assign({style:{color:m.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:m.content.placeholder})}))}))]})),i(p,Object.assign({style:{color:m.content.secondary}},{children:"You can view variables and links on the left underlined in purple colour."}))]})),null==k?void 0:k.map(((t,o)=>!t.isEditableVariable||w?e("div",Object.assign({style:{margin:"16px 8px"}},{children:[e(p,Object.assign({style:{color:m.content.primary}},{children:["Locked variable ",o+1]})),i(s,{state:"disabled",placeholder:t.variableName,onChangeText:()=>{}})]}),o):i("div",Object.assign({style:{marginTop:16}},{children:i(u,{index:o,variable:t,onFocus:()=>null==x?void 0:x(o),showVariableModal:v,setShowDiscountCheckBox:B})}),o))),(T||j)&&e("div",Object.assign({style:{display:"flex",flexDirection:"row",marginLeft:10,marginTop:8}},{children:[i(l,{isChecked:I,onValueChange:()=>{I&&O&&O(""),M(!I)}}),i(h,Object.assign({style:{marginLeft:8}},{children:"Add discount code"}))]})),I&&e("div",Object.assign({ref:N,style:{margin:10}},{children:[i(s,{placeholder:"Enter your discount code",onChangeText:e=>{O&&O(e)},value:j,onFocus:()=>{L(!0)},onBlur:e=>{var i;"addVar"===(null===(i=e.relatedTarget)||void 0===i?void 0:i.id)?(N.current&&N.current.focus(),L(!0)):L(!1)},noErrorHint:!0,validate:e=>[!0,""]}),E&&i(y,Object.assign({ref:S,id:"addVar",onClick:e=>{e.stopPropagation(),V((()=>A)),C(!0)}},{children:e("div",Object.assign({className:"add"},{children:[i(g,{width:20,height:20,color:"white"}),i("div",Object.assign({className:"variable"},{children:"Add variable"}))]}))}))]}))]})},y=n.button`
|
|
6
6
|
padding: 2px 8px;
|
|
7
7
|
cursor: pointer;
|
|
8
8
|
color: white;
|
package/dist/esm/components/template-context-mapper/modalElements/WhatsAppTemplateCardButtonV2.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsxs as
|
|
1
|
+
import{jsxs as e,jsx as t}from"react/jsx-runtime";import{cloneDeep as l}from"lodash";import{useState as s,useEffect as a}from"react";import{Dropdown as n}from"../../dropdown/Dropdown.js";import{Input as o}from"../../input/Input.js";import{editableVarPattern as i}from"../../template-preview/constants/regexPatterns.js";import{CUSTOM_URL_NAME as r}from"../../template-preview/models/TemplateMeta.js";import{POD as c}from"../../template-preview/models/WhatsAppTemplate.js";import{BodySecondary as u}from"../../TypographyStyle.js";import{COLORS as d}from"../../../constants/Theme.js";import{useTemplateModalContext as p}from"../context/templateModalContext.js";import{validateIsUrl as b}from"../utils/validateIsUrl.js";import m,{Container as j}from"./VariableConnector.js";const g=g=>{let{variableListIndex:f,button:O,updateSelectedURLTemplateBtn:v,updateSelectedQRBTemplateBtn:x,currentVariableList:y,CTAoptions:h,QRBoptions:L}=g;var R,U,V,T,w;const[C,I]=s(""),[E,P]=s(),{isError:H,disableEditVariable:N,pod:B,selectedCarouselIndex:Q,originalVariableList:_,setOriginalVariableList:S,isProductCarouselType:K,ctaOptionsErrors:Y,setCtaOptionsErrors:$}=p();function k(e){if(I(e),null!=Q&&Q>-1&&K){const t=l(_);if("URL"===O.type){const l=t.cards.map((t=>{let l=t.buttons.filter((e=>"URL"===e.type))[f];l=Object.assign(Object.assign({},l),{buttonVariable:"((customPlaceholderName))",example:[`https://${e}`]});const s=t.buttons.map((e=>"URL"===e.type&&(null==e?void 0:e.text)===(null==l?void 0:l.text)?l:e));return Object.assign(Object.assign({},t),{buttons:s})}));null==S||S((e=>Object.assign(Object.assign({},e),{cards:l}))),null==v||v(`https://${e}`,"custom",f)}return}let t=y.buttons.filter((e=>"URL"===e.type))[f];t=Object.assign(Object.assign({},t),{buttonVariable:"((customPlaceholderName))",example:[`https://${e}`]});const s=y.buttons.map((e=>"URL"===e.type&&(null==e?void 0:e.text)===(null==t?void 0:t.text)?t:e)),a=Object.assign({},null!=Q&&Q>-1?_.cards[Q]:_);if(a.buttons=s,null!=Q&&Q>-1){const e=[..._.cards];e[Q]=a,null==S||S((t=>Object.assign(Object.assign({},t),{cards:e})))}else null==S||S((e=>Object.assign(Object.assign({},e),{buttons:[...s]})));null==v||v(`https://${e}`,"custom",f)}return a((()=>{var e;if(O.buttonVariable&&i.test(O.buttonVariable))P(r),I((null===(e=O.example)||void 0===e?void 0:e[0].split("https://")[1])||"");else{let e=-1;const t="URL"===O.type?h:L;e="URL"===O.type?t.findIndex((e=>e.placeHolder===O.buttonVariable)):t.findIndex((e=>e.label===O.flowName)),e>-1?P(t[e]):null==$||$((e=>Object.assign(Object.assign({},e),{[f]:"Required field!"})))}}),[]),B!==c.CHATBOT?e(j,{children:[t("div",Object.assign({style:{marginBottom:8}},{children:e(u,Object.assign({style:{color:d.content.primary}},{children:[O.text," button"]}))})),t("div",Object.assign({style:{marginBottom:12}},{children:t(n,{disabled:N,options:"URL"===O.type?h:L,isSearchable:!0,onSelect:function(e,t){null==$||$((e=>(delete e[f],Object.assign({},e))));const s=e;P(s);const a=("URL"===O.type?h:L).find((e=>e.placeHolder===s.placeHolder));if(a)if("custom_link"!==a.value){if(null!=Q&&Q>-1&&K){const e=l(_);if("URL"===O.type){const t=e.cards.map((e=>{let t=e.buttons.filter((e=>"URL"===e.type))[f];t=Object.assign(Object.assign({},t),{buttonVariable:s.placeHolder});const l=e.buttons.map((e=>"URL"===e.type&&(null==e?void 0:e.text)===(null==t?void 0:t.text)?t:e));return Object.assign(Object.assign({},e),{buttons:l})}));null==v||v({defaultValue:a.value,placeHolder:a.placeHolder},"placeholder",f),null==S||S((e=>Object.assign(Object.assign({},e),{cards:t})))}else if("QUICK_REPLY"===O.type){const t=e.cards.map((e=>{let t=e.buttons.filter((e=>"QUICK_REPLY"===e.type))[f];t=Object.assign(Object.assign({},t),{flowName:s.label,flowId:s.value});const l=e.buttons.map((e=>"QUICK_REPLY"===e.type&&(null==e?void 0:e.text)===(null==t?void 0:t.text)?t:e));return Object.assign(Object.assign({},e),{buttons:l})}));null==x||x({flowName:s.label,flowId:s.value},"placeholder",f),null==S||S((e=>Object.assign(Object.assign({},e),{cards:t})))}return}let e;if("URL"===O.type){let t=y.buttons.filter((e=>"URL"===e.type))[f];t=Object.assign(Object.assign({},t),{buttonVariable:s.placeHolder,example:[(null==s?void 0:s.value)||"https://d.bik.ai/"]}),e=y.buttons.map((e=>"URL"===e.type&&(null==e?void 0:e.text)===(null==t?void 0:t.text)?t:e)),null==v||v({defaultValue:a.value,placeHolder:a.placeHolder},"placeholder",f)}else{let t=y.buttons.filter((e=>"QUICK_REPLY"===e.type))[f];t=Object.assign(Object.assign({},t),{flowName:s.label,flowId:s.value}),e=y.buttons.map((e=>"QUICK_REPLY"===e.type&&(null==e?void 0:e.text)===(null==t?void 0:t.text)?t:e)),null==x||x({flowName:s.label,flowId:s.value},"placeholder",f)}const t=Object.assign({},null!=Q&&Q>-1?_.cards[Q]:_);if(t.buttons=e,null!=Q&&Q>-1){const e=[..._.cards];e[Q]=t,null==S||S((t=>Object.assign(Object.assign({},t),{cards:e})))}else null==S||S((t=>Object.assign(Object.assign({},t),{buttons:[...e]})))}else k("")},defaultOptions:E?[Object.assign(Object.assign({},E),{selected:!0})]:[],error:H?null==Y?void 0:Y[f]:void 0})})),"custom_link"===(null==E?void 0:E.value)&&t("div",Object.assign({style:{marginBottom:20}},{children:t(o,{state:N?"disabled":"none",errorMessage:H?C?b(C)?"":"Enter valid URL":"Required field":"",value:C,prefixText:"https://",placeholder:"Enter custom URL here",onChangeText:k,maxCharLimit:2e3})}))]}):t(m,{index:f,variable:{variableName:null!==(R=O.text)&&void 0!==R?R:"",updatedValue:"((customPlaceholderName))"===O.buttonVariable?`${null===(U=O.example)||void 0===U?void 0:U[0]}`:null!==(V=O.buttonVariable)&&void 0!==V?V:"",type:"link",isEditableVariable:!0,index:null!==(T=O.index)&&void 0!==T?T:0,queryParams:null!==(w=O.queryParams)&&void 0!==w?w:[]},showVariableModal:!0,componentType:"BUTTONS",buttonType:O.type,CTAoptions:h})};export{g as default};
|