@bikdotai/bik-component-library 0.0.519 → 0.0.520-beta.1
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/assets/{bundle-0deb4a74.css → bundle-c485438b.css} +325 -2
- package/dist/cjs/components/QueryBuilder/Triggers/EVENTS/components/EventsTrigger.d.ts +1 -1
- package/dist/cjs/components/QueryBuilder/Triggers/EVENTS/selectors/useIGTriggerNameCacheSelector.d.ts +1 -1
- package/dist/cjs/components/QueryBuilder/Triggers/IG/components/IGTrigger.d.ts +1 -1
- package/dist/cjs/components/QueryBuilder/Triggers/IG/selectors/useIGTriggerNameCacheSelector.d.ts +1 -1
- package/dist/cjs/components/QueryBuilder/Triggers/components/BaseTriggerQueryBuilderNode.d.ts +2 -2
- package/dist/cjs/components/analytics-chips-and-dropdowns/chart/Pie/PieChartAnalytics.js +1 -1
- package/dist/cjs/components/carousel-preview/CarouselPreview.d.ts +3 -1
- package/dist/cjs/components/carousel-preview/CarouselPreview.js +1 -1
- package/dist/cjs/components/carousel-preview/CarouselPreview.style.d.ts +4 -2
- package/dist/cjs/components/carousel-preview/CarouselPreview.style.js +56 -28
- package/dist/cjs/components/carousel-preview/CarouselPreviewCard.js +1 -1
- package/dist/cjs/components/carousel-preview/CustomCarouselArrows.d.ts +7 -0
- package/dist/cjs/components/carousel-preview/CustomCarouselArrows.js +1 -0
- package/dist/cjs/components/icon-button/IconButton.js +1 -1
- package/dist/cjs/components/icon-button/model.d.ts +5 -0
- package/dist/cjs/components/template-context-mapper/TemplateContextMapper.d.ts +0 -1
- package/dist/cjs/components/template-context-mapper/TemplateContextMapper.js +1 -1
- package/dist/cjs/components/template-context-mapper/context/templateModalContext.d.ts +8 -1
- package/dist/cjs/components/template-context-mapper/modalElements/EditWhatsAppCarouselTemplateV2.js +1 -1
- package/dist/cjs/components/template-context-mapper/modalElements/EditWhatsAppTemplateV2.js +2 -2
- package/dist/cjs/components/template-context-mapper/modalElements/Footer.js +5 -5
- package/dist/cjs/components/template-preview/TemplatePreview.js +1 -1
- package/dist/cjs/components/template-preview/WhatsApp/ChatUI.style.d.ts +1 -0
- package/dist/cjs/components/template-preview/WhatsApp/ChatUI.style.js +11 -7
- package/dist/cjs/components/template-preview/WhatsApp/ChatUiV2.js +2 -2
- package/dist/cjs/components/template-preview/WhatsApp/MediaCard.js +1 -1
- package/dist/cjs/components/template-preview/WhatsApp/WhatsAppLikePreviewV2.js +2 -1
- package/dist/esm/assets/{bundle-0deb4a74.css → bundle-c485438b.css} +325 -2
- package/dist/esm/components/QueryBuilder/Triggers/EVENTS/components/EventsTrigger.d.ts +1 -1
- package/dist/esm/components/QueryBuilder/Triggers/EVENTS/selectors/useIGTriggerNameCacheSelector.d.ts +1 -1
- package/dist/esm/components/QueryBuilder/Triggers/IG/components/IGTrigger.d.ts +1 -1
- package/dist/esm/components/QueryBuilder/Triggers/IG/selectors/useIGTriggerNameCacheSelector.d.ts +1 -1
- package/dist/esm/components/QueryBuilder/Triggers/components/BaseTriggerQueryBuilderNode.d.ts +2 -2
- package/dist/esm/components/analytics-chips-and-dropdowns/chart/Pie/PieChartAnalytics.js +1 -1
- package/dist/esm/components/carousel-preview/CarouselPreview.d.ts +3 -1
- package/dist/esm/components/carousel-preview/CarouselPreview.js +1 -1
- package/dist/esm/components/carousel-preview/CarouselPreview.style.d.ts +4 -2
- package/dist/esm/components/carousel-preview/CarouselPreview.style.js +56 -28
- package/dist/esm/components/carousel-preview/CarouselPreviewCard.js +1 -1
- package/dist/esm/components/carousel-preview/CustomCarouselArrows.d.ts +7 -0
- package/dist/esm/components/carousel-preview/CustomCarouselArrows.js +1 -0
- package/dist/esm/components/icon-button/IconButton.js +1 -1
- package/dist/esm/components/icon-button/model.d.ts +5 -0
- package/dist/esm/components/template-context-mapper/TemplateContextMapper.d.ts +0 -1
- package/dist/esm/components/template-context-mapper/TemplateContextMapper.js +1 -1
- package/dist/esm/components/template-context-mapper/context/templateModalContext.d.ts +8 -1
- package/dist/esm/components/template-context-mapper/modalElements/EditWhatsAppCarouselTemplateV2.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 +5 -5
- package/dist/esm/components/template-preview/TemplatePreview.js +1 -1
- package/dist/esm/components/template-preview/WhatsApp/ChatUI.style.d.ts +1 -0
- package/dist/esm/components/template-preview/WhatsApp/ChatUI.style.js +5 -1
- package/dist/esm/components/template-preview/WhatsApp/ChatUiV2.js +5 -5
- package/dist/esm/components/template-preview/WhatsApp/MediaCard.js +1 -1
- package/dist/esm/components/template-preview/WhatsApp/WhatsAppLikePreviewV2.js +3 -2
- package/package.json +4 -2
|
@@ -10,6 +10,11 @@ export interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonEl
|
|
|
10
10
|
* @default default undefined
|
|
11
11
|
*/
|
|
12
12
|
style?: React.CSSProperties;
|
|
13
|
+
/**
|
|
14
|
+
* Custom styles which can be added to the svg
|
|
15
|
+
* @default default undefined
|
|
16
|
+
*/
|
|
17
|
+
svgStyle?: React.CSSProperties;
|
|
13
18
|
/**
|
|
14
19
|
* Custom height for the svg icon
|
|
15
20
|
* @default default 20
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
import 'pure-react-carousel/dist/react-carousel.es.css';
|
|
2
1
|
import { VariableListInterfaceV2 } from "../add-variableV2/AddVariableV2";
|
|
3
2
|
import { CarouselProduct } from "./modalElements/EditWhatsAppCarouselTemplateV2";
|
|
4
3
|
import { WhatsAppCarouselTemplate, WhatsAppCarouselTemplateVariables } from "../template-preview/models/WhatsappCarouselTemplate";
|
|
@@ -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("../../constants/Theme.js"),a=require("../modals/styledModal.js"),r=require("../template-preview/models/Channels.js"),s=require("./context/templateModalContext.js"),i=require("./modalElements/Footer.js"),n=require("./modalElements/TemplateSelectModalContent.js"),d=require("./utils/convertPlaceholdersToBikDropdown.js");exports.TemplateContextMapper=u=>{let{selectedTemplate:c,closeDialog:
|
|
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("../../constants/Theme.js"),a=require("../modals/styledModal.js"),r=require("../template-preview/models/Channels.js"),s=require("./context/templateModalContext.js"),i=require("./modalElements/Footer.js"),n=require("./modalElements/TemplateSelectModalContent.js"),d=require("./utils/convertPlaceholdersToBikDropdown.js");exports.TemplateContextMapper=u=>{let{selectedTemplate:c,closeDialog:v,showVariableMapping:p,channel:m,htmlContent:h,templateVariables:C,onTemplateSelect:S,globalPlaceholders:E,showOnlyContent:x,whatsappSpecificPickerMeta:b,zIndex:g,showVariableModal:P,variableList:f,discountCode:T,setDiscountCode:I,onBackPress:y,enabledCustomText:j,variableListForImage:L,showSampleValues:M,disableEditVariable:w,pod:N,extras:A,pickerConf:D,selectedCarouselProducts:H,disableEditExpiry:V,cardWidth:k,onDeleteSelectedProducts:q,fileName:O,setFileName:_,hideDeviceContainerInPreview:F}=u;var W,B,R,Y,z,$,U,G;l.useEffect((()=>{ee(h)}),[h]);const J=m===r.CHANNEL_TYPE.WHATSAPP&&"CAROUSEL"===(null===(B=null===(W=null==c?void 0:c.components)||void 0===W?void 0:W[1])||void 0===B?void 0:B.type),K=null==c?void 0:c.isProductCarouselType,[Q,X]=l.useState(m===r.CHANNEL_TYPE.EMAIL||J?"desktop":"mobile"),[Z,ee]=l.useState(h),[le,te]=l.useState(!1),[oe,ae]=l.useState([]),[re,se]=l.useState({}),[ie,ne]=l.useState(c),[de,ue]=l.useState([]),[ce,ve]=l.useState(!1),[pe,me]=l.useState(null!=C?C:[]),[he,Ce]=l.useState(!1),[Se,Ee]=l.useState(J?(null===(Y=null===(R=null==ie?void 0:ie.mapping)||void 0===R?void 0:R.body)||void 0===Y?void 0:Y.length)?-1:0:-1),[xe,be]=l.useState([]),ge=l.useRef(null),[Pe,fe]=l.useState(!1);l.useEffect((()=>{H?be(H):K&&be([])}),[H]),l.useEffect((()=>{var e;if(!ce&&K&&(!H||0===be.length)){const l=null===(e=null==ie?void 0:ie.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:"")}))})),ue(t),ve(!0)}}),[ce]);const Te=l.useMemo((()=>d.convertPlaceholdersToBikDropdown(E)),[E]);return e.jsx(s.TemplateModalContext.Provider,Object.assign({value:{template:ie,setTemplate:ne,device:Q,setDevice:X,display_content:Z,setDisplayContent:ee,originalVariableList:pe,setOriginalVariableList:me,isError:le,setIsError:te,channel:m,globalNormalizedPlaceholders:Te,templateSelectionTriggered:he,setTemplateSelectionTriggered:Ce,enabledCustomText:j,disableEditVariable:w,pod:N,extras:A,isWhatsappCarousel:J,selectedCarouselIndex:Se,setSelectedCarouselIndex:Ee,isProductCarouselType:K,templateErrorIndexes:re,cardCount:J?null===($=null===(z=c.components)||void 0===z?void 0:z[1].cards)||void 0===$?void 0:$.length:void 0,errorIndexes:oe,setErrorIndexes:ae,pickerConf:D,carouselProducts:xe,setCarouselProducts:be,disableEditExpiry:V,cardWidth:k,cardImages:de,onDeleteSelectedProducts:q,hideDeviceContainerInPreview:F,sliderRef:ge,isCarouselHovered:Pe,setIsCarouselHovered:fe}},{children:x?e.jsx(n.default,{channel:r.CHANNEL_TYPE.EMAIL,hideHeader:!0}):e.jsxs(a.StyledModal,Object.assign({zIndex:g,centralContainerStyles:{width:J?900:m===r.CHANNEL_TYPE.EMAIL&&p?1e3:800},open:!0,onClose:()=>{null==v||v()},headingTitle:null==ie?void 0:ie.label,headingSubtitle:m===r.CHANNEL_TYPE.WHATSAPP?`${t.default.capitaliseFirstLetterOfString(null!==(U=null==ie?void 0:ie.category)&&void 0!==U?U:"")} • ${null!==(G=null==ie?void 0:ie.templateCategory)&&void 0!==G?G:""}`:"",onBackPress:()=>{null==y||y()},modalHeaderStyles:{borderBottom:`1px solid ${o.COLORS.stroke.primary}`}},{children:[e.jsx(n.default,{showSampleValues:M,showVariableMapping:p,channel:m,whatsappSpecificPickerMeta:b,showVariableModal:P,variableList:f,discountCode:T,setDiscountCode:I,variableListForImage:L&&(null==L?void 0:L.length)>0?L:f,fileName:O,setFileName:e=>{null==_||_(e)}}),S?e.jsx(i.default,{isWhatsappCarousel:null!=J&&J,onSelect:function(){var e;if((null==xe?void 0:xe.length)<1&&K)return void te(!0);const l=null==S?void 0:S(ie,pe,null!=Z?Z:"",xe);se(null!==(e=null==l?void 0:l.templateErrorIndexes)&&void 0!==e?e:{body:[],buttons:[]}),(null==l?void 0:l.errorIndexes)||(null==l?void 0:l.error)?((null==l?void 0:l.errorIndexes)&&ae(l.errorIndexes),(null==l?void 0:l.error)&&te(!!(null==l?void 0:l.error))):Ce(!0)}}):e.jsx(e.Fragment,{})]}))}))};
|
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
import React from 'react';
|
|
1
|
+
import React, { LegacyRef } from 'react';
|
|
2
|
+
import Slider from 'react-slick';
|
|
2
3
|
import { CarouselProduct } from "../modalElements/EditWhatsAppCarouselTemplateV2";
|
|
3
4
|
import { CHANNEL_TYPE } from "../../template-preview/models/Channels";
|
|
4
5
|
import { EmailTemplateType } from "../../template-preview/models/EmailTemplate";
|
|
@@ -52,6 +53,9 @@ export declare const TemplateModalContext: React.Context<{
|
|
|
52
53
|
body?: number[] | undefined;
|
|
53
54
|
buttons?: number[] | undefined;
|
|
54
55
|
} | undefined;
|
|
56
|
+
sliderRef?: LegacyRef<Slider> | undefined;
|
|
57
|
+
isCarouselHovered?: boolean | undefined;
|
|
58
|
+
setIsCarouselHovered?: ((value: boolean) => void) | undefined;
|
|
55
59
|
}>;
|
|
56
60
|
export declare const useTemplateModalContext: () => {
|
|
57
61
|
device: DEVICE_TYPES;
|
|
@@ -98,4 +102,7 @@ export declare const useTemplateModalContext: () => {
|
|
|
98
102
|
body?: number[] | undefined;
|
|
99
103
|
buttons?: number[] | undefined;
|
|
100
104
|
} | undefined;
|
|
105
|
+
sliderRef?: LegacyRef<Slider> | undefined;
|
|
106
|
+
isCarouselHovered?: boolean | undefined;
|
|
107
|
+
setIsCarouselHovered?: ((value: boolean) => void) | undefined;
|
|
101
108
|
};
|
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/arrow_back.svg.js"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../../assets/icons/arrow_back.svg.js"),l=require("../../../assets/icons/chevronLeft.svg.js"),i=require("../../../assets/icons/chevronRight.svg.js"),n=require("../../../assets/icons/PlusIcon.js"),o=require("lodash"),r=require("react"),a=require("../../add-variableV2/AddVariableV2SideModal.js");require("../../../_virtual/_tslib.js"),require("../../add-variableV2/AddVariableV2.styled.js");var s=require("../../button/Button.js"),d=require("../../icon-button/IconButton.js");require("../../input/Input.js"),require("../../tooltips/Tooltip.js");var c=require("../../../constants/Theme.js");require("../../modals/modal.styled.js"),require("../../switch/Switch.js");var u=require("../../TypographyStyle.js"),p=require("../../product-picker-v2/modal.js"),v=require("../Badge/index.js"),h=require("../context/templateModalContext.js"),m=require("./EditWhatsAppTemplateV2.js"),g=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 j=require("../../template-preview/models/WhatsAppTemplate.js");exports.default=x=>{let{template:y,whatsappSpecificPickerMeta:b,showVariableModal:f,variableList:C,variableListForImage:O,discountCode:I,setDiscountCode:S}=x;var q,w,P,k,T,L,B,R;const{selectedCarouselIndex:V,setTemplate:A,pickerConf:E,isProductCarouselType:M,pod:D,cardCount:F,carouselProducts:W,setCarouselProducts:_,isError:N,cardImages:$,disableEditVariable:z,onDeleteSelectedProducts:G,setSelectedCarouselIndex:H,sliderRef:J}=h.useTemplateModalContext(),[K,Q]=r.useState(-1==V?"First Message (Step 1/2)":M?"Product Carousel "+((null===(w=null===(q=null==y?void 0:y.mapping)||void 0===q?void 0:q.body)||void 0===w?void 0:w.length)?"(Step 2/2)":""):"Carousel Cards "+((null===(k=null===(P=null==y?void 0:y.mapping)||void 0===P?void 0:P.body)||void 0===k?void 0:k.length)?"(Step 2/2)":"")),[U,X]=r.useState(!1),[Y,Z]=r.useState(!1),[ee,te]=r.useState(!1),le=V===(null!=F?F:-1)-1,ie=(null!=V?V:-1)<1;r.useEffect((()=>{var e,t,l,i;Q(-1==V?"First Message (Step 1/2)":M?"Product Carousel "+((null===(t=null===(e=null==y?void 0:y.mapping)||void 0===e?void 0:e.body)||void 0===t?void 0:t.length)?"(Step 2/2)":""):"Carousel Cards "+((null===(i=null===(l=null==y?void 0:y.mapping)||void 0===l?void 0:l.body)||void 0===i?void 0:i.length)?"(Step 2/2)":""))}),[V]);return e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"column",gap:"16px"}},{children:[e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"row",alignItems:"center"}},{children:[null!=V&&V>=0&&(null===(L=null===(T=null==y?void 0:y.mapping)||void 0===T?void 0:T.body)||void 0===L?void 0:L.length)&&e.jsx(d.IconButton,{Icon:t.default,onClick:()=>{null==H||H(-1)}}),e.jsx(u.TitleMedium,Object.assign({style:{marginLeft:10}},{children:K}))]})),M&&(null!==(B=null==W?void 0:W.length)&&void 0!==B?B:0)>0&&null!=V&&V>=0&&e.jsxs("div",Object.assign({style:{display:"flex",rowGap:8,marginBottom:16,marginLeft:10,marginRight:10,flexDirection:"column"}},{children:[e.jsx(g.ProductBox,{editItem:()=>{1===(null==W?void 0:W.length)&&"variable"===W[0].name?te(!0):X(!U)},cardBody:1===(null==W?void 0:W.length)&&"variable"===W[0].name?`${W[0].productName}`:`${null==W?void 0:W.length} Products Selected`,hideIcon:1===(null==W?void 0:W.length)&&"variable"===W[0].name,deleteItem:()=>{var e;if(1===(null==W?void 0:W.length)&&"variable"===W[0].name)return void(null==_||_([]));const t=o.cloneDeep(Object.assign({},y));t&&($&&$.length>0?null==$||$.forEach(((e,l)=>{var i;t.components[1].cards[l].components[0].example.header_handle=[null!==(i=$[l])&&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,l)=>{t.components[1].cards[l].components[0].example.header_handle=["https://res.cloudinary.com/drqhot9ot/image/upload/v1708753454/fake-product.png"]})),null==A||A(t)),null==_||_([]),null==G||G()}}),W&&(null==W?void 0:W.length)>0&&"variable"!=W[0].name&&e.jsx(s.Button,{disabled:(null!==(R=null==W?void 0:W.length)&&void 0!==R?R:0)<=1,style:{alignSelf:"flex-end"},onClick:()=>{Z(!0),X(!0)},buttonText:"Rearrange Products",buttonType:"tertiary"})]})),!z&&M&&0===(null==W?void 0:W.length)&&null!=V&&V>=0&&e.jsxs(e.Fragment,{children:[e.jsxs("div",Object.assign({style:{marginLeft:12}},{children:[e.jsx(u.TitleRegular,{children:"Product(s)"}),e.jsx(u.BodySecondary,{children:`Select ${null!=F?F:1} products`})]})),e.jsxs("div",Object.assign({style:{marginTop:16,marginBottom:16,marginLeft:N?16:12,marginRight:N?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:N?`2px dashed ${c.COLORS.content.negative}`:void 0},size:"medium",buttonText:"Add Product(s)",buttonType:N?"tertiaryGray":"dashBold",LeadingIcon:()=>e.jsx("div",Object.assign({style:{display:"flex",width:18,height:18}},{children:e.jsx(n.default,{width:18,height:18,color:c.COLORS.content.secondary})})),onClick:e=>{X(!0)}}),D===j.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(u.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:N?`2px dashed ${c.COLORS.content.negative}`:void 0},size:"medium",buttonText:"Add Product(s) Variable",buttonType:N?"tertiaryGray":"dashBold",LeadingIcon:()=>e.jsx("div",Object.assign({style:{display:"flex"}},{children:e.jsx(n.default,{width:18,height:18,color:c.COLORS.content.secondary})})),onClick:e=>{te(!0)}})]})]})),N&&e.jsx("div",Object.assign({style:{marginLeft:10,marginBottom:16}},{children:e.jsx(v.Badge,{padding:"8px",errorText:"Please add products"})}))]}),!M&&(null!=V?V:-1)>-1&&e.jsxs("div",Object.assign({style:{display:"flex",background:c.COLORS.surface.hovered,alignItems:"center"}},{children:[e.jsx(d.IconButton,{Icon:l.default,disabled:ie,width:8,height:14,svgStyle:ie?{}:{color:c.COLORS.content.secondary},onClick:()=>{var e;null===(e=null==J?void 0:J.current)||void 0===e||e.slickPrev(),(null!=V?V:-1)<1||null==H||H((e=>e-1))}}),e.jsx(u.TitleRegular,Object.assign({style:{flex:1,display:"flex",justifyContent:"center"},color:c.COLORS.content.secondary},{children:`Card ${(null!=V?V:0)+1}/${F}`})),e.jsx(d.IconButton,{Icon:i.default,width:8,height:14,disabled:le,svgStyle:le?{}:{color:c.COLORS.content.secondary},onClick:()=>{var e;null===(e=null==J?void 0:J.current)||void 0===e||e.slickNext(),(null!=V?V:-1)>=(null!=F?F:-1)-1||null==H||H((e=>e+1))}})]})),e.jsx(m.default,{whatsappSpecificPickerMeta:b,template:y,onTemplateChange:e=>{null==A||A(e)},showVariableModal:f,variableList:C,variableListForImage:O,discountCode:I,setDiscountCode:S}),U&&E&&e.jsx(p.ProductPickerModal,{zIndex:200,startupScreen:Y?p.ScreenName.RearrangeProducts:p.ScreenName.Collections,rearrangeEnabled:!0,storeId:E.storeId,selectedItems:(e=>{if(e.length>0){const t={};for(const l of e){const e=null==l?void 0:l.collectionId,i=l.productId,n=l.variantId;e in t||(t[e]={products:{},name:"",image:"",isSmartCollection:!1}),i in t[e].products||(t[e].products[i]={variants:{},name:(null==l?void 0:l.productName)||"",image:(null==l?void 0:l.productImage)||""}),t[e].products[i].variants[n]={name:(null==l?void 0:l.name)||"",price:"",image:(null==l?void 0:l.image)||"",quantity:l.quantity||0,displayOrder:l.displayOrder}}return t}return{}})(null!=W?W:[]),collectionFetcher:E.fetchCollections,productFetcher:E.fetchProducts,onAdd:(e,t)=>{var l,i,n,r,a,s;Z(!1);const d=[];delete e.isCustom;for(const t of Object.keys(e)){const o=e[t].products;if(void 0!==o&&Object.keys(o).length)for(const e of Object.keys(o)){const c=o[e].variants;if(void 0!==c&&Object.keys(c).length)for(const u of Object.keys(c)){const{name:p,image:v,quantity:h,displayOrder:m}=c[u],g={name:p,image:null!==(i=null!=v?v:null===(l=o[e])||void 0===l?void 0:l.image)&&void 0!==i?i:"",quantity:h,variantId:u,productId:e,displayOrder:m,collectionId:t,productName:null!==(r=null===(n=o[e])||void 0===n?void 0:n.name)&&void 0!==r?r:"",productImage:null!==(s=null===(a=o[e])||void 0===a?void 0:a.image)&&void 0!==s?s:""};d.push(g)}}}const c=d.sort(((e,t)=>e.displayOrder-t.displayOrder)),u=d.map((e=>e.image)),p=o.cloneDeep(Object.assign({},y));p&&(u.forEach(((e,t)=>{var l;p.components[1].cards[t].components[0].example.header_handle=e?[e]:[null!==(l=null==$?void 0:$[t])&&void 0!==l?l:""]})),null==A||A(p)),null==_||_(c),X(!1)},searchInCollectionFetcher:E.searchInCollection,searchFetcher:E.searchProducts,visible:U,onClose:()=>{X(!1)},exactLimit:null!=F?F:1}),ee&&e.jsx(a.AddVariableV2SideModal,{zIndex:2e3,data:null!=C?C:[],showVariable:ee,setShowVariable:te,placeholder:"Add a variable",customTrigger:e=>{null==_||_([{name:"variable",productName:e.actualValue}])}})]}))};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),n=require("lodash"),t=require("react"),o=require("styled-components"),i=require("../../input/Input.js"),l=require("../../template-preview/models/TemplateMeta.js"),a=require("../../template-preview/models/WhatsAppTemplate.js"),s=require("../context/templateModalContext.js"),d=require("../custom-hooks/useAdditionalVariables.js"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),n=require("lodash"),t=require("react"),o=require("styled-components"),i=require("../../input/Input.js"),l=require("../../template-preview/models/TemplateMeta.js"),a=require("../../template-preview/models/WhatsAppTemplate.js"),s=require("../context/templateModalContext.js"),d=require("../custom-hooks/useAdditionalVariables.js"),u=require("../utils/getDataFromTemplateComponent.js"),r=require("../utils/validateIsUrl.js"),p=require("../utils/validateName.js"),c=require("./BackTrackComponent.js"),v=require("./DiscountCodeComponent.js"),m=require("./EditMediaModal.js"),b=require("./EditMediaV2.js"),g=require("./EditMediaV2.style.js"),f=require("./useEditWhtasappTemplateMedia.js"),h=require("./VariableConnector.js"),j=require("./VariableConnectorsPanel.js"),C=require("./VariableConnectorWhatsApp.js"),O=require("./VariableEditorHeader.js"),x=require("./WhatsAppTemplateCardButtonV2.js");function T(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const y=T(o).default.div`
|
|
2
2
|
padding-top: 24px;
|
|
3
3
|
padding-left: 10px;
|
|
4
4
|
padding-right: 10px;
|
|
5
5
|
margin-bottom: 8px;
|
|
6
6
|
line-height: normal;
|
|
7
|
-
`;exports.default=o=>{let{template:T,onTemplateChange:E,whatsappSpecificPickerMeta:V,showVariableModal:B,variableList:k,variableListForImage:M,discountCode:L,setDiscountCode:q,fileName:D,setFileName:I}=o;var R,U,P,A,w,N,S,_,F,H,Q,Y,K,W,$,G,X,z,J,Z,ee,ne,te,oe,ie,le,ae,se,de,re,ue,pe,ce;const ve=T.isCarouselType,{originalVariableList:me,pod:be,extras:ge,selectedCarouselIndex:fe,isProductCarouselType:je}=s.useTemplateModalContext(),{descriptionComponents:he,urlBtns:Ce,qrbBtns:Oe,imageComponent:xe,bodyVariables:Te,headerVariables:ye}=r.getAllDataFromTemplateComponent(T),Ee=t.useRef(null),Ve=d.useAdditionalVariables({variableList:k,categoryDisplayName:"Custom Variables",variableDisplayName:"Custom Text",variableValue:"{{custom.text}}"}),[Be,ke]=t.useState(!1),[Me,Le]=t.useState(-1===fe?{descriptionComponents:he,urlBtns:Ce,qrbBtns:Oe,imageComponent:xe,bodyVariables:Te,headerVariables:ye}:{}),{uploadMediaLink:qe,uploadMediaFiles:De}=V,Ie=f.useEditWhatsappTemplateMedia({uploadMediaLink:qe,uploadMediaFiles:De,updateTemplateImageUrl:function(e,t){var o,i,l,a,s,d,r,u;let p;p=null!=fe&&fe>-1?{components:null===(i=null===(o=T.components[1])||void 0===o?void 0:o.cards)||void 0===i?void 0:i[fe].components,mapping:null===(a=null===(l=null==T?void 0:T.mapping)||void 0===l?void 0:l.cards)||void 0===a?void 0:a[fe]}:Object.assign({},T);const c=null===(s=null==p?void 0:p.components)||void 0===s?void 0:s.findIndex((e=>{if("HEADER"===e.type&&"NONE"!==e.format&&"TEXT"!==e.format)return!0}));if(void 0!==c&&c>-1&&(null==p?void 0:p.components[c])){const n=Object.assign(Object.assign({},p.components[c]),{format:t,example:{header_handle:[e]}}),o=[...p.components];o[c]=n,p=Object.assign(Object.assign({},p),{components:o})}p.mapping&&(p.mapping=Object.assign(Object.assign({},p.mapping),{header:void 0}));if(null!=fe&&fe>-1){const e=n.cloneDeep(T);e.components[1].cards[fe].components=p.components,(null===(d=null==e?void 0:e.mapping)||void 0===d?void 0:d.cards)&&(null===(r=null==e?void 0:e.mapping)||void 0===r?void 0:r.cards.length)>0&&(e.mapping.cards[fe]=null!==(u=p.mapping)&&void 0!==u?u:{}),null==E||E(Object.assign({},e)),Ue(!0)}else null==E||E(Object.assign({},p))},mediaComponent:ve?Me.imageComponent:xe,fileRef:Ee}),[Re,Ue]=t.useState(!1),[Pe,Ae]=t.useState(D),[we,Ne]=t.useState();function Se(e,t,o){var i,l,a,s,d,r,u,p,c,v;const m=null!=fe&&fe>-1?{components:null===(i=Object.assign({},T).components[1].cards)||void 0===i?void 0:i[fe].components,mapping:null===(l=Object.assign({},T).mapping.cards)||void 0===l?void 0:l[fe]}:Object.assign({},T),b=n.cloneDeep(m),g="custom"===t&&"string"==typeof e,f=g?e:"string"!=typeof e?e.defaultValue?e.defaultValue:"https://d.bik.ai/":"https://d.bik.ai";if(null!=fe&&fe>-1&&je){const t=Object.assign({},T).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 a=null!==(t=null==l?void 0:l[o])&&void 0!==t?t:{};a=Object.assign(Object.assign({},a),{url:"https://d.bik.ai/{{1}}",example:[f]});const s=null===(i=e.buttons)||void 0===i?void 0:i.map((e=>"URL"===e.type&&(null==e?void 0:e.text)===(null==a?void 0:a.text)?a:e));return Object.assign(Object.assign({},e),{buttons:s})}return e}))})))}):e})),i=null===(s=null===(a=Object.assign({},T).mapping)||void 0===a?void 0:a.cards)||void 0===s?void 0:s.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(T);return l.components=t,l.mapping.cards=i,void(null==E||E(Object.assign({},l)))}const j=null==b?void 0:b.components.findIndex((e=>"BUTTONS"===e.type));if(void 0!==j&&j>-1){const n=null===(d=null==b?void 0:b.components[j].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?e.defaultValue:"https://d.bik.ai/";let a=n[o];a=Object.assign(Object.assign({},a),{url:"https://d.bik.ai/{{1}}",example:[l]});const s=[...null!==(p=null===(u=null===(r=b.components)||void 0===r?void 0:r[j])||void 0===u?void 0:u.buttons)&&void 0!==p?p:[]].map((e=>"URL"===e.type&&(null==e?void 0:e.text)===(null==a?void 0:a.text)?a:e)),d=Object.assign(Object.assign({},b.components[j]),{buttons:s}),v=null===(c=b.mapping)||void 0===c?void 0:c.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[j]=d,b.components=g}}if("string"!=typeof e){"checkout.checkoutUrl"===(null===(v=e.placeHolder)||void 0===v?void 0:v.slice(2,-2))?ke(!0):(ke(!1),null==q||q(""))}if(null!=fe&&fe>-1){const e=n.cloneDeep(T);e.components[1].cards[fe].components=b.components,e.mapping.cards[fe]=b.mapping,null==E||E(Object.assign({},e))}else null==E||E(b)}function _e(e,t,o){var i,l,a,s,d,r;const u=null!=fe&&fe>-1?{components:null===(i=Object.assign({},T).components[1].cards)||void 0===i?void 0:i[fe].components,mapping:null===(l=Object.assign({},T).mapping.cards)||void 0===l?void 0:l[fe]}:Object.assign({},T);if(null!=fe&&fe>-1&&je){const t=Object.assign({},T).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 a=null===(t=n.buttons)||void 0===t?void 0:t.filter((e=>"QUICK_REPLY"===e.type));let s=null!==(i=null==a?void 0:a[o])&&void 0!==i?i:{};s=Object.assign(Object.assign({},s),{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==s?void 0:s.text)?s:e));return Object.assign(Object.assign({},n),{buttons:d})}return n}))})))}):n})),i=n.cloneDeep(T);return i.components=t,void(null==E||E(Object.assign({},i)))}const p=null==u?void 0:u.components.findIndex((e=>"BUTTONS"===e.type));if(void 0!==p&&p>-1){const n=null===(a=null==u?void 0:u.components[p].buttons)||void 0===a?void 0:a.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===(s=u.components)||void 0===s?void 0:s[p])||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[p]),{buttons:i}),a=[...u.components];a[p]=l,u.components=a}}if(null!=fe&&fe>-1){const e=n.cloneDeep(T);e.components[1].cards[fe].components=u.components,null==E||E(Object.assign({},e))}else null==E||E(u)}t.useEffect((()=>{var e,n;if(null===(e=T.mapping.buttons)||void 0===e?void 0:e.find((e=>"checkout.checkoutUrl"===e.slice(2,-2))))ke(!0);else{ke(!1);const e=null===(n=null==ge?void 0:ge.discountCodeExtra)||void 0===n?void 0:n[1];null==e||e("")}}),[T]),t.useEffect((()=>{var e,n,t,o;if(null!=fe&&fe>-1){const i={components:null===(n=null===(e=T.components[1])||void 0===e?void 0:e.cards)||void 0===n?void 0:n[fe].components,mapping:null===(o=null===(t=null==T?void 0:T.mapping)||void 0===t?void 0:t.cards)||void 0===o?void 0:o[fe]},{descriptionComponents:l,urlBtns:a,qrbBtns:s,imageComponent:d,bodyVariables:u,headerVariables:p}=r.getAllDataFromTemplateComponent(i);Le({descriptionComponents:l,urlBtns:a,qrbBtns:s,imageComponent:d,bodyVariables:u,headerVariables:p})}else if(null!=fe&&-1===fe){const{descriptionComponents:e,urlBtns:n,qrbBtns:t,imageComponent:o,bodyVariables:i,headerVariables:l}=r.getAllDataFromTemplateComponent(T);Le({descriptionComponents:e,urlBtns:n,qrbBtns:t,imageComponent:o,bodyVariables:i,headerVariables:l})}}),[fe]),t.useEffect((()=>{var e,n,t,o;if(null!=fe&&fe>-1&&Re){const i={components:null===(n=null===(e=T.components[1])||void 0===e?void 0:e.cards)||void 0===n?void 0:n[fe].components,mapping:null===(o=null===(t=null==T?void 0:T.mapping)||void 0===t?void 0:t.cards)||void 0===o?void 0:o[fe]},{descriptionComponents:l,urlBtns:a,qrbBtns:s,imageComponent:d,bodyVariables:u,headerVariables:p}=r.getAllDataFromTemplateComponent(i);Le({descriptionComponents:l,urlBtns:a,qrbBtns:s,imageComponent:d,bodyVariables:u,headerVariables:p}),Ue(!1)}}),[Re]);const Fe=ve?Me.imageComponent:xe;return Ie.openEditMedia?e.jsx(h.Container,Object.assign({style:{flexDirection:"column",width:400,maxHeight:460}},{children:e.jsx(m.default,{mediaComponentFormat:null!==(R=Fe.format)&&void 0!==R?R:l.HEADER_TYPES.IMAGE,uploadMedia:Ie.uploadMedia,variableListForImage:M||[],useEditWhatsappTemplateMediaResponse:Ie,setOpenEditMedia:Ie.setOpenEditMedia,openEditMedia:Ie.openEditMedia,editIconRef:Ie.editIconRef,fileRef:Ee})})):e.jsxs(h.Container,Object.assign({style:{flexDirection:"column",width:400,maxHeight:460}},{children:[!!Me.imageComponent&&!je&&e.jsxs(g.EditTemplateMediaContainer,{children:[e.jsx(b.default,{imageName:null!==(P=null===(U=null==Fe?void 0:Fe.example)||void 0===U?void 0:U.header_handle)&&void 0!==P?P:[],handleImageChange:Ie.handleImageChange,mediaType:null==Fe?void 0:Fe.format,error:Ie.error,isLoading:Ie.loading,setOpenEditMedia:Ie.setOpenEditMedia,selectedVariable:u.isVariable(null!==(N=null===(w=null===(A=null==Fe?void 0:Fe.example)||void 0===A?void 0:A.header_handle)||void 0===w?void 0:w[0])&&void 0!==N?N:"")?null===(_=null===(S=null==Fe?void 0:Fe.example)||void 0===S?void 0:S.header_handle)||void 0===_?void 0:_[0]:(null===(H=null===(F=null==T?void 0:T.mapping)||void 0===F?void 0:F.header)||void 0===H?void 0:H[0])?null===(Y=null===(Q=null==T?void 0:T.mapping)||void 0===Q?void 0:Q.header)||void 0===Y?void 0:Y[0]:Ie.selectedVariable}),(null==xe?void 0:xe.format)==l.HEADER_TYPES.DOCUMENT?e.jsx(y,{children:e.jsx(i.Input,{labelText:"PDF Name",placeholder:"Enter the name",value:Pe,errorMessage:we||void 0,onBlur:()=>{if(!Pe)return null==I||I(""),void Ne("PDF name is Required");const e=p.validateInputName(Pe);null==I||I(Pe),Ne(e?"Please enter a valid PDF name":void 0)},onChangeText:e=>{Ne(""),Ae(e)}})}):e.jsx(e.Fragment,{})]}),Me.bodyVariables.length>0&&e.jsx(O.default,{containerStyle:{paddingTop:Me.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===(K=Me.descriptionComponents)||void 0===K?void 0:K.map(((n,t)=>e.jsx(C.default,{originalVariableList:null!=fe&&fe>-1?me.cards[fe]:me,type:n.type,descriptionComponent:n.component,showVariableModal:B,variableList:k},t))),(null===($=null===(W=null!=fe&&fe>-1?me.cards[fe].buttons:null==me?void 0:me.buttons)||void 0===W?void 0:W.filter((e=>"URL"===e.type)))||void 0===$?void 0:$.length)>0&&e.jsx(O.default,{headerText:"Edit buttons",subText:"Edit the link connected to the CTA button"}),null===(X=null===(G=null!=fe&&fe>-1?me.cards[fe].buttons:null==me?void 0:me.buttons)||void 0===G?void 0:G.filter((e=>be===a.POD.CHATBOT||"URL"===e.type)))||void 0===X?void 0:X.map(((n,t)=>{if("URL"===n.type)return e.jsx(x.default,{variableListIndex:t,CTAoptions:null==V?void 0:V.CTAoptions,button:n,currentVariableList:null!=fe&&fe>-1?Object.assign({},me.cards[fe]):Object.assign({},me),updateSelectedURLTemplateBtn:Se,variableList:k},`${t}_${fe}`)})),be===a.POD.CHATBOT&&(null===(J=null===(z=Oe[0])||void 0===z?void 0:z.component)||void 0===J?void 0:J.buttons)&&(null===(ne=null===(ee=null===(Z=Oe[0])||void 0===Z?void 0:Z.component)||void 0===ee?void 0:ee.buttons)||void 0===ne?void 0:ne.length)>0&&e.jsx(c.BackTrackComponent,{backTrackMessage:null===(te=null==ge?void 0:ge.backTrackExtra)||void 0===te?void 0:te[0],setBackTrackMessage:null===(oe=null==ge?void 0:ge.backTrackExtra)||void 0===oe?void 0:oe[1]}),(null===(le=null===(ie=null!=fe&&fe>-1?me.cards[fe].buttons:null==me?void 0:me.buttons)||void 0===ie?void 0:ie.filter((e=>"QUICK_REPLY"===e.type)))||void 0===le?void 0:le.length)>0&&(be!==a.POD.CHATBOT?e.jsx(O.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(c.BackTrackComponent,{backTrackMessage:null===(ae=null==ge?void 0:ge.backTrackExtra)||void 0===ae?void 0:ae[0],setBackTrackMessage:null===(se=null==ge?void 0:ge.backTrackExtra)||void 0===se?void 0:se[1]})),null===(re=null===(de=null!=fe&&fe>-1?me.cards[fe].buttons:null==me?void 0:me.buttons)||void 0===de?void 0:de.filter((e=>"QUICK_REPLY"===e.type)))||void 0===re?void 0:re.map(((n,t)=>{if("QUICK_REPLY"===n.type&&be!==a.POD.CHATBOT)return e.jsx(x.default,{variableListIndex:t,QRBoptions:null==V?void 0:V.QRBoptions,button:n,currentVariableList:null!=fe&&fe>-1?Object.assign({},me.cards[fe]):Object.assign({},me),updateSelectedQRBTemplateBtn:_e},`${t}_${fe}`)})),be===a.POD.CHATBOT&&Be&&e.jsx(v.DiscountCodeComponent,{discountCode:null===(ue=null==ge?void 0:ge.discountCodeExtra)||void 0===ue?void 0:ue[0],setDiscountCode:null===(pe=null==ge?void 0:ge.discountCodeExtra)||void 0===pe?void 0:pe[1],variableList:k}),null===(ce=null!=fe&&fe>-1?me.cards[fe].buttons:null==me?void 0:me.buttons)||void 0===ce?void 0:ce.map(((n,t)=>{var o,i,l;if("COPY_CODE"===n.type)return e.jsx(j.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:Ve,componentType:"BUTTONS"},t)}))]}))};
|
|
7
|
+
`;exports.default=o=>{let{template:T,onTemplateChange:E,whatsappSpecificPickerMeta:V,showVariableModal:B,variableList:k,variableListForImage:M,discountCode:L,setDiscountCode:q,fileName:D,setFileName:I}=o;var R,U,P,A,w,N,S,_,F,H,Q,Y,K,W,$,G,X,z,J,Z,ee,ne,te,oe,ie,le,ae,se,de,ue,re,pe,ce,ve,me,be,ge,fe,he;const je=T.isCarouselType,{originalVariableList:Ce,pod:Oe,extras:xe,selectedCarouselIndex:Te,isProductCarouselType:ye}=s.useTemplateModalContext(),{descriptionComponents:Ee,urlBtns:Ve,qrbBtns:Be,imageComponent:ke,bodyVariables:Me,headerVariables:Le}=u.getAllDataFromTemplateComponent(T),qe=t.useRef(null),De=d.useAdditionalVariables({variableList:k,categoryDisplayName:"Custom Variables",variableDisplayName:"Custom Text",variableValue:"{{custom.text}}"}),[Ie,Re]=t.useState(!1),[Ue,Pe]=t.useState(-1===Te?{descriptionComponents:Ee,urlBtns:Ve,qrbBtns:Be,imageComponent:ke,bodyVariables:Me,headerVariables:Le}:{}),{uploadMediaLink:Ae,uploadMediaFiles:we}=V,Ne=f.useEditWhatsappTemplateMedia({uploadMediaLink:Ae,uploadMediaFiles:we,updateTemplateImageUrl:function(e,t){var o,i,l,a,s,d,u,r;let p;p=null!=Te&&Te>-1?{components:null===(i=null===(o=T.components[1])||void 0===o?void 0:o.cards)||void 0===i?void 0:i[Te].components,mapping:null===(a=null===(l=null==T?void 0:T.mapping)||void 0===l?void 0:l.cards)||void 0===a?void 0:a[Te]}:Object.assign({},T);const c=null===(s=null==p?void 0:p.components)||void 0===s?void 0:s.findIndex((e=>{if("HEADER"===e.type&&"NONE"!==e.format&&"TEXT"!==e.format)return!0}));if(void 0!==c&&c>-1&&(null==p?void 0:p.components[c])){const n=Object.assign(Object.assign({},p.components[c]),{format:t,example:{header_handle:[e]}}),o=[...p.components];o[c]=n,p=Object.assign(Object.assign({},p),{components:o})}p.mapping&&(p.mapping=Object.assign(Object.assign({},p.mapping),{header:void 0}));if(null!=Te&&Te>-1){const e=n.cloneDeep(T);e.components[1].cards[Te].components=p.components,(null===(d=null==e?void 0:e.mapping)||void 0===d?void 0:d.cards)&&(null===(u=null==e?void 0:e.mapping)||void 0===u?void 0:u.cards.length)>0&&(e.mapping.cards[Te]=null!==(r=p.mapping)&&void 0!==r?r:{}),null==E||E(Object.assign({},e)),_e(!0)}else null==E||E(Object.assign({},p))},mediaComponent:je?Ue.imageComponent:ke,fileRef:qe}),[Se,_e]=t.useState(!1),[Fe,He]=t.useState(D),[Qe,Ye]=t.useState();function Ke(e,t,o){var i,l,a,s,d,u,r,p,c,v;const m=null!=Te&&Te>-1?{components:null===(i=Object.assign({},T).components[1].cards)||void 0===i?void 0:i[Te].components,mapping:null===(l=Object.assign({},T).mapping.cards)||void 0===l?void 0:l[Te]}:Object.assign({},T),b=n.cloneDeep(m),g="custom"===t&&"string"==typeof e,f=g?e:"string"!=typeof e?e.defaultValue?e.defaultValue:"https://d.bik.ai/":"https://d.bik.ai";if(null!=Te&&Te>-1&&ye){const t=Object.assign({},T).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 a=null!==(t=null==l?void 0:l[o])&&void 0!==t?t:{};a=Object.assign(Object.assign({},a),{url:"https://d.bik.ai/{{1}}",example:[f]});const s=null===(i=e.buttons)||void 0===i?void 0:i.map((e=>"URL"===e.type&&(null==e?void 0:e.text)===(null==a?void 0:a.text)?a:e));return Object.assign(Object.assign({},e),{buttons:s})}return e}))})))}):e})),i=null===(s=null===(a=Object.assign({},T).mapping)||void 0===a?void 0:a.cards)||void 0===s?void 0:s.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(T);return l.components=t,l.mapping.cards=i,void(null==E||E(Object.assign({},l)))}const h=null==b?void 0:b.components.findIndex((e=>"BUTTONS"===e.type));if(void 0!==h&&h>-1){const n=null===(d=null==b?void 0:b.components[h].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?e.defaultValue:"https://d.bik.ai/";let a=n[o];a=Object.assign(Object.assign({},a),{url:"https://d.bik.ai/{{1}}",example:[l]});const s=[...null!==(p=null===(r=null===(u=b.components)||void 0===u?void 0:u[h])||void 0===r?void 0:r.buttons)&&void 0!==p?p:[]].map((e=>"URL"===e.type&&(null==e?void 0:e.text)===(null==a?void 0:a.text)?a:e)),d=Object.assign(Object.assign({},b.components[h]),{buttons:s}),v=null===(c=b.mapping)||void 0===c?void 0:c.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[h]=d,b.components=g}}if("string"!=typeof e){"checkout.checkoutUrl"===(null===(v=e.placeHolder)||void 0===v?void 0:v.slice(2,-2))?Re(!0):(Re(!1),null==q||q(""))}if(null!=Te&&Te>-1){const e=n.cloneDeep(T);e.components[1].cards[Te].components=b.components,e.mapping.cards[Te]=b.mapping,null==E||E(Object.assign({},e))}else null==E||E(b)}function We(e,t,o){var i,l,a,s,d,u,r;const p=null!=Te&&Te>-1?{components:null===(i=Object.assign({},T).components[1].cards)||void 0===i?void 0:i[Te].components,mapping:null===(l=Object.assign({},T).mapping.cards)||void 0===l?void 0:l[Te]}:Object.assign({},T);if(null!=Te&&Te>-1&&ye){const t=Object.assign({},T).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 a=null===(t=null==n?void 0:n.buttons)||void 0===t?void 0:t.filter((e=>"QUICK_REPLY"===e.type));let s=null!==(i=null==a?void 0:a[o])&&void 0!==i?i:{};s=Object.assign(Object.assign({},s),{flowId:e.flowId,flowName:e.flowName});const d=null===(l=null==n?void 0:n.buttons)||void 0===l?void 0:l.map((e=>"QUICK_REPLY"===e.type&&(null==e?void 0:e.text)===(null==s?void 0:s.text)?s:e));return Object.assign(Object.assign({},n),{buttons:d})}return n}))})))}):n})),i=n.cloneDeep(T);return i.components=t,void(null==E||E(Object.assign({},i)))}const c=null==p?void 0:p.components.findIndex((e=>"BUTTONS"===e.type));if(void 0!==c&&c>-1){const n=null===(s=null===(a=null==p?void 0:p.components[c])||void 0===a?void 0:a.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===(u=null===(d=p.components)||void 0===d?void 0:d[c])||void 0===u?void 0:u.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({},p.components[c]),{buttons:i}),a=[...p.components];a[c]=l,p.components=a}}if(null!=Te&&Te>-1){const e=n.cloneDeep(T);e.components[1].cards[Te].components=p.components,null==E||E(Object.assign({},e))}else null==E||E(p)}t.useEffect((()=>{var e,n;if(null===(e=T.mapping.buttons)||void 0===e?void 0:e.find((e=>"checkout.checkoutUrl"===e.slice(2,-2))))Re(!0);else{Re(!1);const e=null===(n=null==xe?void 0:xe.discountCodeExtra)||void 0===n?void 0:n[1];null==e||e("")}}),[T]),t.useEffect((()=>{var e,n,t,o;if(null!=Te&&Te>-1){const i={components:null===(n=null===(e=T.components[1])||void 0===e?void 0:e.cards)||void 0===n?void 0:n[Te].components,mapping:null===(o=null===(t=null==T?void 0:T.mapping)||void 0===t?void 0:t.cards)||void 0===o?void 0:o[Te]},{descriptionComponents:l,urlBtns:a,qrbBtns:s,imageComponent:d,bodyVariables:r,headerVariables:p}=u.getAllDataFromTemplateComponent(i);Pe({descriptionComponents:l,urlBtns:a,qrbBtns:s,imageComponent:d,bodyVariables:r,headerVariables:p})}else if(null!=Te&&-1===Te){const{descriptionComponents:e,urlBtns:n,qrbBtns:t,imageComponent:o,bodyVariables:i,headerVariables:l}=u.getAllDataFromTemplateComponent(T);Pe({descriptionComponents:e,urlBtns:n,qrbBtns:t,imageComponent:o,bodyVariables:i,headerVariables:l})}}),[Te]),t.useEffect((()=>{var e,n,t,o;if(null!=Te&&Te>-1&&Se){const i={components:null===(n=null===(e=T.components[1])||void 0===e?void 0:e.cards)||void 0===n?void 0:n[Te].components,mapping:null===(o=null===(t=null==T?void 0:T.mapping)||void 0===t?void 0:t.cards)||void 0===o?void 0:o[Te]},{descriptionComponents:l,urlBtns:a,qrbBtns:s,imageComponent:d,bodyVariables:r,headerVariables:p}=u.getAllDataFromTemplateComponent(i);Pe({descriptionComponents:l,urlBtns:a,qrbBtns:s,imageComponent:d,bodyVariables:r,headerVariables:p}),_e(!1)}}),[Se]);const $e=je?Ue.imageComponent:ke;return Ne.openEditMedia?e.jsx(j.Container,Object.assign({style:{flexDirection:"column",width:400,maxHeight:460}},{children:e.jsx(m.default,{mediaComponentFormat:null!==(R=$e.format)&&void 0!==R?R:l.HEADER_TYPES.IMAGE,uploadMedia:Ne.uploadMedia,variableListForImage:M||[],useEditWhatsappTemplateMediaResponse:Ne,setOpenEditMedia:Ne.setOpenEditMedia,openEditMedia:Ne.openEditMedia,editIconRef:Ne.editIconRef,fileRef:qe})})):e.jsxs(j.Container,Object.assign({style:{flexDirection:"column",width:400,maxHeight:460,minWidth:ye?"420px":"auto"}},{children:[!!Ue.imageComponent&&!ye&&e.jsxs(g.EditTemplateMediaContainer,{children:[e.jsx(b.default,{imageName:null!==(P=null===(U=null==$e?void 0:$e.example)||void 0===U?void 0:U.header_handle)&&void 0!==P?P:[],handleImageChange:Ne.handleImageChange,mediaType:null==$e?void 0:$e.format,error:Ne.error,isLoading:Ne.loading,setOpenEditMedia:Ne.setOpenEditMedia,selectedVariable:r.isVariable(null!==(N=null===(w=null===(A=null==$e?void 0:$e.example)||void 0===A?void 0:A.header_handle)||void 0===w?void 0:w[0])&&void 0!==N?N:"")?null===(_=null===(S=null==$e?void 0:$e.example)||void 0===S?void 0:S.header_handle)||void 0===_?void 0:_[0]:(null===(H=null===(F=null==T?void 0:T.mapping)||void 0===F?void 0:F.header)||void 0===H?void 0:H[0])?null===(Y=null===(Q=null==T?void 0:T.mapping)||void 0===Q?void 0:Q.header)||void 0===Y?void 0:Y[0]:Ne.selectedVariable}),(null==ke?void 0:ke.format)==l.HEADER_TYPES.DOCUMENT?e.jsx(y,{children:e.jsx(i.Input,{labelText:"PDF Name",placeholder:"Enter the name",value:Fe,errorMessage:Qe||void 0,onBlur:()=>{if(!Fe)return null==I||I(""),void Ye("PDF name is Required");const e=p.validateInputName(Fe);null==I||I(Fe),Ye(e?"Please enter a valid PDF name":void 0)},onChangeText:e=>{Ye(""),He(e)}})}):e.jsx(e.Fragment,{})]}),(null===(K=Ue.bodyVariables)||void 0===K?void 0:K.length)>0&&e.jsx(O.default,{containerStyle:{paddingTop:Ue.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===(W=Ue.descriptionComponents)||void 0===W?void 0:W.map(((n,t)=>e.jsx(C.default,{originalVariableList:null!=Te&&Te>-1?Ce.cards[Te]:Ce,type:n.type,descriptionComponent:n.component,showVariableModal:B,variableList:k},t))),(null===(X=null===(G=null!=Te&&Te>-1?null===($=Ce.cards[Te])||void 0===$?void 0:$.buttons:null==Ce?void 0:Ce.buttons)||void 0===G?void 0:G.filter((e=>"URL"===e.type)))||void 0===X?void 0:X.length)>0&&e.jsx(O.default,{headerText:"Edit buttons",subText:"Edit the link connected to the CTA button"}),null===(Z=null===(J=null!=Te&&Te>-1?null===(z=Ce.cards[Te])||void 0===z?void 0:z.buttons:null==Ce?void 0:Ce.buttons)||void 0===J?void 0:J.filter((e=>Oe===a.POD.CHATBOT||"URL"===e.type)))||void 0===Z?void 0:Z.map(((n,t)=>{if("URL"===n.type)return e.jsx(x.default,{variableListIndex:t,CTAoptions:null==V?void 0:V.CTAoptions,button:n,currentVariableList:null!=Te&&Te>-1?Object.assign({},Ce.cards[Te]):Object.assign({},Ce),updateSelectedURLTemplateBtn:Ke,variableList:k},`${t}_${Te}`)})),Oe===a.POD.CHATBOT&&(null===(ne=null===(ee=Be[0])||void 0===ee?void 0:ee.component)||void 0===ne?void 0:ne.buttons)&&(null===(ie=null===(oe=null===(te=Be[0])||void 0===te?void 0:te.component)||void 0===oe?void 0:oe.buttons)||void 0===ie?void 0:ie.length)>0&&e.jsx(c.BackTrackComponent,{backTrackMessage:null===(le=null==xe?void 0:xe.backTrackExtra)||void 0===le?void 0:le[0],setBackTrackMessage:null===(ae=null==xe?void 0:xe.backTrackExtra)||void 0===ae?void 0:ae[1]}),(null===(ue=null===(de=null!=Te&&Te>-1?null===(se=Ce.cards[Te])||void 0===se?void 0:se.buttons:null==Ce?void 0:Ce.buttons)||void 0===de?void 0:de.filter((e=>"QUICK_REPLY"===e.type)))||void 0===ue?void 0:ue.length)>0&&(Oe!==a.POD.CHATBOT?e.jsx(O.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(c.BackTrackComponent,{backTrackMessage:null===(re=null==xe?void 0:xe.backTrackExtra)||void 0===re?void 0:re[0],setBackTrackMessage:null===(pe=null==xe?void 0:xe.backTrackExtra)||void 0===pe?void 0:pe[1]})),null===(me=null===(ve=null!=Te&&Te>-1?null===(ce=Ce.cards[Te])||void 0===ce?void 0:ce.buttons:null==Ce?void 0:Ce.buttons)||void 0===ve?void 0:ve.filter((e=>"QUICK_REPLY"===e.type)))||void 0===me?void 0:me.map(((n,t)=>{if("QUICK_REPLY"===n.type&&Oe!==a.POD.CHATBOT)return e.jsx(x.default,{variableListIndex:t,QRBoptions:null==V?void 0:V.QRBoptions,button:n,currentVariableList:null!=Te&&Te>-1?Object.assign({},Ce.cards[Te]):Object.assign({},Ce),updateSelectedQRBTemplateBtn:We},`${t}_${Te}`)})),Oe===a.POD.CHATBOT&&Ie&&e.jsx(v.DiscountCodeComponent,{discountCode:null===(be=null==xe?void 0:xe.discountCodeExtra)||void 0===be?void 0:be[0],setDiscountCode:null===(ge=null==xe?void 0:xe.discountCodeExtra)||void 0===ge?void 0:ge[1],variableList:k}),null===(he=null!=Te&&Te>-1?null===(fe=Ce.cards[Te])||void 0===fe?void 0:fe.buttons:null==Ce?void 0:Ce.buttons)||void 0===he?void 0:he.map(((n,t)=>{var o,i,l;if("COPY_CODE"===n.type)return e.jsx(h.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:De,componentType:"BUTTONS"},t)}))]}))};
|
|
@@ -1,14 +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"),o=require("../../button/Button.js"),n=require("../../TypographyStyle.js"),l=require("../../../constants/Theme.js"),s=require("../Badge/index.js"),i=require("../context/templateModalContext.js");function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const d=a(r).default.div`
|
|
2
|
+
background: ${l.COLORS.surface.standard};
|
|
3
3
|
border-top-width: 1px;
|
|
4
|
-
border-top-color: ${
|
|
4
|
+
border-top-color: ${l.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: ${e=>e.
|
|
9
|
+
justify-content: ${e=>{var t;return null!==(t=e.justifyContent)&&void 0!==t?t:"end"}};
|
|
10
10
|
align-items: center;
|
|
11
11
|
gap: 12;
|
|
12
12
|
border-bottom-left-radius: 4px;
|
|
13
13
|
border-bottom-right-radius: 4px;
|
|
14
|
-
`;exports.default=r=>{let{isWhatsappCarousel:
|
|
14
|
+
`;exports.default=r=>{let{isWhatsappCarousel:a,onSelect:u}=r;var c,p,x,b;const{isError:g,selectedCarouselIndex:j,setSelectedCarouselIndex:f,setErrorIndexes:m,template:v}=i.useTemplateModalContext(),[y,h]=t.useState(a?"Next":"Select template");return t.useEffect((()=>{a&&-1===j?h("Next"):a&&null!=j&&j>-1&&h("Save & Select Template")}),[j]),e.jsxs(d,Object.assign({justifyContent:a&&(null===(p=null===(c=null==v?void 0:v.mapping)||void 0===c?void 0:c.body)||void 0===p?void 0:p.length)?"space-between":"end"},{children:[a&&null!=j&&j>=-1&&(null===(b=null===(x=null==v?void 0:v.mapping)||void 0===x?void 0:x.body)||void 0===b?void 0:b.length)&&e.jsx(n.TitleRegular,Object.assign({color:l.COLORS.text.secondary},{children:`Step ${-1===j?1:2}/2`})),e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"row"}},{children:[g&&e.jsx(s.Badge,{errorText:"Some inputs are missing or incorrect. Please check"}),e.jsx(o.Button,{id:"select-template-btn",buttonText:y,size:a?"small":"large",onClick:function(){a&&-1===j&&f?f(0):(null==m||m([]),u())}})]}))]}))};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),l=require("../template-context-mapper/context/templateModalContext.js"),t=require("../../utils/StringUtils.js"),a=require("../../constants/Theme.js"),i=require("../TypographyStyle.js"),n=require("./EmailTemplateThumbnailPreview.js"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),l=require("../template-context-mapper/context/templateModalContext.js"),t=require("../../utils/StringUtils.js"),a=require("../../constants/Theme.js"),i=require("../TypographyStyle.js"),n=require("./EmailTemplateThumbnailPreview.js"),r=require("./models/Channels.js"),s=require("./SmsTemplatePreview.js"),o=require("./WhatsAppTemplatePreview.js");const d={WhatsAppWrapper:{backgroundColor:a.COLORS.surface.standard,borderRadius:4,border:`1px solid ${a.COLORS.background.inactive}`,marginTop:16}};exports.TemplatePreview=p=>{let{template:u,channel:m,whatsAppSpecificMeta:c,templateCreationsInfo:v,hideHeader:h,size:j,onlyTemplateContent:C,emailSpecificMeta:g,smsSpecificMeta:S,showSampleValues:b,carouselCardIndex:x,isWhatsappCarousel:y,isPreview:T}=p;var O,w;const{setSelectedCarouselIndex:P}=l.useTemplateModalContext();return m===r.CHANNEL_TYPE.SMS?e.jsx("div",Object.assign({style:Object.assign({marginTop:v?16:0,border:v?`1px solid ${a.COLORS.stroke.primary}`:"none",borderRadius:4},null==S?void 0:S.templateContainerStyles)},{children:e.jsx(s.default,{template:u,hideHeader:h,onlyTemplateContent:C,size:null!=j?j:"large",variableStore:null==S?void 0:S.smsVariableStore,display_content:null==S?void 0:S.smsDisplayContent})})):m===r.CHANNEL_TYPE.EMAIL?e.jsx("div",Object.assign({style:Object.assign({marginTop:v?16:0},null==g?void 0:g.templateContainerStyles)},{children:e.jsx(n.default,{template:u,handleViewTemplate:()=>{var e;null===(e=null==g?void 0:g.handleViewTemplate)||void 0===e||e.call(g)},hideHeader:h,hideViewButton:null==g?void 0:g.hideViewButtonForEmail,containerStyle:null==g?void 0:g.containerStyle,emailDisplayContent:null==g?void 0:g.emailDisplayContent,emailHtmlContainerId:null==g?void 0:g.emailHtmlContainerId})})):m===r.CHANNEL_TYPE.WHATSAPP?e.jsxs("div",Object.assign({style:Object.assign(Object.assign({},null==c?void 0:c.templateContainerStyles),v?d.WhatsAppWrapper:{}),onClick:()=>{var e,l;if(P&&y){if(-1===x&&!(null===(l=null===(e=null==u?void 0:u.mapping)||void 0===e?void 0:e.body)||void 0===l?void 0:l.length))return;P(null!=x?x:-1)}}},{children:[v?e.jsx("div",Object.assign({style:{padding:16}},{children:e.jsx(i.TitleRegular,{children:t.default.convertToTitleCase(null!==(O=null==u?void 0:u.label)&&void 0!==O?O:"")})})):e.jsx(e.Fragment,{}),e.jsx(o.default,{showSampleValues:b,showHeader:null==c?void 0:c.showWhatsAppHeader,extras:null==c?void 0:c.whatsAppExtras,template:u,size:v?"small":null!=j?j:"large",containerStyle:Object.assign(Object.assign({borderWidth:v?0:1,borderTopWidth:1},null!==(w=null==c?void 0:c.containerStyle)&&void 0!==w?w:{}),{height:"100%"}),zeroStateComponent:null==c?void 0:c.zeroStateComponent,usePlaceHolderName:null==c?void 0:c.usePlaceHolderName,carouselCardIndex:x,isWhatsappCarousel:y,isPreview:T})]})):e.jsx(e.Fragment,{})};
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
export declare const Container: import("styled-components").StyledComponent<"div", any, {
|
|
2
2
|
isCarouselCard?: boolean | undefined;
|
|
3
3
|
showBorder?: boolean | undefined;
|
|
4
|
+
showDashedBorder?: boolean | undefined;
|
|
4
5
|
isWhatsappCarousel?: boolean | undefined;
|
|
5
6
|
hasError?: boolean | undefined;
|
|
6
7
|
isPreview?: boolean | undefined;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("styled-components"),t=require("../../TypographyStyle.js"),r=require("../../../constants/Theme.js");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var i=o(e);const
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("styled-components"),t=require("../../TypographyStyle.js"),r=require("../../../constants/Theme.js");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var i=o(e);const d=i.default.div`
|
|
2
2
|
background: ${r.COLORS.surface.standard};
|
|
3
3
|
border-top-left-radius: ${e=>e.isCarouselCard?"12px":"0px"};
|
|
4
4
|
border-top-right-radius: 12px;
|
|
@@ -6,24 +6,28 @@
|
|
|
6
6
|
border-bottom-left-radius: 12px;
|
|
7
7
|
position: relative;
|
|
8
8
|
padding: 8px 0px;
|
|
9
|
-
border:
|
|
9
|
+
border: 2px solid
|
|
10
10
|
${e=>e.hasError?`${r.COLORS.content.negative}`:e.showBorder?`${r.COLORS.stroke.brand}`:`${r.COLORS.stroke.primary}`};
|
|
11
|
+
border: ${e=>e.showDashedBorder&&`2px dashed ${r.COLORS.content.brand}`};
|
|
12
|
+
height: 100%;
|
|
13
|
+
display: flex;
|
|
14
|
+
flex-direction: column;
|
|
11
15
|
:hover {
|
|
12
16
|
border: 2px
|
|
13
17
|
${e=>e.isPreview?"unset":e.isWhatsappCarousel?e.hasError?"dashed":e.showBorder?"solid":"dashed":"solid"}
|
|
14
18
|
${r.COLORS.stroke.brand};
|
|
15
19
|
box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.25);
|
|
16
20
|
}
|
|
17
|
-
`,
|
|
21
|
+
`,a=i.default(t.Caption)`
|
|
18
22
|
color: ${r.COLORS.content.secondary};
|
|
19
23
|
max-width: 80px;
|
|
20
24
|
text-overflow: ellipsis;
|
|
21
25
|
white-space: nowrap;
|
|
22
26
|
overflow: hidden;
|
|
23
27
|
text-wrap: wrap;
|
|
24
|
-
`,s=i.default(
|
|
28
|
+
`,s=i.default(a)`
|
|
25
29
|
max-width: 200px;
|
|
26
|
-
`,
|
|
30
|
+
`,n=i.default.div`
|
|
27
31
|
border-radius: 8px;
|
|
28
32
|
display: flex;
|
|
29
33
|
flex-direction: column;
|
|
@@ -32,7 +36,7 @@
|
|
|
32
36
|
min-height: 152px;
|
|
33
37
|
margin-bottom: 4px;
|
|
34
38
|
margin: 0px 8px;
|
|
35
|
-
`,
|
|
39
|
+
`,p=i.default.div`
|
|
36
40
|
padding: 12px;
|
|
37
41
|
display: flex;
|
|
38
42
|
flex-direction: row;
|
|
@@ -62,4 +66,4 @@
|
|
|
62
66
|
position: absolute;
|
|
63
67
|
top: 16px;
|
|
64
68
|
right: 16px;
|
|
65
|
-
`,exports.ChatBtnContainer=
|
|
69
|
+
`,exports.ChatBtnContainer=p,exports.Container=d,exports.FooterText=s,exports.FooterWrapper=x,exports.MediaContainer=n,exports.TimeStamp=a;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../../assets/icons/copy-code-icon.svg.js"),r=require("../../../assets/icons/halfRectangle.svg.js"),s=require("../../../assets/icons/phone.svg.js"),i=require("../../../assets/icons/qrb.svg.js"),a=require("../../../assets/icons/RedirectToNew.svg.js"),o=require("styled-components"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../../assets/icons/copy-code-icon.svg.js"),r=require("../../../assets/icons/halfRectangle.svg.js"),s=require("../../../assets/icons/phone.svg.js"),i=require("../../../assets/icons/qrb.svg.js"),a=require("../../../assets/icons/RedirectToNew.svg.js"),o=require("styled-components"),l=require("../../template-context-mapper/context/templateModalContext.js"),n=require("../../tooltips/Tooltip.js"),d=require("../../TypographyStyle.js"),p=require("../../../constants/Theme.js"),u=require("../helpers/VariableEditorHelper.js"),x=require("../models/TemplateMeta.js"),c=require("./ChatBtn.js"),h=require("./ChatUI.style.js"),m=require("./LimitedTimeOffer/LimitedTimeOffer.index.js"),j=require("./MediaCard.js");function T(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var f=T(o);const y=f.default.div`
|
|
2
2
|
position: absolute;
|
|
3
3
|
width: 8px;
|
|
4
4
|
height: 8px;
|
|
@@ -16,4 +16,4 @@
|
|
|
16
16
|
`,g=f.default(C)`
|
|
17
17
|
font-weight: 600;
|
|
18
18
|
margin-bottom: 8px;
|
|
19
|
-
`,E=new u.VariableEditorHelper;exports.ChatUIV2=o=>{const{bodyText:p,footerText:u,headerMediaType:T,headerText:f,headerAssetLink:v,headerAssetName:b,quickReplybtn:q,ctaBtn:O,actionTypes:
|
|
19
|
+
`,E=new u.VariableEditorHelper;exports.ChatUIV2=o=>{const{bodyText:p,footerText:u,headerMediaType:T,headerText:f,headerAssetLink:v,headerAssetName:b,quickReplybtn:q,ctaBtn:O,actionTypes:w,extras:_,showHeader:P,imagePreviewStyles:I,size:S,bodyVariableList:L,headerVariableList:A,buttons:M,limitedTimeOfferComponent:N,carouselCardIndex:R,isWhatsappCarousel:B,isPreview:H}=o,Y=E.format(p,L),D=E.format(f,A),{selectedCarouselIndex:F,isProductCarouselType:U,errorIndexes:V,isCarouselHovered:k}=l.useTemplateModalContext(),z={COPY_CODE:t.default,PHONE_NUMBER:s.default,URL:a.default,QUICK_REPLY:i.default};return e.jsxs(h.Container,Object.assign({isCarouselCard:null!=R&&R>-1,showBorder:null!=R&&R===F||U&&null!=R&&R>-1&&null!=F&&F>-1,hasError:null==V?void 0:V.includes(null!=R?R:-2),isWhatsappCarousel:B,isPreview:H,showDashedBorder:U&&k&&(null!=F?F:-1)<0&&(null!=R?R:-1)>-1},{children:[!B&&e.jsx(y,{children:e.jsx(r.default,{color:"white",height:8,width:8})}),T===x.HEADER_TYPES.TEXT?e.jsx(g,{dangerouslySetInnerHTML:{__html:D}}):T!==x.HEADER_TYPES.NONE?e.jsx(j.MediaCard,{headerAssetLink:v,headerAssetName:b,mediaType:T,imagePreviewStyles:T===x.HEADER_TYPES.IMAGE?I:{}}):e.jsx(e.Fragment,{}),(null==N?void 0:N.dateTime)?e.jsx(m.LimitedTimeOffer,{text:N.text,dateTime:N.dateTime,code:N.code}):e.jsx(e.Fragment,{}),!!p&&e.jsx(e.Fragment,{children:e.jsx(C,{dangerouslySetInnerHTML:{__html:Y},style:{flex:1}})}),e.jsxs(h.FooterWrapper,{children:[e.jsx(n.Tooltip,Object.assign({body:null!=u?u:"",placement:"top"},{children:e.jsx(h.FooterText,Object.assign({style:{flex:1}},{children:u}))})),e.jsx(h.TimeStamp,{children:"16:48"})]}),M&&M.length>0?M.map(((t,r)=>e.jsx(c.ChatBtn,{text:"COPY_CODE"===t.type?"Copy code":t.text,Icon:z[t.type],size:S},r))):w===x.ACTIONS_TYPES.QUICK_REPLY?e.jsx("div",{children:null==q?void 0:q.map(((t,r)=>e.jsx(c.ChatBtn,{text:t.text},r)))}):w===x.ACTIONS_TYPES.CTA_BTN?e.jsx("div",{children:null==O?void 0:O.map(((t,r)=>e.jsx(c.ChatBtn,{textTypography:P?d.Caption:d.BodySecondary,extraContent:_?t.extra:void 0,placeholder:t.placeholder,text:t.text,Icon:"phoneNumber"===t.type?s.default:a.default,size:S},r)))}):e.jsx(e.Fragment,{})]}))};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),s=require("../../../assets/icons/filePdf.svg.js"),r=require("../../../assets/icons/image.svg.js"),i=require("../../../assets/icons/videoRecorder.svg.js"),t=require("../../TypographyStyle.js"),a=require("../../../constants/Theme.js"),d=require("../models/TemplateMeta.js"),n=require("./ChatUI.style.js"),o=require("../../shimmer-image/ShimmerImage.js");const c=o=>{let{headerAssetName:c,mediaType:l}=o;const h=l===d.HEADER_TYPES.IMAGE?r.default:l===d.HEADER_TYPES.VIDEO?i.default:s.default;return e.jsxs(n.MediaContainer,{children:[e.jsx(h,{height:40,width:40,color:a.COLORS.icon.placeholder}),!!c&&e.jsx(t.BodySecondary,Object.assign({style:{color:a.COLORS.content.secondary,marginTop:8}},{children:c}))]})};exports.MediaCard=s=>{let{headerAssetLink:r,headerAssetName:i,mediaType:t,imagePreviewStyles:a}=s;if(!r||t===d.HEADER_TYPES.DOCUMENT)return e.jsx(c,Object.assign({},{headerAssetLink:r,headerAssetName:i,mediaType:t}));return e.jsx(n.MediaContainer,{children:t===d.HEADER_TYPES.IMAGE?e.jsx(o.ShimmerImage,{imageUrl:r,alt:r,width:"100%",height:240,borderRadius:8}):t===d.HEADER_TYPES.VIDEO?e.jsx("video",Object.assign({src:r,style:{width:"100%",minHeight:"240px",height:"240px",borderRadius:8},controls:!0},{children:e.jsx("track",{default:!0,kind:"captions",srcLang:"en",src:r})})):e.jsx(e.Fragment,{})})},exports.NoMediaCard=c;
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),s=require("../../../assets/icons/filePdf.svg.js"),r=require("../../../assets/icons/image.svg.js"),i=require("../../../assets/icons/videoRecorder.svg.js"),t=require("../../TypographyStyle.js"),a=require("../../../constants/Theme.js"),d=require("../models/TemplateMeta.js"),n=require("./ChatUI.style.js"),o=require("../../shimmer-image/ShimmerImage.js");const c=o=>{let{headerAssetName:c,mediaType:l}=o;const h=l===d.HEADER_TYPES.IMAGE?r.default:l===d.HEADER_TYPES.VIDEO?i.default:s.default;return e.jsxs(n.MediaContainer,{children:[e.jsx(h,{height:40,width:40,color:a.COLORS.icon.placeholder}),!!c&&e.jsx(t.BodySecondary,Object.assign({style:{color:a.COLORS.content.secondary,marginTop:8}},{children:c}))]})};exports.MediaCard=s=>{let{headerAssetLink:r,headerAssetName:i,mediaType:t,imagePreviewStyles:a}=s;if(!r||t===d.HEADER_TYPES.DOCUMENT)return e.jsx(c,Object.assign({},{headerAssetLink:r,headerAssetName:i,mediaType:t}));return e.jsx(n.MediaContainer,{children:t===d.HEADER_TYPES.IMAGE?e.jsx(o.ShimmerImage,{imageUrl:r,alt:r,width:"100%",height:240,borderRadius:8}):t===d.HEADER_TYPES.VIDEO?e.jsx("video",Object.assign({src:r,style:{width:"100%",minHeight:"240px",height:"240px",borderRadius:8},controls:!0,muted:!0},{children:e.jsx("track",{default:!0,kind:"captions",srcLang:"en",src:r})})):e.jsx(e.Fragment,{})})},exports.NoMediaCard=c;
|
|
@@ -5,6 +5,7 @@
|
|
|
5
5
|
background-position: center;
|
|
6
6
|
background-size: cover;
|
|
7
7
|
position: relative;
|
|
8
|
+
height: 100%;
|
|
8
9
|
`,c=d.default(a.TitleRegular)`
|
|
9
10
|
color: ${i.COLORS.content.primary};
|
|
10
|
-
`;exports.WhatsappLikePreviewV2=t=>{const{hideDeviceContainerInPreview:s}=r.useTemplateModalContext();return 3===o.getPreviewPropLen(t)?e.jsx(e.Fragment,{children:t.zeroStateComponent}):s?e.jsx(p.ChatUIV2,Object.assign({showHeader:t.showHeader},t)):e.jsx(e.Fragment,{children:e.jsxs(u,Object.assign({style:t.containerStyle,showHeader:t.showHeader,isWhatsappCarousel:t.isWhatsappCarousel},{children:[t.showHeader&&e.jsx(n.default,{}),e.jsxs("div",Object.assign({style:{padding:"small"===t.size?"12px 32px 12px 12px":`16px ${t.isWhatsappCarousel?"0px":"56px"} ${t.isWhatsappCarousel?"2px":"16px"} 16px
|
|
11
|
+
`;exports.WhatsappLikePreviewV2=t=>{const{hideDeviceContainerInPreview:s}=r.useTemplateModalContext();return 3===o.getPreviewPropLen(t)?e.jsx(e.Fragment,{children:t.zeroStateComponent}):s?e.jsx(p.ChatUIV2,Object.assign({showHeader:t.showHeader},t)):e.jsx(e.Fragment,{children:e.jsxs(u,Object.assign({style:t.containerStyle,showHeader:t.showHeader,isWhatsappCarousel:t.isWhatsappCarousel},{children:[t.showHeader&&e.jsx(n.default,{}),e.jsxs("div",Object.assign({style:{padding:"small"===t.size?"12px 32px 12px 12px":`16px ${t.isWhatsappCarousel?"0px":"56px"} ${t.isWhatsappCarousel?"2px":"16px"} 16px`,height:"100%"}},{children:[!t.hidePreviewText&&e.jsx("div",Object.assign({style:{marginBottom:16}},{children:e.jsx(c,{children:"Preview"})})),e.jsx(p.ChatUIV2,Object.assign({showHeader:t.showHeader},t))]}))]}))})};
|