@bikdotai/bik-component-library 0.0.469 → 0.0.471
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/carousel-preview/CarouselPreview.d.ts +1 -0
- package/dist/cjs/components/carousel-preview/CarouselPreview.js +1 -1
- package/dist/cjs/components/carousel-preview/CarouselPreview.style.d.ts +4 -1
- package/dist/cjs/components/carousel-preview/CarouselPreview.style.js +7 -2
- package/dist/cjs/components/carousel-preview/CarouselPreviewCard.d.ts +1 -1
- package/dist/cjs/components/carousel-preview/CarouselPreviewCard.js +1 -1
- package/dist/cjs/components/resizeImage/index.js +1 -1
- package/dist/cjs/components/shimmer-image/ShimmerImage.js +1 -1
- package/dist/cjs/components/template-context-mapper/Badge/index.d.ts +4 -1
- package/dist/cjs/components/template-context-mapper/Badge/index.js +3 -3
- package/dist/cjs/components/template-context-mapper/TemplateContextMapper.js +1 -1
- package/dist/cjs/components/template-context-mapper/custom-hooks/useAdditionalVariables.js +1 -1
- package/dist/cjs/components/template-context-mapper/modalElements/Body.js +5 -4
- package/dist/cjs/components/template-context-mapper/modalElements/EditMediaV2.style.js +6 -5
- package/dist/cjs/components/template-context-mapper/modalElements/EditWhatsAppCarouselTemplateV2.js +1 -1
- package/dist/cjs/components/template-context-mapper/modalElements/EditWhatsAppTemplateMediaV2.js +1 -1
- package/dist/cjs/components/template-context-mapper/modalElements/EditWhatsAppTemplateV2.js +1 -1
- package/dist/cjs/components/template-context-mapper/modalElements/Footer.js +6 -5
- package/dist/cjs/components/template-context-mapper/modalElements/ProductBox.js +2 -2
- package/dist/cjs/components/template-context-mapper/modalElements/VariableConnector.js +3 -3
- package/dist/cjs/components/template-context-mapper/modalElements/VariableConnectorsPanel.js +2 -3
- package/dist/esm/components/carousel-preview/CarouselPreview.d.ts +1 -0
- package/dist/esm/components/carousel-preview/CarouselPreview.js +1 -1
- package/dist/esm/components/carousel-preview/CarouselPreview.style.d.ts +4 -1
- package/dist/esm/components/carousel-preview/CarouselPreview.style.js +7 -2
- package/dist/esm/components/carousel-preview/CarouselPreviewCard.d.ts +1 -1
- package/dist/esm/components/carousel-preview/CarouselPreviewCard.js +1 -1
- package/dist/esm/components/resizeImage/index.js +1 -1
- package/dist/esm/components/shimmer-image/ShimmerImage.js +1 -1
- package/dist/esm/components/template-context-mapper/Badge/index.d.ts +4 -1
- package/dist/esm/components/template-context-mapper/Badge/index.js +3 -3
- package/dist/esm/components/template-context-mapper/TemplateContextMapper.js +1 -1
- package/dist/esm/components/template-context-mapper/custom-hooks/useAdditionalVariables.js +1 -1
- package/dist/esm/components/template-context-mapper/modalElements/Body.js +6 -5
- package/dist/esm/components/template-context-mapper/modalElements/EditMediaV2.style.js +4 -3
- package/dist/esm/components/template-context-mapper/modalElements/EditWhatsAppCarouselTemplateV2.js +1 -1
- package/dist/esm/components/template-context-mapper/modalElements/EditWhatsAppTemplateMediaV2.js +1 -1
- package/dist/esm/components/template-context-mapper/modalElements/EditWhatsAppTemplateV2.js +1 -1
- package/dist/esm/components/template-context-mapper/modalElements/Footer.js +6 -5
- package/dist/esm/components/template-context-mapper/modalElements/ProductBox.js +2 -2
- package/dist/esm/components/template-context-mapper/modalElements/VariableConnector.js +4 -4
- package/dist/esm/components/template-context-mapper/modalElements/VariableConnectorsPanel.js +0 -1
- package/package.json +1 -1
|
@@ -10,4 +10,5 @@ export declare const CarouselPreview: React.ForwardRefExoticComponent<{
|
|
|
10
10
|
template: WhatsAppTemplate | EmailTemplateType | SMSTemplateType | WhatsAppCarouselTemplate | null;
|
|
11
11
|
showSampleValues?: boolean | undefined;
|
|
12
12
|
isPreview?: boolean | undefined;
|
|
13
|
+
removeBottomBorder?: boolean | undefined;
|
|
13
14
|
} & React.RefAttributes<HTMLDivElement>>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../assets/icons/chevronLeft.svg.js"),n=require("../../assets/icons/chevronRight.svg.js"),r=require("pure-react-carousel"),l=require("react"),i=require("./CarouselPreview.style.js"),s=require("./CarouselPreviewCard.js"),o=require("../../constants/Theme.js");function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const d=a(l).default.forwardRef(((l,a)=>{let{channel:d,template:u,showSampleValues:c,isPreview:h,removeBottomBorder:v}=l;var g,j,p,x,m,b;const f=null===(g=null==u?void 0:u.components)||void 0===g?void 0:g[1].cards;let w="500px";const C=null!==(p=null===(j=null==u?void 0:u.components)||void 0===j?void 0:j[0].text)&&void 0!==p?p:"";return C.length>100&&C.length<300?w="530px":C.length>300&&C.length<600?w="560px":C.length>600&&C.length<900?w="590px":C.length>900&&C.length<1200&&(w="620px"),e.jsxs(i.Container,Object.assign({removeBottomBorder:v},{children:[e.jsx(s.default,{channel:d,currentTemplate:u,carouselCardIndex:-1,isPreview:h,width:"77%"}),!!(null==f?void 0:f.length)&&e.jsx(r.CarouselProvider,Object.assign({naturalSlideWidth:100,naturalSlideHeight:125,totalSlides:null!==(x=null==f?void 0:f.length)&&void 0!==x?x:1,orientation:"horizontal",visibleSlides:1.3,dragEnabled:!0,touchEnabled:!0},{children:e.jsxs(i.CarouselContainer,Object.assign({height:w},{children:[!h&&e.jsx(r.ButtonBack,Object.assign({className:"left_button"},{children:e.jsx(t.default,{height:10,width:10,color:o.COLORS.content.primary})})),e.jsx(r.Slider,Object.assign({className:"slider"},{children:null===(b=null===(m=null==u?void 0:u.components)||void 0===m?void 0:m[1].cards)||void 0===b?void 0:b.map(((t,n)=>{var l,i;const o={components:t.components,mapping:null===(i=null===(l=null==u?void 0:u.mapping)||void 0===l?void 0:l.cards)||void 0===i?void 0:i[n]};return e.jsx(r.Slide,Object.assign({index:n},{children:e.jsx(s.default,{channel:d,currentTemplate:o,carouselCardIndex:n,isPreview:h,width:"100%"},n)}),n)}))})),!h&&e.jsx(r.ButtonNext,Object.assign({className:"right_button"},{children:e.jsx(n.default,{height:10,width:10,color:o.COLORS.content.primary})}))]}))}))]}))}));exports.CarouselPreview=d;
|
|
@@ -1,4 +1,7 @@
|
|
|
1
1
|
export declare const Container: import("styled-components").StyledComponent<"div", any, {
|
|
2
2
|
showHeader?: boolean | undefined;
|
|
3
|
+
removeBottomBorder?: boolean | undefined;
|
|
4
|
+
}, never>;
|
|
5
|
+
export declare const CarouselContainer: import("styled-components").StyledComponent<"div", any, {
|
|
6
|
+
height: string;
|
|
3
7
|
}, never>;
|
|
4
|
-
export declare const CarouselContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
background-image: url('https://firebasestorage.googleapis.com/v0/b/bikayi-chat.appspot.com/o/images-uid%2F341dba50-e84e-4457-b5b5-d9d8a0b95a73?alt=media&token=6fd32f23-8bb2-4980-bbee-bef39b38fd9f');
|
|
3
3
|
border-color: ${t.COLORS.stroke.primary};
|
|
4
4
|
border-top-style: solid;
|
|
5
|
-
border-bottom-style: solid;
|
|
5
|
+
border-bottom-style: ${e=>e.removeBottomBorder?"unset":"solid"};
|
|
6
6
|
border-top-width: 1px;
|
|
7
7
|
border-bottom-width: 1px;
|
|
8
8
|
background-repeat: no-repeat;
|
|
@@ -47,6 +47,11 @@
|
|
|
47
47
|
}
|
|
48
48
|
.slider {
|
|
49
49
|
width: 100%;
|
|
50
|
-
height:
|
|
50
|
+
height: ${e=>e.height};
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
.carousel__slide-focus-ring {
|
|
54
|
+
display: none !important;
|
|
55
|
+
outline-width: 0 !important;
|
|
51
56
|
}
|
|
52
57
|
`;exports.CarouselContainer=n,exports.Container=i;
|
|
@@ -2,7 +2,7 @@ import React from 'react';
|
|
|
2
2
|
import { CHANNEL_TYPE } from "../template-preview/models/Channels";
|
|
3
3
|
declare const CarouselPreviewCard: React.ForwardRefExoticComponent<{
|
|
4
4
|
channel: CHANNEL_TYPE;
|
|
5
|
-
|
|
5
|
+
currentTemplate: any;
|
|
6
6
|
showSampleValues?: boolean | undefined;
|
|
7
7
|
carouselCardIndex?: number | undefined;
|
|
8
8
|
isPreview?: boolean | undefined;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),r=require("../template-context-mapper/context/templateModalContext.js"),a=require("../template-preview/TemplatePreview.js");function
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),r=require("../template-context-mapper/context/templateModalContext.js"),a=require("../template-preview/TemplatePreview.js");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}require("../template-preview/WhatsApp/WhatsAppLikePreview.js"),require("../template-preview/WhatsApp/WhatsAppLikePreviewV2.js"),require("../../constants/Theme.js"),require("../curtain/CurtainHelper.js"),require("../template-preview/models/TemplateMeta.js"),require("../template-preview/models/WhatsAppTemplate.js");const l=i(t).default.forwardRef((t=>{let{channel:i,currentTemplate:l,showSampleValues:s,carouselCardIndex:p,isPreview:n,width:u}=t;var o,d,m;const{cardWidth:c,template:v}=r.useTemplateModalContext(),h=(null!==(m=null===(d=null===(o=null==v?void 0:v.components)||void 0===o?void 0:o[1].cards)||void 0===d?void 0:d.length)&&void 0!==m?m:0)-1===p?12:0;return e.jsx("div",Object.assign({style:{width:u||c}},{children:e.jsx(a.TemplatePreview,{showSampleValues:s,template:l,channel:i,size:"small",hideHeader:!0,carouselCardIndex:p,isWhatsappCarousel:!0,isPreview:n,whatsAppSpecificMeta:{templateContainerStyles:{marginRight:h}}})}))}));exports.default=l;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("react"),t=require("../shimmer/ShimmerComponent/BikShimmer.js"),i=require("../../utils/resizeImage.js");exports.ResizableImage=s=>{let{imageUrl:m,targetSize:a,alt:h,style:u}=s;const[l,c]=r.useState("");return r.useEffect((()=>{i.resizeImage(m,a).then((e=>{c(e)})).catch((e=>{c(m)}))}),[m,a]),l?e.jsx("img",{alt:h,src:l,height:a,width:a,style:u}):e.jsx(t.BikShimmer,{boxes:[{marginTop:"0px",height:`${a}px`,width:`${a}px`}]})};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),r=require("../shimmer/ShimmerComponent/BikShimmer.js");const i="https://firebasestorage.googleapis.com/v0/b/bikayi-chat.appspot.com/o/images-uid%2F9034204a-cbf9-4b93-8b28-ccf880d273f9?alt=media&token=318529b5-8df0-4644-85b0-40fff1dc1d5c";exports.DEFAULT_IMAGE=i,exports.ShimmerImage=s=>{let{imageUrl:o,width:a,height:l,borderRadius:d,alt:c,defaultImageUrl:n=i}=s;const[m,u]=t.useState(!0),[h,b]=t.useState(!1);return t.useEffect((()=>{const e=new Image;return e.src=o,e.onload=()=>{b(!1),u(!1)},e.onerror=()=>{b(!0),u(!1)},()=>{e.onload=null,e.onerror=null}}),[o]),e.jsxs("div",Object.assign({style:{position:"relative",width:a,height:l,borderRadius:d}},{children:[m&&e.jsx(r.BikShimmer,{boxes:[{height:`${l}px`,width:`${a}px`,marginTop:"0px"}]}),h?e.jsx("img",{src:n,alt:null!=c?c:"Image",style:{borderRadius:null!=d?d:0,display:"block",width:"100%",height:"100%",objectFit:"cover"}}):e.jsx("img",{src:o,alt:null!=c?c:"Image",style:{borderRadius:null!=d?d:0,display:m?"none":"block",width:"100%",height:"100%",objectFit:"cover"}})]}))};
|
|
@@ -1,5 +1,8 @@
|
|
|
1
|
-
export declare const BadgeContainer: import("styled-components").StyledComponent<"div", any, {
|
|
1
|
+
export declare const BadgeContainer: import("styled-components").StyledComponent<"div", any, {
|
|
2
|
+
padding?: string | undefined;
|
|
3
|
+
}, never>;
|
|
2
4
|
export interface BadgeProps {
|
|
3
5
|
errorText: string;
|
|
6
|
+
padding?: string;
|
|
4
7
|
}
|
|
5
8
|
export declare const Badge: (props: BadgeProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../../assets/icons/alert.svg.js"),r=require("styled-components"),n=require("../../TypographyStyle.js"),i=require("../../../constants/Theme.js");function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const s=a(r).default.div`
|
|
2
2
|
background: ${i.COLORS.background.negative.light};
|
|
3
3
|
display: flex;
|
|
4
4
|
align-items: center;
|
|
5
|
-
padding: 0px 12px;
|
|
5
|
+
padding: ${e=>e.padding?"8px":"0px"} 12px;
|
|
6
6
|
gap: 8px;
|
|
7
7
|
border-radius: 4px;
|
|
8
8
|
margin-right: 12px;
|
|
9
9
|
color: ${i.COLORS.content.negative};
|
|
10
|
-
`;exports.Badge=
|
|
10
|
+
`;exports.Badge=r=>{const{errorText:a,padding:d}=r;return e.jsxs(s,Object.assign({padding:d},{children:[e.jsx(t.default,{height:20,width:20,color:i.COLORS.content.negative}),e.jsx(n.BodySecondary,{children:a})]}))},exports.BadgeContainer=s;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),l=require("react"),t=require("../../utils/StringUtils.js"),o=require("../modals/styledModal.js"),a=require("../template-preview/models/Channels.js"),r=require("./context/templateModalContext.js"),s=require("./modalElements/Footer.js"),i=require("./modalElements/TemplateSelectModalContent.js"),n=require("./utils/convertPlaceholdersToBikDropdown.js");exports.TemplateContextMapper=d=>{let{selectedTemplate:u,closeDialog:c,showVariableMapping:p,channel:v,htmlContent:h,templateVariables:m,onTemplateSelect:C,globalPlaceholders:E,showOnlyContent:S,whatsappSpecificPickerMeta:x,zIndex:b,showVariableModal:g,variableList:P,discountCode:T,setDiscountCode:f,onBackPress:j,enabledCustomText:M,variableListForImage:I,showSampleValues:L,disableEditVariable:y,pod:A,extras:w,pickerConf:N,selectedCarouselProducts:V,disableEditExpiry:D,cardWidth:k,onDeleteSelectedProducts:q}=d;var H,_,O,W,F,Y;l.useEffect((()=>{G(h)}),[h]);const B=v===a.CHANNEL_TYPE.WHATSAPP&&"CAROUSEL"===(null===(_=null===(H=null==u?void 0:u.components)||void 0===H?void 0:H[1])||void 0===_?void 0:_.type),z=null==u?void 0:u.isProductCarouselType,[R,U]=l.useState(v===a.CHANNEL_TYPE.EMAIL||B?"desktop":"mobile"),[$,G]=l.useState(h),[J,K]=l.useState(!1),[Q,X]=l.useState([]),[Z,ee]=l.useState(u),[le,te]=l.useState([]),[oe,ae]=l.useState(!1),[re,se]=l.useState(null!=m?m:[]),[ie,ne]=l.useState(!1),[de,ue]=l.useState(-1),[ce,pe]=l.useState([]);l.useEffect((()=>{V?pe(V):z&&pe([])}),[V]),l.useEffect((()=>{var e;if(!oe&&z){const l=null===(e=null==Z?void 0:Z.components)||void 0===e?void 0:e[1].cards,t=[];null==l||l.forEach((e=>{var l;null===(l=null==e?void 0:e.components)||void 0===l||l.forEach((e=>{var l,o,a;"HEADER"===e.type&&t.push(null!==(a=null===(o=null===(l=e.example)||void 0===l?void 0:l.header_handle)||void 0===o?void 0:o[0])&&void 0!==a?a:"")}))})),te(t),ae(!0)}}),[oe]);const ve=l.useMemo((()=>n.convertPlaceholdersToBikDropdown(E)),[E]);return e.jsx(r.TemplateModalContext.Provider,Object.assign({value:{template:Z,setTemplate:ee,device:R,setDevice:U,display_content:$,setDisplayContent:G,originalVariableList:re,setOriginalVariableList:se,isError:J,setIsError:K,channel:v,globalNormalizedPlaceholders:ve,templateSelectionTriggered:ie,setTemplateSelectionTriggered:ne,enabledCustomText:M,disableEditVariable:y,pod:A,extras:w,isWhatsappCarousel:B,selectedCarouselIndex:de,setSelectedCarouselIndex:ue,isProductCarouselType:z,cardCount:B?null===(W=null===(O=u.components)||void 0===O?void 0:O[1].cards)||void 0===W?void 0:W.length:void 0,errorIndexes:Q,setErrorIndexes:X,pickerConf:N,carouselProducts:ce,setCarouselProducts:pe,disableEditExpiry:D,cardWidth:k,cardImages:le,onDeleteSelectedProducts:q}},{children:S?e.jsx(i.default,{channel:a.CHANNEL_TYPE.EMAIL,hideHeader:!0}):e.jsxs(o.StyledModal,Object.assign({zIndex:b,centralContainerStyles:{width:B?900:v===a.CHANNEL_TYPE.EMAIL&&p?1e3:800},open:!0,onClose:()=>{null==c||c()},headingTitle:null==Z?void 0:Z.label,headingSubtitle:v===a.CHANNEL_TYPE.WHATSAPP?`${t.default.capitaliseFirstLetterOfString(null!==(F=null==Z?void 0:Z.category)&&void 0!==F?F:"")} • ${null!==(Y=null==Z?void 0:Z.templateCategory)&&void 0!==Y?Y:""}`:"",onBackPress:()=>{null==j||j()}},{children:[e.jsx(i.default,{showSampleValues:L,showVariableMapping:p,channel:v,whatsappSpecificPickerMeta:x,showVariableModal:g,variableList:P,discountCode:T,setDiscountCode:f,variableListForImage:I&&(null==I?void 0:I.length)>0?I:P}),C?e.jsx(s.default,{isWhatsappCarousel:null!=B&&B,onSelect:function(){if((null==ce?void 0:ce.length)<1&&z)return void K(!0);const e=null==C?void 0:C(Z,re,null!=$?$:"",ce);(null==e?void 0:e.errorIndexes)||(null==e?void 0:e.error)?((null==e?void 0:e.errorIndexes)&&X(e.errorIndexes),(null==e?void 0:e.error)&&K(!!(null==e?void 0:e.error))):ne(!0)}}):e.jsx(e.Fragment,{})]}))}))};
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),l=require("react"),t=require("../../utils/StringUtils.js"),o=require("../modals/styledModal.js"),a=require("../template-preview/models/Channels.js"),r=require("./context/templateModalContext.js"),s=require("./modalElements/Footer.js"),i=require("./modalElements/TemplateSelectModalContent.js"),n=require("./utils/convertPlaceholdersToBikDropdown.js");exports.TemplateContextMapper=d=>{let{selectedTemplate:u,closeDialog:c,showVariableMapping:p,channel:v,htmlContent:h,templateVariables:m,onTemplateSelect:C,globalPlaceholders:E,showOnlyContent:S,whatsappSpecificPickerMeta:x,zIndex:b,showVariableModal:g,variableList:P,discountCode:T,setDiscountCode:f,onBackPress:j,enabledCustomText:M,variableListForImage:I,showSampleValues:L,disableEditVariable:y,pod:A,extras:w,pickerConf:N,selectedCarouselProducts:V,disableEditExpiry:D,cardWidth:k,onDeleteSelectedProducts:q}=d;var H,_,O,W,F,Y;l.useEffect((()=>{G(h)}),[h]);const B=v===a.CHANNEL_TYPE.WHATSAPP&&"CAROUSEL"===(null===(_=null===(H=null==u?void 0:u.components)||void 0===H?void 0:H[1])||void 0===_?void 0:_.type),z=null==u?void 0:u.isProductCarouselType,[R,U]=l.useState(v===a.CHANNEL_TYPE.EMAIL||B?"desktop":"mobile"),[$,G]=l.useState(h),[J,K]=l.useState(!1),[Q,X]=l.useState([]),[Z,ee]=l.useState(u),[le,te]=l.useState([]),[oe,ae]=l.useState(!1),[re,se]=l.useState(null!=m?m:[]),[ie,ne]=l.useState(!1),[de,ue]=l.useState(-1),[ce,pe]=l.useState([]);l.useEffect((()=>{V?pe(V):z&&pe([])}),[V]),l.useEffect((()=>{var e;if(!oe&&z&&(!V||0===pe.length)){const l=null===(e=null==Z?void 0:Z.components)||void 0===e?void 0:e[1].cards,t=[];null==l||l.forEach((e=>{var l;null===(l=null==e?void 0:e.components)||void 0===l||l.forEach((e=>{var l,o,a;"HEADER"===e.type&&t.push(null!==(a=null===(o=null===(l=e.example)||void 0===l?void 0:l.header_handle)||void 0===o?void 0:o[0])&&void 0!==a?a:"")}))})),te(t),ae(!0)}}),[oe]);const ve=l.useMemo((()=>n.convertPlaceholdersToBikDropdown(E)),[E]);return e.jsx(r.TemplateModalContext.Provider,Object.assign({value:{template:Z,setTemplate:ee,device:R,setDevice:U,display_content:$,setDisplayContent:G,originalVariableList:re,setOriginalVariableList:se,isError:J,setIsError:K,channel:v,globalNormalizedPlaceholders:ve,templateSelectionTriggered:ie,setTemplateSelectionTriggered:ne,enabledCustomText:M,disableEditVariable:y,pod:A,extras:w,isWhatsappCarousel:B,selectedCarouselIndex:de,setSelectedCarouselIndex:ue,isProductCarouselType:z,cardCount:B?null===(W=null===(O=u.components)||void 0===O?void 0:O[1].cards)||void 0===W?void 0:W.length:void 0,errorIndexes:Q,setErrorIndexes:X,pickerConf:N,carouselProducts:ce,setCarouselProducts:pe,disableEditExpiry:D,cardWidth:k,cardImages:le,onDeleteSelectedProducts:q}},{children:S?e.jsx(i.default,{channel:a.CHANNEL_TYPE.EMAIL,hideHeader:!0}):e.jsxs(o.StyledModal,Object.assign({zIndex:b,centralContainerStyles:{width:B?900:v===a.CHANNEL_TYPE.EMAIL&&p?1e3:800},open:!0,onClose:()=>{null==c||c()},headingTitle:null==Z?void 0:Z.label,headingSubtitle:v===a.CHANNEL_TYPE.WHATSAPP?`${t.default.capitaliseFirstLetterOfString(null!==(F=null==Z?void 0:Z.category)&&void 0!==F?F:"")} • ${null!==(Y=null==Z?void 0:Z.templateCategory)&&void 0!==Y?Y:""}`:"",onBackPress:()=>{null==j||j()}},{children:[e.jsx(i.default,{showSampleValues:L,showVariableMapping:p,channel:v,whatsappSpecificPickerMeta:x,showVariableModal:g,variableList:P,discountCode:T,setDiscountCode:f,variableListForImage:I&&(null==I?void 0:I.length)>0?I:P}),C?e.jsx(s.default,{isWhatsappCarousel:null!=B&&B,onSelect:function(){if((null==ce?void 0:ce.length)<1&&z)return void K(!0);const e=null==C?void 0:C(Z,re,null!=$?$:"",ce);(null==e?void 0:e.errorIndexes)||(null==e?void 0:e.error)?((null==e?void 0:e.errorIndexes)&&X(e.errorIndexes),(null==e?void 0:e.error)&&K(!!(null==e?void 0:e.error))):ne(!0)}}):e.jsx(e.Fragment,{})]}))}))};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});exports.useAdditionalVariables=a=>{const{variableList:e,categoryDisplayName:i,variableDisplayName:r,variableValue:l}=a;return e?[...e,{description:
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});exports.useAdditionalVariables=a=>{const{variableList:e,categoryDisplayName:i,variableDisplayName:r,variableValue:l}=a;return e?[...e,{description:i,displayName:i,orderId:1,variables:{variableDisplayName:{description:void 0,displayName:r,actualValue:l,variableType:"any",isAvailable:!0}}}].sort(((a,e)=>a.orderId-e.orderId)):e};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),a=require("styled-components"),l=require("../../carousel-preview/CarouselPreview.js"),o=require("./EditWhatsAppCarouselTemplateV2.js"),i=require("../../template-preview/models/Channels.js"),s=require("../../../constants/Theme.js"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),a=require("styled-components"),l=require("../../carousel-preview/CarouselPreview.js"),o=require("./EditWhatsAppCarouselTemplateV2.js"),i=require("../../template-preview/models/Channels.js"),s=require("../../../constants/Theme.js"),r=require("../context/templateModalContext.js"),n=require("../utils/getVariableNameEmail.js"),u=require("../utils/highlightFor.js"),d=require("./DesktopPreview.js"),p=require("./EditWhatsAppTemplateV2.js"),c=require("./MobilePreview.js"),h=require("./VariableConnectorsPanel.js");function m(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var v=m(a);const C=v.default.div`
|
|
2
2
|
display: flex;
|
|
3
3
|
// height: 100%;
|
|
4
|
-
`,
|
|
4
|
+
`,f=v.default.div`
|
|
5
5
|
padding: 16px 14px;
|
|
6
6
|
max-width: 450px;
|
|
7
7
|
|
|
@@ -9,9 +9,10 @@
|
|
|
9
9
|
overflow-y: auto;
|
|
10
10
|
padding-bottom: 24px;
|
|
11
11
|
border-left: ${s.COLORS.stroke.primary} 1px solid;
|
|
12
|
-
|
|
12
|
+
border-top: ${e=>e.isWhatsappCarousel?`${s.COLORS.stroke.primary} 1px solid`:void 0};
|
|
13
|
+
`,x=v.default.div`
|
|
13
14
|
padding: ${e=>e.isWhatsappCarousel?void 0:e.showOnlyContent?"16px 14px":"16px 32px"};
|
|
14
15
|
flex: 1;
|
|
15
16
|
height: ${e=>e.isWhatsappCarousel?"500px":"475px"};
|
|
16
17
|
overflow-y: auto;
|
|
17
|
-
`;exports.default=a=>{const{showVariableMapping:m,showOnlyContent:
|
|
18
|
+
`;exports.default=a=>{const{showVariableMapping:m,showOnlyContent:v,whatsappSpecificPickerMeta:g,showVariableModal:w,variableList:b,discountCode:P,setDiscountCode:j,variableListForImage:E,showSampleValues:L}=a,T=t.useRef(),A=t.useRef(),{device:y,display_content:S,channel:M,template:N,setTemplate:_,isWhatsappCarousel:V,isProductCarouselType:W}=r.useTemplateModalContext();const q=e=>{let t=0;for(;e;)t+=e.offsetTop,e=e.offsetParent;return t};return e.jsxs(C,{children:[e.jsx(x,Object.assign({showOnlyContent:v,showVariableMapping:m,isWhatsappCarousel:V},{children:"mobile"===y?e.jsx(c.default,{ref:A,display_content:null!=S?S:"",channel:M,template:N,showSampleValues:L}):M===i.CHANNEL_TYPE.WHATSAPP&&V?e.jsx(l.CarouselPreview,{ref:T,channel:M,template:N,showSampleValues:L,isPreview:!1}):M!==i.CHANNEL_TYPE.MESSAGE?e.jsx(d.default,{ref:T,channel:M,display_content:null!=S?S:"",showSampleValues:L}):e.jsx(e.Fragment,{})})),(W||m)&&e.jsx(f,Object.assign({channel:M,isWhatsappCarousel:V},{children:M!==i.CHANNEL_TYPE.WHATSAPP?e.jsx(h.default,{onFocus:M===i.CHANNEL_TYPE.EMAIL?function(e){var t,a,l;const o=null===document||void 0===document?void 0:document.getElementById("mobile"===y?"template_html_mobile":"template_html_desktop"),r=n.getVariableNameForEmailByIndex(e+1),d=M===i.CHANNEL_TYPE.EMAIL?null===(t=null==o?void 0:o.contentWindow)||void 0===t?void 0:t.document.getElementById(r):document.getElementById(r),p=q(d),c=null==d?void 0:d.offsetLeft;"desktop"===y?p&&T.current&&(null===(a=null==o?void 0:o.contentWindow)||void 0===a||a.scrollTo(null!=c?c:0,p),u.highlightFor(r,s.COLORS.background.warning.light,2,M,y)):p&&A.current&&(null===(l=null==o?void 0:o.contentWindow)||void 0===l||l.scrollTo(null!=c?c:0,p),u.highlightFor(r,s.COLORS.background.warning.light,2,M,y))}:void 0,showVariableModal:w,variableList:b,discountCode:P,setDiscountCode:j}):M===i.CHANNEL_TYPE.WHATSAPP&&V?e.jsx(o.default,{whatsappSpecificPickerMeta:g,template:N,showVariableModal:w,variableList:b,variableListForImage:E,discountCode:P,setDiscountCode:j}):e.jsx(p.default,{whatsappSpecificPickerMeta:g,template:N,onTemplateChange:e=>{null==_||_(e)},showVariableModal:w,variableList:b,variableListForImage:E,discountCode:P,setDiscountCode:j})}))]})};
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("styled-components"),t=require("../../../constants/Theme.js");function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("styled-components"),t=require("../../../constants/Theme.js");function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var o=r(e);const i=o.default.div`
|
|
2
2
|
display: flex;
|
|
3
3
|
align-items: center;
|
|
4
4
|
gap: 12px;
|
|
5
5
|
/* justify-content: center; */
|
|
6
6
|
flex: 1;
|
|
7
|
-
`,n=
|
|
7
|
+
`,n=o.default.div`
|
|
8
8
|
width: 56px;
|
|
9
9
|
height: 56px;
|
|
10
10
|
display: flex;
|
|
@@ -16,7 +16,7 @@
|
|
|
16
16
|
border: 1px solid ${t.COLORS.stroke.primary};
|
|
17
17
|
box-sizing: content-box;
|
|
18
18
|
cursor: ${e=>e.error?"pointer":"default"};
|
|
19
|
-
`,d=
|
|
19
|
+
`,d=o.default.div`
|
|
20
20
|
padding: 8px;
|
|
21
21
|
flex-direction: row;
|
|
22
22
|
display: flex;
|
|
@@ -25,7 +25,8 @@
|
|
|
25
25
|
border: 1px solid ${t.COLORS.stroke.primary};
|
|
26
26
|
border-radius: 4px;
|
|
27
27
|
margin-left: 8px;
|
|
28
|
-
`,a=
|
|
28
|
+
`,a=o.default.div`
|
|
29
29
|
padding-bottom: 0px;
|
|
30
30
|
min-width: 285px;
|
|
31
|
-
|
|
31
|
+
margin-bottom: 16px;
|
|
32
|
+
`;exports.Container=d,exports.EditTemplateMediaContainer=a,exports.ImageContainer=n,exports.RightComponent=i;
|
package/dist/cjs/components/template-context-mapper/modalElements/EditWhatsAppCarouselTemplateV2.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../../assets/icons/
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../../assets/icons/arrow_back.svg.js"),r=require("../../../assets/icons/PlusIcon.js"),a=require("lodash"),l=require("react"),i=require("../../add-variableV2/AddVariableV2SideModal.js");require("../../../_virtual/_tslib.js"),require("../../add-variableV2/AddVariableV2.styled.js");var s=require("../../button/Button.js"),o=require("../../icon-button/IconButton.js");require("../../input/Input.js"),require("../../tooltips/Tooltip.js");var n=require("../../../constants/Theme.js");require("../../modals/modal.styled.js"),require("../../switch/Switch.js");var d=require("../../TypographyStyle.js"),c=require("../../product-picker-v2/modal.js"),u=require("../Badge/index.js"),p=require("../context/templateModalContext.js"),m=require("./EditWhatsAppTemplateV2.js"),h=require("./ProductBox.js");require("../../template-preview/TemplatePreview.js"),require("../../template-preview/WhatsApp/WhatsAppLikePreview.js"),require("../../template-preview/WhatsApp/WhatsAppLikePreviewV2.js"),require("../../curtain/CurtainHelper.js"),require("../../template-preview/models/TemplateMeta.js");var g=require("../../template-preview/models/WhatsAppTemplate.js");exports.default=v=>{let{template:j,whatsappSpecificPickerMeta:x,showVariableModal:y,variableList:b,variableListForImage:f,discountCode:C,setDiscountCode:O}=v;var q,I;const{selectedCarouselIndex:S,setTemplate:w,pickerConf:P,isProductCarouselType:T,pod:k,cardCount:B,carouselProducts:L,setCarouselProducts:V,isError:A,cardImages:E,disableEditVariable:M,onDeleteSelectedProducts:R,setSelectedCarouselIndex:D}=p.useTemplateModalContext(),[F,W]=l.useState(-1==S?"First Message (Step 1/2)":T?"Product Carousel (Step 2/2)":"Carousel Cards (Step 2/2)"),[_,N]=l.useState(!1),[$,z]=l.useState(!1),[G,H]=l.useState(!1);l.useEffect((()=>{W(-1==S?"First Message (Step 1/2)":T?"Product Carousel (Step 2/2)":"Carousel Cards (Step 2/2)")}),[S]);return e.jsxs("div",{children:[e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"row",alignItems:"center",marginBottom:24}},{children:[null!=S&&S>=0&&e.jsx(o.IconButton,{Icon:t.default,onClick:()=>{null==D||D(-1)}}),e.jsx(d.TitleMedium,Object.assign({style:{marginLeft:10}},{children:F}))]})),T&&(null!==(q=null==L?void 0:L.length)&&void 0!==q?q:0)>0&&null!=S&&S>=0&&e.jsxs("div",Object.assign({style:{display:"flex",rowGap:16,marginBottom:16,marginLeft:10,marginRight:10,flexDirection:"column"}},{children:[e.jsx(h.ProductBox,{editItem:()=>{1===(null==L?void 0:L.length)&&"variable"===L[0].name?H(!0):N(!_)},cardBody:1===(null==L?void 0:L.length)&&"variable"===L[0].name?`${L[0].productName}`:`${null==L?void 0:L.length} Products Selected`,hideIcon:1===(null==L?void 0:L.length)&&"variable"===L[0].name,deleteItem:()=>{var e;if(1===(null==L?void 0:L.length)&&"variable"===L[0].name)return void(null==V||V([]));const t=a.cloneDeep(Object.assign({},j));t&&(E&&E.length>0?null==E||E.forEach(((e,r)=>{var a;t.components[1].cards[r].components[0].example.header_handle=[null!==(a=E[r])&&void 0!==a?a:"https://res.cloudinary.com/drqhot9ot/image/upload/v1708753454/fake-product.png"]})):null===(e=null==t?void 0:t.components[1].cards)||void 0===e||e.forEach(((e,r)=>{t.components[1].cards[r].components[0].example.header_handle=["https://res.cloudinary.com/drqhot9ot/image/upload/v1708753454/fake-product.png"]})),null==w||w(t)),null==V||V([]),null==R||R()}}),L&&(null==L?void 0:L.length)>0&&"variable"!=L[0].name&&e.jsx(s.Button,{disabled:(null!==(I=null==L?void 0:L.length)&&void 0!==I?I:0)<=1,style:{alignSelf:"flex-end"},onClick:()=>{z(!0),N(!0)},buttonText:"Rearrange Products",buttonType:"tertiary"})]})),!M&&T&&0===(null==L?void 0:L.length)&&null!=S&&S>=0&&e.jsxs(e.Fragment,{children:[e.jsxs("div",Object.assign({style:{marginLeft:12}},{children:[e.jsx(d.TitleRegular,{children:"Product(s)"}),e.jsx(d.BodySecondary,{children:`Select ${null!=B?B:1} products`})]})),e.jsxs("div",Object.assign({style:{marginTop:16,marginBottom:16,marginLeft:A?16:12,marginRight:A?16:12,flexDirection:"column",display:"flex",alignItems:"center"}},{children:[e.jsx(s.Button,{matchParentWidth:!0,style:{flex:1,display:"flex",width:"100%",marginBottom:12,border:A?`2px dashed ${n.COLORS.content.negative}`:void 0},size:"medium",buttonText:"Add Product(s)",buttonType:A?"tertiaryGray":"dashBold",LeadingIcon:()=>e.jsx("div",Object.assign({style:{display:"flex",width:18,height:18}},{children:e.jsx(r.default,{width:18,height:18,color:n.COLORS.content.secondary})})),onClick:e=>{N(!0)}}),k===g.POD.CHATBOT&&e.jsxs(e.Fragment,{children:[e.jsxs("div",Object.assign({style:{display:"flex",flex:1,alignItems:"center",justifyContent:"space-between",flexDirection:"row",width:"100%"}},{children:[e.jsx("div",{style:{width:"100%",height:1,backgroundColor:"#E0E0E0",marginRight:8}}),e.jsx(d.BodyCaption,Object.assign({style:{color:"#616161",overflow:"unset"}},{children:"OR"})),e.jsx("div",{style:{width:"100%",height:1,backgroundColor:"#E0E0E0",marginLeft:8}})]})),e.jsx(s.Button,{matchParentWidth:!0,style:{flex:1,display:"flex",marginTop:12,width:"100%",border:A?`2px dashed ${n.COLORS.content.negative}`:void 0},size:"medium",buttonText:"Add Product(s) Variable",buttonType:A?"tertiaryGray":"dashBold",LeadingIcon:()=>e.jsx("div",Object.assign({style:{display:"flex"}},{children:e.jsx(r.default,{width:18,height:18,color:n.COLORS.content.secondary})})),onClick:e=>{H(!0)}})]})]})),A&&e.jsx("div",Object.assign({style:{marginLeft:10,marginBottom:16}},{children:e.jsx(u.Badge,{padding:"8px",errorText:"Please add products"})}))]}),e.jsx(m.default,{whatsappSpecificPickerMeta:x,template:j,onTemplateChange:e=>{null==w||w(e)},showVariableModal:y,variableList:b,variableListForImage:f,discountCode:C,setDiscountCode:O}),_&&P&&e.jsx(c.ProductPickerModal,{zIndex:200,startupScreen:$?c.ScreenName.RearrangeProducts:c.ScreenName.Collections,rearrangeEnabled:!0,storeId:P.storeId,selectedItems:(e=>{if(e.length>0){const t={};for(const r of e){const e=null==r?void 0:r.collectionId,a=r.productId,l=r.variantId;e in t||(t[e]={products:{},name:"",image:"",isSmartCollection:!1}),a in t[e].products||(t[e].products[a]={variants:{},name:(null==r?void 0:r.productName)||"",image:(null==r?void 0:r.productImage)||""}),t[e].products[a].variants[l]={name:(null==r?void 0:r.name)||"",price:"",image:(null==r?void 0:r.image)||"",quantity:r.quantity||0,displayOrder:r.displayOrder}}return t}return{}})(null!=L?L:[]),collectionFetcher:P.fetchCollections,productFetcher:P.fetchProducts,onAdd:(e,t)=>{var r;z(!1);const l=[];delete e.isCustom;for(const t of Object.keys(e)){const a=e[t].products;if(void 0!==a&&Object.keys(a).length)for(const e of Object.keys(a)){const i=a[e].variants;if(void 0!==i&&Object.keys(i).length)for(const s of Object.keys(i)){const{name:o,image:n,quantity:d,displayOrder:c}=i[s],u={name:o,image:null!==(r=null!=n?n:a[e].image)&&void 0!==r?r:"",quantity:d,variantId:s,productId:e,displayOrder:c,collectionId:t,productName:a[e].name,productImage:a[e].image};l.push(u)}}}const i=l.sort(((e,t)=>e.displayOrder-t.displayOrder)),s=l.map((e=>e.image)),o=a.cloneDeep(Object.assign({},j));o&&(s.forEach(((e,t)=>{var r;o.components[1].cards[t].components[0].example.header_handle=e?[e]:[null!==(r=null==E?void 0:E[t])&&void 0!==r?r:""]})),null==w||w(o)),null==V||V(i),N(!1)},searchInCollectionFetcher:P.searchInCollection,searchFetcher:P.searchProducts,visible:_,onClose:()=>{N(!1)},exactLimit:null!=B?B:1}),G&&e.jsx(i.AddVariableV2SideModal,{zIndex:2e3,data:null!=b?b:[],showVariable:G,setShowVariable:H,placeholder:"Add a variable",customTrigger:e=>{null==V||V([{name:"variable",productName:e.actualValue}])}})]})};
|
package/dist/cjs/components/template-context-mapper/modalElements/EditWhatsAppTemplateMediaV2.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../../_virtual/_tslib.js"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../../_virtual/_tslib.js"),i=require("react/jsx-runtime"),t=require("lodash"),n=require("react"),o=require("../../helpers/FileUploaderHelper.js"),a=require("../../image-cropper/BikImageCropper.js");require("../../image-compress/ImageCompress.js"),require("../../states/StateComponent.js"),require("../../../constants/zindex.js"),require("../../modals/styledModal.js"),require("../../spinner/Spinner.js");var l=require("../../template-preview/models/TemplateMeta.js"),r=require("../context/templateModalContext.js"),s=require("./EditMediaModal.js"),d=require("./EditMediaV2.js");function c(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var u=c(n);const p=e=>/^{{.*}}$/.test(e);exports.default=c=>{let{mediaComponent:m,template:v,updateTemplateImageUrl:f,whatsappSpecificPickerMeta:E,variableListForImage:g}=c;var h,j,b,_,M,x,y,A;const{disableEditVariable:C,selectedCarouselIndex:S}=r.useTemplateModalContext(),[T,I]=n.useState(void 0),[q,D]=n.useState(),[R,O]=n.useState(),[w,H]=n.useState(!1),k=u.default.createRef(),[P,F]=n.useState(!1),[U,Y]=n.useState(""),{template:L,setTemplate:N}=r.useTemplateModalContext(),{uploadMediaFiles:V,uploadMediaLink:G}=E;let z;function B(){var e;(null===(e=null==k?void 0:k.current)||void 0===e?void 0:e.click)&&k.current.click()}function W(i){var t;return e.__awaiter(this,void 0,void 0,(function*(){const e=new o.FileUploaderHelper;if(i instanceof Blob){const n=e.validate({file:i});if(n)Y(n),F(!1);else{const e=m.format===l.HEADER_TYPES.IMAGE,n=yield V({file:i,fileName:T,isImage:e});if(n.success){const[e]=i.type.split("/");f(null!==(t=n.url)&&void 0!==t?t:"","application"===e?l.HEADER_TYPES.DOCUMENT:l.HEADER_TYPES[e.toUpperCase()])}else Y("An unknown technical error occurred");F(!1)}}else Y("An unknown technical error occurred"),F(!1)}))}return z=m.format===l.HEADER_TYPES.IMAGE?"image/png, image/jpeg":m.format===l.HEADER_TYPES.VIDEO?"video/mp4":"application/pdf",n.useEffect((()=>{I(void 0),D(void 0),O(void 0),H(!1),F(!1),Y("")}),[S]),i.jsxs(i.Fragment,{children:[i.jsx(s.default,{mediaComponentFormat:null!==(h=m.format)&&void 0!==h?h:l.HEADER_TYPES.IMAGE,uploadMedia:function(i){var n,a,r,s,d,c;return e.__awaiter(this,void 0,void 0,(function*(){if(Y(""),O(""),H(!1),i)if(i.startsWith("https"))try{if(F(!0),G){const e=yield G(i),{type:t,size:a,success:r}=e;if(r){const i=(new o.FileUploaderHelper).validate({linkData:{type:t,size:a}});if(i)return Y(i),void F(!1);const[r]=t.split("/");f(null!==(n=e.url)&&void 0!==n?n:"",l.HEADER_TYPES[r.toUpperCase()])}else Y("An unknown technical error occurred");F(!1)}else{const e=yield fetch(i),t=yield e.blob();yield W(t)}}catch(e){Y("An unknown technical error occurred")}else if(p(i)){let e;if(O(i),e=null!=S&&S>-1?{components:null===(r=null===(a=L.components[1])||void 0===a?void 0:a.cards)||void 0===r?void 0:r[S].components,mapping:null===(d=null===(s=null==L?void 0:L.mapping)||void 0===s?void 0:s.cards)||void 0===d?void 0:d[S]}:Object.assign({},L),e.components){const t=null===(c=null==e?void 0:e.components)||void 0===c?void 0:c.findIndex((e=>{if("HEADER"===e.type&&"NONE"!==e.format&&"TEXT"!==e.format)return!0}));if(void 0!==t&&t>-1&&(null==e?void 0:e.components[t])){const n=Object.assign(Object.assign({},e.components[t]),{format:m.format,example:{header_handle:[i]}}),o=[...e.components];o[t]=n,e.components=o}}if(e.mapping&&(e.mapping=Object.assign(Object.assign({},e.mapping),{header:[i]})),F(!1),null!=S&&S>-1){const i=t.cloneDeep(L);i.components[1].cards[S].components=e.components,i.mapping.cards[S]=e.mapping,null==N||N(Object.assign({},i))}else null==N||N(Object.assign({},e))}else F(!1),Y("Invalid URL or variable");else B()}))},variableListForImage:g||[],setOpenEditMedia:H,openEditMedia:w}),!!q&&i.jsx(a.BikImageCropper,{aspectRatio:15/8,src:q,onCropComplete:function(i){return e.__awaiter(this,void 0,void 0,(function*(){F(!1),Y("");const e=yield fetch(i);W(yield e.blob()).then((()=>{D(void 0)}))}))},onCancel:()=>{F(!1),D(""),k.current&&(k.current.value="")}}),i.jsx("input",{ref:k,style:{display:"none"},type:"file",onChange:function(e){var i;Y(""),F(!0);const t=null===(i=e.target.files)||void 0===i?void 0:i[0];if(m.format===l.HEADER_TYPES.IMAGE){const e=new FileReader;D(""),I(""),e.onload=()=>{D(e.result),I(null==t?void 0:t.name)},t&&e.readAsDataURL(t)}else W(t)},accept:z}),i.jsx(d.default,{imageName:null!==(b=null===(j=null==m?void 0:m.example)||void 0===j?void 0:j.header_handle)&&void 0!==b?b:[],handleImageChange:B,mediaType:null==m?void 0:m.format,error:U,isLoading:P,setOpenEditMedia:H,selectedVariable:p(null!==(x=null===(M=null===(_=null==m?void 0:m.example)||void 0===_?void 0:_.header_handle)||void 0===M?void 0:M[0])&&void 0!==x?x:"")?null===(A=null===(y=null==m?void 0:m.example)||void 0===y?void 0:y.header_handle)||void 0===A?void 0:A[0]:R,disableEditVariable:C})]})};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),n=require("lodash"),t=require("react"),o=require("../../template-preview/models/WhatsAppTemplate.js"),i=require("../context/templateModalContext.js"),l=require("../custom-hooks/useAdditionalVariables.js"),s=require("../utils/getDataFromTemplateComponent.js"),a=require("./BackTrackComponent.js"),d=require("./DiscountCodeComponent.js"),r=require("./EditMediaV2.style.js"),u=require("./EditWhatsAppTemplateMediaV2.js"),c=require("./VariableConnector.js"),p=require("./VariableConnectorsPanel.js"),v=require("./VariableConnectorWhatsApp.js"),m=require("./VariableEditorHeader.js"),b=require("./WhatsAppTemplateCardButtonV2.js");exports.default=g=>{let{template:j,onTemplateChange:f,whatsappSpecificPickerMeta:C,showVariableModal:O,variableList:h,variableListForImage:T,discountCode:x,setDiscountCode:y}=g;var V,B,E,k,L,U,q,D,I,w,R,A,P,M,S,N,_,H,Q,Y,F;const K=j.isCarouselType,{originalVariableList:W,pod:$,extras:X,selectedCarouselIndex:z,isProductCarouselType:G}=i.useTemplateModalContext(),{descriptionComponents:J,urlBtns:Z,qrbBtns:ee,imageComponent:ne,bodyVariables:te,headerVariables:oe}=s.getAllDataFromTemplateComponent(j),[ie,le]=t.useState(!1),[se,ae]=t.useState(-1===z?{descriptionComponents:J,urlBtns:Z,qrbBtns:ee,imageComponent:ne,bodyVariables:te,headerVariables:oe}:{}),[de,re]=t.useState(!1);function ue(e,t,o){var i,l,s,a,d,r,u,c,p,v;const m=null!=z&&z>-1?{components:null===(i=Object.assign({},j).components[1].cards)||void 0===i?void 0:i[z].components,mapping:null===(l=Object.assign({},j).mapping.cards)||void 0===l?void 0:l[z]}:Object.assign({},j),b=n.cloneDeep(m),g="custom"===t&&"string"==typeof e,C=g?e:"string"!=typeof e?e.defaultValue:"";if(null!=z&&z>-1&&G){const t=Object.assign({},j).components.map((e=>{var n;return"CAROUSEL"===e.type?Object.assign(Object.assign({},e),{cards:null===(n=e.cards)||void 0===n?void 0:n.map((e=>Object.assign(Object.assign({},e),{components:e.components.map((e=>{var n,t,i;if("BUTTONS"===e.type){const l=null===(n=e.buttons)||void 0===n?void 0:n.filter((e=>"URL"===e.type));let s=null!==(t=null==l?void 0:l[o])&&void 0!==t?t:{};s=Object.assign(Object.assign({},s),{url:"https://d.bik.ai/{{1}}",example:[C]});const a=null===(i=e.buttons)||void 0===i?void 0:i.map((e=>"URL"===e.type&&(null==e?void 0:e.text)===(null==s?void 0:s.text)?s:e));return Object.assign(Object.assign({},e),{buttons:a})}return e}))})))}):e})),i=null===(a=null===(s=Object.assign({},j).mapping)||void 0===s?void 0:s.cards)||void 0===a?void 0:a.map((n=>{var t;return Object.assign(Object.assign({},n),{buttons:null===(t=null==n?void 0:n.buttons)||void 0===t?void 0:t.map((n=>g?"((customBtnPlaceholder))":"string"!=typeof e?e.placeHolder:""))})})),l=n.cloneDeep(j);return l.components=t,l.mapping.cards=i,void(null==f||f(Object.assign({},l)))}const O=null==b?void 0:b.components.findIndex((e=>"BUTTONS"===e.type));if(void 0!==O&&O>-1){const n=null===(d=null==b?void 0:b.components[O].buttons)||void 0===d?void 0:d.filter((e=>"URL"===e.type));if((null==n?void 0:n.length)>0){const i="custom"===t&&"string"==typeof e,l=i?e:"string"!=typeof e?e.defaultValue:"";let s=n[o];s=Object.assign(Object.assign({},s),{url:"https://d.bik.ai/{{1}}",example:[l]});const a=[...null!==(c=null===(u=null===(r=b.components)||void 0===r?void 0:r[O])||void 0===u?void 0:u.buttons)&&void 0!==c?c:[]].map((e=>"URL"===e.type&&(null==e?void 0:e.text)===(null==s?void 0:s.text)?s:e)),d=Object.assign(Object.assign({},b.components[O]),{buttons:a}),v=null===(p=b.mapping)||void 0===p?void 0:p.buttons;v&&v.length>0&&(v[o]=i?"((customBtnPlaceholder))":"string"!=typeof e?e.placeHolder:"");const m=Object.assign(Object.assign({},b.mapping),{buttons:v});b.mapping=m;const g=[...b.components];g[O]=d,b.components=g}}if("string"!=typeof e){"checkout.checkoutUrl"===(null===(v=e.placeHolder)||void 0===v?void 0:v.slice(2,-2))?le(!0):(le(!1),null==y||y(""))}if(null!=z&&z>-1){const e=n.cloneDeep(j);e.components[1].cards[z].components=b.components,e.mapping.cards[z]=b.mapping,null==f||f(Object.assign({},e))}else null==f||f(b)}function ce(e,t,o){var i,l,s,a,d,r;const u=null!=z&&z>-1?{components:null===(i=Object.assign({},j).components[1].cards)||void 0===i?void 0:i[z].components,mapping:null===(l=Object.assign({},j).mapping.cards)||void 0===l?void 0:l[z]}:Object.assign({},j);if(null!=z&&z>-1&&G){const t=Object.assign({},j).components.map((n=>{var t;return"CAROUSEL"===n.type?Object.assign(Object.assign({},n),{cards:null===(t=n.cards)||void 0===t?void 0:t.map((n=>Object.assign(Object.assign({},n),{components:n.components.map((n=>{var t,i,l;if("BUTTONS"===n.type){const s=null===(t=n.buttons)||void 0===t?void 0:t.filter((e=>"QUICK_REPLY"===e.type));let a=null!==(i=null==s?void 0:s[o])&&void 0!==i?i:{};a=Object.assign(Object.assign({},a),{flowId:e.flowId,flowName:e.flowName});const d=null===(l=n.buttons)||void 0===l?void 0:l.map((e=>"QUICK_REPLY"===e.type&&(null==e?void 0:e.text)===(null==a?void 0:a.text)?a:e));return Object.assign(Object.assign({},n),{buttons:d})}return n}))})))}):n})),i=n.cloneDeep(j);return i.components=t,void(null==f||f(Object.assign({},i)))}const c=null==u?void 0:u.components.findIndex((e=>"BUTTONS"===e.type));if(void 0!==c&&c>-1){const n=null===(s=null==u?void 0:u.components[c].buttons)||void 0===s?void 0:s.filter((e=>"QUICK_REPLY"===e.type));if(n){let t=n[o];t=Object.assign(Object.assign({},t),{flowId:e.flowId,flowName:e.flowName});const i=[...null!==(r=null===(d=null===(a=u.components)||void 0===a?void 0:a[c])||void 0===d?void 0:d.buttons)&&void 0!==r?r:[]].map((e=>"QUICK_REPLY"===e.type&&(null==e?void 0:e.text)===(null==t?void 0:t.text)?t:e)),l=Object.assign(Object.assign({},u.components[c]),{buttons:i}),s=[...u.components];s[c]=l,u.components=s}}if(null!=z&&z>-1){const e=n.cloneDeep(j);e.components[1].cards[z].components=u.components,null==f||f(Object.assign({},e))}else null==f||f(u)}t.useEffect((()=>{var e,n;if(null===(e=j.mapping.buttons)||void 0===e?void 0:e.find((e=>"checkout.checkoutUrl"===e.slice(2,-2))))le(!0);else{le(!1);const e=null===(n=null==X?void 0:X.discountCodeExtra)||void 0===n?void 0:n[1];null==e||e("")}}),[j]),t.useEffect((()=>{var e,n,t,o;if(null!=z&&z>-1){const i={components:null===(n=null===(e=j.components[1])||void 0===e?void 0:e.cards)||void 0===n?void 0:n[z].components,mapping:null===(o=null===(t=null==j?void 0:j.mapping)||void 0===t?void 0:t.cards)||void 0===o?void 0:o[z]},{descriptionComponents:l,urlBtns:a,qrbBtns:d,imageComponent:r,bodyVariables:u,headerVariables:c}=s.getAllDataFromTemplateComponent(i);ae({descriptionComponents:l,urlBtns:a,qrbBtns:d,imageComponent:r,bodyVariables:u,headerVariables:c})}else if(null!=z&&-1===z){const{descriptionComponents:e,urlBtns:n,qrbBtns:t,imageComponent:o,bodyVariables:i,headerVariables:l}=s.getAllDataFromTemplateComponent(j);ae({descriptionComponents:e,urlBtns:n,qrbBtns:t,imageComponent:o,bodyVariables:i,headerVariables:l})}}),[z]),t.useEffect((()=>{var e,n,t,o;if(null!=z&&z>-1&&de){const i={components:null===(n=null===(e=j.components[1])||void 0===e?void 0:e.cards)||void 0===n?void 0:n[z].components,mapping:null===(o=null===(t=null==j?void 0:j.mapping)||void 0===t?void 0:t.cards)||void 0===o?void 0:o[z]},{descriptionComponents:l,urlBtns:a,qrbBtns:d,imageComponent:r,bodyVariables:u,headerVariables:c}=s.getAllDataFromTemplateComponent(i);ae({descriptionComponents:l,urlBtns:a,qrbBtns:d,imageComponent:r,bodyVariables:u,headerVariables:c}),re(!1)}}),[de]);const pe=l.useAdditionalVariables({variableList:h,categoryDisplayName:"Custom Variables",variableDisplayName:"Custom Text",variableValue:"{{custom.text}}"});return e.jsxs(p.Container,Object.assign({style:{flexDirection:"column",width:400,maxHeight:460}},{children:[!!se.imageComponent&&!G&&e.jsx(r.EditTemplateMediaContainer,{children:e.jsx(u.default,{whatsappSpecificPickerMeta:C,mediaComponent:K?se.imageComponent:ne,updateTemplateImageUrl:function(e,t){var o,i,l,s,a;let d;d=null!=z&&z>-1?{components:null===(i=null===(o=j.components[1])||void 0===o?void 0:o.cards)||void 0===i?void 0:i[z].components,mapping:null===(s=null===(l=null==j?void 0:j.mapping)||void 0===l?void 0:l.cards)||void 0===s?void 0:s[z]}:Object.assign({},j);const r=null===(a=null==d?void 0:d.components)||void 0===a?void 0:a.findIndex((e=>{if("HEADER"===e.type&&"NONE"!==e.format&&"TEXT"!==e.format)return!0}));if(void 0!==r&&r>-1&&(null==d?void 0:d.components[r])){const n=Object.assign(Object.assign({},d.components[r]),{format:t,example:{header_handle:[e]}}),o=[...d.components];o[r]=n,d=Object.assign(Object.assign({},d),{components:o})}if(d.mapping&&(d.mapping=Object.assign(Object.assign({},d.mapping),{header:void 0})),null!=z&&z>-1){const e=n.cloneDeep(j);e.components[1].cards[z].components=d.components,e.mapping.cards[z]=d.mapping,null==f||f(Object.assign({},e)),re(!0)}else null==f||f(Object.assign({},d))},template:j,variableListForImage:T})}),(se.bodyVariables.length>0||se.headerVariables.length>0)&&e.jsx(m.default,{containerStyle:{paddingTop:se.mediaComponent?24:8},headerText:"Edit variable values",subText:"Edit values for the variables used in template",toolTipInfo:"Variables are placeholder texts which can either be filled through data or custom texts. These can be edited through the dropdowns below"}),null===(V=se.descriptionComponents)||void 0===V?void 0:V.map(((n,t)=>e.jsx(v.default,{originalVariableList:null!=z&&z>-1?W.cards[z]:W,type:n.type,descriptionComponent:n.component,showVariableModal:O,variableList:h},t))),(null===(E=null===(B=null!=z&&z>-1?W.cards[z].buttons:null==W?void 0:W.buttons)||void 0===B?void 0:B.filter((e=>"URL"===e.type)))||void 0===E?void 0:E.length)>0&&e.jsx(m.default,{headerText:"Edit buttons",subText:"Edit the link connected to the CTA button"}),null===(L=null===(k=null!=z&&z>-1?W.cards[z].buttons:null==W?void 0:W.buttons)||void 0===k?void 0:k.filter((e=>$===o.POD.CHATBOT||"URL"===e.type)))||void 0===L?void 0:L.map(((n,t)=>{if("URL"===n.type)return e.jsx(b.default,{variableListIndex:t,CTAoptions:null==C?void 0:C.CTAoptions,button:n,currentVariableList:null!=z&&z>-1?Object.assign({},W.cards[z]):Object.assign({},W),updateSelectedURLTemplateBtn:ue,variableList:h},`${t}_${z}`)})),$===o.POD.CHATBOT&&(null===(q=null===(U=ee[0])||void 0===U?void 0:U.component)||void 0===q?void 0:q.buttons)&&(null===(w=null===(I=null===(D=ee[0])||void 0===D?void 0:D.component)||void 0===I?void 0:I.buttons)||void 0===w?void 0:w.length)>0&&e.jsx(a.BackTrackComponent,{backTrackMessage:null===(R=null==X?void 0:X.backTrackExtra)||void 0===R?void 0:R[0],setBackTrackMessage:null===(A=null==X?void 0:X.backTrackExtra)||void 0===A?void 0:A[1]}),(null===(M=null===(P=null!=z&&z>-1?W.cards[z].buttons:null==W?void 0:W.buttons)||void 0===P?void 0:P.filter((e=>"QUICK_REPLY"===e.type)))||void 0===M?void 0:M.length)>0&&($!==o.POD.CHATBOT?e.jsx(m.default,{headerText:"Edit buttons",subText:"Edit the chatflows triggered on clicking the buttons",toolTipInfo:"There is an option to trigger chatflows through the buttons which can keep the user engaged"}):e.jsx(a.BackTrackComponent,{backTrackMessage:null===(S=null==X?void 0:X.backTrackExtra)||void 0===S?void 0:S[0],setBackTrackMessage:null===(N=null==X?void 0:X.backTrackExtra)||void 0===N?void 0:N[1]})),null===(H=null===(_=null!=z&&z>-1?W.cards[z].buttons:null==W?void 0:W.buttons)||void 0===_?void 0:_.filter((e=>"QUICK_REPLY"===e.type)))||void 0===H?void 0:H.map(((n,t)=>{if("QUICK_REPLY"===n.type)return e.jsx(b.default,{variableListIndex:t,QRBoptions:null==C?void 0:C.QRBoptions,button:n,currentVariableList:null!=z&&z>-1?Object.assign({},W.cards[z]):Object.assign({},W),updateSelectedQRBTemplateBtn:ce},`${t}_${z}`)})),$===o.POD.CHATBOT&&ie&&e.jsx(d.DiscountCodeComponent,{discountCode:null===(Q=null==X?void 0:X.discountCodeExtra)||void 0===Q?void 0:Q[0],setDiscountCode:null===(Y=null==X?void 0:X.discountCodeExtra)||void 0===Y?void 0:Y[1],variableList:h}),null===(F=null!=z&&z>-1?W.cards[z].buttons:null==W?void 0:W.buttons)||void 0===F?void 0:F.map(((n,t)=>{var o,i,l;if("COPY_CODE"===n.type)return e.jsx(c.default,{index:t,variable:{variableName:null!==(o=n.text)&&void 0!==o?o:"Copy Code",updatedValue:null!==(i=n.buttonVariable)&&void 0!==i?i:"",type:"string",isEditableVariable:!0,index:null!==(l=n.index)&&void 0!==l?l:0},showVariableModal:!0,variableList:pe,componentType:"BUTTONS"},t)}))]}))};
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),n=require("lodash"),t=require("react"),o=require("../../template-preview/models/WhatsAppTemplate.js"),i=require("../context/templateModalContext.js"),l=require("../utils/getDataFromTemplateComponent.js"),s=require("./BackTrackComponent.js"),a=require("./DiscountCodeComponent.js"),d=require("./EditMediaV2.style.js"),r=require("./EditWhatsAppTemplateMediaV2.js"),c=require("./VariableConnector.js"),u=require("./VariableConnectorsPanel.js"),p=require("./VariableConnectorWhatsApp.js"),v=require("./VariableEditorHeader.js"),m=require("./WhatsAppTemplateCardButtonV2.js");exports.default=b=>{let{template:g,onTemplateChange:j,whatsappSpecificPickerMeta:f,showVariableModal:O,variableList:C,variableListForImage:h,discountCode:T,setDiscountCode:x}=b;var y,B,V,E,k,L,U,q,D,I,w,R,P,A,M,S,_,N,H,Q,Y;const F=g.isCarouselType,{originalVariableList:K,pod:W,extras:$,selectedCarouselIndex:X,isProductCarouselType:z}=i.useTemplateModalContext(),{descriptionComponents:G,urlBtns:J,qrbBtns:Z,imageComponent:ee,bodyVariables:ne,headerVariables:te}=l.getAllDataFromTemplateComponent(g),[oe,ie]=t.useState(!1),[le,se]=t.useState(-1===X?{descriptionComponents:G,urlBtns:J,qrbBtns:Z,imageComponent:ee,bodyVariables:ne,headerVariables:te}:{}),[ae,de]=t.useState(!1);function re(e,t,o){var i,l,s,a,d,r,c,u,p,v;const m=null!=X&&X>-1?{components:null===(i=Object.assign({},g).components[1].cards)||void 0===i?void 0:i[X].components,mapping:null===(l=Object.assign({},g).mapping.cards)||void 0===l?void 0:l[X]}:Object.assign({},g),b=n.cloneDeep(m),f="custom"===t&&"string"==typeof e,O=f?e:"string"!=typeof e?e.defaultValue:"";if(null!=X&&X>-1&&z){const t=Object.assign({},g).components.map((e=>{var n;return"CAROUSEL"===e.type?Object.assign(Object.assign({},e),{cards:null===(n=e.cards)||void 0===n?void 0:n.map((e=>Object.assign(Object.assign({},e),{components:e.components.map((e=>{var n,t,i;if("BUTTONS"===e.type){const l=null===(n=e.buttons)||void 0===n?void 0:n.filter((e=>"URL"===e.type));let s=null!==(t=null==l?void 0:l[o])&&void 0!==t?t:{};s=Object.assign(Object.assign({},s),{url:"https://d.bik.ai/{{1}}",example:[O]});const a=null===(i=e.buttons)||void 0===i?void 0:i.map((e=>"URL"===e.type&&(null==e?void 0:e.text)===(null==s?void 0:s.text)?s:e));return Object.assign(Object.assign({},e),{buttons:a})}return e}))})))}):e})),i=null===(a=null===(s=Object.assign({},g).mapping)||void 0===s?void 0:s.cards)||void 0===a?void 0:a.map((n=>{var t;return Object.assign(Object.assign({},n),{buttons:null===(t=null==n?void 0:n.buttons)||void 0===t?void 0:t.map((n=>f?"((customBtnPlaceholder))":"string"!=typeof e?e.placeHolder:""))})})),l=n.cloneDeep(g);return l.components=t,l.mapping.cards=i,void(null==j||j(Object.assign({},l)))}const C=null==b?void 0:b.components.findIndex((e=>"BUTTONS"===e.type));if(void 0!==C&&C>-1){const n=null===(d=null==b?void 0:b.components[C].buttons)||void 0===d?void 0:d.filter((e=>"URL"===e.type));if((null==n?void 0:n.length)>0){const i="custom"===t&&"string"==typeof e,l=i?e:"string"!=typeof e?e.defaultValue:"";let s=n[o];s=Object.assign(Object.assign({},s),{url:"https://d.bik.ai/{{1}}",example:[l]});const a=[...null!==(u=null===(c=null===(r=b.components)||void 0===r?void 0:r[C])||void 0===c?void 0:c.buttons)&&void 0!==u?u:[]].map((e=>"URL"===e.type&&(null==e?void 0:e.text)===(null==s?void 0:s.text)?s:e)),d=Object.assign(Object.assign({},b.components[C]),{buttons:a}),v=null===(p=b.mapping)||void 0===p?void 0:p.buttons;v&&v.length>0&&(v[o]=i?"((customBtnPlaceholder))":"string"!=typeof e?e.placeHolder:"");const m=Object.assign(Object.assign({},b.mapping),{buttons:v});b.mapping=m;const g=[...b.components];g[C]=d,b.components=g}}if("string"!=typeof e){"checkout.checkoutUrl"===(null===(v=e.placeHolder)||void 0===v?void 0:v.slice(2,-2))?ie(!0):(ie(!1),null==x||x(""))}if(null!=X&&X>-1){const e=n.cloneDeep(g);e.components[1].cards[X].components=b.components,e.mapping.cards[X]=b.mapping,null==j||j(Object.assign({},e))}else null==j||j(b)}function ce(e,t,o){var i,l,s,a,d,r;const c=null!=X&&X>-1?{components:null===(i=Object.assign({},g).components[1].cards)||void 0===i?void 0:i[X].components,mapping:null===(l=Object.assign({},g).mapping.cards)||void 0===l?void 0:l[X]}:Object.assign({},g);if(null!=X&&X>-1&&z){const t=Object.assign({},g).components.map((n=>{var t;return"CAROUSEL"===n.type?Object.assign(Object.assign({},n),{cards:null===(t=n.cards)||void 0===t?void 0:t.map((n=>Object.assign(Object.assign({},n),{components:n.components.map((n=>{var t,i,l;if("BUTTONS"===n.type){const s=null===(t=n.buttons)||void 0===t?void 0:t.filter((e=>"QUICK_REPLY"===e.type));let a=null!==(i=null==s?void 0:s[o])&&void 0!==i?i:{};a=Object.assign(Object.assign({},a),{flowId:e.flowId,flowName:e.flowName});const d=null===(l=n.buttons)||void 0===l?void 0:l.map((e=>"QUICK_REPLY"===e.type&&(null==e?void 0:e.text)===(null==a?void 0:a.text)?a:e));return Object.assign(Object.assign({},n),{buttons:d})}return n}))})))}):n})),i=n.cloneDeep(g);return i.components=t,void(null==j||j(Object.assign({},i)))}const u=null==c?void 0:c.components.findIndex((e=>"BUTTONS"===e.type));if(void 0!==u&&u>-1){const n=null===(s=null==c?void 0:c.components[u].buttons)||void 0===s?void 0:s.filter((e=>"QUICK_REPLY"===e.type));if(n){let t=n[o];t=Object.assign(Object.assign({},t),{flowId:e.flowId,flowName:e.flowName});const i=[...null!==(r=null===(d=null===(a=c.components)||void 0===a?void 0:a[u])||void 0===d?void 0:d.buttons)&&void 0!==r?r:[]].map((e=>"QUICK_REPLY"===e.type&&(null==e?void 0:e.text)===(null==t?void 0:t.text)?t:e)),l=Object.assign(Object.assign({},c.components[u]),{buttons:i}),s=[...c.components];s[u]=l,c.components=s}}if(null!=X&&X>-1){const e=n.cloneDeep(g);e.components[1].cards[X].components=c.components,null==j||j(Object.assign({},e))}else null==j||j(c)}return t.useEffect((()=>{var e,n;if(null===(e=g.mapping.buttons)||void 0===e?void 0:e.find((e=>"checkout.checkoutUrl"===e.slice(2,-2))))ie(!0);else{ie(!1);const e=null===(n=null==$?void 0:$.discountCodeExtra)||void 0===n?void 0:n[1];null==e||e("")}}),[g]),t.useEffect((()=>{var e,n,t,o;if(null!=X&&X>-1){const i={components:null===(n=null===(e=g.components[1])||void 0===e?void 0:e.cards)||void 0===n?void 0:n[X].components,mapping:null===(o=null===(t=null==g?void 0:g.mapping)||void 0===t?void 0:t.cards)||void 0===o?void 0:o[X]},{descriptionComponents:s,urlBtns:a,qrbBtns:d,imageComponent:r,bodyVariables:c,headerVariables:u}=l.getAllDataFromTemplateComponent(i);se({descriptionComponents:s,urlBtns:a,qrbBtns:d,imageComponent:r,bodyVariables:c,headerVariables:u})}else if(null!=X&&-1===X){const{descriptionComponents:e,urlBtns:n,qrbBtns:t,imageComponent:o,bodyVariables:i,headerVariables:s}=l.getAllDataFromTemplateComponent(g);se({descriptionComponents:e,urlBtns:n,qrbBtns:t,imageComponent:o,bodyVariables:i,headerVariables:s})}}),[X]),t.useEffect((()=>{var e,n,t,o;if(null!=X&&X>-1&&ae){const i={components:null===(n=null===(e=g.components[1])||void 0===e?void 0:e.cards)||void 0===n?void 0:n[X].components,mapping:null===(o=null===(t=null==g?void 0:g.mapping)||void 0===t?void 0:t.cards)||void 0===o?void 0:o[X]},{descriptionComponents:s,urlBtns:a,qrbBtns:d,imageComponent:r,bodyVariables:c,headerVariables:u}=l.getAllDataFromTemplateComponent(i);se({descriptionComponents:s,urlBtns:a,qrbBtns:d,imageComponent:r,bodyVariables:c,headerVariables:u}),de(!1)}}),[ae]),e.jsxs(u.Container,Object.assign({style:{flexDirection:"column",width:400,maxHeight:460}},{children:[!!le.imageComponent&&!z&&e.jsx(d.EditTemplateMediaContainer,{children:e.jsx(r.default,{whatsappSpecificPickerMeta:f,mediaComponent:F?le.imageComponent:ee,updateTemplateImageUrl:function(e,t){var o,i,l,s,a;let d;d=null!=X&&X>-1?{components:null===(i=null===(o=g.components[1])||void 0===o?void 0:o.cards)||void 0===i?void 0:i[X].components,mapping:null===(s=null===(l=null==g?void 0:g.mapping)||void 0===l?void 0:l.cards)||void 0===s?void 0:s[X]}:Object.assign({},g);const r=null===(a=null==d?void 0:d.components)||void 0===a?void 0:a.findIndex((e=>{if("HEADER"===e.type&&"NONE"!==e.format&&"TEXT"!==e.format)return!0}));if(void 0!==r&&r>-1&&(null==d?void 0:d.components[r])){const n=Object.assign(Object.assign({},d.components[r]),{format:t,example:{header_handle:[e]}}),o=[...d.components];o[r]=n,d=Object.assign(Object.assign({},d),{components:o})}if(d.mapping&&(d.mapping=Object.assign(Object.assign({},d.mapping),{header:void 0})),null!=X&&X>-1){const e=n.cloneDeep(g);e.components[1].cards[X].components=d.components,e.mapping.cards[X]=d.mapping,null==j||j(Object.assign({},e)),de(!0)}else null==j||j(Object.assign({},d))},template:g,variableListForImage:h})}),le.bodyVariables.length>0&&e.jsx(v.default,{containerStyle:{paddingTop:le.mediaComponent?24:8},headerText:"Edit variable values",subText:"Edit values for the variables used in template",toolTipInfo:"Variables are placeholder texts which can either be filled through data or custom texts. These can be edited through the dropdowns below"}),null===(y=le.descriptionComponents)||void 0===y?void 0:y.map(((n,t)=>e.jsx(p.default,{originalVariableList:null!=X&&X>-1?K.cards[X]:K,type:n.type,descriptionComponent:n.component,showVariableModal:O,variableList:C},t))),(null===(V=null===(B=null!=X&&X>-1?K.cards[X].buttons:null==K?void 0:K.buttons)||void 0===B?void 0:B.filter((e=>"URL"===e.type)))||void 0===V?void 0:V.length)>0&&e.jsx(v.default,{headerText:"Edit buttons",subText:"Edit the link connected to the CTA button"}),null===(k=null===(E=null!=X&&X>-1?K.cards[X].buttons:null==K?void 0:K.buttons)||void 0===E?void 0:E.filter((e=>W===o.POD.CHATBOT||"URL"===e.type)))||void 0===k?void 0:k.map(((n,t)=>{if("URL"===n.type)return e.jsx(m.default,{variableListIndex:t,CTAoptions:null==f?void 0:f.CTAoptions,button:n,currentVariableList:null!=X&&X>-1?Object.assign({},K.cards[X]):Object.assign({},K),updateSelectedURLTemplateBtn:re,variableList:C},`${t}_${X}`)})),W===o.POD.CHATBOT&&(null===(U=null===(L=Z[0])||void 0===L?void 0:L.component)||void 0===U?void 0:U.buttons)&&(null===(I=null===(D=null===(q=Z[0])||void 0===q?void 0:q.component)||void 0===D?void 0:D.buttons)||void 0===I?void 0:I.length)>0&&e.jsx(s.BackTrackComponent,{backTrackMessage:null===(w=null==$?void 0:$.backTrackExtra)||void 0===w?void 0:w[0],setBackTrackMessage:null===(R=null==$?void 0:$.backTrackExtra)||void 0===R?void 0:R[1]}),(null===(A=null===(P=null!=X&&X>-1?K.cards[X].buttons:null==K?void 0:K.buttons)||void 0===P?void 0:P.filter((e=>"QUICK_REPLY"===e.type)))||void 0===A?void 0:A.length)>0&&(W!==o.POD.CHATBOT?e.jsx(v.default,{headerText:"Edit buttons",subText:"Edit the chatflows triggered on clicking the buttons",toolTipInfo:"There is an option to trigger chatflows through the buttons which can keep the user engaged"}):e.jsx(s.BackTrackComponent,{backTrackMessage:null===(M=null==$?void 0:$.backTrackExtra)||void 0===M?void 0:M[0],setBackTrackMessage:null===(S=null==$?void 0:$.backTrackExtra)||void 0===S?void 0:S[1]})),null===(N=null===(_=null!=X&&X>-1?K.cards[X].buttons:null==K?void 0:K.buttons)||void 0===_?void 0:_.filter((e=>"QUICK_REPLY"===e.type)))||void 0===N?void 0:N.map(((n,t)=>{if("QUICK_REPLY"===n.type&&W!==o.POD.CHATBOT)return e.jsx(m.default,{variableListIndex:t,QRBoptions:null==f?void 0:f.QRBoptions,button:n,currentVariableList:null!=X&&X>-1?Object.assign({},K.cards[X]):Object.assign({},K),updateSelectedQRBTemplateBtn:ce},`${t}_${X}`)})),W===o.POD.CHATBOT&&oe&&e.jsx(a.DiscountCodeComponent,{discountCode:null===(H=null==$?void 0:$.discountCodeExtra)||void 0===H?void 0:H[0],setDiscountCode:null===(Q=null==$?void 0:$.discountCodeExtra)||void 0===Q?void 0:Q[1],variableList:C}),null===(Y=null!=X&&X>-1?K.cards[X].buttons:null==K?void 0:K.buttons)||void 0===Y?void 0:Y.map(((n,t)=>{var o,i,l;if("COPY_CODE"===n.type)return e.jsx(c.default,{index:t,variable:{variableName:null!==(o=n.text)&&void 0!==o?o:"Copy Code",updatedValue:null!==(i=n.buttonVariable)&&void 0!==i?i:"",type:"string",isEditableVariable:!0,index:null!==(l=n.index)&&void 0!==l?l:0},showVariableModal:!0,variableList:C,componentType:"BUTTONS"},t)}))]}))};
|
|
@@ -1,13 +1,14 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),r=require("styled-components"),
|
|
2
|
-
background: ${
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),r=require("styled-components"),s=require("../../button/Button.js"),o=require("../../TypographyStyle.js"),a=require("../../../constants/Theme.js"),l=require("../Badge/index.js"),n=require("../context/templateModalContext.js");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const u=i(r).default.div`
|
|
2
|
+
background: ${a.COLORS.surface.standard};
|
|
3
3
|
border-top-width: 1px;
|
|
4
|
-
border-top-color: ${
|
|
4
|
+
border-top-color: ${a.COLORS.stroke.primary};
|
|
5
5
|
box-shadow: 0px -4px 12px rgba(0, 0, 0, 0.12);
|
|
6
6
|
width: 100%;
|
|
7
7
|
padding: 16px 24px;
|
|
8
8
|
display: flex;
|
|
9
|
-
justify-content: end;
|
|
9
|
+
justify-content: ${e=>e.isWhatsappCarousel?"space-between":"end"};
|
|
10
|
+
align-items: center;
|
|
10
11
|
gap: 12;
|
|
11
12
|
border-bottom-left-radius: 4px;
|
|
12
13
|
border-bottom-right-radius: 4px;
|
|
13
|
-
`;exports.default=r=>{let{isWhatsappCarousel:
|
|
14
|
+
`;exports.default=r=>{let{isWhatsappCarousel:i,onSelect:d}=r;const{isError:c,selectedCarouselIndex:p,setSelectedCarouselIndex:x,setErrorIndexes:b}=n.useTemplateModalContext(),[j,f]=t.useState(i?"Next":"Select template");return t.useEffect((()=>{i&&-1===p?f("Next"):i&&null!=p&&p>-1&&f("Save & Select Template")}),[p]),e.jsxs(u,Object.assign({isWhatsappCarousel:i},{children:[i&&null!=p&&p>=-1&&e.jsx(o.TitleRegular,Object.assign({color:a.COLORS.text.secondary},{children:`Step ${-1===p?1:2}/2`})),e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"row"}},{children:[c&&e.jsx(l.Badge,{errorText:"Some inputs are missing or incorrect. Please check"}),e.jsx(s.Button,{id:"select-template-btn",buttonText:j,size:i?"small":"large",onClick:function(){i&&-1===p&&x?x(0):(null==b||b([]),d())}})]}))]}))};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../../assets/icons/box.svg.js"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../../assets/icons/box.svg.js"),o=require("../../../assets/icons/delete.svg.js"),n=require("../../../assets/icons/edit.svg.js"),i=require("styled-components"),s=require("../../icon-button/IconButton.js"),r=require("../../TypographyStyle.js"),l=require("../../../constants/Theme.js");function c(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const d=c(i).default.div`
|
|
2
2
|
width: ${e=>e.width};
|
|
3
3
|
padding: 12px;
|
|
4
4
|
display: flex;
|
|
@@ -44,4 +44,4 @@
|
|
|
44
44
|
color: #000000;
|
|
45
45
|
}
|
|
46
46
|
}
|
|
47
|
-
`;exports.ProductBox=
|
|
47
|
+
`;exports.ProductBox=i=>{const{cardBody:c,deleteItem:a,editItem:f,hideIcon:x}=i;return e.jsxs(d,Object.assign({width:"100%"},{children:[!x&&e.jsx("div",Object.assign({style:{width:36,height:36}},{children:e.jsx(t.default,{})})),e.jsx("div",Object.assign({className:"card-body"},{children:e.jsx(r.TitleSmall,Object.assign({color:l.COLORS.content.secondary},{children:c}))})),e.jsxs("div",Object.assign({style:{display:"flex",alignItems:"center"}},{children:[f&&e.jsx(s.IconButton,{style:{display:"flex"},Icon:()=>e.jsx(n.default,{width:24,height:24,color:l.COLORS.content.placeholder}),onClick:e=>{f(),e.stopPropagation()}}),e.jsx(s.IconButton,{style:{display:"flex",color:"#919191"},Icon:()=>e.jsx(o.default,{width:24,height:24,color:l.COLORS.content.placeholder}),onClick:e=>{a(),e.stopPropagation()}})]}))]}))};
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../../assets/icons/edit.svg.js"),l=require("date-fns"),a=require("lodash"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../../assets/icons/edit.svg.js"),l=require("date-fns"),a=require("lodash"),n=require("react"),i=require("styled-components"),s=require("../../add-variableV2/AddVariableV2SideModal.js"),o=require("../../custom-date-time/CustomDateTime.js"),u=require("../../dropdown/Dropdown.js"),d=require("../../input/Input.js"),c=require("../../product-picker-v2/collectionScreen.js"),r=require("../../template-preview/constants/regexPatterns.js"),p=require("../../template-preview/models/Channels.js"),m=require("../../template-preview/models/WhatsAppTemplate.js"),v=require("../../TypographyStyle.js"),b=require("../../../utils/StringUtils.js"),g=require("../../../constants/Theme.js"),O=require("../context/templateModalContext.js"),j=require("../utils/getVariableNameEmail.js");function x(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var h=x(i);const y=h.default.div`
|
|
2
2
|
/* surface/$color-background-warning-light */
|
|
3
3
|
|
|
4
4
|
background: ${e=>e.focused&&e.channel===p.CHANNEL_TYPE.EMAIL?g.COLORS.background.warning.light:"transparent"};
|
|
5
5
|
border-radius: 4px;
|
|
6
6
|
padding: 8px 10px;
|
|
7
|
-
`,
|
|
7
|
+
`,_=h.default.div`
|
|
8
8
|
position: absolute;
|
|
9
9
|
top: 0;
|
|
10
10
|
left: 0;
|
|
@@ -13,4 +13,4 @@
|
|
|
13
13
|
background-color: rgba(0, 0, 0, 0.1);
|
|
14
14
|
z-index: 1000;
|
|
15
15
|
cursor: not-allowed;
|
|
16
|
-
`,f={value:"custom_link",label:"Custom URL"},E={value:"custom_text",label:"Custom text"},T={value:"static_expiry",label:"Static Expiry"};exports.Container=_,exports.default=n=>{let{onFocus:x,variable:h,index:A,showVariableModal:C,variableList:N,setShowDiscountCheckBox:P,componentType:S,CTAoptions:V}=n;var k,L,H;const[D,w]=i.useState(!1),[B,Y]=i.useState(""),[q,M]=i.useState([]),[R,U]=i.useState(),[I,W]=i.useState(!1),[$,z]=i.useState(!1),{device:Z,channel:F,isError:G,originalVariableList:K,template:J,templateSelectionTriggered:Q,setTemplate:X,setDisplayContent:ee,setOriginalVariableList:te,globalNormalizedPlaceholders:le,enabledCustomText:ae,pod:ie,selectedCarouselIndex:ne,isProductCarouselType:se,disableEditVariable:oe,disableEditExpiry:ue}=O.useTemplateModalContext();function de(){var e,t;const l=[];let a=[];if(F!==p.CHANNEL_TYPE.MESSAGE||ae){"link"===(null==h?void 0:h.type)?(l.push({label:"",options:[f,E]}),U(f)):"date_time"===(null==h?void 0:h.type)?(l.push({label:"",options:[f,E]}),U(T)):(l.push({label:"",options:[f,E,T]}),U(E));const e=null!=le?le:[];M([...l,...e.map((e=>{var t,l;return Object.assign(Object.assign({},e),{label:b.default.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!=le?le:[];M([{label:"",options:[E,f]},...e]),a=[{label:"",options:[E,f]},...e]}if((F===p.CHANNEL_TYPE.WHATSAPP||F===p.CHANNEL_TYPE.EMAIL||F===p.CHANNEL_TYPE.MESSAGE)&&h.updatedValue)if(c.placeHolderNamePattern.test(h.updatedValue)&&F===p.CHANNEL_TYPE.WHATSAPP||h.updatedValue.startsWith("{{")&&F!==p.CHANNEL_TYPE.WHATSAPP){const e=function(e,t,l){var a;let i={label:"",value:""};const n=l===p.CHANNEL_TYPE.WHATSAPP?e.updatedValue.replace("[[","").replace("]]",""):e.updatedValue.replace("{{","").replace("}}","");if(C){let t=e.updatedValue;if(ie===m.POD.CHATBOT&&"BUTTONS"===S){const l=null==V?void 0:V.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}(h,a,F);e.value&&U(e)}else"date_time"===h.type?(U(T),Y(h.updatedValue),me(null!==(e=h.index)&&void 0!==e?e:0,h.updatedValue)):(null===(t=h.updatedValue)||void 0===t?void 0:t.startsWith("https"))?(U(f),Y(h.updatedValue.split("https://")[1])):(U(E),Y(h.updatedValue))}function re(e,t){var l,a,i;const n=e;Y(""),U(n),F===p.CHANNEL_TYPE.WHATSAPP?"custom_text"!==n.value&&"custom_link"!==n.value&&"static_expiry"!==n.value?(pe(null!==(l=n.value)&&void 0!==l?l:"","string"),null==me||me(null!==(a=h.index)&&void 0!==a?a:0,n.value,!0)):(null==me||me(null!==(i=h.index)&&void 0!==i?i:0,B,!0,n.value),pe("","url"===n.bikPlaceholderType?"link":"string")):"custom_text"!==n.value&&"custom_link"!==n.value?pe(n.value,"url"===n.bikPlaceholderType?"link":"string"):(Y(""),pe("",n.value))}function ce(e,t){var l;Y(t);const a="custom_link"===(null==R?void 0:R.value)&&t?t.includes("https")?t:`https://${t}`:t;pe(a,"static_expiry"===e?"string":e),F===p.CHANNEL_TYPE.WHATSAPP&&(null==me||me(null!==(l=h.index)&&void 0!==l?l:0,a,"custom_link"===e,e))}function pe(e,t){var l,i,n,s;const o="custom_link"===t?"link":"custom_text"===t?"string":t;if(F!==p.CHANNEL_TYPE.WHATSAPP){const a=j.getVariableNameForEmailByIndex(A+1),i=null===document||void 0===document?void 0:document.getElementById("mobile"===Z?"template_html_mobile":"template_html_desktop"),n=F===p.CHANNEL_TYPE.EMAIL?null===(l=null==i?void 0:i.contentWindow)||void 0===l?void 0:l.document.getElementById(a):document.getElementById(a);n&&(n.textContent="custom_text"!==t&&"custom_link"!==t||e?e:h.variableName);const s=K.map(((t,l)=>l===A?Object.assign(Object.assign({},t),{type:o,updatedValue:e}):t));null==te||te(s)}if(F===p.CHANNEL_TYPE.WHATSAPP){if(null!=ne&&ne>-1&&se){const t=Object.assign({},K).cards.map(((t,l)=>{var a;return Object.assign(Object.assign({},t),{body:null===(a=t.body)||void 0===a?void 0:a.map(((t,l)=>A===l?Object.assign(Object.assign({},t),{type:o,updatedValue:e}):t))})}));return void(null==te||te((e=>Object.assign(Object.assign({},e),{cards:t}))))}const l=null!=ne&&ne>-1?K.cards[ne]:K;let u=l.body,d=l.header,r=l.buttons;if("BODY"===S?u=null===(i=l.body)||void 0===i?void 0:i.map(((t,l)=>l===A?Object.assign(Object.assign({},t),{type:o,updatedValue:e}):t)):"HEADER"===S?d=null===(n=l.header)||void 0===n?void 0:n.map(((t,l)=>l===A?Object.assign(Object.assign({},t),{type:o,updatedValue:e}):t)):"BUTTONS"===S&&(r=null===(s=l.buttons)||void 0===s?void 0:s.map(((l,a)=>a===A?Object.assign(Object.assign({},l),{buttonVariable:"custom_link"===t?"((customPlaceholderName))":e,example:"COPY_CODE"===l.type?e:[e]}):l))),null!=ne&&ne>-1){const e=a.cloneDeep(K.cards);e[ne]={header:d,body:u,buttons:r},null==te||te((t=>Object.assign(Object.assign({},t),{cards:e})))}else null==te||te((e=>Object.assign(Object.assign({},e),{header:d,body:u,buttons:r})))}}function me(e,t,l,i){var n,s,o,u,d,r,c;if(null!=ne&&ne>-1&&se){const s=Object.assign({},J).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,s,o;if("BODY"!==l.type)return l;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!==(o=null===(s=null===(n=l.example)||void 0===n?void 0:n.body_text)||void 0===s?void 0:s[0])&&void 0!==o?o:[]];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})}}))})))}):l})),o=a.cloneDeep(J);if(l){const l=null===(n=Object.assign({},J).mapping.cards)||void 0===n?void 0:n.map((l=>{var a;return Object.assign(Object.assign({},l),{body:null===(a=l.body)||void 0===a?void 0:a.map(((l,a)=>e===a?"custom_text"===i?`((editableVariable${a+10}))`:t:l))})}));o.mapping.cards=l}return o.components=s,void(null==X||X(o))}const p=null!=ne&&ne>-1?{components:null===(s=Object.assign({},J).components[1].cards)||void 0===s?void 0:s[ne].components,mapping:null===(o=Object.assign({},J).mapping.cards)||void 0===o?void 0:o[ne]}:Object.assign({},J),m=null===(u=null==p?void 0:p.components)||void 0===u?void 0:u.map((l=>{var a,i,n,s,o,u,d,r,c;const p=Object.assign({},l);if("BODY"===l.type&&"BODY"===S){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!==(o=null===(s=null===(n=p.example)||void 0===n?void 0:n.body_text)||void 0===s?void 0:s[0])&&void 0!==o?o:[]];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"===S){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"===S){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"===S)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"===S&&(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,a)=>e===a?"custom_text"===i?`((editableVariable${a+10}))`:t:l))});else if("HEADER"===S&&(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,a)=>e===a?"custom_text"===i?`((editableVariable${a+20}))`:t:l))});else if("BUTTONS"===S&&(null===(c=null==p?void 0:p.mapping)||void 0===c?void 0:c.buttons)){let l=-1,a=-1;m.forEach((t=>{var i;"BUTTONS"===t.type&&(null===(i=t.buttons)||void 0===i||i.forEach(((t,i)=>{"URL"===t.type&&(l++,i===e&&"URL"==t.type&&(a=l))})))})),p.mapping=Object.assign(Object.assign({},p.mapping),{buttons:p.mapping.buttons.map(((e,l)=>l===a?"custom_link"===i?"((customPlaceholderName))":t:e))})}if(null!=ne&&ne>-1&&J){const e=a.cloneDeep(J);e.components[1].cards[ne].components=p.components,e.mapping.cards[ne]=p.mapping,null==X||X(e)}else null==X||X(Object.assign({},p))}return i.useEffect((()=>{D&&(null==x||x())}),[D]),i.useEffect((()=>{!function(){var e,t,l,a,i;const n="mobile"===Z?"template_html_mobile":"template_html_desktop",s=document.getElementById(n),o=(null!==(a=null===(l=null===(t=null===(e=null==s?void 0:s.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==s?void 0:s.contentWindow)||void 0===i?void 0:i.document.head.innerHTML);F===p.CHANNEL_TYPE.EMAIL&&(null==ee||ee(o))}()}),[Q]),i.useEffect((()=>{de()}),[]),i.useEffect((()=>{de()}),[ne]),i.useEffect((()=>{Z&&R&&B&&setTimeout((()=>{pe("custom_link"===(null==R?void 0:R.value)&&B?B.includes("https")?B:`https://${B}`:B,R.value)}),100)}),[Z]),i.useEffect((()=>{!$&&R&&h.updatedValue&&setTimeout((()=>{pe("custom_link"===(null==R?void 0:R.value)&&h.updatedValue?h.updatedValue.includes("https")?h.updatedValue:`https://${h.updatedValue}`:h.updatedValue,R.value),z(!0)}),100)}),[R]),e.jsxs(_,Object.assign({channel:F,focused:D,onMouseEnter:()=>w(!0),onMouseLeave:()=>w(!1)},{children:[e.jsx("div",Object.assign({style:{marginBottom:8}},{children:e.jsxs(v.BodySecondary,Object.assign({style:{color:G&&!R?g.COLORS.content.negative:g.COLORS.content.primary}},{children:[null===(k=h.variableName)||void 0===k?void 0:k.replace("{{","").replace("}}","")," ","link"===(null==h?void 0:h.type)?"link":"variable"]}))})),e.jsx("div",Object.assign({style:{marginBottom:12}},{children:C?e.jsxs("div",Object.assign({style:{display:"flex",border:"#E0E0E0 1px solid",borderRadius:4,padding:10,justifyContent:(null==R?void 0:R.label)?"space-between":"flex-end"}},{children:[e.jsx(v.BodyPrimary,Object.assign({numberOfLines:1},{children:ie===m.POD.CHATBOT?["static_expiry","custom_text"].includes(null!==(L=null==R?void 0:R.value)&&void 0!==L?L:"")?null==R?void 0:R.label:null==R?void 0:R.value:r.truncate(null!==(H=null==R?void 0:R.label)&&void 0!==H?H:"",20,!0)})),oe||"date_time"===(null==h?void 0:h.type)&&ue?e.jsx(e.Fragment,{}):e.jsx(t.default,{onClick:()=>{W(!I)},width:24,height:24,color:g.COLORS.content.primary})]})):e.jsx(u.Dropdown,{disabled:oe,options:q,isSearchable:!1,onSelect:re,defaultOptions:R?[Object.assign(Object.assign({},R),{selected:!0})]:[]})})),("custom_text"===(null==R?void 0:R.value)||"custom_link"===(null==R?void 0:R.value))&&e.jsx(d.Input,{state:oe?"disabled":"none",labelText:"custom_text"===(null==R?void 0:R.value)?"Custom text value":"custom_link"===(null==R?void 0:R.value)?"Custom URL value":"",id:`variable-value-${null==R?void 0:R.value}-${A}`,value:B,errorMessage:G?B&&0!==B.trim().length?"custom_link"!==R.value||/^https?:\/\/(?:www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b(?:[-a-zA-Z0-9()@:%_\+.~#?&\/=]*)$/.test(`https://${B.trim()}`)&&0!==B.trim().length?"custom_link"!==R.value&&B.length>30?"Length cannot be more than 30":"BUTTONS"===S&&"custom_link"!==R.value?"Enter valid alpha numeric code":"":"Enter valid URL":"Required field":"",maxCharLimit:"custom_link"===(null==R?void 0:R.value)?2e3:"BUTTONS"===S?15:30,noKeyDownChange:!0,prefixText:"custom_link"===(null==R?void 0:R.value)?"https://":"",placeholder:"link"===h.type||"custom_link"===R.value?"Enter custom URL here":"Enter custom text here",onChangeText:e=>{ce(R.value,e)}}),"static_expiry"===(null==R?void 0:R.value)&&e.jsxs("div",Object.assign({style:{position:"relative"}},{children:[oe&&e.jsx(y,{onClick:e=>e.preventDefault()}),e.jsx(o.CustomDateTime,{placement:"auto",time:B?l.format(new Date(B),"hh:mm a"):l.format(new Date,"hh:mm a"),date:B?new Date(B):new Date,minDate:new Date,error:"",setError:()=>{},onChange:e=>{ce("static_expiry",e.toISOString())}})]})),I&&e.jsx(s.AddVariableV2SideModal,{zIndex:2e3,data:null!=N?N:[],showVariable:I,setShowVariable:W,placeholder:"Add a variable",customTrigger:e=>{null==P||P(!1),"{{custom.url}}"===e.actualValue?re({label:e.displayName,selected:!0,value:"custom_link"}):"{{custom.text}}"==e.actualValue?re({label:e.displayName,selected:!0,value:"custom_text"}):"{{static.expiry}}"==e.actualValue?re({label:e.displayName,selected:!0,value:"static_expiry"}):re({label:e.displayName.replace("{{","").replace("}}","").trim().replace("."," "),selected:!0,value:e.actualValue,bikPlaceholderType:"string"})}})]}))};
|
|
16
|
+
`,f={value:"custom_link",label:"Custom URL"},E={value:"custom_text",label:"Custom text"},T={value:"static_expiry",label:"Static Expiry"};exports.Container=y,exports.default=i=>{let{onFocus:x,variable:h,index:N,showVariableModal:C,variableList:A,setShowDiscountCheckBox:S,componentType:P,CTAoptions:V}=i;var k,L,D;const[B,H]=n.useState(!1),[w,Y]=n.useState(""),[U,q]=n.useState([]),[R,M]=n.useState(),[I,W]=n.useState(!1),[$,z]=n.useState(!1),{device:Z,channel:F,isError:G,originalVariableList:K,template:J,templateSelectionTriggered:Q,setTemplate:X,setDisplayContent:ee,setOriginalVariableList:te,globalNormalizedPlaceholders:le,enabledCustomText:ae,pod:ne,selectedCarouselIndex:ie,isProductCarouselType:se,disableEditVariable:oe,disableEditExpiry:ue}=O.useTemplateModalContext();function de(){var e,t;const l=[];let a=[];if(F!==p.CHANNEL_TYPE.MESSAGE||ae){"link"===(null==h?void 0:h.type)?(l.push({label:"",options:[f,E]}),M(f)):"date_time"===(null==h?void 0:h.type)?(l.push({label:"",options:[f,E]}),M(T)):(l.push({label:"",options:[f,E,T]}),M(E));const e=null!=le?le:[];q([...l,...e.map((e=>{var t,l;return Object.assign(Object.assign({},e),{label:b.default.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!=le?le:[];q([{label:"",options:[E,f]},...e]),a=[{label:"",options:[E,f]},...e]}if((F===p.CHANNEL_TYPE.WHATSAPP||F===p.CHANNEL_TYPE.EMAIL||F===p.CHANNEL_TYPE.MESSAGE)&&h.updatedValue)if(r.placeHolderNamePattern.test(h.updatedValue)&&F===p.CHANNEL_TYPE.WHATSAPP||h.updatedValue.startsWith("{{")&&F!==p.CHANNEL_TYPE.WHATSAPP){const e=function(e,t,l){var a;let n={label:"",value:""};const i=l===p.CHANNEL_TYPE.WHATSAPP?e.updatedValue.replace("[[","").replace("]]",""):e.updatedValue.replace("{{","").replace("}}","");if(C){let t=e.updatedValue;if(ne===m.POD.CHATBOT&&"BUTTONS"===P){const l=null==V?void 0:V.filter((t=>t.placeHolder===e.updatedValue));l&&l.length>0&&(t=l[0].label)}n={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())===i.trim()&&(n=e)}))}));return n}(h,a,F);e.value&&M(e)}else"date_time"===h.type?(M(T),Y(h.updatedValue),me(null!==(e=h.index)&&void 0!==e?e:0,h.updatedValue)):(null===(t=h.updatedValue)||void 0===t?void 0:t.startsWith("https"))?(M(f),Y(h.updatedValue.split("https://")[1])):(M(E),Y(h.updatedValue))}function ce(e,t){var l,a,n;const i=e;Y(""),M(i),F===p.CHANNEL_TYPE.WHATSAPP?"custom_text"!==i.value&&"custom_link"!==i.value&&"static_expiry"!==i.value?(pe(null!==(l=i.value)&&void 0!==l?l:"","string"),null==me||me(null!==(a=h.index)&&void 0!==a?a:0,i.value,!0)):(null==me||me(null!==(n=h.index)&&void 0!==n?n:0,w,!0,i.value),pe("","url"===i.bikPlaceholderType?"link":"string")):"custom_text"!==i.value&&"custom_link"!==i.value?pe(i.value,"url"===i.bikPlaceholderType?"link":"string"):(Y(""),pe("",i.value))}function re(e,t){var l;Y(t);const a="custom_link"===(null==R?void 0:R.value)&&t?t.includes("https")?t:`https://${t}`:t;pe(a,"static_expiry"===e?"string":e),F===p.CHANNEL_TYPE.WHATSAPP&&(null==me||me(null!==(l=h.index)&&void 0!==l?l:0,a,"custom_link"===e,e))}function pe(e,t){var l,n,i,s;const o="custom_link"===t?"link":"custom_text"===t?"string":t;if(F!==p.CHANNEL_TYPE.WHATSAPP){const a=j.getVariableNameForEmailByIndex(N+1),n=null===document||void 0===document?void 0:document.getElementById("mobile"===Z?"template_html_mobile":"template_html_desktop"),i=F===p.CHANNEL_TYPE.EMAIL?null===(l=null==n?void 0:n.contentWindow)||void 0===l?void 0:l.document.getElementById(a):document.getElementById(a);i&&(i.textContent="custom_text"!==t&&"custom_link"!==t||e?e:h.variableName);const s=K.map(((t,l)=>l===N?Object.assign(Object.assign({},t),{type:o,updatedValue:e}):t));null==te||te(s)}if(F===p.CHANNEL_TYPE.WHATSAPP){if(null!=ie&&ie>-1&&se){const l=Object.assign({},K).cards.map(((l,a)=>{var n,i;return"BODY"===P?Object.assign(Object.assign({},l),{body:null===(n=l.body)||void 0===n?void 0:n.map(((t,l)=>N===l?Object.assign(Object.assign({},t),{type:o,updatedValue:e}):t))}):"BUTTONS"===P?Object.assign(Object.assign({},l),{buttons:null===(i=l.buttons)||void 0===i?void 0:i.map(((l,a)=>a===N?Object.assign(Object.assign({},l),{buttonVariable:"custom_link"===t?"((customPlaceholderName))":e,example:"COPY_CODE"===l.type?e:[e]}):l))}):l}));return void(null==te||te((e=>Object.assign(Object.assign({},e),{cards:l}))))}const l=null!=ie&&ie>-1?K.cards[ie]:K;let u=l.body,d=l.header,c=l.buttons;if("BODY"===P?u=null===(n=l.body)||void 0===n?void 0:n.map(((t,l)=>l===N?Object.assign(Object.assign({},t),{type:o,updatedValue:e}):t)):"HEADER"===P?d=null===(i=l.header)||void 0===i?void 0:i.map(((t,l)=>l===N?Object.assign(Object.assign({},t),{type:o,updatedValue:e}):t)):"BUTTONS"===P&&(c=null===(s=l.buttons)||void 0===s?void 0:s.map(((l,a)=>a===N?Object.assign(Object.assign({},l),{buttonVariable:"custom_link"===t?"((customPlaceholderName))":e,example:"COPY_CODE"===l.type?e:[e]}):l))),null!=ie&&ie>-1){const e=a.cloneDeep(K.cards);e[ie]={header:d,body:u,buttons:c},null==te||te((t=>Object.assign(Object.assign({},t),{cards:e})))}else null==te||te((e=>Object.assign(Object.assign({},e),{header:d,body:u,buttons:c})))}}function me(e,t,l,n){var i,s,o,u,d,c,r;if(null!=ie&&ie>-1&&se){const s=Object.assign({},J).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,n,i,s,o,u;if("BODY"===l.type&&"BODY"===P){if(null===(n=null===(a=l.example)||void 0===a?void 0:a.body_text)||void 0===n?void 0:n[0]){const a=[...null!==(o=null===(s=null===(i=l.example)||void 0===i?void 0:i.body_text)||void 0===s?void 0:s[0])&&void 0!==o?o:[]];a[e]=t.replace("{{","").replace("}}","").replace("((","").replace("))","");const n=Object.assign(Object.assign({},l.example),{body_text:[a]});return Object.assign(Object.assign({},l),{example:n})}return l}if("BUTTONS"===l.type&&"BUTTONS"===P){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})),o=a.cloneDeep(J);if(l){const l=null===(i=Object.assign({},J).mapping.cards)||void 0===i?void 0:i.map(((l,a)=>{var i,s,o;if("BODY"===P)return Object.assign(Object.assign({},l),{body:null===(i=l.body)||void 0===i?void 0:i.map(((l,a)=>e===a?"custom_text"===n?`((editableVariable${a+10}))`:t:l))});if("BUTTONS"===P&&(null==l?void 0:l.buttons)){let i=-1,u=-1;return null===(s=J.components[1].cards)||void 0===s||s[a].components.forEach((t=>{var l;"BUTTONS"===t.type&&(null===(l=t.buttons)||void 0===l||l.forEach(((t,l)=>{"URL"===t.type&&(i++,l===e&&"URL"==t.type&&(u=i))})))})),Object.assign(Object.assign({},l),{buttons:null===(o=l.buttons)||void 0===o?void 0:o.map(((e,l)=>l===u?"custom_link"===n?"((customPlaceholderName))":t:e))})}return l}));o.mapping.cards=l}return o.components=s,void(null==X||X(o))}const p=null!=ie&&ie>-1?{components:null===(s=Object.assign({},J).components[1].cards)||void 0===s?void 0:s[ie].components,mapping:null===(o=Object.assign({},J).mapping.cards)||void 0===o?void 0:o[ie]}:Object.assign({},J),m=null===(u=null==p?void 0:p.components)||void 0===u?void 0:u.map((l=>{var a,n,i,s,o,u,d,c,r;const p=Object.assign({},l);if("BODY"===l.type&&"BODY"===P){if(null===(n=null===(a=l.example)||void 0===a?void 0:a.body_text)||void 0===n?void 0:n[0]){const l=[...null!==(o=null===(s=null===(i=p.example)||void 0===i?void 0:i.body_text)||void 0===s?void 0:s[0])&&void 0!==o?o:[]];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"===P){if(null===(u=l.example)||void 0===u?void 0:u.header_text){const l=[...null!==(c=null===(d=p.example)||void 0===d?void 0:d.header_text)&&void 0!==c?c:[]];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"===P){const a=null===(r=l.buttons)||void 0===r?void 0:r.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"===P)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"===P&&(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,a)=>e===a?"custom_text"===n?`((editableVariable${a+10}))`:t:l))});else if("HEADER"===P&&(null===(c=null==p?void 0:p.mapping)||void 0===c?void 0:c.header))p.mapping=Object.assign(Object.assign({},p.mapping),{header:p.mapping.header.map(((l,a)=>e===a?"custom_text"===n?`((editableVariable${a+20}))`:t:l))});else if("BUTTONS"===P&&(null===(r=null==p?void 0:p.mapping)||void 0===r?void 0:r.buttons)){let l=-1,a=-1;m.forEach((t=>{var n;"BUTTONS"===t.type&&(null===(n=t.buttons)||void 0===n||n.forEach(((t,n)=>{"URL"===t.type&&(l++,n===e&&"URL"==t.type&&(a=l))})))})),p.mapping=Object.assign(Object.assign({},p.mapping),{buttons:p.mapping.buttons.map(((e,l)=>l===a?"custom_link"===n?"((customPlaceholderName))":t:e))})}if(null!=ie&&ie>-1&&J){const e=a.cloneDeep(J);e.components[1].cards[ie].components=p.components,e.mapping.cards[ie]=p.mapping,null==X||X(e)}else null==X||X(Object.assign({},p))}return n.useEffect((()=>{B&&(null==x||x())}),[B]),n.useEffect((()=>{!function(){var e,t,l,a,n;const i="mobile"===Z?"template_html_mobile":"template_html_desktop",s=document.getElementById(i),o=(null!==(a=null===(l=null===(t=null===(e=null==s?void 0:s.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===(n=null==s?void 0:s.contentWindow)||void 0===n?void 0:n.document.head.innerHTML);F===p.CHANNEL_TYPE.EMAIL&&(null==ee||ee(o))}()}),[Q]),n.useEffect((()=>{de()}),[]),n.useEffect((()=>{de()}),[ie]),n.useEffect((()=>{Z&&R&&w&&setTimeout((()=>{pe("custom_link"===(null==R?void 0:R.value)&&w?w.includes("https")?w:`https://${w}`:w,R.value)}),100)}),[Z]),n.useEffect((()=>{!$&&R&&h.updatedValue&&setTimeout((()=>{pe("custom_link"===(null==R?void 0:R.value)&&h.updatedValue?h.updatedValue.includes("https")?h.updatedValue:`https://${h.updatedValue}`:h.updatedValue,R.value),z(!0)}),100)}),[R]),e.jsxs(y,Object.assign({channel:F,focused:B,onMouseEnter:()=>H(!0),onMouseLeave:()=>H(!1)},{children:[e.jsx("div",Object.assign({style:{marginBottom:8}},{children:e.jsxs(v.BodySecondary,Object.assign({style:{color:G&&!R?g.COLORS.content.negative:g.COLORS.content.primary}},{children:[null===(k=h.variableName)||void 0===k?void 0:k.replace("{{","").replace("}}","")," ","link"===(null==h?void 0:h.type)?"link":"variable"]}))})),e.jsx("div",Object.assign({style:{marginBottom:12}},{children:C?e.jsxs("div",Object.assign({style:{display:"flex",border:"#E0E0E0 1px solid",borderRadius:4,padding:10,justifyContent:(null==R?void 0:R.label)?"space-between":"flex-end"}},{children:[e.jsx(v.BodyPrimary,Object.assign({numberOfLines:1},{children:ne===m.POD.CHATBOT?["static_expiry","custom_text","custom_link"].includes(null!==(L=null==R?void 0:R.value)&&void 0!==L?L:"")?null==R?void 0:R.label:null==R?void 0:R.value:c.truncate(null!==(D=null==R?void 0:R.label)&&void 0!==D?D:"",20,!0)})),oe||"date_time"===(null==h?void 0:h.type)&&ue?e.jsx(e.Fragment,{}):e.jsx(t.default,{onClick:()=>{W(!I)},width:24,height:24,color:g.COLORS.content.primary})]})):e.jsx(u.Dropdown,{disabled:oe,options:U,isSearchable:!1,onSelect:ce,defaultOptions:R?[Object.assign(Object.assign({},R),{selected:!0})]:[]})})),("custom_text"===(null==R?void 0:R.value)||"custom_link"===(null==R?void 0:R.value))&&e.jsx(d.Input,{state:oe?"disabled":"none",labelText:"custom_text"===(null==R?void 0:R.value)?"Custom text value":"custom_link"===(null==R?void 0:R.value)?"Custom URL value":"",id:`variable-value-${null==R?void 0:R.value}-${N}`,value:w,errorMessage:G?w&&0!==w.trim().length?"custom_link"!==R.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"!==R.value&&w.length>30?"Length cannot be more than 30":"BUTTONS"===P&&"custom_link"!==R.value?"Enter valid alpha numeric code":"":"Enter valid URL":"Required field":"",maxCharLimit:"custom_link"===(null==R?void 0:R.value)?2e3:"BUTTONS"===P?15:30,noKeyDownChange:!0,prefixText:"custom_link"===(null==R?void 0:R.value)?"https://":"",placeholder:"link"===h.type||"custom_link"===R.value?"Enter custom URL here":"Enter custom text here",onChangeText:e=>{re(R.value,e)}}),"static_expiry"===(null==R?void 0:R.value)&&e.jsxs("div",Object.assign({style:{position:"relative"}},{children:[oe&&e.jsx(_,{onClick:e=>e.preventDefault()}),e.jsx(o.CustomDateTime,{placement:"auto",time:w?l.format(new Date(w),"hh:mm a"):l.format(new Date,"hh:mm a"),date:w?new Date(w):new Date,minDate:new Date,error:"",setError:()=>{},onChange:e=>{re("static_expiry",e.toISOString())}})]})),I&&e.jsx(s.AddVariableV2SideModal,{zIndex:2e3,data:null!=A?A:[],showVariable:I,setShowVariable:W,placeholder:"Add a variable",customTrigger:e=>{null==S||S(!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"})}})]}))};
|
package/dist/cjs/components/template-context-mapper/modalElements/VariableConnectorsPanel.js
CHANGED
|
@@ -1,5 +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"),r=require("../../add-variableV2/AddVariableV2SideModal.js");require("../../../_virtual/_tslib.js");var s=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"),
|
|
2
|
-
overflow-y: auto;
|
|
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"),r=require("../../add-variableV2/AddVariableV2SideModal.js");require("../../../_virtual/_tslib.js");var s=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");require("../../modals/modal.styled.js"),require("../../switch/Switch.js");var d=require("../../TypographyStyle.js"),c=require("../../checkBox/CheckBox.js"),u=require("../context/templateModalContext.js"),h=require("./VariableConnector.js");function x(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var b=x(i);const p=b.default.div`
|
|
3
2
|
display: flex;
|
|
4
3
|
flex-direction: column;
|
|
5
4
|
height: 100%;
|
|
@@ -26,4 +25,4 @@
|
|
|
26
25
|
align-items: center;
|
|
27
26
|
gap: 5px;
|
|
28
27
|
}
|
|
29
|
-
`;exports.AddVariableStyled=j,exports.Container=p,exports.default=i=>{let{onFocus:x,showVariableModal:b,variableList:g,discountCode:f,setDiscountCode:v}=i;const{originalVariableList:y,disableEditVariable:m}=u.useTemplateModalContext(),[V,O]=t.useState(!1),[q,S]=t.useState(!1),[w
|
|
28
|
+
`;exports.AddVariableStyled=j,exports.Container=p,exports.default=i=>{let{onFocus:x,showVariableModal:b,variableList:g,discountCode:f,setDiscountCode:v}=i;const{originalVariableList:y,disableEditVariable:m}=u.useTemplateModalContext(),[V,O]=t.useState(!1),[q,S]=t.useState(!1),[C,w]=t.useState(!1),[k,T]=t.useState(""),[B,L]=t.useState(!1),E=t.useRef(),A=t.useRef();return t.useEffect((()=>{v&&v(f+k)}),[k]),t.useEffect((()=>{y.forEach((e=>{"checkout.checkoutUrl"===e.updatedValue.replace("{{","").replace("}}","")&&(O(!0),f&&L&&L(!0))}))}),[y]),e.jsxs(p,{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==y?void 0:y.map(((a,t)=>!a.isEditableVariable||m?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):e.jsx("div",Object.assign({style:{marginTop:16}},{children:e.jsx(h.default,{index:t,variable:a,onFocus:()=>null==x?void 0:x(t),showVariableModal:b,variableList:g,setShowDiscountCheckBox:O})}),t))),(V||f)&&e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"row",marginLeft:10,marginTop:8}},{children:[e.jsx(c.CheckBox,{isChecked:B,onValueChange:()=>{B&&v&&v(""),L(!B)}}),e.jsx(d.TitleSmall,Object.assign({style:{marginLeft:8}},{children:"Add discount code"}))]})),B&&e.jsxs("div",Object.assign({ref:E,style:{margin:10}},{children:[e.jsx(l.Input,{placeholder:"Enter your discount code",onChangeText:e=>{v&&v(e)},value:f,onFocus:()=>{S(!0)},onBlur:e=>{var a;"addVar"===(null===(a=e.relatedTarget)||void 0===a?void 0:a.id)?(E.current&&E.current.focus(),S(!0)):(S(!1),w(!1))},noErrorHint:!0,validate:e=>[!0,""]}),q&&e.jsx(j,Object.assign({ref:A,id:"addVar",onClick:e=>{e.stopPropagation(),w(!0)}},{children:e.jsxs("div",Object.assign({className:"add"},{children:[e.jsx(s.default,{width:20,height:20,color:"white"}),e.jsx("div",Object.assign({className:"variable"},{children:"Add variable"}))]}))}))]})),C&&e.jsx(r.AddVariableV2SideModal,{zIndex:2e3,data:null!=g?g:[],showVariable:C,setShowVariable:w,variableValue:k,setVariableValue:T,placeholder:"Add a variable",customTrigger:e=>{T(e.actualValue),S(!1)}})]})};
|
|
@@ -10,4 +10,5 @@ export declare const CarouselPreview: React.ForwardRefExoticComponent<{
|
|
|
10
10
|
template: WhatsAppTemplate | EmailTemplateType | SMSTemplateType | WhatsAppCarouselTemplate | null;
|
|
11
11
|
showSampleValues?: boolean | undefined;
|
|
12
12
|
isPreview?: boolean | undefined;
|
|
13
|
+
removeBottomBorder?: boolean | undefined;
|
|
13
14
|
} & React.RefAttributes<HTMLDivElement>>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsxs as e,jsx as
|
|
1
|
+
import{jsxs as e,jsx as t}from"react/jsx-runtime";import n from"../../assets/icons/chevronLeft.svg.js";import o from"../../assets/icons/chevronRight.svg.js";import{CarouselProvider as i,ButtonBack as l,Slider as r,Slide as s,ButtonNext as a}from"pure-react-carousel";import d from"react";import{Container as c,CarouselContainer as h}from"./CarouselPreview.style.js";import m from"./CarouselPreviewCard.js";import{COLORS as v}from"../../constants/Theme.js";const p=d.forwardRef(((d,p)=>{let{channel:u,template:g,showSampleValues:j,isPreview:b,removeBottomBorder:f}=d;var w,x,O,C,P,S;const B=null===(w=null==g?void 0:g.components)||void 0===w?void 0:w[1].cards;let y="500px";const N=null!==(O=null===(x=null==g?void 0:g.components)||void 0===x?void 0:x[0].text)&&void 0!==O?O:"";return N.length>100&&N.length<300?y="530px":N.length>300&&N.length<600?y="560px":N.length>600&&N.length<900?y="590px":N.length>900&&N.length<1200&&(y="620px"),e(c,Object.assign({removeBottomBorder:f},{children:[t(m,{channel:u,currentTemplate:g,carouselCardIndex:-1,isPreview:b,width:"77%"}),!!(null==B?void 0:B.length)&&t(i,Object.assign({naturalSlideWidth:100,naturalSlideHeight:125,totalSlides:null!==(C=null==B?void 0:B.length)&&void 0!==C?C:1,orientation:"horizontal",visibleSlides:1.3,dragEnabled:!0,touchEnabled:!0},{children:e(h,Object.assign({height:y},{children:[!b&&t(l,Object.assign({className:"left_button"},{children:t(n,{height:10,width:10,color:v.content.primary})})),t(r,Object.assign({className:"slider"},{children:null===(S=null===(P=null==g?void 0:g.components)||void 0===P?void 0:P[1].cards)||void 0===S?void 0:S.map(((e,n)=>{var o,i;const l={components:e.components,mapping:null===(i=null===(o=null==g?void 0:g.mapping)||void 0===o?void 0:o.cards)||void 0===i?void 0:i[n]};return t(s,Object.assign({index:n},{children:t(m,{channel:u,currentTemplate:l,carouselCardIndex:n,isPreview:b,width:"100%"},n)}),n)}))})),!b&&t(a,Object.assign({className:"right_button"},{children:t(o,{height:10,width:10,color:v.content.primary})}))]}))}))]}))}));export{p as CarouselPreview};
|
|
@@ -1,4 +1,7 @@
|
|
|
1
1
|
export declare const Container: import("styled-components").StyledComponent<"div", any, {
|
|
2
2
|
showHeader?: boolean | undefined;
|
|
3
|
+
removeBottomBorder?: boolean | undefined;
|
|
4
|
+
}, never>;
|
|
5
|
+
export declare const CarouselContainer: import("styled-components").StyledComponent<"div", any, {
|
|
6
|
+
height: string;
|
|
3
7
|
}, never>;
|
|
4
|
-
export declare const CarouselContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
@@ -2,7 +2,7 @@ import e from"styled-components";import{COLORS as o}from"../../constants/Theme.j
|
|
|
2
2
|
background-image: url('https://firebasestorage.googleapis.com/v0/b/bikayi-chat.appspot.com/o/images-uid%2F341dba50-e84e-4457-b5b5-d9d8a0b95a73?alt=media&token=6fd32f23-8bb2-4980-bbee-bef39b38fd9f');
|
|
3
3
|
border-color: ${o.stroke.primary};
|
|
4
4
|
border-top-style: solid;
|
|
5
|
-
border-bottom-style: solid;
|
|
5
|
+
border-bottom-style: ${e=>e.removeBottomBorder?"unset":"solid"};
|
|
6
6
|
border-top-width: 1px;
|
|
7
7
|
border-bottom-width: 1px;
|
|
8
8
|
background-repeat: no-repeat;
|
|
@@ -47,6 +47,11 @@ import e from"styled-components";import{COLORS as o}from"../../constants/Theme.j
|
|
|
47
47
|
}
|
|
48
48
|
.slider {
|
|
49
49
|
width: 100%;
|
|
50
|
-
height:
|
|
50
|
+
height: ${e=>e.height};
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
.carousel__slide-focus-ring {
|
|
54
|
+
display: none !important;
|
|
55
|
+
outline-width: 0 !important;
|
|
51
56
|
}
|
|
52
57
|
`;export{i as CarouselContainer,t as Container};
|
|
@@ -2,7 +2,7 @@ import React from 'react';
|
|
|
2
2
|
import { CHANNEL_TYPE } from "../template-preview/models/Channels";
|
|
3
3
|
declare const CarouselPreviewCard: React.ForwardRefExoticComponent<{
|
|
4
4
|
channel: CHANNEL_TYPE;
|
|
5
|
-
|
|
5
|
+
currentTemplate: any;
|
|
6
6
|
showSampleValues?: boolean | undefined;
|
|
7
7
|
carouselCardIndex?: number | undefined;
|
|
8
8
|
isPreview?: boolean | undefined;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsx as e}from"react/jsx-runtime";import t from"react";import{useTemplateModalContext as a}from"../template-context-mapper/context/templateModalContext.js";import{TemplatePreview as p}from"../template-preview/TemplatePreview.js";import"../template-preview/WhatsApp/WhatsAppLikePreview.js";import"../template-preview/WhatsApp/WhatsAppLikePreviewV2.js";import"../../constants/Theme.js";import"../curtain/CurtainHelper.js";import"../template-preview/models/TemplateMeta.js";import"../template-preview/models/WhatsAppTemplate.js";const r=t.forwardRef((t=>{let{channel:r,
|
|
1
|
+
import{jsx as e}from"react/jsx-runtime";import t from"react";import{useTemplateModalContext as a}from"../template-context-mapper/context/templateModalContext.js";import{TemplatePreview as p}from"../template-preview/TemplatePreview.js";import"../template-preview/WhatsApp/WhatsAppLikePreview.js";import"../template-preview/WhatsApp/WhatsAppLikePreviewV2.js";import"../../constants/Theme.js";import"../curtain/CurtainHelper.js";import"../template-preview/models/TemplateMeta.js";import"../template-preview/models/WhatsAppTemplate.js";const r=t.forwardRef((t=>{let{channel:r,currentTemplate:i,showSampleValues:l,carouselCardIndex:s,isPreview:o,width:m}=t;var n,d,c;const{cardWidth:h,template:v}=a(),w=(null!==(c=null===(d=null===(n=null==v?void 0:v.components)||void 0===n?void 0:n[1].cards)||void 0===d?void 0:d.length)&&void 0!==c?c:0)-1===s?12:0;return e("div",Object.assign({style:{width:m||h}},{children:e(p,{showSampleValues:l,template:i,channel:r,size:"small",hideHeader:!0,carouselCardIndex:s,isWhatsappCarousel:!0,isPreview:o,whatsAppSpecificMeta:{templateContainerStyles:{marginRight:w}}})}))}));export{r as default};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsx as t}from"react/jsx-runtime";import{useState as e,useEffect as r}from"react";import{resizeImage as i}from"../../utils/resizeImage.js";const
|
|
1
|
+
import{jsx as t}from"react/jsx-runtime";import{useState as e,useEffect as r}from"react";import{BikShimmer as m}from"../shimmer/ShimmerComponent/BikShimmer.js";import{resizeImage as i}from"../../utils/resizeImage.js";const o=o=>{let{imageUrl:s,targetSize:h,alt:p,style:a}=o;const[n,c]=e("");return r((()=>{i(s,h).then((t=>{c(t)})).catch((t=>{c(s)}))}),[s,h]),n?t("img",{alt:p,src:n,height:h,width:h,style:a}):t(m,{boxes:[{marginTop:"0px",height:`${h}px`,width:`${h}px`}]})};export{o as ResizableImage};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsxs as e,jsx as
|
|
1
|
+
import{jsxs as e,jsx as t}from"react/jsx-runtime";import{useState as o,useEffect as r}from"react";import{BikShimmer as i}from"../shimmer/ShimmerComponent/BikShimmer.js";const a="https://firebasestorage.googleapis.com/v0/b/bikayi-chat.appspot.com/o/images-uid%2F9034204a-cbf9-4b93-8b28-ccf880d273f9?alt=media&token=318529b5-8df0-4644-85b0-40fff1dc1d5c",l=l=>{let{imageUrl:s,width:d,height:n,borderRadius:m,alt:c,defaultImageUrl:h=a}=l;const[b,g]=o(!0),[p,u]=o(!1);return r((()=>{const e=new Image;return e.src=s,e.onload=()=>{u(!1),g(!1)},e.onerror=()=>{u(!0),g(!1)},()=>{e.onload=null,e.onerror=null}}),[s]),e("div",Object.assign({style:{position:"relative",width:d,height:n,borderRadius:m}},{children:[b&&t(i,{boxes:[{height:`${n}px`,width:`${d}px`,marginTop:"0px"}]}),t("img",p?{src:h,alt:null!=c?c:"Image",style:{borderRadius:null!=m?m:0,display:"block",width:"100%",height:"100%",objectFit:"cover"}}:{src:s,alt:null!=c?c:"Image",style:{borderRadius:null!=m?m:0,display:b?"none":"block",width:"100%",height:"100%",objectFit:"cover"}})]}))};export{a as DEFAULT_IMAGE,l as ShimmerImage};
|
|
@@ -1,5 +1,8 @@
|
|
|
1
|
-
export declare const BadgeContainer: import("styled-components").StyledComponent<"div", any, {
|
|
1
|
+
export declare const BadgeContainer: import("styled-components").StyledComponent<"div", any, {
|
|
2
|
+
padding?: string | undefined;
|
|
3
|
+
}, never>;
|
|
2
4
|
export interface BadgeProps {
|
|
3
5
|
errorText: string;
|
|
6
|
+
padding?: string;
|
|
4
7
|
}
|
|
5
8
|
export declare const Badge: (props: BadgeProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import{jsxs as
|
|
1
|
+
import{jsxs as t,jsx as r}from"react/jsx-runtime";import e from"../../../assets/icons/alert.svg.js";import n from"styled-components";import{BodySecondary as o}from"../../TypographyStyle.js";import{COLORS as i}from"../../../constants/Theme.js";const p=n.div`
|
|
2
2
|
background: ${i.background.negative.light};
|
|
3
3
|
display: flex;
|
|
4
4
|
align-items: center;
|
|
5
|
-
padding: 0px 12px;
|
|
5
|
+
padding: ${t=>t.padding?"8px":"0px"} 12px;
|
|
6
6
|
gap: 8px;
|
|
7
7
|
border-radius: 4px;
|
|
8
8
|
margin-right: 12px;
|
|
9
9
|
color: ${i.content.negative};
|
|
10
|
-
`,
|
|
10
|
+
`,a=n=>{const{errorText:a,padding:s}=n;return t(p,Object.assign({padding:s},{children:[r(e,{height:20,width:20,color:i.content.negative}),r(o,{children:a})]}))};export{a as Badge,p as BadgeContainer};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsx as e,jsxs as l,Fragment as o}from"react/jsx-runtime";import{useEffect as t,useState as r,useMemo as i}from"react";import a from"../../utils/StringUtils.js";import{StyledModal as n}from"../modals/styledModal.js";import{CHANNEL_TYPE as s}from"../template-preview/models/Channels.js";import{TemplateModalContext as d}from"./context/templateModalContext.js";import c from"./modalElements/Footer.js";import u from"./modalElements/TemplateSelectModalContent.js";import{convertPlaceholdersToBikDropdown as p}from"./utils/convertPlaceholdersToBikDropdown.js";const m=m=>{let{selectedTemplate:v,closeDialog:h,showVariableMapping:C,channel:b,htmlContent:g,templateVariables:x,onTemplateSelect:f,globalPlaceholders:E,showOnlyContent:P,whatsappSpecificPickerMeta:S,zIndex:I,showVariableModal:T,variableList:y,discountCode:w,setDiscountCode:M,onBackPress:L,enabledCustomText:V,variableListForImage:j,showSampleValues:A,disableEditVariable:D,pod:k,extras:O,pickerConf:W,selectedCarouselProducts:F,disableEditExpiry:H,cardWidth:z,onDeleteSelectedProducts:B}=m;var R,U,$,_,N,q;t((()=>{Y(g)}),[g]);const G=b===s.WHATSAPP&&"CAROUSEL"===(null===(U=null===(R=null==v?void 0:v.components)||void 0===R?void 0:R[1])||void 0===U?void 0:U.type),J=null==v?void 0:v.isProductCarouselType,[K,Q]=r(b===s.EMAIL||G?"desktop":"mobile"),[X,Y]=r(g),[Z,ee]=r(!1),[le,oe]=r([]),[te,re]=r(v),[ie,ae]=r([]),[ne,se]=r(!1),[de,ce]=r(null!=x?x:[]),[ue,pe]=r(!1),[me,ve]=r(-1),[he,Ce]=r([]);t((()=>{F?Ce(F):J&&Ce([])}),[F]),t((()=>{var e;if(!ne&&J){const l=null===(e=null==te?void 0:te.components)||void 0===e?void 0:e[1].cards,o=[];null==l||l.forEach((e=>{var l;null===(l=null==e?void 0:e.components)||void 0===l||l.forEach((e=>{var l,t,r;"HEADER"===e.type&&o.push(null!==(r=null===(t=null===(l=e.example)||void 0===l?void 0:l.header_handle)||void 0===t?void 0:t[0])&&void 0!==r?r:"")}))})),ae(o),se(!0)}}),[ne]);const be=i((()=>p(E)),[E]);return e(d.Provider,Object.assign({value:{template:te,setTemplate:re,device:K,setDevice:Q,display_content:X,setDisplayContent:Y,originalVariableList:de,setOriginalVariableList:ce,isError:Z,setIsError:ee,channel:b,globalNormalizedPlaceholders:be,templateSelectionTriggered:ue,setTemplateSelectionTriggered:pe,enabledCustomText:V,disableEditVariable:D,pod:k,extras:O,isWhatsappCarousel:G,selectedCarouselIndex:me,setSelectedCarouselIndex:ve,isProductCarouselType:J,cardCount:G?null===(_=null===($=v.components)||void 0===$?void 0:$[1].cards)||void 0===_?void 0:_.length:void 0,errorIndexes:le,setErrorIndexes:oe,pickerConf:W,carouselProducts:he,setCarouselProducts:Ce,disableEditExpiry:H,cardWidth:z,cardImages:ie,onDeleteSelectedProducts:B}},{children:P?e(u,{channel:s.EMAIL,hideHeader:!0}):l(n,Object.assign({zIndex:I,centralContainerStyles:{width:G?900:b===s.EMAIL&&C?1e3:800},open:!0,onClose:()=>{null==h||h()},headingTitle:null==te?void 0:te.label,headingSubtitle:b===s.WHATSAPP?`${a.capitaliseFirstLetterOfString(null!==(N=null==te?void 0:te.category)&&void 0!==N?N:"")} • ${null!==(q=null==te?void 0:te.templateCategory)&&void 0!==q?q:""}`:"",onBackPress:()=>{null==L||L()}},{children:[e(u,{showSampleValues:A,showVariableMapping:C,channel:b,whatsappSpecificPickerMeta:S,showVariableModal:T,variableList:y,discountCode:w,setDiscountCode:M,variableListForImage:j&&(null==j?void 0:j.length)>0?j:y}),f?e(c,{isWhatsappCarousel:null!=G&&G,onSelect:function(){if((null==he?void 0:he.length)<1&&J)return void ee(!0);const e=null==f?void 0:f(te,de,null!=X?X:"",he);(null==e?void 0:e.errorIndexes)||(null==e?void 0:e.error)?((null==e?void 0:e.errorIndexes)&&oe(e.errorIndexes),(null==e?void 0:e.error)&&ee(!!(null==e?void 0:e.error))):pe(!0)}}):e(o,{})]}))}))};export{m as TemplateContextMapper};
|
|
1
|
+
import{jsx as e,jsxs as l,Fragment as o}from"react/jsx-runtime";import{useEffect as t,useState as r,useMemo as i}from"react";import a from"../../utils/StringUtils.js";import{StyledModal as n}from"../modals/styledModal.js";import{CHANNEL_TYPE as s}from"../template-preview/models/Channels.js";import{TemplateModalContext as d}from"./context/templateModalContext.js";import c from"./modalElements/Footer.js";import u from"./modalElements/TemplateSelectModalContent.js";import{convertPlaceholdersToBikDropdown as p}from"./utils/convertPlaceholdersToBikDropdown.js";const m=m=>{let{selectedTemplate:v,closeDialog:h,showVariableMapping:C,channel:b,htmlContent:g,templateVariables:x,onTemplateSelect:f,globalPlaceholders:E,showOnlyContent:P,whatsappSpecificPickerMeta:S,zIndex:I,showVariableModal:T,variableList:y,discountCode:w,setDiscountCode:M,onBackPress:L,enabledCustomText:V,variableListForImage:j,showSampleValues:A,disableEditVariable:D,pod:k,extras:O,pickerConf:W,selectedCarouselProducts:F,disableEditExpiry:H,cardWidth:z,onDeleteSelectedProducts:B}=m;var R,U,$,_,N,q;t((()=>{Y(g)}),[g]);const G=b===s.WHATSAPP&&"CAROUSEL"===(null===(U=null===(R=null==v?void 0:v.components)||void 0===R?void 0:R[1])||void 0===U?void 0:U.type),J=null==v?void 0:v.isProductCarouselType,[K,Q]=r(b===s.EMAIL||G?"desktop":"mobile"),[X,Y]=r(g),[Z,ee]=r(!1),[le,oe]=r([]),[te,re]=r(v),[ie,ae]=r([]),[ne,se]=r(!1),[de,ce]=r(null!=x?x:[]),[ue,pe]=r(!1),[me,ve]=r(-1),[he,Ce]=r([]);t((()=>{F?Ce(F):J&&Ce([])}),[F]),t((()=>{var e;if(!ne&&J&&(!F||0===Ce.length)){const l=null===(e=null==te?void 0:te.components)||void 0===e?void 0:e[1].cards,o=[];null==l||l.forEach((e=>{var l;null===(l=null==e?void 0:e.components)||void 0===l||l.forEach((e=>{var l,t,r;"HEADER"===e.type&&o.push(null!==(r=null===(t=null===(l=e.example)||void 0===l?void 0:l.header_handle)||void 0===t?void 0:t[0])&&void 0!==r?r:"")}))})),ae(o),se(!0)}}),[ne]);const be=i((()=>p(E)),[E]);return e(d.Provider,Object.assign({value:{template:te,setTemplate:re,device:K,setDevice:Q,display_content:X,setDisplayContent:Y,originalVariableList:de,setOriginalVariableList:ce,isError:Z,setIsError:ee,channel:b,globalNormalizedPlaceholders:be,templateSelectionTriggered:ue,setTemplateSelectionTriggered:pe,enabledCustomText:V,disableEditVariable:D,pod:k,extras:O,isWhatsappCarousel:G,selectedCarouselIndex:me,setSelectedCarouselIndex:ve,isProductCarouselType:J,cardCount:G?null===(_=null===($=v.components)||void 0===$?void 0:$[1].cards)||void 0===_?void 0:_.length:void 0,errorIndexes:le,setErrorIndexes:oe,pickerConf:W,carouselProducts:he,setCarouselProducts:Ce,disableEditExpiry:H,cardWidth:z,cardImages:ie,onDeleteSelectedProducts:B}},{children:P?e(u,{channel:s.EMAIL,hideHeader:!0}):l(n,Object.assign({zIndex:I,centralContainerStyles:{width:G?900:b===s.EMAIL&&C?1e3:800},open:!0,onClose:()=>{null==h||h()},headingTitle:null==te?void 0:te.label,headingSubtitle:b===s.WHATSAPP?`${a.capitaliseFirstLetterOfString(null!==(N=null==te?void 0:te.category)&&void 0!==N?N:"")} • ${null!==(q=null==te?void 0:te.templateCategory)&&void 0!==q?q:""}`:"",onBackPress:()=>{null==L||L()}},{children:[e(u,{showSampleValues:A,showVariableMapping:C,channel:b,whatsappSpecificPickerMeta:S,showVariableModal:T,variableList:y,discountCode:w,setDiscountCode:M,variableListForImage:j&&(null==j?void 0:j.length)>0?j:y}),f?e(c,{isWhatsappCarousel:null!=G&&G,onSelect:function(){if((null==he?void 0:he.length)<1&&J)return void ee(!0);const e=null==f?void 0:f(te,de,null!=X?X:"",he);(null==e?void 0:e.errorIndexes)||(null==e?void 0:e.error)?((null==e?void 0:e.errorIndexes)&&oe(e.errorIndexes),(null==e?void 0:e.error)&&ee(!!(null==e?void 0:e.error))):pe(!0)}}):e(o,{})]}))}))};export{m as TemplateContextMapper};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
const a=a=>{const{variableList:e,categoryDisplayName:i,variableDisplayName:r,variableValue:l}=a;return e?[...e,{description:
|
|
1
|
+
const a=a=>{const{variableList:e,categoryDisplayName:i,variableDisplayName:r,variableValue:l}=a;return e?[...e,{description:i,displayName:i,orderId:1,variables:{variableDisplayName:{description:void 0,displayName:r,actualValue:l,variableType:"any",isAvailable:!0}}}].sort(((a,e)=>a.orderId-e.orderId)):e};export{a as useAdditionalVariables};
|
|
@@ -1,17 +1,18 @@
|
|
|
1
|
-
import{jsxs as e,jsx as
|
|
1
|
+
import{jsxs as e,jsx as o,Fragment as t}from"react/jsx-runtime";import{useRef as a}from"react";import i from"styled-components";import{CarouselPreview as l}from"../../carousel-preview/CarouselPreview.js";import s from"./EditWhatsAppCarouselTemplateV2.js";import{CHANNEL_TYPE as n}from"../../template-preview/models/Channels.js";import{COLORS as r}from"../../../constants/Theme.js";import{useTemplateModalContext as p}from"../context/templateModalContext.js";import{getVariableNameForEmailByIndex as d}from"../utils/getVariableNameEmail.js";import{highlightFor as m}from"../utils/highlightFor.js";import c from"./DesktopPreview.js";import u from"./EditWhatsAppTemplateV2.js";import h from"./MobilePreview.js";import f from"./VariableConnectorsPanel.js";const v=i.div`
|
|
2
2
|
display: flex;
|
|
3
3
|
// height: 100%;
|
|
4
|
-
`,w=
|
|
4
|
+
`,w=i.div`
|
|
5
5
|
padding: 16px 14px;
|
|
6
6
|
max-width: 450px;
|
|
7
7
|
|
|
8
|
-
height: ${e=>e.channel===
|
|
8
|
+
height: ${e=>e.channel===n.WHATSAPP?"500px":"475px"};
|
|
9
9
|
overflow-y: auto;
|
|
10
10
|
padding-bottom: 24px;
|
|
11
11
|
border-left: ${r.stroke.primary} 1px solid;
|
|
12
|
-
|
|
12
|
+
border-top: ${e=>e.isWhatsappCarousel?`${r.stroke.primary} 1px solid`:void 0};
|
|
13
|
+
`,b=i.div`
|
|
13
14
|
padding: ${e=>e.isWhatsappCarousel?void 0:e.showOnlyContent?"16px 14px":"16px 32px"};
|
|
14
15
|
flex: 1;
|
|
15
16
|
height: ${e=>e.isWhatsappCarousel?"500px":"475px"};
|
|
16
17
|
overflow-y: auto;
|
|
17
|
-
`,
|
|
18
|
+
`,g=i=>{const{showVariableMapping:g,showOnlyContent:C,whatsappSpecificPickerMeta:x,showVariableModal:P,variableList:y,discountCode:W,setDiscountCode:j,variableListForImage:M,showSampleValues:V}=i,A=a(),S=a(),{device:T,display_content:k,channel:E,template:L,setTemplate:I,isWhatsappCarousel:_,isProductCarouselType:$}=p();const D=e=>{let o=0;for(;e;)o+=e.offsetTop,e=e.offsetParent;return o};return e(v,{children:[o(b,Object.assign({showOnlyContent:C,showVariableMapping:g,isWhatsappCarousel:_},{children:"mobile"===T?o(h,{ref:S,display_content:null!=k?k:"",channel:E,template:L,showSampleValues:V}):E===n.WHATSAPP&&_?o(l,{ref:A,channel:E,template:L,showSampleValues:V,isPreview:!1}):E!==n.MESSAGE?o(c,{ref:A,channel:E,display_content:null!=k?k:"",showSampleValues:V}):o(t,{})})),($||g)&&o(w,Object.assign({channel:E,isWhatsappCarousel:_},{children:E!==n.WHATSAPP?o(f,{onFocus:E===n.EMAIL?function(e){var o,t,a;const i=null===document||void 0===document?void 0:document.getElementById("mobile"===T?"template_html_mobile":"template_html_desktop"),l=d(e+1),s=E===n.EMAIL?null===(o=null==i?void 0:i.contentWindow)||void 0===o?void 0:o.document.getElementById(l):document.getElementById(l),p=D(s),c=null==s?void 0:s.offsetLeft;"desktop"===T?p&&A.current&&(null===(t=null==i?void 0:i.contentWindow)||void 0===t||t.scrollTo(null!=c?c:0,p),m(l,r.background.warning.light,2,E,T)):p&&S.current&&(null===(a=null==i?void 0:i.contentWindow)||void 0===a||a.scrollTo(null!=c?c:0,p),m(l,r.background.warning.light,2,E,T))}:void 0,showVariableModal:P,variableList:y,discountCode:W,setDiscountCode:j}):E===n.WHATSAPP&&_?o(s,{whatsappSpecificPickerMeta:x,template:L,showVariableModal:P,variableList:y,variableListForImage:M,discountCode:W,setDiscountCode:j}):o(u,{whatsappSpecificPickerMeta:x,template:L,onTemplateChange:e=>{null==I||I(e)},showVariableModal:P,variableList:y,variableListForImage:M,discountCode:W,setDiscountCode:j})}))]})};export{g as default};
|
|
@@ -4,7 +4,7 @@ import e from"styled-components";import{COLORS as r}from"../../../constants/Them
|
|
|
4
4
|
gap: 12px;
|
|
5
5
|
/* justify-content: center; */
|
|
6
6
|
flex: 1;
|
|
7
|
-
`,
|
|
7
|
+
`,o=e.div`
|
|
8
8
|
width: 56px;
|
|
9
9
|
height: 56px;
|
|
10
10
|
display: flex;
|
|
@@ -16,7 +16,7 @@ import e from"styled-components";import{COLORS as r}from"../../../constants/Them
|
|
|
16
16
|
border: 1px solid ${r.stroke.primary};
|
|
17
17
|
box-sizing: content-box;
|
|
18
18
|
cursor: ${e=>e.error?"pointer":"default"};
|
|
19
|
-
`,
|
|
19
|
+
`,i=e.div`
|
|
20
20
|
padding: 8px;
|
|
21
21
|
flex-direction: row;
|
|
22
22
|
display: flex;
|
|
@@ -28,4 +28,5 @@ import e from"styled-components";import{COLORS as r}from"../../../constants/Them
|
|
|
28
28
|
`,n=e.div`
|
|
29
29
|
padding-bottom: 0px;
|
|
30
30
|
min-width: 285px;
|
|
31
|
-
|
|
31
|
+
margin-bottom: 16px;
|
|
32
|
+
`;export{i as Container,n as EditTemplateMediaContainer,o as ImageContainer,t as RightComponent};
|
package/dist/esm/components/template-context-mapper/modalElements/EditWhatsAppCarouselTemplateV2.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsxs as e,jsx as t,Fragment as o}from"react/jsx-runtime";import i from"../../../assets/icons/PlusIcon.js";import{cloneDeep as l}from"lodash";import{useState as a,useEffect as
|
|
1
|
+
import{jsxs as e,jsx as t,Fragment as o}from"react/jsx-runtime";import i from"../../../assets/icons/arrow_back.svg.js";import r from"../../../assets/icons/PlusIcon.js";import{cloneDeep as l}from"lodash";import{useState as a,useEffect as n}from"react";import{AddVariableV2SideModal as s}from"../../add-variableV2/AddVariableV2SideModal.js";import"../../../_virtual/_tslib.js";import"../../add-variableV2/AddVariableV2.styled.js";import{Button as d}from"../../button/Button.js";import{IconButton as c}from"../../icon-button/IconButton.js";import"../../input/Input.js";import"../../tooltips/Tooltip.js";import{COLORS as m}from"../../../constants/Theme.js";import"../../modals/modal.styled.js";import"../../switch/Switch.js";import{TitleMedium as p,TitleRegular as u,BodySecondary as h,BodyCaption as g}from"../../TypographyStyle.js";import{ProductPickerModal as v,ScreenName as f}from"../../product-picker-v2/modal.js";import{Badge as y}from"../Badge/index.js";import{useTemplateModalContext as b}from"../context/templateModalContext.js";import j from"./EditWhatsAppTemplateV2.js";import{ProductBox as x}from"./ProductBox.js";import"../../template-preview/TemplatePreview.js";import"../../template-preview/WhatsApp/WhatsAppLikePreview.js";import"../../template-preview/WhatsApp/WhatsAppLikePreviewV2.js";import"../../curtain/CurtainHelper.js";import"../../template-preview/models/TemplateMeta.js";import{POD as C}from"../../template-preview/models/WhatsAppTemplate.js";const I=I=>{let{template:w,whatsappSpecificPickerMeta:O,showVariableModal:P,variableList:T,variableListForImage:k,discountCode:S,setDiscountCode:L}=I;var V,A;const{selectedCarouselIndex:B,setTemplate:E,pickerConf:M,isProductCarouselType:F,pod:W,cardCount:D,carouselProducts:q,setCarouselProducts:R,isError:_,cardImages:$,disableEditVariable:z,onDeleteSelectedProducts:N,setSelectedCarouselIndex:G}=b(),[H,J]=a(-1==B?"First Message (Step 1/2)":F?"Product Carousel (Step 2/2)":"Carousel Cards (Step 2/2)"),[K,Q]=a(!1),[U,X]=a(!1),[Y,Z]=a(!1);n((()=>{J(-1==B?"First Message (Step 1/2)":F?"Product Carousel (Step 2/2)":"Carousel Cards (Step 2/2)")}),[B]);return e("div",{children:[e("div",Object.assign({style:{display:"flex",flexDirection:"row",alignItems:"center",marginBottom:24}},{children:[null!=B&&B>=0&&t(c,{Icon:i,onClick:()=>{null==G||G(-1)}}),t(p,Object.assign({style:{marginLeft:10}},{children:H}))]})),F&&(null!==(V=null==q?void 0:q.length)&&void 0!==V?V:0)>0&&null!=B&&B>=0&&e("div",Object.assign({style:{display:"flex",rowGap:16,marginBottom:16,marginLeft:10,marginRight:10,flexDirection:"column"}},{children:[t(x,{editItem:()=>{1===(null==q?void 0:q.length)&&"variable"===q[0].name?Z(!0):Q(!K)},cardBody:1===(null==q?void 0:q.length)&&"variable"===q[0].name?`${q[0].productName}`:`${null==q?void 0:q.length} Products Selected`,hideIcon:1===(null==q?void 0:q.length)&&"variable"===q[0].name,deleteItem:()=>{var e;if(1===(null==q?void 0:q.length)&&"variable"===q[0].name)return void(null==R||R([]));const t=l(Object.assign({},w));t&&($&&$.length>0?null==$||$.forEach(((e,o)=>{var i;t.components[1].cards[o].components[0].example.header_handle=[null!==(i=$[o])&&void 0!==i?i:"https://res.cloudinary.com/drqhot9ot/image/upload/v1708753454/fake-product.png"]})):null===(e=null==t?void 0:t.components[1].cards)||void 0===e||e.forEach(((e,o)=>{t.components[1].cards[o].components[0].example.header_handle=["https://res.cloudinary.com/drqhot9ot/image/upload/v1708753454/fake-product.png"]})),null==E||E(t)),null==R||R([]),null==N||N()}}),q&&(null==q?void 0:q.length)>0&&"variable"!=q[0].name&&t(d,{disabled:(null!==(A=null==q?void 0:q.length)&&void 0!==A?A:0)<=1,style:{alignSelf:"flex-end"},onClick:()=>{X(!0),Q(!0)},buttonText:"Rearrange Products",buttonType:"tertiary"})]})),!z&&F&&0===(null==q?void 0:q.length)&&null!=B&&B>=0&&e(o,{children:[e("div",Object.assign({style:{marginLeft:12}},{children:[t(u,{children:"Product(s)"}),t(h,{children:`Select ${null!=D?D:1} products`})]})),e("div",Object.assign({style:{marginTop:16,marginBottom:16,marginLeft:_?16:12,marginRight:_?16:12,flexDirection:"column",display:"flex",alignItems:"center"}},{children:[t(d,{matchParentWidth:!0,style:{flex:1,display:"flex",width:"100%",marginBottom:12,border:_?`2px dashed ${m.content.negative}`:void 0},size:"medium",buttonText:"Add Product(s)",buttonType:_?"tertiaryGray":"dashBold",LeadingIcon:()=>t("div",Object.assign({style:{display:"flex",width:18,height:18}},{children:t(r,{width:18,height:18,color:m.content.secondary})})),onClick:e=>{Q(!0)}}),W===C.CHATBOT&&e(o,{children:[e("div",Object.assign({style:{display:"flex",flex:1,alignItems:"center",justifyContent:"space-between",flexDirection:"row",width:"100%"}},{children:[t("div",{style:{width:"100%",height:1,backgroundColor:"#E0E0E0",marginRight:8}}),t(g,Object.assign({style:{color:"#616161",overflow:"unset"}},{children:"OR"})),t("div",{style:{width:"100%",height:1,backgroundColor:"#E0E0E0",marginLeft:8}})]})),t(d,{matchParentWidth:!0,style:{flex:1,display:"flex",marginTop:12,width:"100%",border:_?`2px dashed ${m.content.negative}`:void 0},size:"medium",buttonText:"Add Product(s) Variable",buttonType:_?"tertiaryGray":"dashBold",LeadingIcon:()=>t("div",Object.assign({style:{display:"flex"}},{children:t(r,{width:18,height:18,color:m.content.secondary})})),onClick:e=>{Z(!0)}})]})]})),_&&t("div",Object.assign({style:{marginLeft:10,marginBottom:16}},{children:t(y,{padding:"8px",errorText:"Please add products"})}))]}),t(j,{whatsappSpecificPickerMeta:O,template:w,onTemplateChange:e=>{null==E||E(e)},showVariableModal:P,variableList:T,variableListForImage:k,discountCode:S,setDiscountCode:L}),K&&M&&t(v,{zIndex:200,startupScreen:U?f.RearrangeProducts:f.Collections,rearrangeEnabled:!0,storeId:M.storeId,selectedItems:(e=>{if(e.length>0){const t={};for(const o of e){const e=null==o?void 0:o.collectionId,i=o.productId,r=o.variantId;e in t||(t[e]={products:{},name:"",image:"",isSmartCollection:!1}),i in t[e].products||(t[e].products[i]={variants:{},name:(null==o?void 0:o.productName)||"",image:(null==o?void 0:o.productImage)||""}),t[e].products[i].variants[r]={name:(null==o?void 0:o.name)||"",price:"",image:(null==o?void 0:o.image)||"",quantity:o.quantity||0,displayOrder:o.displayOrder}}return t}return{}})(null!=q?q:[]),collectionFetcher:M.fetchCollections,productFetcher:M.fetchProducts,onAdd:(e,t)=>{var o;X(!1);const i=[];delete e.isCustom;for(const t of Object.keys(e)){const r=e[t].products;if(void 0!==r&&Object.keys(r).length)for(const e of Object.keys(r)){const l=r[e].variants;if(void 0!==l&&Object.keys(l).length)for(const a of Object.keys(l)){const{name:n,image:s,quantity:d,displayOrder:c}=l[a],m={name:n,image:null!==(o=null!=s?s:r[e].image)&&void 0!==o?o:"",quantity:d,variantId:a,productId:e,displayOrder:c,collectionId:t,productName:r[e].name,productImage:r[e].image};i.push(m)}}}const r=i.sort(((e,t)=>e.displayOrder-t.displayOrder)),a=i.map((e=>e.image)),n=l(Object.assign({},w));n&&(a.forEach(((e,t)=>{var o;n.components[1].cards[t].components[0].example.header_handle=e?[e]:[null!==(o=null==$?void 0:$[t])&&void 0!==o?o:""]})),null==E||E(n)),null==R||R(r),Q(!1)},searchInCollectionFetcher:M.searchInCollection,searchFetcher:M.searchProducts,visible:K,onClose:()=>{Q(!1)},exactLimit:null!=D?D:1}),Y&&t(s,{zIndex:2e3,data:null!=T?T:[],showVariable:Y,setShowVariable:Z,placeholder:"Add a variable",customTrigger:e=>{null==R||R([{name:"variable",productName:e.actualValue}])}})]})};export{I as default};
|
package/dist/esm/components/template-context-mapper/modalElements/EditWhatsAppTemplateMediaV2.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{__awaiter as e}from"../../../_virtual/_tslib.js";import{jsxs as
|
|
1
|
+
import{__awaiter as e}from"../../../_virtual/_tslib.js";import{jsxs as o,Fragment as i,jsx as n}from"react/jsx-runtime";import{cloneDeep as t}from"lodash";import l,{useState as a,useEffect as r}from"react";import{FileUploaderHelper as d}from"../../helpers/FileUploaderHelper.js";import{BikImageCropper as s}from"../../image-cropper/BikImageCropper.js";import"../../image-compress/ImageCompress.js";import"../../states/StateComponent.js";import"../../../constants/zindex.js";import"../../modals/styledModal.js";import"../../spinner/Spinner.js";import{HEADER_TYPES as p}from"../../template-preview/models/TemplateMeta.js";import{useTemplateModalContext as c}from"../context/templateModalContext.js";import m from"./EditMediaModal.js";import u from"./EditMediaV2.js";const v=e=>/^{{.*}}$/.test(e),f=f=>{let{mediaComponent:g,template:h,updateTemplateImageUrl:b,whatsappSpecificPickerMeta:j,variableListForImage:M}=f;var y,E,C,I,O,x,k,A;const{disableEditVariable:w,selectedCarouselIndex:T}=c(),[U,F]=a(void 0),[L,R]=a(),[_,D]=a(),[N,V]=a(!1),G=l.createRef(),[z,S]=a(!1),[B,H]=a(""),{template:P,setTemplate:W}=c(),{uploadMediaFiles:X,uploadMediaLink:$}=j;let q;function J(){var e;(null===(e=null==G?void 0:G.current)||void 0===e?void 0:e.click)&&G.current.click()}function K(o){var i;return e(this,void 0,void 0,(function*(){const e=new d;if(o instanceof Blob){const n=e.validate({file:o});if(n)H(n),S(!1);else{const e=g.format===p.IMAGE,n=yield X({file:o,fileName:U,isImage:e});if(n.success){const[e]=o.type.split("/");b(null!==(i=n.url)&&void 0!==i?i:"","application"===e?p.DOCUMENT:p[e.toUpperCase()])}else H("An unknown technical error occurred");S(!1)}}else H("An unknown technical error occurred"),S(!1)}))}return q=g.format===p.IMAGE?"image/png, image/jpeg":g.format===p.VIDEO?"video/mp4":"application/pdf",r((()=>{F(void 0),R(void 0),D(void 0),V(!1),S(!1),H("")}),[T]),o(i,{children:[n(m,{mediaComponentFormat:null!==(y=g.format)&&void 0!==y?y:p.IMAGE,uploadMedia:function(o){var i,n,l,a,r,s;return e(this,void 0,void 0,(function*(){if(H(""),D(""),V(!1),o)if(o.startsWith("https"))try{if(S(!0),$){const e=yield $(o),{type:n,size:t,success:l}=e;if(l){const o=(new d).validate({linkData:{type:n,size:t}});if(o)return H(o),void S(!1);const[l]=n.split("/");b(null!==(i=e.url)&&void 0!==i?i:"",p[l.toUpperCase()])}else H("An unknown technical error occurred");S(!1)}else{const e=yield fetch(o),i=yield e.blob();yield K(i)}}catch(e){H("An unknown technical error occurred")}else if(v(o)){let e;if(D(o),e=null!=T&&T>-1?{components:null===(l=null===(n=P.components[1])||void 0===n?void 0:n.cards)||void 0===l?void 0:l[T].components,mapping:null===(r=null===(a=null==P?void 0:P.mapping)||void 0===a?void 0:a.cards)||void 0===r?void 0:r[T]}:Object.assign({},P),e.components){const i=null===(s=null==e?void 0:e.components)||void 0===s?void 0:s.findIndex((e=>{if("HEADER"===e.type&&"NONE"!==e.format&&"TEXT"!==e.format)return!0}));if(void 0!==i&&i>-1&&(null==e?void 0:e.components[i])){const n=Object.assign(Object.assign({},e.components[i]),{format:g.format,example:{header_handle:[o]}}),t=[...e.components];t[i]=n,e.components=t}}if(e.mapping&&(e.mapping=Object.assign(Object.assign({},e.mapping),{header:[o]})),S(!1),null!=T&&T>-1){const o=t(P);o.components[1].cards[T].components=e.components,o.mapping.cards[T]=e.mapping,null==W||W(Object.assign({},o))}else null==W||W(Object.assign({},e))}else S(!1),H("Invalid URL or variable");else J()}))},variableListForImage:M||[],setOpenEditMedia:V,openEditMedia:N}),!!L&&n(s,{aspectRatio:15/8,src:L,onCropComplete:function(o){return e(this,void 0,void 0,(function*(){S(!1),H("");const e=yield fetch(o);K(yield e.blob()).then((()=>{R(void 0)}))}))},onCancel:()=>{S(!1),R(""),G.current&&(G.current.value="")}}),n("input",{ref:G,style:{display:"none"},type:"file",onChange:function(e){var o;H(""),S(!0);const i=null===(o=e.target.files)||void 0===o?void 0:o[0];if(g.format===p.IMAGE){const e=new FileReader;R(""),F(""),e.onload=()=>{R(e.result),F(null==i?void 0:i.name)},i&&e.readAsDataURL(i)}else K(i)},accept:q}),n(u,{imageName:null!==(C=null===(E=null==g?void 0:g.example)||void 0===E?void 0:E.header_handle)&&void 0!==C?C:[],handleImageChange:J,mediaType:null==g?void 0:g.format,error:B,isLoading:z,setOpenEditMedia:V,selectedVariable:v(null!==(x=null===(O=null===(I=null==g?void 0:g.example)||void 0===I?void 0:I.header_handle)||void 0===O?void 0:O[0])&&void 0!==x?x:"")?null===(A=null===(k=null==g?void 0:g.example)||void 0===k?void 0:k.header_handle)||void 0===A?void 0:A[0]:_,disableEditVariable:w})]})};export{f as default};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsxs as o,jsx as n}from"react/jsx-runtime";import{cloneDeep as t}from"lodash";import{useState as e,useEffect as i}from"react";import{POD as l}from"../../template-preview/models/WhatsAppTemplate.js";import{useTemplateModalContext as s}from"../context/templateModalContext.js";import{useAdditionalVariables as a}from"../custom-hooks/useAdditionalVariables.js";import{getAllDataFromTemplateComponent as d}from"../utils/getDataFromTemplateComponent.js";import{BackTrackComponent as r}from"./BackTrackComponent.js";import{DiscountCodeComponent as c}from"./DiscountCodeComponent.js";import{EditTemplateMediaContainer as p}from"./EditMediaV2.style.js";import u from"./EditWhatsAppTemplateMediaV2.js";import m from"./VariableConnector.js";import{Container as v}from"./VariableConnectorsPanel.js";import b from"./VariableConnectorWhatsApp.js";import g from"./VariableEditorHeader.js";import f from"./WhatsAppTemplateCardButtonV2.js";const h=h=>{let{template:j,onTemplateChange:O,whatsappSpecificPickerMeta:C,showVariableModal:T,variableList:y,variableListForImage:x,discountCode:V,setDiscountCode:B}=h;var E,L,k,U,I,w,R,A,N,P,M,S,_,H,Q,D,q,Y,K,W,$;const F=j.isCarouselType,{originalVariableList:X,pod:z,extras:G,selectedCarouselIndex:J,isProductCarouselType:Z}=s(),{descriptionComponents:oo,urlBtns:no,qrbBtns:to,imageComponent:eo,bodyVariables:io,headerVariables:lo}=d(j),[so,ao]=e(!1),[ro,co]=e(-1===J?{descriptionComponents:oo,urlBtns:no,qrbBtns:to,imageComponent:eo,bodyVariables:io,headerVariables:lo}:{}),[po,uo]=e(!1);function mo(o,n,e){var i,l,s,a,d,r,c,p,u,m;const v=null!=J&&J>-1?{components:null===(i=Object.assign({},j).components[1].cards)||void 0===i?void 0:i[J].components,mapping:null===(l=Object.assign({},j).mapping.cards)||void 0===l?void 0:l[J]}:Object.assign({},j),b=t(v),g="custom"===n&&"string"==typeof o,f=g?o:"string"!=typeof o?o.defaultValue:"";if(null!=J&&J>-1&&Z){const n=Object.assign({},j).components.map((o=>{var n;return"CAROUSEL"===o.type?Object.assign(Object.assign({},o),{cards:null===(n=o.cards)||void 0===n?void 0:n.map((o=>Object.assign(Object.assign({},o),{components:o.components.map((o=>{var n,t,i;if("BUTTONS"===o.type){const l=null===(n=o.buttons)||void 0===n?void 0:n.filter((o=>"URL"===o.type));let s=null!==(t=null==l?void 0:l[e])&&void 0!==t?t:{};s=Object.assign(Object.assign({},s),{url:"https://d.bik.ai/{{1}}",example:[f]});const a=null===(i=o.buttons)||void 0===i?void 0:i.map((o=>"URL"===o.type&&(null==o?void 0:o.text)===(null==s?void 0:s.text)?s:o));return Object.assign(Object.assign({},o),{buttons:a})}return o}))})))}):o})),i=null===(a=null===(s=Object.assign({},j).mapping)||void 0===s?void 0:s.cards)||void 0===a?void 0:a.map((n=>{var t;return Object.assign(Object.assign({},n),{buttons:null===(t=null==n?void 0:n.buttons)||void 0===t?void 0:t.map((n=>g?"((customBtnPlaceholder))":"string"!=typeof o?o.placeHolder:""))})})),l=t(j);return l.components=n,l.mapping.cards=i,void(null==O||O(Object.assign({},l)))}const h=null==b?void 0:b.components.findIndex((o=>"BUTTONS"===o.type));if(void 0!==h&&h>-1){const t=null===(d=null==b?void 0:b.components[h].buttons)||void 0===d?void 0:d.filter((o=>"URL"===o.type));if((null==t?void 0:t.length)>0){const i="custom"===n&&"string"==typeof o,l=i?o:"string"!=typeof o?o.defaultValue:"";let s=t[e];s=Object.assign(Object.assign({},s),{url:"https://d.bik.ai/{{1}}",example:[l]});const a=[...null!==(p=null===(c=null===(r=b.components)||void 0===r?void 0:r[h])||void 0===c?void 0:c.buttons)&&void 0!==p?p:[]].map((o=>"URL"===o.type&&(null==o?void 0:o.text)===(null==s?void 0:s.text)?s:o)),d=Object.assign(Object.assign({},b.components[h]),{buttons:a}),m=null===(u=b.mapping)||void 0===u?void 0:u.buttons;m&&m.length>0&&(m[e]=i?"((customBtnPlaceholder))":"string"!=typeof o?o.placeHolder:"");const v=Object.assign(Object.assign({},b.mapping),{buttons:m});b.mapping=v;const g=[...b.components];g[h]=d,b.components=g}}if("string"!=typeof o){"checkout.checkoutUrl"===(null===(m=o.placeHolder)||void 0===m?void 0:m.slice(2,-2))?ao(!0):(ao(!1),null==B||B(""))}if(null!=J&&J>-1){const o=t(j);o.components[1].cards[J].components=b.components,o.mapping.cards[J]=b.mapping,null==O||O(Object.assign({},o))}else null==O||O(b)}function vo(o,n,e){var i,l,s,a,d,r;const c=null!=J&&J>-1?{components:null===(i=Object.assign({},j).components[1].cards)||void 0===i?void 0:i[J].components,mapping:null===(l=Object.assign({},j).mapping.cards)||void 0===l?void 0:l[J]}:Object.assign({},j);if(null!=J&&J>-1&&Z){const n=Object.assign({},j).components.map((n=>{var t;return"CAROUSEL"===n.type?Object.assign(Object.assign({},n),{cards:null===(t=n.cards)||void 0===t?void 0:t.map((n=>Object.assign(Object.assign({},n),{components:n.components.map((n=>{var t,i,l;if("BUTTONS"===n.type){const s=null===(t=n.buttons)||void 0===t?void 0:t.filter((o=>"QUICK_REPLY"===o.type));let a=null!==(i=null==s?void 0:s[e])&&void 0!==i?i:{};a=Object.assign(Object.assign({},a),{flowId:o.flowId,flowName:o.flowName});const d=null===(l=n.buttons)||void 0===l?void 0:l.map((o=>"QUICK_REPLY"===o.type&&(null==o?void 0:o.text)===(null==a?void 0:a.text)?a:o));return Object.assign(Object.assign({},n),{buttons:d})}return n}))})))}):n})),i=t(j);return i.components=n,void(null==O||O(Object.assign({},i)))}const p=null==c?void 0:c.components.findIndex((o=>"BUTTONS"===o.type));if(void 0!==p&&p>-1){const n=null===(s=null==c?void 0:c.components[p].buttons)||void 0===s?void 0:s.filter((o=>"QUICK_REPLY"===o.type));if(n){let t=n[e];t=Object.assign(Object.assign({},t),{flowId:o.flowId,flowName:o.flowName});const i=[...null!==(r=null===(d=null===(a=c.components)||void 0===a?void 0:a[p])||void 0===d?void 0:d.buttons)&&void 0!==r?r:[]].map((o=>"QUICK_REPLY"===o.type&&(null==o?void 0:o.text)===(null==t?void 0:t.text)?t:o)),l=Object.assign(Object.assign({},c.components[p]),{buttons:i}),s=[...c.components];s[p]=l,c.components=s}}if(null!=J&&J>-1){const o=t(j);o.components[1].cards[J].components=c.components,null==O||O(Object.assign({},o))}else null==O||O(c)}i((()=>{var o,n;if(null===(o=j.mapping.buttons)||void 0===o?void 0:o.find((o=>"checkout.checkoutUrl"===o.slice(2,-2))))ao(!0);else{ao(!1);const o=null===(n=null==G?void 0:G.discountCodeExtra)||void 0===n?void 0:n[1];null==o||o("")}}),[j]),i((()=>{var o,n,t,e;if(null!=J&&J>-1){const i={components:null===(n=null===(o=j.components[1])||void 0===o?void 0:o.cards)||void 0===n?void 0:n[J].components,mapping:null===(e=null===(t=null==j?void 0:j.mapping)||void 0===t?void 0:t.cards)||void 0===e?void 0:e[J]},{descriptionComponents:l,urlBtns:s,qrbBtns:a,imageComponent:r,bodyVariables:c,headerVariables:p}=d(i);co({descriptionComponents:l,urlBtns:s,qrbBtns:a,imageComponent:r,bodyVariables:c,headerVariables:p})}else if(null!=J&&-1===J){const{descriptionComponents:o,urlBtns:n,qrbBtns:t,imageComponent:e,bodyVariables:i,headerVariables:l}=d(j);co({descriptionComponents:o,urlBtns:n,qrbBtns:t,imageComponent:e,bodyVariables:i,headerVariables:l})}}),[J]),i((()=>{var o,n,t,e;if(null!=J&&J>-1&&po){const i={components:null===(n=null===(o=j.components[1])||void 0===o?void 0:o.cards)||void 0===n?void 0:n[J].components,mapping:null===(e=null===(t=null==j?void 0:j.mapping)||void 0===t?void 0:t.cards)||void 0===e?void 0:e[J]},{descriptionComponents:l,urlBtns:s,qrbBtns:a,imageComponent:r,bodyVariables:c,headerVariables:p}=d(i);co({descriptionComponents:l,urlBtns:s,qrbBtns:a,imageComponent:r,bodyVariables:c,headerVariables:p}),uo(!1)}}),[po]);const bo=a({variableList:y,categoryDisplayName:"Custom Variables",variableDisplayName:"Custom Text",variableValue:"{{custom.text}}"});return o(v,Object.assign({style:{flexDirection:"column",width:400,maxHeight:460}},{children:[!!ro.imageComponent&&!Z&&n(p,{children:n(u,{whatsappSpecificPickerMeta:C,mediaComponent:F?ro.imageComponent:eo,updateTemplateImageUrl:function(o,n){var e,i,l,s,a;let d;d=null!=J&&J>-1?{components:null===(i=null===(e=j.components[1])||void 0===e?void 0:e.cards)||void 0===i?void 0:i[J].components,mapping:null===(s=null===(l=null==j?void 0:j.mapping)||void 0===l?void 0:l.cards)||void 0===s?void 0:s[J]}:Object.assign({},j);const r=null===(a=null==d?void 0:d.components)||void 0===a?void 0:a.findIndex((o=>{if("HEADER"===o.type&&"NONE"!==o.format&&"TEXT"!==o.format)return!0}));if(void 0!==r&&r>-1&&(null==d?void 0:d.components[r])){const t=Object.assign(Object.assign({},d.components[r]),{format:n,example:{header_handle:[o]}}),e=[...d.components];e[r]=t,d=Object.assign(Object.assign({},d),{components:e})}if(d.mapping&&(d.mapping=Object.assign(Object.assign({},d.mapping),{header:void 0})),null!=J&&J>-1){const o=t(j);o.components[1].cards[J].components=d.components,o.mapping.cards[J]=d.mapping,null==O||O(Object.assign({},o)),uo(!0)}else null==O||O(Object.assign({},d))},template:j,variableListForImage:x})}),(ro.bodyVariables.length>0||ro.headerVariables.length>0)&&n(g,{containerStyle:{paddingTop:ro.mediaComponent?24:8},headerText:"Edit variable values",subText:"Edit values for the variables used in template",toolTipInfo:"Variables are placeholder texts which can either be filled through data or custom texts. These can be edited through the dropdowns below"}),null===(E=ro.descriptionComponents)||void 0===E?void 0:E.map(((o,t)=>n(b,{originalVariableList:null!=J&&J>-1?X.cards[J]:X,type:o.type,descriptionComponent:o.component,showVariableModal:T,variableList:y},t))),(null===(k=null===(L=null!=J&&J>-1?X.cards[J].buttons:null==X?void 0:X.buttons)||void 0===L?void 0:L.filter((o=>"URL"===o.type)))||void 0===k?void 0:k.length)>0&&n(g,{headerText:"Edit buttons",subText:"Edit the link connected to the CTA button"}),null===(I=null===(U=null!=J&&J>-1?X.cards[J].buttons:null==X?void 0:X.buttons)||void 0===U?void 0:U.filter((o=>z===l.CHATBOT||"URL"===o.type)))||void 0===I?void 0:I.map(((o,t)=>{if("URL"===o.type)return n(f,{variableListIndex:t,CTAoptions:null==C?void 0:C.CTAoptions,button:o,currentVariableList:null!=J&&J>-1?Object.assign({},X.cards[J]):Object.assign({},X),updateSelectedURLTemplateBtn:mo,variableList:y},`${t}_${J}`)})),z===l.CHATBOT&&(null===(R=null===(w=to[0])||void 0===w?void 0:w.component)||void 0===R?void 0:R.buttons)&&(null===(P=null===(N=null===(A=to[0])||void 0===A?void 0:A.component)||void 0===N?void 0:N.buttons)||void 0===P?void 0:P.length)>0&&n(r,{backTrackMessage:null===(M=null==G?void 0:G.backTrackExtra)||void 0===M?void 0:M[0],setBackTrackMessage:null===(S=null==G?void 0:G.backTrackExtra)||void 0===S?void 0:S[1]}),(null===(H=null===(_=null!=J&&J>-1?X.cards[J].buttons:null==X?void 0:X.buttons)||void 0===_?void 0:_.filter((o=>"QUICK_REPLY"===o.type)))||void 0===H?void 0:H.length)>0&&(z!==l.CHATBOT?n(g,{headerText:"Edit buttons",subText:"Edit the chatflows triggered on clicking the buttons",toolTipInfo:"There is an option to trigger chatflows through the buttons which can keep the user engaged"}):n(r,{backTrackMessage:null===(Q=null==G?void 0:G.backTrackExtra)||void 0===Q?void 0:Q[0],setBackTrackMessage:null===(D=null==G?void 0:G.backTrackExtra)||void 0===D?void 0:D[1]})),null===(Y=null===(q=null!=J&&J>-1?X.cards[J].buttons:null==X?void 0:X.buttons)||void 0===q?void 0:q.filter((o=>"QUICK_REPLY"===o.type)))||void 0===Y?void 0:Y.map(((o,t)=>{if("QUICK_REPLY"===o.type)return n(f,{variableListIndex:t,QRBoptions:null==C?void 0:C.QRBoptions,button:o,currentVariableList:null!=J&&J>-1?Object.assign({},X.cards[J]):Object.assign({},X),updateSelectedQRBTemplateBtn:vo},`${t}_${J}`)})),z===l.CHATBOT&&so&&n(c,{discountCode:null===(K=null==G?void 0:G.discountCodeExtra)||void 0===K?void 0:K[0],setDiscountCode:null===(W=null==G?void 0:G.discountCodeExtra)||void 0===W?void 0:W[1],variableList:y}),null===($=null!=J&&J>-1?X.cards[J].buttons:null==X?void 0:X.buttons)||void 0===$?void 0:$.map(((o,t)=>{var e,i,l;if("COPY_CODE"===o.type)return n(m,{index:t,variable:{variableName:null!==(e=o.text)&&void 0!==e?e:"Copy Code",updatedValue:null!==(i=o.buttonVariable)&&void 0!==i?i:"",type:"string",isEditableVariable:!0,index:null!==(l=o.index)&&void 0!==l?l:0},showVariableModal:!0,variableList:bo,componentType:"BUTTONS"},t)}))]}))};export{h as default};
|
|
1
|
+
import{jsxs as n,jsx as o}from"react/jsx-runtime";import{cloneDeep as t}from"lodash";import{useState as e,useEffect as i}from"react";import{POD as l}from"../../template-preview/models/WhatsAppTemplate.js";import{useTemplateModalContext as s}from"../context/templateModalContext.js";import{getAllDataFromTemplateComponent as a}from"../utils/getDataFromTemplateComponent.js";import{BackTrackComponent as d}from"./BackTrackComponent.js";import{DiscountCodeComponent as r}from"./DiscountCodeComponent.js";import{EditTemplateMediaContainer as c}from"./EditMediaV2.style.js";import p from"./EditWhatsAppTemplateMediaV2.js";import u from"./VariableConnector.js";import{Container as m}from"./VariableConnectorsPanel.js";import v from"./VariableConnectorWhatsApp.js";import b from"./VariableEditorHeader.js";import g from"./WhatsAppTemplateCardButtonV2.js";const f=f=>{let{template:O,onTemplateChange:j,whatsappSpecificPickerMeta:h,showVariableModal:C,variableList:T,variableListForImage:y,discountCode:x,setDiscountCode:B}=f;var V,E,L,k,U,I,w,R,A,P,M,N,S,H,_,Q,q,Y,D,K,W;const $=O.isCarouselType,{originalVariableList:F,pod:X,extras:z,selectedCarouselIndex:G,isProductCarouselType:J}=s(),{descriptionComponents:Z,urlBtns:nn,qrbBtns:on,imageComponent:tn,bodyVariables:en,headerVariables:ln}=a(O),[sn,an]=e(!1),[dn,rn]=e(-1===G?{descriptionComponents:Z,urlBtns:nn,qrbBtns:on,imageComponent:tn,bodyVariables:en,headerVariables:ln}:{}),[cn,pn]=e(!1);function un(n,o,e){var i,l,s,a,d,r,c,p,u,m;const v=null!=G&&G>-1?{components:null===(i=Object.assign({},O).components[1].cards)||void 0===i?void 0:i[G].components,mapping:null===(l=Object.assign({},O).mapping.cards)||void 0===l?void 0:l[G]}:Object.assign({},O),b=t(v),g="custom"===o&&"string"==typeof n,f=g?n:"string"!=typeof n?n.defaultValue:"";if(null!=G&&G>-1&&J){const o=Object.assign({},O).components.map((n=>{var o;return"CAROUSEL"===n.type?Object.assign(Object.assign({},n),{cards:null===(o=n.cards)||void 0===o?void 0:o.map((n=>Object.assign(Object.assign({},n),{components:n.components.map((n=>{var o,t,i;if("BUTTONS"===n.type){const l=null===(o=n.buttons)||void 0===o?void 0:o.filter((n=>"URL"===n.type));let s=null!==(t=null==l?void 0:l[e])&&void 0!==t?t:{};s=Object.assign(Object.assign({},s),{url:"https://d.bik.ai/{{1}}",example:[f]});const a=null===(i=n.buttons)||void 0===i?void 0:i.map((n=>"URL"===n.type&&(null==n?void 0:n.text)===(null==s?void 0:s.text)?s:n));return Object.assign(Object.assign({},n),{buttons:a})}return n}))})))}):n})),i=null===(a=null===(s=Object.assign({},O).mapping)||void 0===s?void 0:s.cards)||void 0===a?void 0:a.map((o=>{var t;return Object.assign(Object.assign({},o),{buttons:null===(t=null==o?void 0:o.buttons)||void 0===t?void 0:t.map((o=>g?"((customBtnPlaceholder))":"string"!=typeof n?n.placeHolder:""))})})),l=t(O);return l.components=o,l.mapping.cards=i,void(null==j||j(Object.assign({},l)))}const h=null==b?void 0:b.components.findIndex((n=>"BUTTONS"===n.type));if(void 0!==h&&h>-1){const t=null===(d=null==b?void 0:b.components[h].buttons)||void 0===d?void 0:d.filter((n=>"URL"===n.type));if((null==t?void 0:t.length)>0){const i="custom"===o&&"string"==typeof n,l=i?n:"string"!=typeof n?n.defaultValue:"";let s=t[e];s=Object.assign(Object.assign({},s),{url:"https://d.bik.ai/{{1}}",example:[l]});const a=[...null!==(p=null===(c=null===(r=b.components)||void 0===r?void 0:r[h])||void 0===c?void 0:c.buttons)&&void 0!==p?p:[]].map((n=>"URL"===n.type&&(null==n?void 0:n.text)===(null==s?void 0:s.text)?s:n)),d=Object.assign(Object.assign({},b.components[h]),{buttons:a}),m=null===(u=b.mapping)||void 0===u?void 0:u.buttons;m&&m.length>0&&(m[e]=i?"((customBtnPlaceholder))":"string"!=typeof n?n.placeHolder:"");const v=Object.assign(Object.assign({},b.mapping),{buttons:m});b.mapping=v;const g=[...b.components];g[h]=d,b.components=g}}if("string"!=typeof n){"checkout.checkoutUrl"===(null===(m=n.placeHolder)||void 0===m?void 0:m.slice(2,-2))?an(!0):(an(!1),null==B||B(""))}if(null!=G&&G>-1){const n=t(O);n.components[1].cards[G].components=b.components,n.mapping.cards[G]=b.mapping,null==j||j(Object.assign({},n))}else null==j||j(b)}function mn(n,o,e){var i,l,s,a,d,r;const c=null!=G&&G>-1?{components:null===(i=Object.assign({},O).components[1].cards)||void 0===i?void 0:i[G].components,mapping:null===(l=Object.assign({},O).mapping.cards)||void 0===l?void 0:l[G]}:Object.assign({},O);if(null!=G&&G>-1&&J){const o=Object.assign({},O).components.map((o=>{var t;return"CAROUSEL"===o.type?Object.assign(Object.assign({},o),{cards:null===(t=o.cards)||void 0===t?void 0:t.map((o=>Object.assign(Object.assign({},o),{components:o.components.map((o=>{var t,i,l;if("BUTTONS"===o.type){const s=null===(t=o.buttons)||void 0===t?void 0:t.filter((n=>"QUICK_REPLY"===n.type));let a=null!==(i=null==s?void 0:s[e])&&void 0!==i?i:{};a=Object.assign(Object.assign({},a),{flowId:n.flowId,flowName:n.flowName});const d=null===(l=o.buttons)||void 0===l?void 0:l.map((n=>"QUICK_REPLY"===n.type&&(null==n?void 0:n.text)===(null==a?void 0:a.text)?a:n));return Object.assign(Object.assign({},o),{buttons:d})}return o}))})))}):o})),i=t(O);return i.components=o,void(null==j||j(Object.assign({},i)))}const p=null==c?void 0:c.components.findIndex((n=>"BUTTONS"===n.type));if(void 0!==p&&p>-1){const o=null===(s=null==c?void 0:c.components[p].buttons)||void 0===s?void 0:s.filter((n=>"QUICK_REPLY"===n.type));if(o){let t=o[e];t=Object.assign(Object.assign({},t),{flowId:n.flowId,flowName:n.flowName});const i=[...null!==(r=null===(d=null===(a=c.components)||void 0===a?void 0:a[p])||void 0===d?void 0:d.buttons)&&void 0!==r?r:[]].map((n=>"QUICK_REPLY"===n.type&&(null==n?void 0:n.text)===(null==t?void 0:t.text)?t:n)),l=Object.assign(Object.assign({},c.components[p]),{buttons:i}),s=[...c.components];s[p]=l,c.components=s}}if(null!=G&&G>-1){const n=t(O);n.components[1].cards[G].components=c.components,null==j||j(Object.assign({},n))}else null==j||j(c)}return i((()=>{var n,o;if(null===(n=O.mapping.buttons)||void 0===n?void 0:n.find((n=>"checkout.checkoutUrl"===n.slice(2,-2))))an(!0);else{an(!1);const n=null===(o=null==z?void 0:z.discountCodeExtra)||void 0===o?void 0:o[1];null==n||n("")}}),[O]),i((()=>{var n,o,t,e;if(null!=G&&G>-1){const i={components:null===(o=null===(n=O.components[1])||void 0===n?void 0:n.cards)||void 0===o?void 0:o[G].components,mapping:null===(e=null===(t=null==O?void 0:O.mapping)||void 0===t?void 0:t.cards)||void 0===e?void 0:e[G]},{descriptionComponents:l,urlBtns:s,qrbBtns:d,imageComponent:r,bodyVariables:c,headerVariables:p}=a(i);rn({descriptionComponents:l,urlBtns:s,qrbBtns:d,imageComponent:r,bodyVariables:c,headerVariables:p})}else if(null!=G&&-1===G){const{descriptionComponents:n,urlBtns:o,qrbBtns:t,imageComponent:e,bodyVariables:i,headerVariables:l}=a(O);rn({descriptionComponents:n,urlBtns:o,qrbBtns:t,imageComponent:e,bodyVariables:i,headerVariables:l})}}),[G]),i((()=>{var n,o,t,e;if(null!=G&&G>-1&&cn){const i={components:null===(o=null===(n=O.components[1])||void 0===n?void 0:n.cards)||void 0===o?void 0:o[G].components,mapping:null===(e=null===(t=null==O?void 0:O.mapping)||void 0===t?void 0:t.cards)||void 0===e?void 0:e[G]},{descriptionComponents:l,urlBtns:s,qrbBtns:d,imageComponent:r,bodyVariables:c,headerVariables:p}=a(i);rn({descriptionComponents:l,urlBtns:s,qrbBtns:d,imageComponent:r,bodyVariables:c,headerVariables:p}),pn(!1)}}),[cn]),n(m,Object.assign({style:{flexDirection:"column",width:400,maxHeight:460}},{children:[!!dn.imageComponent&&!J&&o(c,{children:o(p,{whatsappSpecificPickerMeta:h,mediaComponent:$?dn.imageComponent:tn,updateTemplateImageUrl:function(n,o){var e,i,l,s,a;let d;d=null!=G&&G>-1?{components:null===(i=null===(e=O.components[1])||void 0===e?void 0:e.cards)||void 0===i?void 0:i[G].components,mapping:null===(s=null===(l=null==O?void 0:O.mapping)||void 0===l?void 0:l.cards)||void 0===s?void 0:s[G]}:Object.assign({},O);const r=null===(a=null==d?void 0:d.components)||void 0===a?void 0:a.findIndex((n=>{if("HEADER"===n.type&&"NONE"!==n.format&&"TEXT"!==n.format)return!0}));if(void 0!==r&&r>-1&&(null==d?void 0:d.components[r])){const t=Object.assign(Object.assign({},d.components[r]),{format:o,example:{header_handle:[n]}}),e=[...d.components];e[r]=t,d=Object.assign(Object.assign({},d),{components:e})}if(d.mapping&&(d.mapping=Object.assign(Object.assign({},d.mapping),{header:void 0})),null!=G&&G>-1){const n=t(O);n.components[1].cards[G].components=d.components,n.mapping.cards[G]=d.mapping,null==j||j(Object.assign({},n)),pn(!0)}else null==j||j(Object.assign({},d))},template:O,variableListForImage:y})}),dn.bodyVariables.length>0&&o(b,{containerStyle:{paddingTop:dn.mediaComponent?24:8},headerText:"Edit variable values",subText:"Edit values for the variables used in template",toolTipInfo:"Variables are placeholder texts which can either be filled through data or custom texts. These can be edited through the dropdowns below"}),null===(V=dn.descriptionComponents)||void 0===V?void 0:V.map(((n,t)=>o(v,{originalVariableList:null!=G&&G>-1?F.cards[G]:F,type:n.type,descriptionComponent:n.component,showVariableModal:C,variableList:T},t))),(null===(L=null===(E=null!=G&&G>-1?F.cards[G].buttons:null==F?void 0:F.buttons)||void 0===E?void 0:E.filter((n=>"URL"===n.type)))||void 0===L?void 0:L.length)>0&&o(b,{headerText:"Edit buttons",subText:"Edit the link connected to the CTA button"}),null===(U=null===(k=null!=G&&G>-1?F.cards[G].buttons:null==F?void 0:F.buttons)||void 0===k?void 0:k.filter((n=>X===l.CHATBOT||"URL"===n.type)))||void 0===U?void 0:U.map(((n,t)=>{if("URL"===n.type)return o(g,{variableListIndex:t,CTAoptions:null==h?void 0:h.CTAoptions,button:n,currentVariableList:null!=G&&G>-1?Object.assign({},F.cards[G]):Object.assign({},F),updateSelectedURLTemplateBtn:un,variableList:T},`${t}_${G}`)})),X===l.CHATBOT&&(null===(w=null===(I=on[0])||void 0===I?void 0:I.component)||void 0===w?void 0:w.buttons)&&(null===(P=null===(A=null===(R=on[0])||void 0===R?void 0:R.component)||void 0===A?void 0:A.buttons)||void 0===P?void 0:P.length)>0&&o(d,{backTrackMessage:null===(M=null==z?void 0:z.backTrackExtra)||void 0===M?void 0:M[0],setBackTrackMessage:null===(N=null==z?void 0:z.backTrackExtra)||void 0===N?void 0:N[1]}),(null===(H=null===(S=null!=G&&G>-1?F.cards[G].buttons:null==F?void 0:F.buttons)||void 0===S?void 0:S.filter((n=>"QUICK_REPLY"===n.type)))||void 0===H?void 0:H.length)>0&&(X!==l.CHATBOT?o(b,{headerText:"Edit buttons",subText:"Edit the chatflows triggered on clicking the buttons",toolTipInfo:"There is an option to trigger chatflows through the buttons which can keep the user engaged"}):o(d,{backTrackMessage:null===(_=null==z?void 0:z.backTrackExtra)||void 0===_?void 0:_[0],setBackTrackMessage:null===(Q=null==z?void 0:z.backTrackExtra)||void 0===Q?void 0:Q[1]})),null===(Y=null===(q=null!=G&&G>-1?F.cards[G].buttons:null==F?void 0:F.buttons)||void 0===q?void 0:q.filter((n=>"QUICK_REPLY"===n.type)))||void 0===Y?void 0:Y.map(((n,t)=>{if("QUICK_REPLY"===n.type&&X!==l.CHATBOT)return o(g,{variableListIndex:t,QRBoptions:null==h?void 0:h.QRBoptions,button:n,currentVariableList:null!=G&&G>-1?Object.assign({},F.cards[G]):Object.assign({},F),updateSelectedQRBTemplateBtn:mn},`${t}_${G}`)})),X===l.CHATBOT&&sn&&o(r,{discountCode:null===(D=null==z?void 0:z.discountCodeExtra)||void 0===D?void 0:D[0],setDiscountCode:null===(K=null==z?void 0:z.discountCodeExtra)||void 0===K?void 0:K[1],variableList:T}),null===(W=null!=G&&G>-1?F.cards[G].buttons:null==F?void 0:F.buttons)||void 0===W?void 0:W.map(((n,t)=>{var e,i,l;if("COPY_CODE"===n.type)return o(u,{index:t,variable:{variableName:null!==(e=n.text)&&void 0!==e?e:"Copy Code",updatedValue:null!==(i=n.buttonVariable)&&void 0!==i?i:"",type:"string",isEditableVariable:!0,index:null!==(l=n.index)&&void 0!==l?l:0},showVariableModal:!0,variableList:T,componentType:"BUTTONS"},t)}))]}))};export{f as default};
|
|
@@ -1,13 +1,14 @@
|
|
|
1
|
-
import{jsxs as e,jsx as t}from"react/jsx-runtime";import{useState as r,useEffect as o}from"react";import s from"styled-components";import{Button as
|
|
2
|
-
background: ${
|
|
1
|
+
import{jsxs as e,jsx as t}from"react/jsx-runtime";import{useState as r,useEffect as o}from"react";import s from"styled-components";import{Button as a}from"../../button/Button.js";import{TitleRegular as n}from"../../TypographyStyle.js";import{COLORS as i}from"../../../constants/Theme.js";import{Badge as l}from"../Badge/index.js";import{useTemplateModalContext as p}from"../context/templateModalContext.js";const c=s.div`
|
|
2
|
+
background: ${i.surface.standard};
|
|
3
3
|
border-top-width: 1px;
|
|
4
|
-
border-top-color: ${
|
|
4
|
+
border-top-color: ${i.stroke.primary};
|
|
5
5
|
box-shadow: 0px -4px 12px rgba(0, 0, 0, 0.12);
|
|
6
6
|
width: 100%;
|
|
7
7
|
padding: 16px 24px;
|
|
8
8
|
display: flex;
|
|
9
|
-
justify-content: end;
|
|
9
|
+
justify-content: ${e=>e.isWhatsappCarousel?"space-between":"end"};
|
|
10
|
+
align-items: center;
|
|
10
11
|
gap: 12;
|
|
11
12
|
border-bottom-left-radius: 4px;
|
|
12
13
|
border-bottom-right-radius: 4px;
|
|
13
|
-
`,d=s=>{let{isWhatsappCarousel:
|
|
14
|
+
`,d=s=>{let{isWhatsappCarousel:d,onSelect:m}=s;const{isError:x,selectedCarouselIndex:u,setSelectedCarouselIndex:b,setErrorIndexes:f}=p(),[g,h]=r(d?"Next":"Select template");return o((()=>{d&&-1===u?h("Next"):d&&null!=u&&u>-1&&h("Save & Select Template")}),[u]),e(c,Object.assign({isWhatsappCarousel:d},{children:[d&&null!=u&&u>=-1&&t(n,Object.assign({color:i.text.secondary},{children:`Step ${-1===u?1:2}/2`})),e("div",Object.assign({style:{display:"flex",flexDirection:"row"}},{children:[x&&t(l,{errorText:"Some inputs are missing or incorrect. Please check"}),t(a,{id:"select-template-btn",buttonText:g,size:d?"small":"large",onClick:function(){d&&-1===u&&b?b(0):(null==f||f([]),m())}})]}))]}))};export{d as default};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{jsxs as t,jsx as e}from"react/jsx-runtime";import o from"../../../assets/icons/box.svg.js";import i from"../../../assets/icons/delete.svg.js";import n from"../../../assets/icons/edit.svg.js";import s from"styled-components";import{IconButton as r}from"../../icon-button/IconButton.js";import{TitleSmall as l}from"../../TypographyStyle.js";const
|
|
1
|
+
import{jsxs as t,jsx as e}from"react/jsx-runtime";import o from"../../../assets/icons/box.svg.js";import i from"../../../assets/icons/delete.svg.js";import n from"../../../assets/icons/edit.svg.js";import s from"styled-components";import{IconButton as r}from"../../icon-button/IconButton.js";import{TitleSmall as l}from"../../TypographyStyle.js";import{COLORS as c}from"../../../constants/Theme.js";const d=s.div`
|
|
2
2
|
width: ${t=>t.width};
|
|
3
3
|
padding: 12px;
|
|
4
4
|
display: flex;
|
|
@@ -44,4 +44,4 @@ import{jsxs as t,jsx as e}from"react/jsx-runtime";import o from"../../../assets/
|
|
|
44
44
|
color: #000000;
|
|
45
45
|
}
|
|
46
46
|
}
|
|
47
|
-
`,
|
|
47
|
+
`,a=s=>{const{cardBody:a,deleteItem:f,editItem:p,hideIcon:m}=s;return t(d,Object.assign({width:"100%"},{children:[!m&&e("div",Object.assign({style:{width:36,height:36}},{children:e(o,{})})),e("div",Object.assign({className:"card-body"},{children:e(l,Object.assign({color:c.content.secondary},{children:a}))})),t("div",Object.assign({style:{display:"flex",alignItems:"center"}},{children:[p&&e(r,{style:{display:"flex"},Icon:()=>e(n,{width:24,height:24,color:c.content.placeholder}),onClick:t=>{p(),t.stopPropagation()}}),e(r,{style:{display:"flex",color:"#919191"},Icon:()=>e(i,{width:24,height:24,color:c.content.placeholder}),onClick:t=>{f(),t.stopPropagation()}})]}))]}))};export{a as ProductBox};
|
|
@@ -1,10 +1,10 @@
|
|
|
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 i}from"date-fns";import{cloneDeep as n}from"lodash";import{useState as o,useEffect as s}from"react";import
|
|
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 i}from"date-fns";import{cloneDeep as n}from"lodash";import{useState as o,useEffect as s}from"react";import u from"styled-components";import{AddVariableV2SideModal as d}from"../../add-variableV2/AddVariableV2SideModal.js";import{CustomDateTime as c}from"../../custom-date-time/CustomDateTime.js";import{Dropdown as r}from"../../dropdown/Dropdown.js";import{Input as p}from"../../input/Input.js";import{truncate as m}from"../../product-picker-v2/collectionScreen.js";import{placeHolderNamePattern as v}from"../../template-preview/constants/regexPatterns.js";import{CHANNEL_TYPE as b}from"../../template-preview/models/Channels.js";import{POD as g}from"../../template-preview/models/WhatsAppTemplate.js";import{BodySecondary as O,BodyPrimary as j}from"../../TypographyStyle.js";import h from"../../../utils/StringUtils.js";import{COLORS as y}from"../../../constants/Theme.js";import{useTemplateModalContext as x}from"../context/templateModalContext.js";import{getVariableNameForEmailByIndex as f}from"../utils/getVariableNameEmail.js";const _=u.div`
|
|
2
2
|
/* surface/$color-background-warning-light */
|
|
3
3
|
|
|
4
|
-
background: ${e=>e.focused&&e.channel===b.EMAIL?
|
|
4
|
+
background: ${e=>e.focused&&e.channel===b.EMAIL?y.background.warning.light:"transparent"};
|
|
5
5
|
border-radius: 4px;
|
|
6
6
|
padding: 8px 10px;
|
|
7
|
-
`,T=
|
|
7
|
+
`,T=u.div`
|
|
8
8
|
position: absolute;
|
|
9
9
|
top: 0;
|
|
10
10
|
left: 0;
|
|
@@ -13,4 +13,4 @@ import{jsxs as e,jsx as t,Fragment as l}from"react/jsx-runtime";import a from"..
|
|
|
13
13
|
background-color: rgba(0, 0, 0, 0.1);
|
|
14
14
|
z-index: 1000;
|
|
15
15
|
cursor: not-allowed;
|
|
16
|
-
`,V={value:"custom_link",label:"Custom URL"},k={value:"custom_text",label:"Custom text"},E={value:"static_expiry",label:"Static Expiry"},A=d=>{let{onFocus:A,variable:S,index:C,showVariableModal:w,variableList:P,setShowDiscountCheckBox:D,componentType:B,CTAoptions:L}=d;var N,H,U;const[M,W]=o(!1),[R,$]=o(""),[I,z]=o([]),[Y,Z]=o(),[G,q]=o(!1),[F,K]=o(!1),{device:J,channel:Q,isError:X,originalVariableList:ee,template:te,templateSelectionTriggered:le,setTemplate:ae,setDisplayContent:ie,setOriginalVariableList:ne,globalNormalizedPlaceholders:oe,enabledCustomText:se,pod:de,selectedCarouselIndex:ue,isProductCarouselType:ce,disableEditVariable:re,disableEditExpiry:pe}=y();function me(){var e,t;const l=[];let a=[];if(Q!==b.MESSAGE||se){"link"===(null==S?void 0:S.type)?(l.push({label:"",options:[V,k]}),Z(V)):"date_time"===(null==S?void 0:S.type)?(l.push({label:"",options:[V,k]}),Z(E)):(l.push({label:"",options:[V,k,E]}),Z(k));const e=null!=oe?oe:[];z([...l,...e.map((e=>{var t,l;return Object.assign(Object.assign({},e),{label:j.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:[];z([{label:"",options:[k,V]},...e]),a=[{label:"",options:[k,V]},...e]}if((Q===b.WHATSAPP||Q===b.EMAIL||Q===b.MESSAGE)&&S.updatedValue)if(v.test(S.updatedValue)&&Q===b.WHATSAPP||S.updatedValue.startsWith("{{")&&Q!==b.WHATSAPP){const e=function(e,t,l){var a;let i={label:"",value:""};const n=l===b.WHATSAPP?e.updatedValue.replace("[[","").replace("]]",""):e.updatedValue.replace("{{","").replace("}}","");if(w){let t=e.updatedValue;if(de===g.CHATBOT&&"BUTTONS"===B){const l=null==L?void 0:L.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}(S,a,Q);e.value&&Z(e)}else"date_time"===S.type?(Z(E),$(S.updatedValue),Oe(null!==(e=S.index)&&void 0!==e?e:0,S.updatedValue)):(null===(t=S.updatedValue)||void 0===t?void 0:t.startsWith("https"))?(Z(V),$(S.updatedValue.split("https://")[1])):(Z(k),$(S.updatedValue))}function ve(e,t){var l,a,i;const n=e;$(""),Z(n),Q===b.WHATSAPP?"custom_text"!==n.value&&"custom_link"!==n.value&&"static_expiry"!==n.value?(ge(null!==(l=n.value)&&void 0!==l?l:"","string"),null==Oe||Oe(null!==(a=S.index)&&void 0!==a?a:0,n.value,!0)):(null==Oe||Oe(null!==(i=S.index)&&void 0!==i?i:0,R,!0,n.value),ge("","url"===n.bikPlaceholderType?"link":"string")):"custom_text"!==n.value&&"custom_link"!==n.value?ge(n.value,"url"===n.bikPlaceholderType?"link":"string"):($(""),ge("",n.value))}function be(e,t){var l;$(t);const a="custom_link"===(null==Y?void 0:Y.value)&&t?t.includes("https")?t:`https://${t}`:t;ge(a,"static_expiry"===e?"string":e),Q===b.WHATSAPP&&(null==Oe||Oe(null!==(l=S.index)&&void 0!==l?l:0,a,"custom_link"===e,e))}function ge(e,t){var l,a,i,o;const s="custom_link"===t?"link":"custom_text"===t?"string":t;if(Q!==b.WHATSAPP){const a=f(C+1),i=null===document||void 0===document?void 0:document.getElementById("mobile"===J?"template_html_mobile":"template_html_desktop"),n=Q===b.EMAIL?null===(l=null==i?void 0:i.contentWindow)||void 0===l?void 0:l.document.getElementById(a):document.getElementById(a);n&&(n.textContent="custom_text"!==t&&"custom_link"!==t||e?e:S.variableName);const o=ee.map(((t,l)=>l===C?Object.assign(Object.assign({},t),{type:s,updatedValue:e}):t));null==ne||ne(o)}if(Q===b.WHATSAPP){if(null!=ue&&ue>-1&&ce){const t=Object.assign({},ee).cards.map(((t,l)=>{var a;return Object.assign(Object.assign({},t),{body:null===(a=t.body)||void 0===a?void 0:a.map(((t,l)=>C===l?Object.assign(Object.assign({},t),{type:s,updatedValue:e}):t))})}));return void(null==ne||ne((e=>Object.assign(Object.assign({},e),{cards:t}))))}const l=null!=ue&&ue>-1?ee.cards[ue]:ee;let d=l.body,u=l.header,c=l.buttons;if("BODY"===B?d=null===(a=l.body)||void 0===a?void 0:a.map(((t,l)=>l===C?Object.assign(Object.assign({},t),{type:s,updatedValue:e}):t)):"HEADER"===B?u=null===(i=l.header)||void 0===i?void 0:i.map(((t,l)=>l===C?Object.assign(Object.assign({},t),{type:s,updatedValue:e}):t)):"BUTTONS"===B&&(c=null===(o=l.buttons)||void 0===o?void 0:o.map(((l,a)=>a===C?Object.assign(Object.assign({},l),{buttonVariable:"custom_link"===t?"((customPlaceholderName))":e,example:"COPY_CODE"===l.type?e:[e]}):l))),null!=ue&&ue>-1){const e=n(ee.cards);e[ue]={header:u,body:d,buttons:c},null==ne||ne((t=>Object.assign(Object.assign({},t),{cards:e})))}else null==ne||ne((e=>Object.assign(Object.assign({},e),{header:u,body:d,buttons:c})))}}function Oe(e,t,l,a){var i,o,s,d,u,c,r;if(null!=ue&&ue>-1&&ce){const o=Object.assign({},te).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;if("BODY"!==l.type)return l;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})}}))})))}):l})),s=n(te);if(l){const l=null===(i=Object.assign({},te).mapping.cards)||void 0===i?void 0:i.map((l=>{var i;return Object.assign(Object.assign({},l),{body:null===(i=l.body)||void 0===i?void 0:i.map(((l,i)=>e===i?"custom_text"===a?`((editableVariable${i+10}))`:t:l))})}));s.mapping.cards=l}return s.components=o,void(null==ae||ae(s))}const p=null!=ue&&ue>-1?{components:null===(o=Object.assign({},te).components[1].cards)||void 0===o?void 0:o[ue].components,mapping:null===(s=Object.assign({},te).mapping.cards)||void 0===s?void 0:s[ue]}:Object.assign({},te),m=null===(d=null==p?void 0:p.components)||void 0===d?void 0:d.map((l=>{var a,i,n,o,s,d,u,c,r;const p=Object.assign({},l);if("BODY"===l.type&&"BODY"===B){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"===B){if(null===(d=l.example)||void 0===d?void 0:d.header_text){const l=[...null!==(c=null===(u=p.example)||void 0===u?void 0:u.header_text)&&void 0!==c?c:[]];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"===B){const a=null===(r=l.buttons)||void 0===r?void 0:r.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"===B)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"===B&&(null===(u=null==p?void 0:p.mapping)||void 0===u?void 0:u.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"===B&&(null===(c=null==p?void 0:p.mapping)||void 0===c?void 0:c.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"===B&&(null===(r=null==p?void 0:p.mapping)||void 0===r?void 0:r.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!=ue&&ue>-1&&te){const e=n(te);e.components[1].cards[ue].components=p.components,e.mapping.cards[ue]=p.mapping,null==ae||ae(e)}else null==ae||ae(Object.assign({},p))}return s((()=>{M&&(null==A||A())}),[M]),s((()=>{!function(){var e,t,l,a,i;const n="mobile"===J?"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);Q===b.EMAIL&&(null==ie||ie(s))}()}),[le]),s((()=>{me()}),[]),s((()=>{me()}),[ue]),s((()=>{J&&Y&&R&&setTimeout((()=>{ge("custom_link"===(null==Y?void 0:Y.value)&&R?R.includes("https")?R:`https://${R}`:R,Y.value)}),100)}),[J]),s((()=>{!F&&Y&&S.updatedValue&&setTimeout((()=>{ge("custom_link"===(null==Y?void 0:Y.value)&&S.updatedValue?S.updatedValue.includes("https")?S.updatedValue:`https://${S.updatedValue}`:S.updatedValue,Y.value),K(!0)}),100)}),[Y]),e(_,Object.assign({channel:Q,focused:M,onMouseEnter:()=>W(!0),onMouseLeave:()=>W(!1)},{children:[t("div",Object.assign({style:{marginBottom:8}},{children:e(O,Object.assign({style:{color:X&&!Y?x.content.negative:x.content.primary}},{children:[null===(N=S.variableName)||void 0===N?void 0:N.replace("{{","").replace("}}","")," ","link"===(null==S?void 0:S.type)?"link":"variable"]}))})),t("div",Object.assign({style:{marginBottom:12}},{children:w?e("div",Object.assign({style:{display:"flex",border:"#E0E0E0 1px solid",borderRadius:4,padding:10,justifyContent:(null==Y?void 0:Y.label)?"space-between":"flex-end"}},{children:[t(h,Object.assign({numberOfLines:1},{children:de===g.CHATBOT?["static_expiry","custom_text"].includes(null!==(H=null==Y?void 0:Y.value)&&void 0!==H?H:"")?null==Y?void 0:Y.label:null==Y?void 0:Y.value:m(null!==(U=null==Y?void 0:Y.label)&&void 0!==U?U:"",20,!0)})),re||"date_time"===(null==S?void 0:S.type)&&pe?t(l,{}):t(a,{onClick:()=>{q(!G)},width:24,height:24,color:x.content.primary})]})):t(r,{disabled:re,options:I,isSearchable:!1,onSelect:ve,defaultOptions:Y?[Object.assign(Object.assign({},Y),{selected:!0})]:[]})})),("custom_text"===(null==Y?void 0:Y.value)||"custom_link"===(null==Y?void 0:Y.value))&&t(p,{state:re?"disabled":"none",labelText:"custom_text"===(null==Y?void 0:Y.value)?"Custom text value":"custom_link"===(null==Y?void 0:Y.value)?"Custom URL value":"",id:`variable-value-${null==Y?void 0:Y.value}-${C}`,value:R,errorMessage:X?R&&0!==R.trim().length?"custom_link"!==Y.value||/^https?:\/\/(?:www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b(?:[-a-zA-Z0-9()@:%_\+.~#?&\/=]*)$/.test(`https://${R.trim()}`)&&0!==R.trim().length?"custom_link"!==Y.value&&R.length>30?"Length cannot be more than 30":"BUTTONS"===B&&"custom_link"!==Y.value?"Enter valid alpha numeric code":"":"Enter valid URL":"Required field":"",maxCharLimit:"custom_link"===(null==Y?void 0:Y.value)?2e3:"BUTTONS"===B?15:30,noKeyDownChange:!0,prefixText:"custom_link"===(null==Y?void 0:Y.value)?"https://":"",placeholder:"link"===S.type||"custom_link"===Y.value?"Enter custom URL here":"Enter custom text here",onChangeText:e=>{be(Y.value,e)}}),"static_expiry"===(null==Y?void 0:Y.value)&&e("div",Object.assign({style:{position:"relative"}},{children:[re&&t(T,{onClick:e=>e.preventDefault()}),t(c,{placement:"auto",time:i(R?new Date(R):new Date,"hh:mm a"),date:R?new Date(R):new Date,minDate:new Date,error:"",setError:()=>{},onChange:e=>{be("static_expiry",e.toISOString())}})]})),G&&t(u,{zIndex:2e3,data:null!=P?P:[],showVariable:G,setShowVariable:q,placeholder:"Add a variable",customTrigger:e=>{null==D||D(!1),"{{custom.url}}"===e.actualValue?ve({label:e.displayName,selected:!0,value:"custom_link"}):"{{custom.text}}"==e.actualValue?ve({label:e.displayName,selected:!0,value:"custom_text"}):"{{static.expiry}}"==e.actualValue?ve({label:e.displayName,selected:!0,value:"static_expiry"}):ve({label:e.displayName.replace("{{","").replace("}}","").trim().replace("."," "),selected:!0,value:e.actualValue,bikPlaceholderType:"string"})}})]}))};export{_ as Container,A as default};
|
|
16
|
+
`,k={value:"custom_link",label:"Custom URL"},E={value:"custom_text",label:"Custom text"},V={value:"static_expiry",label:"Static Expiry"},S=u=>{let{onFocus:S,variable:A,index:C,showVariableModal:B,variableList:P,setShowDiscountCheckBox:w,componentType:D,CTAoptions:N}=u;var L,U,H;const[R,M]=o(!1),[W,$]=o(""),[I,Y]=o([]),[z,Z]=o(),[G,q]=o(!1),[F,K]=o(!1),{device:J,channel:Q,isError:X,originalVariableList:ee,template:te,templateSelectionTriggered:le,setTemplate:ae,setDisplayContent:ie,setOriginalVariableList:ne,globalNormalizedPlaceholders:oe,enabledCustomText:se,pod:ue,selectedCarouselIndex:de,isProductCarouselType:ce,disableEditVariable:re,disableEditExpiry:pe}=x();function me(){var e,t;const l=[];let a=[];if(Q!==b.MESSAGE||se){"link"===(null==A?void 0:A.type)?(l.push({label:"",options:[k,E]}),Z(k)):"date_time"===(null==A?void 0:A.type)?(l.push({label:"",options:[k,E]}),Z(V)):(l.push({label:"",options:[k,E,V]}),Z(E));const e=null!=oe?oe:[];Y([...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:[];Y([{label:"",options:[E,k]},...e]),a=[{label:"",options:[E,k]},...e]}if((Q===b.WHATSAPP||Q===b.EMAIL||Q===b.MESSAGE)&&A.updatedValue)if(v.test(A.updatedValue)&&Q===b.WHATSAPP||A.updatedValue.startsWith("{{")&&Q!==b.WHATSAPP){const e=function(e,t,l){var a;let i={label:"",value:""};const n=l===b.WHATSAPP?e.updatedValue.replace("[[","").replace("]]",""):e.updatedValue.replace("{{","").replace("}}","");if(B){let t=e.updatedValue;if(ue===g.CHATBOT&&"BUTTONS"===D){const l=null==N?void 0:N.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}(A,a,Q);e.value&&Z(e)}else"date_time"===A.type?(Z(V),$(A.updatedValue),Oe(null!==(e=A.index)&&void 0!==e?e:0,A.updatedValue)):(null===(t=A.updatedValue)||void 0===t?void 0:t.startsWith("https"))?(Z(k),$(A.updatedValue.split("https://")[1])):(Z(E),$(A.updatedValue))}function ve(e,t){var l,a,i;const n=e;$(""),Z(n),Q===b.WHATSAPP?"custom_text"!==n.value&&"custom_link"!==n.value&&"static_expiry"!==n.value?(ge(null!==(l=n.value)&&void 0!==l?l:"","string"),null==Oe||Oe(null!==(a=A.index)&&void 0!==a?a:0,n.value,!0)):(null==Oe||Oe(null!==(i=A.index)&&void 0!==i?i:0,W,!0,n.value),ge("","url"===n.bikPlaceholderType?"link":"string")):"custom_text"!==n.value&&"custom_link"!==n.value?ge(n.value,"url"===n.bikPlaceholderType?"link":"string"):($(""),ge("",n.value))}function be(e,t){var l;$(t);const a="custom_link"===(null==z?void 0:z.value)&&t?t.includes("https")?t:`https://${t}`:t;ge(a,"static_expiry"===e?"string":e),Q===b.WHATSAPP&&(null==Oe||Oe(null!==(l=A.index)&&void 0!==l?l:0,a,"custom_link"===e,e))}function ge(e,t){var l,a,i,o;const s="custom_link"===t?"link":"custom_text"===t?"string":t;if(Q!==b.WHATSAPP){const a=f(C+1),i=null===document||void 0===document?void 0:document.getElementById("mobile"===J?"template_html_mobile":"template_html_desktop"),n=Q===b.EMAIL?null===(l=null==i?void 0:i.contentWindow)||void 0===l?void 0:l.document.getElementById(a):document.getElementById(a);n&&(n.textContent="custom_text"!==t&&"custom_link"!==t||e?e:A.variableName);const o=ee.map(((t,l)=>l===C?Object.assign(Object.assign({},t),{type:s,updatedValue:e}):t));null==ne||ne(o)}if(Q===b.WHATSAPP){if(null!=de&&de>-1&&ce){const l=Object.assign({},ee).cards.map(((l,a)=>{var i,n;return"BODY"===D?Object.assign(Object.assign({},l),{body:null===(i=l.body)||void 0===i?void 0:i.map(((t,l)=>C===l?Object.assign(Object.assign({},t),{type:s,updatedValue:e}):t))}):"BUTTONS"===D?Object.assign(Object.assign({},l),{buttons:null===(n=l.buttons)||void 0===n?void 0:n.map(((l,a)=>a===C?Object.assign(Object.assign({},l),{buttonVariable:"custom_link"===t?"((customPlaceholderName))":e,example:"COPY_CODE"===l.type?e:[e]}):l))}):l}));return void(null==ne||ne((e=>Object.assign(Object.assign({},e),{cards:l}))))}const l=null!=de&&de>-1?ee.cards[de]:ee;let u=l.body,d=l.header,c=l.buttons;if("BODY"===D?u=null===(a=l.body)||void 0===a?void 0:a.map(((t,l)=>l===C?Object.assign(Object.assign({},t),{type:s,updatedValue:e}):t)):"HEADER"===D?d=null===(i=l.header)||void 0===i?void 0:i.map(((t,l)=>l===C?Object.assign(Object.assign({},t),{type:s,updatedValue:e}):t)):"BUTTONS"===D&&(c=null===(o=l.buttons)||void 0===o?void 0:o.map(((l,a)=>a===C?Object.assign(Object.assign({},l),{buttonVariable:"custom_link"===t?"((customPlaceholderName))":e,example:"COPY_CODE"===l.type?e:[e]}):l))),null!=de&&de>-1){const e=n(ee.cards);e[de]={header:d,body:u,buttons:c},null==ne||ne((t=>Object.assign(Object.assign({},t),{cards:e})))}else null==ne||ne((e=>Object.assign(Object.assign({},e),{header:d,body:u,buttons:c})))}}function Oe(e,t,l,a){var i,o,s,u,d,c,r;if(null!=de&&de>-1&&ce){const o=Object.assign({},te).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"===D){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"===D){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(te);if(l){const l=null===(i=Object.assign({},te).mapping.cards)||void 0===i?void 0:i.map(((l,i)=>{var n,o,s;if("BODY"===D)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"===D&&(null==l?void 0:l.buttons)){let n=-1,u=-1;return null===(o=te.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==ae||ae(s))}const p=null!=de&&de>-1?{components:null===(o=Object.assign({},te).components[1].cards)||void 0===o?void 0:o[de].components,mapping:null===(s=Object.assign({},te).mapping.cards)||void 0===s?void 0:s[de]}:Object.assign({},te),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,c,r;const p=Object.assign({},l);if("BODY"===l.type&&"BODY"===D){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"===D){if(null===(u=l.example)||void 0===u?void 0:u.header_text){const l=[...null!==(c=null===(d=p.example)||void 0===d?void 0:d.header_text)&&void 0!==c?c:[]];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"===D){const a=null===(r=l.buttons)||void 0===r?void 0:r.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"===D)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"===D&&(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"===D&&(null===(c=null==p?void 0:p.mapping)||void 0===c?void 0:c.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"===D&&(null===(r=null==p?void 0:p.mapping)||void 0===r?void 0:r.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!=de&&de>-1&&te){const e=n(te);e.components[1].cards[de].components=p.components,e.mapping.cards[de]=p.mapping,null==ae||ae(e)}else null==ae||ae(Object.assign({},p))}return s((()=>{R&&(null==S||S())}),[R]),s((()=>{!function(){var e,t,l,a,i;const n="mobile"===J?"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);Q===b.EMAIL&&(null==ie||ie(s))}()}),[le]),s((()=>{me()}),[]),s((()=>{me()}),[de]),s((()=>{J&&z&&W&&setTimeout((()=>{ge("custom_link"===(null==z?void 0:z.value)&&W?W.includes("https")?W:`https://${W}`:W,z.value)}),100)}),[J]),s((()=>{!F&&z&&A.updatedValue&&setTimeout((()=>{ge("custom_link"===(null==z?void 0:z.value)&&A.updatedValue?A.updatedValue.includes("https")?A.updatedValue:`https://${A.updatedValue}`:A.updatedValue,z.value),K(!0)}),100)}),[z]),e(_,Object.assign({channel:Q,focused:R,onMouseEnter:()=>M(!0),onMouseLeave:()=>M(!1)},{children:[t("div",Object.assign({style:{marginBottom:8}},{children:e(O,Object.assign({style:{color:X&&!z?y.content.negative:y.content.primary}},{children:[null===(L=A.variableName)||void 0===L?void 0:L.replace("{{","").replace("}}","")," ","link"===(null==A?void 0:A.type)?"link":"variable"]}))})),t("div",Object.assign({style:{marginBottom:12}},{children:B?e("div",Object.assign({style:{display:"flex",border:"#E0E0E0 1px solid",borderRadius:4,padding:10,justifyContent:(null==z?void 0:z.label)?"space-between":"flex-end"}},{children:[t(j,Object.assign({numberOfLines:1},{children:ue===g.CHATBOT?["static_expiry","custom_text","custom_link"].includes(null!==(U=null==z?void 0:z.value)&&void 0!==U?U:"")?null==z?void 0:z.label:null==z?void 0:z.value:m(null!==(H=null==z?void 0:z.label)&&void 0!==H?H:"",20,!0)})),re||"date_time"===(null==A?void 0:A.type)&&pe?t(l,{}):t(a,{onClick:()=>{q(!G)},width:24,height:24,color:y.content.primary})]})):t(r,{disabled:re,options:I,isSearchable:!1,onSelect:ve,defaultOptions:z?[Object.assign(Object.assign({},z),{selected:!0})]:[]})})),("custom_text"===(null==z?void 0:z.value)||"custom_link"===(null==z?void 0:z.value))&&t(p,{state:re?"disabled":"none",labelText:"custom_text"===(null==z?void 0:z.value)?"Custom text value":"custom_link"===(null==z?void 0:z.value)?"Custom URL value":"",id:`variable-value-${null==z?void 0:z.value}-${C}`,value:W,errorMessage:X?W&&0!==W.trim().length?"custom_link"!==z.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"!==z.value&&W.length>30?"Length cannot be more than 30":"BUTTONS"===D&&"custom_link"!==z.value?"Enter valid alpha numeric code":"":"Enter valid URL":"Required field":"",maxCharLimit:"custom_link"===(null==z?void 0:z.value)?2e3:"BUTTONS"===D?15:30,noKeyDownChange:!0,prefixText:"custom_link"===(null==z?void 0:z.value)?"https://":"",placeholder:"link"===A.type||"custom_link"===z.value?"Enter custom URL here":"Enter custom text here",onChangeText:e=>{be(z.value,e)}}),"static_expiry"===(null==z?void 0:z.value)&&e("div",Object.assign({style:{position:"relative"}},{children:[re&&t(T,{onClick:e=>e.preventDefault()}),t(c,{placement:"auto",time:i(W?new Date(W):new Date,"hh:mm a"),date:W?new Date(W):new Date,minDate:new Date,error:"",setError:()=>{},onChange:e=>{be("static_expiry",e.toISOString())}})]})),G&&t(d,{zIndex:2e3,data:null!=P?P:[],showVariable:G,setShowVariable:q,placeholder:"Add a variable",customTrigger:e=>{null==w||w(!1),"{{custom.url}}"===e.actualValue?ve({label:e.displayName,selected:!0,value:"custom_link"}):"{{custom.text}}"==e.actualValue?ve({label:e.displayName,selected:!0,value:"custom_text"}):"{{static.expiry}}"==e.actualValue?ve({label:e.displayName,selected:!0,value:"static_expiry"}):ve({label:e.displayName.replace("{{","").replace("}}","").trim().replace("."," "),selected:!0,value:e.actualValue,bikPlaceholderType:"string"})}})]}))};export{_ as Container,S as default};
|
package/dist/esm/components/template-context-mapper/modalElements/VariableConnectorsPanel.js
CHANGED
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
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"../../../_virtual/_tslib.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"../../modals/modal.styled.js";import"../../switch/Switch.js";import{TitleRegular as m,BodySecondary as h,TitleSmall as b}from"../../TypographyStyle.js";import{CheckBox as g}from"../../checkBox/CheckBox.js";import{useTemplateModalContext as u}from"../context/templateModalContext.js";import f from"./VariableConnector.js";const v=l.div`
|
|
2
|
-
overflow-y: auto;
|
|
3
2
|
display: flex;
|
|
4
3
|
flex-direction: column;
|
|
5
4
|
height: 100%;
|