@bikdotai/bik-component-library 0.0.683-1 → 0.0.683-beta.ai-content-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/icons/aiContentIcon.svg.js +1 -0
- package/dist/cjs/components/bik-layout/MockMenus.d.ts +0 -1
- package/dist/cjs/components/button/Button.js +1 -1
- package/dist/cjs/components/button/model.d.ts +0 -5
- package/dist/cjs/components/carousel-preview/CarouselPreview.style.js +1 -1
- package/dist/cjs/components/template-context-mapper/TemplateContextMapper.d.ts +2 -0
- package/dist/cjs/components/template-context-mapper/context/templateModalContext.d.ts +3 -0
- package/dist/cjs/components/template-context-mapper/modalElements/EditWhatsAppCarouselTemplateV2.js +1 -1
- package/dist/cjs/components/template-preview/TemplatePreview.js +1 -1
- package/dist/cjs/components/template-preview/WhatsApp/ChatUI.style.js +8 -8
- package/dist/cjs/components/template-preview/WhatsApp/WhatsAppLikePreviewV2.js +1 -1
- package/dist/cjs/components/template-preview/models/WhatsAppTemplate.d.ts +1 -0
- package/dist/esm/assets/icons/aiContentIcon.svg.js +1 -0
- package/dist/esm/components/bik-layout/MockMenus.d.ts +0 -1
- package/dist/esm/components/button/Button.js +1 -1
- package/dist/esm/components/button/model.d.ts +0 -5
- package/dist/esm/components/carousel-preview/CarouselPreview.style.js +1 -1
- package/dist/esm/components/template-context-mapper/TemplateContextMapper.d.ts +2 -0
- package/dist/esm/components/template-context-mapper/context/templateModalContext.d.ts +3 -0
- package/dist/esm/components/template-context-mapper/modalElements/EditWhatsAppCarouselTemplateV2.js +1 -1
- package/dist/esm/components/template-preview/TemplatePreview.js +1 -1
- package/dist/esm/components/template-preview/WhatsApp/ChatUI.style.js +4 -4
- package/dist/esm/components/template-preview/WhatsApp/WhatsAppLikePreviewV2.js +3 -3
- package/dist/esm/components/template-preview/models/WhatsAppTemplate.d.ts +1 -0
- package/package.json +1 -1
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";function e(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(a){if("default"!==a){var l=Object.getOwnPropertyDescriptor(e,a);Object.defineProperty(t,a,l.get?l:{enumerable:!0,get:function(){return e[a]}})}})),t.default=e,Object.freeze(t)}Object.defineProperty(exports,"__esModule",{value:!0});var t,a,l,r=e(require("react"));function n(){return n=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var l in a)Object.prototype.hasOwnProperty.call(a,l)&&(e[l]=a[l])}return e},n.apply(this,arguments)}var o=e=>r.createElement("svg",n({xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 48 48"},e),t||(t=r.createElement("g",{filter:"url(#aiContentIcon_svg__a)"},r.createElement("circle",{cx:24,cy:22,r:16,fill:"url(#aiContentIcon_svg__b)"}))),a||(a=r.createElement("path",{fill:"#fff",d:"M27.99 13.338a.2.2 0 0 1 .354 0l.894 1.676a.2.2 0 0 0 .082.082l1.676.894a.2.2 0 0 1 0 .353l-1.676.894a.2.2 0 0 0-.082.082l-.894 1.676a.2.2 0 0 1-.353 0l-.894-1.676a.2.2 0 0 0-.082-.082l-1.677-.894a.2.2 0 0 1 0-.353l1.677-.894a.2.2 0 0 0 .082-.082l.894-1.676Zm-5.13 6.386a.2.2 0 0 0 .083.082l3.782 2.017a.2.2 0 0 1 0 .353l-3.782 2.018a.2.2 0 0 0-.082.082l-2.017 3.782a.2.2 0 0 1-.353 0l-2.017-3.782a.2.2 0 0 0-.083-.082l-3.782-2.018a.2.2 0 0 1 0-.353l3.782-2.017a.2.2 0 0 0 .083-.082l2.017-3.782a.2.2 0 0 1 .353 0l2.017 3.782Zm.323 2.452a.2.2 0 0 0 0-.353l-1.472-.785a.2.2 0 0 1-.082-.082l-.785-1.472a.2.2 0 0 0-.353 0l-.785 1.472a.2.2 0 0 1-.083.082l-1.472.785a.2.2 0 0 0 0 .353l1.472.786a.2.2 0 0 1 .082.082l.786 1.472a.2.2 0 0 0 .353 0l.785-1.472a.2.2 0 0 1 .082-.082l1.473-.786Zm7.26 3.464a.2.2 0 0 1-.082-.083l-1.184-2.22a.2.2 0 0 0-.353 0l-1.184 2.22a.2.2 0 0 1-.082.083l-2.22 1.183a.2.2 0 0 0 0 .353l2.22 1.184a.2.2 0 0 1 .082.082l1.184 2.22a.2.2 0 0 0 .353 0l1.184-2.22a.2.2 0 0 1 .082-.082l2.22-1.184a.2.2 0 0 0 0-.353l-2.22-1.183Z"})),l||(l=r.createElement("defs",null,r.createElement("linearGradient",{id:"aiContentIcon_svg__b",x1:8,x2:41.305,y1:8.667,y2:10.232,gradientUnits:"userSpaceOnUse"},r.createElement("stop",{stopColor:"#FF166A"}),r.createElement("stop",{offset:1,stopColor:"#FB5F08"})),r.createElement("filter",{id:"aiContentIcon_svg__a",width:48,height:48,x:0,y:0,colorInterpolationFilters:"sRGB",filterUnits:"userSpaceOnUse"},r.createElement("feFlood",{floodOpacity:0,result:"BackgroundImageFix"}),r.createElement("feColorMatrix",{in:"SourceAlpha",result:"hardAlpha",values:"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"}),r.createElement("feOffset",{dy:2}),r.createElement("feGaussianBlur",{stdDeviation:4}),r.createElement("feComposite",{in2:"hardAlpha",operator:"out"}),r.createElement("feColorMatrix",{values:"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.12 0"}),r.createElement("feBlend",{in2:"BackgroundImageFix",result:"effect1_dropShadow_4220_23732"}),r.createElement("feBlend",{in:"SourceGraphic",in2:"effect1_dropShadow_4220_23732",result:"shape"})))));exports.default=o;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../_virtual/_tslib.js"),t=require("react/jsx-runtime"),n=require("react"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../_virtual/_tslib.js"),t=require("react/jsx-runtime"),n=require("react"),o=require("../spinner/Spinner.js"),s=require("./Button.styled.js"),i=require("./themes.js");function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var a=r(n);const c=n.forwardRef(((n,r)=>{var{version:c,id:l,buttonType:d="primary",size:u="small",buttonText:b,disabled:m,IconComponent:j,LeadingIcon:x,TrailingIcon:h,isLoading:p,inverse:v,onClick:g,matchParentWidth:C,subtitle:y,darkMode:f,activated:I,error:N,buttonTextColor:T,buttonFontSize:z,customIconColor:O,buttonColor:B}=n,k=e.__rest(n,["version","id","buttonType","size","buttonText","disabled","IconComponent","LeadingIcon","TrailingIcon","isLoading","inverse","onClick","matchParentWidth","subtitle","darkMode","activated","error","buttonTextColor","buttonFontSize","customIconColor","buttonColor"]);const q=i.GetButtonTextComponent(u,d,m),S=i.getButtonIconColor(u,d,v,m,p,f),_="chip"===u?16:20,L={height:_,width:_,color:O||S,style:{display:"block"},className:"icon"};return t.jsx(s.Button,Object.assign({"data-test":k["data-test"],version:c,onClick:p?()=>{}:g,ref:r,id:l,disabled:m,size:u,buttonType:d,isLoading:p,inverse:v,matchParentWidth:C,darkMode:f,activated:I,error:N,buttonColor:B},k,{children:t.jsxs("div",Object.assign({className:"button-container"},{children:[d.startsWith("dash")&&t.jsx(s.ButtonCustomDashedBorder,{}),t.jsx("div",Object.assign({className:"overlay-container"},{children:p&&t.jsx(o.Spinner,{className:"spinner",size:"small",color:i.SpinnerColorMap(d,v)})})),j&&t.jsx("div",Object.assign({className:"icon-component"},{children:a.default.createElement(j,L)})),x&&t.jsx("div",Object.assign({className:"icon-leading",style:{zIndex:1}},{children:a.default.createElement(x,L)})),b?t.jsxs(q,Object.assign({className:"text",style:{color:T,fontSize:z}},{children:[b,t.jsx("div",Object.assign({className:"text-subtitle"},{children:y}))]})):t.jsx(t.Fragment,{}),h&&t.jsx("div",Object.assign({className:"icon-trailing",style:{zIndex:1}},{children:a.default.createElement(h,L)}))]}))}))}));c.displayName="Button",exports.Button=c;
|
|
@@ -35,11 +35,6 @@ export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElemen
|
|
|
35
35
|
* @default undefined
|
|
36
36
|
*/
|
|
37
37
|
LeadingIcon?: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
|
|
38
|
-
/**
|
|
39
|
-
* Custom styles to be applied to the LeadingIcon
|
|
40
|
-
* @default undefined
|
|
41
|
-
*/
|
|
42
|
-
LeadingIconStyles?: React.CSSProperties;
|
|
43
38
|
/**
|
|
44
39
|
* The icon component that is the left of the buttonText
|
|
45
40
|
* Referred to https://ozzie.sh/passing-icons-as-props-in-a-consistent-way-using-react
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { ApplicationType } from '@bikdotai/bik-models/growth/models/bik-store';
|
|
1
2
|
import { VariableListInterfaceV2 } from "../add-variableV2/AddVariableV2";
|
|
2
3
|
import { CarouselProduct } from "./modalElements/EditWhatsAppCarouselTemplateV2";
|
|
3
4
|
import { WhatsAppCarouselTemplateVariables } from "../template-preview/models/WhatsappCarouselTemplate";
|
|
@@ -45,6 +46,7 @@ export interface TemplateContextMapperProps {
|
|
|
45
46
|
fetchCollections: any;
|
|
46
47
|
fetchProducts: any;
|
|
47
48
|
storeId: string;
|
|
49
|
+
appType?: ApplicationType;
|
|
48
50
|
};
|
|
49
51
|
selectedCarouselProducts?: CarouselProduct[];
|
|
50
52
|
disableEditExpiry?: boolean;
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { ApplicationType } from '@bikdotai/bik-models/growth/models/bik-store';
|
|
1
2
|
import { VariableV3 } from "../../../helpers";
|
|
2
3
|
import React, { LegacyRef } from 'react';
|
|
3
4
|
import Slider from 'react-slick';
|
|
@@ -55,6 +56,7 @@ export declare const TemplateModalContext: React.Context<{
|
|
|
55
56
|
fetchCollections: any;
|
|
56
57
|
fetchProducts: any;
|
|
57
58
|
storeId: string;
|
|
59
|
+
appType?: ApplicationType | undefined;
|
|
58
60
|
} | undefined;
|
|
59
61
|
carouselProducts?: CarouselProduct[] | undefined;
|
|
60
62
|
setCarouselProducts?: React.Dispatch<React.SetStateAction<CarouselProduct[]>> | undefined;
|
|
@@ -127,6 +129,7 @@ export declare const useTemplateModalContext: () => {
|
|
|
127
129
|
fetchCollections: any;
|
|
128
130
|
fetchProducts: any;
|
|
129
131
|
storeId: string;
|
|
132
|
+
appType?: ApplicationType | undefined;
|
|
130
133
|
} | undefined;
|
|
131
134
|
carouselProducts?: CarouselProduct[] | undefined;
|
|
132
135
|
setCarouselProducts?: React.Dispatch<React.SetStateAction<CarouselProduct[]>> | undefined;
|
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")
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime");require("../../../node_modules/@bikdotai/bik-models/growth/models/bik-store.js");var t=require("../../../assets/icons/arrow_back.svg.js"),l=require("../../../assets/icons/chevronLeft.svg.js"),n=require("../../../assets/icons/chevronRight.svg.js"),i=require("../../../assets/icons/PlusIcon.js"),o=require("lodash"),r=require("react"),a=require("../../button/Button.js"),s=require("../../icon-button/IconButton.js"),d=require("../../product-picker-v2/modal.js"),c=require("../Badge/index.js"),u=require("../context/templateModalContext.js"),p=require("./EditWhatsAppTemplateV2.js"),v=require("./ProductBox.js");require("../../template-preview/TemplatePreview.js"),require("../../template-preview/WhatsApp/WhatsAppLikePreview.js"),require("../../template-preview/WhatsApp/WhatsAppLikePreviewV2.js");var h=require("../../../constants/Theme.js");require("../../curtain/CurtainHelper.js"),require("../../variable-picker-v3/model.js"),require("../../template-preview/models/TemplateMeta.js");var m=require("../../template-preview/models/WhatsAppTemplate.js");require("../../template-preview/models/Channels.js");var g=require("../../template-preview/helpers/templateMiscHelper.js"),y=require("../../TypographyStyle.js"),j=require("../../../_virtual/bik-store.js");exports.default=x=>{let{template:f,whatsappSpecificPickerMeta:b,showVariableModal:C,variableListForImage:O,discountCode:I,setDiscountCode:S}=x;var k,q,w,P,T,B,L,R;const{selectedCarouselIndex:E,setTemplate:M,pickerConf:A,isProductCarouselType:D,pod:F,cardCount:_,carouselProducts:V,setCarouselProducts:W,isError:N,cardImages:$,disableEditVariable:z,onDeleteSelectedProducts:G,setSelectedCarouselIndex:H,setVariableCallback:K,setShowVariablePicker:J,sliderRef:Q}=u.useTemplateModalContext(),[U,X]=r.useState(g.isRCSChannel(null==f?void 0:f.channel)?"Carousel Cards":-1==E?"First Message (Step 1/2)":D?"Product Carousel "+((null===(q=null===(k=null==f?void 0:f.mapping)||void 0===k?void 0:k.body)||void 0===q?void 0:q.length)?"(Step 2/2)":""):"Carousel Cards "+((null===(P=null===(w=null==f?void 0:f.mapping)||void 0===w?void 0:w.body)||void 0===P?void 0:P.length)?"(Step 2/2)":"")),[Y,Z]=r.useState(!1),[ee,te]=r.useState(!1),le=E===(null!=_?_:-1)-1,ne=(null!=E?E:-1)<1;r.useEffect((()=>{var e,t,l,n;X(g.isRCSChannel(null==f?void 0:f.channel)?"Carousel Cards":-1==E?"First Message (Step 1/2)":D?"Product Carousel "+((null===(t=null===(e=null==f?void 0:f.mapping)||void 0===e?void 0:e.body)||void 0===t?void 0:t.length)?"(Step 2/2)":""):"Carousel Cards "+((null===(n=null===(l=null==f?void 0:f.mapping)||void 0===l?void 0:l.body)||void 0===n?void 0:n.length)?"(Step 2/2)":""))}),[E]);const ie=e=>{null==W||W([{name:"variable",productName:e.actualValue}])};return r.useEffect((()=>{-1===E&&g.isRCSChannel(null==f?void 0:f.channel)&&(null==H||H(0))}),[E,null==f?void 0:f.channel]),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:[!g.isRCSChannel(null==f?void 0:f.channel)&&null!=E&&E>=0&&!!(null===(B=null===(T=null==f?void 0:f.mapping)||void 0===T?void 0:T.body)||void 0===B?void 0:B.length)&&e.jsx(s.IconButton,{Icon:t.default,onClick:()=>{null==H||H(-1)}}),e.jsx(y.TitleMedium,Object.assign({style:{marginLeft:10}},{children:U}))]})),D&&(null!==(L=null==V?void 0:V.length)&&void 0!==L?L:0)>0&&null!=E&&E>=0&&e.jsxs("div",Object.assign({style:{display:"flex",rowGap:8,marginBottom:16,marginLeft:10,marginRight:10,flexDirection:"column"}},{children:[e.jsx(v.ProductBox,{editItem:()=>{1===(null==V?void 0:V.length)&&"variable"===V[0].name?(K((()=>ie)),J(!0)):Z(!Y)},cardBody:1===(null==V?void 0:V.length)&&"variable"===V[0].name?`${V[0].productName}`:`${null==V?void 0:V.length} Products Selected`,hideIcon:1===(null==V?void 0:V.length)&&"variable"===V[0].name,deleteItem:()=>{var e;if(1===(null==V?void 0:V.length)&&"variable"===V[0].name)return void(null==W||W([]));const t=o.cloneDeep(Object.assign({},f));t&&($&&$.length>0?null==$||$.forEach(((e,l)=>{var n;t.components[1].cards[l].components[0].example.header_handle=[null!==(n=$[l])&&void 0!==n?n:"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==M||M(t)),null==W||W([]),null==G||G()}}),V&&(null==V?void 0:V.length)>0&&"variable"!=V[0].name&&e.jsx(a.Button,{disabled:(null!==(R=null==V?void 0:V.length)&&void 0!==R?R:0)<=1,style:{alignSelf:"flex-end"},onClick:()=>{te(!0),Z(!0)},buttonText:"Rearrange Products",buttonType:"tertiary"})]})),!z&&D&&0===(null==V?void 0:V.length)&&null!=E&&E>=0&&e.jsxs(e.Fragment,{children:[e.jsxs("div",Object.assign({style:{marginLeft:12}},{children:[e.jsx(y.TitleRegular,{children:"Product(s)"}),e.jsx(y.BodySecondary,{children:`Select ${null!=_?_: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(a.Button,{matchParentWidth:!0,style:{flex:1,display:"flex",width:"100%",marginBottom:12,border:N?`2px dashed ${h.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(i.default,{width:18,height:18,color:h.COLORS.content.secondary})})),onClick:e=>{Z(!0)}}),F===m.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(y.BodyCaption,Object.assign({style:{color:"#616161",overflow:"unset"}},{children:"OR"})),e.jsx("div",{style:{width:"100%",height:1,backgroundColor:"#E0E0E0",marginLeft:8}})]})),e.jsx(a.Button,{matchParentWidth:!0,style:{flex:1,display:"flex",marginTop:12,width:"100%",border:N?`2px dashed ${h.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(i.default,{width:18,height:18,color:h.COLORS.content.secondary})})),onClick:e=>{K((()=>ie)),J(!0)}})]})]})),N&&e.jsx("div",Object.assign({style:{marginLeft:10,marginBottom:16}},{children:e.jsx(c.Badge,{padding:"8px",errorText:"Please add products"})}))]}),!D&&(null!=E?E:-1)>-1&&e.jsxs("div",Object.assign({style:{display:"flex",background:h.COLORS.surface.hovered,alignItems:"center"}},{children:[e.jsx(s.IconButton,{Icon:l.default,disabled:ne,width:8,height:14,svgStyle:ne?{}:{color:h.COLORS.content.secondary},onClick:()=>{var e;null===(e=null==Q?void 0:Q.current)||void 0===e||e.slickPrev(),(null!=E?E:-1)<1||null==H||H((e=>e-1))}}),e.jsx(y.TitleRegular,Object.assign({style:{flex:1,display:"flex",justifyContent:"center"},color:h.COLORS.content.secondary},{children:`Card ${(null!=E?E:0)+1}/${_}`})),e.jsx(s.IconButton,{Icon:n.default,width:8,height:14,disabled:le,svgStyle:le?{}:{color:h.COLORS.content.secondary},onClick:()=>{var e;null===(e=null==Q?void 0:Q.current)||void 0===e||e.slickNext(),(null!=E?E:-1)>=(null!=_?_:-1)-1||null==H||H((e=>e+1))}})]})),e.jsx(p.default,{whatsappSpecificPickerMeta:b,template:f,onTemplateChange:e=>{null==M||M(e)},showVariableModal:C,variableListForImage:O,discountCode:I,setDiscountCode:S}),Y&&A&&e.jsx(d.ProductPickerModal,{zIndex:200,startupScreen:ee?d.ScreenName.RearrangeProducts:d.ScreenName.Collections,rearrangeEnabled:!0,storeId:A.storeId,selectedItems:(e=>{if(e.length>0){const t={};for(const l of e){const e=null==l?void 0:l.collectionId,n=l.productId,i=l.variantId;e in t||(t[e]={products:{},name:"",image:"",isSmartCollection:!1}),n in t[e].products||(t[e].products[n]={variants:{},name:(null==l?void 0:l.productName)||"",image:(null==l?void 0:l.productImage)||""}),t[e].products[n].variants[i]={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!=V?V:[]),collectionFetcher:A.fetchCollections,productFetcher:A.fetchProducts,onAdd:(e,t)=>{var l,n,i,r,a,s;te(!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!==(n=null!=v?v:null===(l=o[e])||void 0===l?void 0:l.image)&&void 0!==n?n:"",quantity:h,variantId:u,productId:e,displayOrder:m,collectionId:t,productName:null!==(r=null===(i=o[e])||void 0===i?void 0:i.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({},f));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==M||M(p)),null==W||W(c),Z(!1)},searchInCollectionFetcher:A.searchInCollection,searchFetcher:A.searchProducts,visible:Y,onClose:()=>{Z(!1)},exactLimit:null!=_?_:1,appType:A.appType||j.__exports.ApplicationType.BIK})]}))};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../template-context-mapper/context/templateModalContext.js"),l=require("../../utils/StringUtils.js"),i=require("../../constants/Theme.js"),a=require("../TypographyStyle.js"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../template-context-mapper/context/templateModalContext.js"),l=require("../../utils/StringUtils.js"),i=require("../../constants/Theme.js"),a=require("../../assets/icons/aiContentIcon.svg.js"),n=require("../TypographyStyle.js"),s=require("./EmailTemplateThumbnailPreview.js"),r=require("./models/Channels.js"),o=require("./SmsTemplatePreview.js"),d=require("./webpush/WebpushPreview.js"),u=require("./WhatsAppTemplatePreview.js");const p={WhatsAppWrapper:{backgroundColor:i.COLORS.surface.standard,borderRadius:4,border:`1px solid ${i.COLORS.background.inactive}`,marginTop:16}};exports.TemplatePreview=c=>{let{template:m,channel:v,whatsAppSpecificMeta:h,templateCreationsInfo:j,hideHeader:C,size:g,onlyTemplateContent:b,emailSpecificMeta:x,smsSpecificMeta:y,showSampleValues:S,carouselCardIndex:T,isWhatsappCarousel:w,isPreview:O,applyBorderBottom:P,webPushSpecificMeta:f,hidePointerEvents:E}=c;var H,A;const{setSelectedCarouselIndex:q}=t.useTemplateModalContext();return v===r.CHANNEL_TYPE.SMS?e.jsx("div",Object.assign({style:Object.assign({marginTop:j?16:0,border:j?`1px solid ${i.COLORS.stroke.primary}`:"none",borderRadius:4},null==y?void 0:y.templateContainerStyles)},{children:e.jsx(o.default,{template:m,hideHeader:C,onlyTemplateContent:b,size:null!=g?g:"large",variableStore:null==y?void 0:y.smsVariableStore,display_content:null==y?void 0:y.smsDisplayContent,uniqueId:null==y?void 0:y.uniqueId})})):v===r.CHANNEL_TYPE.EMAIL?e.jsx("div",Object.assign({style:Object.assign({marginTop:j?16:0},null==x?void 0:x.templateContainerStyles)},{children:e.jsx(s.default,{template:m,handleViewTemplate:()=>{var e;null===(e=null==x?void 0:x.handleViewTemplate)||void 0===e||e.call(x)},hideHeader:C,hideViewButton:null==x?void 0:x.hideViewButtonForEmail,containerStyle:null==x?void 0:x.containerStyle,emailDisplayContent:null==x?void 0:x.emailDisplayContent,emailHtmlContainerId:null==x?void 0:x.emailHtmlContainerId,applyBorderBottom:P,hidePointerEvents:E})})):v===r.CHANNEL_TYPE.WHATSAPP||v===r.CHANNEL_TYPE.RCS?e.jsxs("div",Object.assign({style:Object.assign(Object.assign(Object.assign({},null==h?void 0:h.templateContainerStyles),j?p.WhatsAppWrapper:{}),{position:"relative"}),onClick:()=>{var e,t;if(q&&w){if(-1===T&&!(null===(t=null===(e=null==m?void 0:m.mapping)||void 0===e?void 0:e.body)||void 0===t?void 0:t.length))return;q(null!=T?T:-1)}}},{children:[j?e.jsx("div",Object.assign({style:{padding:16}},{children:e.jsx(n.TitleRegular,{children:l.default.convertToTitleCase(null!==(H=null==m?void 0:m.label)&&void 0!==H?H:"")})})):e.jsx(e.Fragment,{}),e.jsx(u.default,{showSampleValues:S,showHeader:null==h?void 0:h.showWhatsAppHeader,extras:null==h?void 0:h.whatsAppExtras,template:m,size:j?"small":null!=g?g:"large",containerStyle:Object.assign(Object.assign({borderWidth:j?0:1,borderTopWidth:1},null!==(A=null==h?void 0:h.containerStyle)&&void 0!==A?A:{}),{height:"100%"}),zeroStateComponent:null==h?void 0:h.zeroStateComponent,usePlaceHolderName:null==h?void 0:h.usePlaceHolderName,carouselCardIndex:T,isWhatsappCarousel:w,isPreview:O,channel:v}),!!(null==m?void 0:m.aiContentConfigId)&&e.jsx("div",Object.assign({style:{position:"absolute",top:0,right:0,display:"flex",alignItems:"center",justifyContent:"center",width:48,height:48}},{children:e.jsx(a.default,{width:48,height:48})}))]})):v==r.CHANNEL_TYPE.WEBPUSH?e.jsx("div",Object.assign({style:Object.assign({},null==f?void 0:f.containerStyle)},{children:e.jsx(d.default,{template:m,extraContainerCss:null==f?void 0:f.extraContainerCss})})):e.jsx(e.Fragment,{})};
|
|
@@ -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;
|
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
border: 2px solid
|
|
10
10
|
${e=>e.hasError?`${r.COLORS.content.negative}`:e.showBorder?`${r.COLORS.stroke.brand}`:`${r.COLORS.stroke.primary}`};
|
|
11
11
|
border: ${e=>e.showDashedBorder&&`2px dashed ${r.COLORS.content.brand}`};
|
|
12
|
-
height:
|
|
12
|
+
height: 100%;
|
|
13
13
|
display: flex;
|
|
14
14
|
flex-direction: column;
|
|
15
15
|
:hover {
|
|
@@ -18,16 +18,16 @@
|
|
|
18
18
|
${r.COLORS.stroke.brand};
|
|
19
19
|
box-shadow: ${e=>!e.isPreview&&"4px 4px 12px rgba(0, 0, 0, 0.25)"};
|
|
20
20
|
}
|
|
21
|
-
`,
|
|
21
|
+
`,a=i.default(t.Caption)`
|
|
22
22
|
color: ${r.COLORS.content.secondary};
|
|
23
23
|
max-width: 80px;
|
|
24
24
|
text-overflow: ellipsis;
|
|
25
25
|
white-space: nowrap;
|
|
26
26
|
overflow: hidden;
|
|
27
27
|
text-wrap: wrap;
|
|
28
|
-
`,s=i.default(
|
|
28
|
+
`,s=i.default(a)`
|
|
29
29
|
max-width: 200px;
|
|
30
|
-
`,
|
|
30
|
+
`,n=i.default.div`
|
|
31
31
|
border-radius: 8px;
|
|
32
32
|
display: flex;
|
|
33
33
|
flex-direction: column;
|
|
@@ -36,14 +36,14 @@
|
|
|
36
36
|
min-height: 152px;
|
|
37
37
|
margin-bottom: 4px;
|
|
38
38
|
margin: 0px 8px;
|
|
39
|
-
`,
|
|
39
|
+
`,p=i.default.div`
|
|
40
40
|
padding: 12px;
|
|
41
41
|
display: flex;
|
|
42
42
|
flex-direction: row;
|
|
43
43
|
justify-content: center;
|
|
44
44
|
align-items: center;
|
|
45
45
|
border-top: 1px solid ${r.COLORS.stroke.primary};
|
|
46
|
-
`,
|
|
46
|
+
`,x=i.default.div`
|
|
47
47
|
display: flex;
|
|
48
48
|
flex-direction: row;
|
|
49
49
|
justify-content: space-between;
|
|
@@ -66,4 +66,4 @@
|
|
|
66
66
|
position: absolute;
|
|
67
67
|
top: 16px;
|
|
68
68
|
right: 16px;
|
|
69
|
-
`,exports.ChatBtnContainer=
|
|
69
|
+
`,exports.ChatBtnContainer=p,exports.Container=d,exports.FooterText=s,exports.FooterWrapper=x,exports.MediaContainer=n,exports.TimeStamp=a;
|
|
@@ -8,4 +8,4 @@
|
|
|
8
8
|
height: ${e=>e.isWhatsappCarousel?"100%":"auto"};
|
|
9
9
|
`,c=u.default(a.TitleRegular)`
|
|
10
10
|
color: ${i.COLORS.content.primary};
|
|
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(d,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%"
|
|
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(d,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:t.isWhatsappCarousel?"100%":"auto"}},{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))]}))]}))})};
|
|
@@ -54,6 +54,7 @@ export type WhatsAppTemplate = {
|
|
|
54
54
|
isDraft?: boolean;
|
|
55
55
|
newQualityScore?: TEMPLATE_QUALITY;
|
|
56
56
|
previousQualityScore?: TEMPLATE_QUALITY;
|
|
57
|
+
aiContentConfigId?: string;
|
|
57
58
|
};
|
|
58
59
|
export type WhatsappTemplateButtonTypes = 'QUICK_REPLY' | 'URL' | 'PHONE_NUMBER' | 'COPY_CODE';
|
|
59
60
|
export type CreateTemplateType = {
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import*as e from"react";var a,t,l;function r(){return r=Object.assign?Object.assign.bind():function(e){for(var a=1;a<arguments.length;a++){var t=arguments[a];for(var l in t)Object.prototype.hasOwnProperty.call(t,l)&&(e[l]=t[l])}return e},r.apply(this,arguments)}var n=n=>e.createElement("svg",r({xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 48 48"},n),a||(a=e.createElement("g",{filter:"url(#aiContentIcon_svg__a)"},e.createElement("circle",{cx:24,cy:22,r:16,fill:"url(#aiContentIcon_svg__b)"}))),t||(t=e.createElement("path",{fill:"#fff",d:"M27.99 13.338a.2.2 0 0 1 .354 0l.894 1.676a.2.2 0 0 0 .082.082l1.676.894a.2.2 0 0 1 0 .353l-1.676.894a.2.2 0 0 0-.082.082l-.894 1.676a.2.2 0 0 1-.353 0l-.894-1.676a.2.2 0 0 0-.082-.082l-1.677-.894a.2.2 0 0 1 0-.353l1.677-.894a.2.2 0 0 0 .082-.082l.894-1.676Zm-5.13 6.386a.2.2 0 0 0 .083.082l3.782 2.017a.2.2 0 0 1 0 .353l-3.782 2.018a.2.2 0 0 0-.082.082l-2.017 3.782a.2.2 0 0 1-.353 0l-2.017-3.782a.2.2 0 0 0-.083-.082l-3.782-2.018a.2.2 0 0 1 0-.353l3.782-2.017a.2.2 0 0 0 .083-.082l2.017-3.782a.2.2 0 0 1 .353 0l2.017 3.782Zm.323 2.452a.2.2 0 0 0 0-.353l-1.472-.785a.2.2 0 0 1-.082-.082l-.785-1.472a.2.2 0 0 0-.353 0l-.785 1.472a.2.2 0 0 1-.083.082l-1.472.785a.2.2 0 0 0 0 .353l1.472.786a.2.2 0 0 1 .082.082l.786 1.472a.2.2 0 0 0 .353 0l.785-1.472a.2.2 0 0 1 .082-.082l1.473-.786Zm7.26 3.464a.2.2 0 0 1-.082-.083l-1.184-2.22a.2.2 0 0 0-.353 0l-1.184 2.22a.2.2 0 0 1-.082.083l-2.22 1.183a.2.2 0 0 0 0 .353l2.22 1.184a.2.2 0 0 1 .082.082l1.184 2.22a.2.2 0 0 0 .353 0l1.184-2.22a.2.2 0 0 1 .082-.082l2.22-1.184a.2.2 0 0 0 0-.353l-2.22-1.183Z"})),l||(l=e.createElement("defs",null,e.createElement("linearGradient",{id:"aiContentIcon_svg__b",x1:8,x2:41.305,y1:8.667,y2:10.232,gradientUnits:"userSpaceOnUse"},e.createElement("stop",{stopColor:"#FF166A"}),e.createElement("stop",{offset:1,stopColor:"#FB5F08"})),e.createElement("filter",{id:"aiContentIcon_svg__a",width:48,height:48,x:0,y:0,colorInterpolationFilters:"sRGB",filterUnits:"userSpaceOnUse"},e.createElement("feFlood",{floodOpacity:0,result:"BackgroundImageFix"}),e.createElement("feColorMatrix",{in:"SourceAlpha",result:"hardAlpha",values:"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"}),e.createElement("feOffset",{dy:2}),e.createElement("feGaussianBlur",{stdDeviation:4}),e.createElement("feComposite",{in2:"hardAlpha",operator:"out"}),e.createElement("feColorMatrix",{values:"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.12 0"}),e.createElement("feBlend",{in2:"BackgroundImageFix",result:"effect1_dropShadow_4220_23732"}),e.createElement("feBlend",{in:"SourceGraphic",in2:"effect1_dropShadow_4220_23732",result:"shape"})))));export{n as default};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{__rest as t}from"../../_virtual/_tslib.js";import{jsx as e,jsxs as
|
|
1
|
+
import{__rest as t}from"../../_virtual/_tslib.js";import{jsx as e,jsxs as i,Fragment as n}from"react/jsx-runtime";import o,{forwardRef as s}from"react";import{Spinner as a}from"../spinner/Spinner.js";import{Button as r,ButtonCustomDashedBorder as c}from"./Button.styled.js";import{getButtonIconColor as l,SpinnerColorMap as d,GetButtonTextComponent as m}from"./themes.js";const b=s(((s,b)=>{var{version:u,id:h,buttonType:p="primary",size:g="small",buttonText:v,disabled:j,IconComponent:y,LeadingIcon:C,TrailingIcon:x,isLoading:I,inverse:N,onClick:z,matchParentWidth:T,subtitle:f,darkMode:O,activated:k,error:L,buttonTextColor:S,buttonFontSize:W,customIconColor:B,buttonColor:E}=s,M=t(s,["version","id","buttonType","size","buttonText","disabled","IconComponent","LeadingIcon","TrailingIcon","isLoading","inverse","onClick","matchParentWidth","subtitle","darkMode","activated","error","buttonTextColor","buttonFontSize","customIconColor","buttonColor"]);const P=m(g,p,j),F=l(g,p,N,j,I,O),_="chip"===g?16:20,w={height:_,width:_,color:B||F,style:{display:"block"},className:"icon"};return e(r,Object.assign({"data-test":M["data-test"],version:u,onClick:I?()=>{}:z,ref:b,id:h,disabled:j,size:g,buttonType:p,isLoading:I,inverse:N,matchParentWidth:T,darkMode:O,activated:k,error:L,buttonColor:E},M,{children:i("div",Object.assign({className:"button-container"},{children:[p.startsWith("dash")&&e(c,{}),e("div",Object.assign({className:"overlay-container"},{children:I&&e(a,{className:"spinner",size:"small",color:d(p,N)})})),y&&e("div",Object.assign({className:"icon-component"},{children:o.createElement(y,w)})),C&&e("div",Object.assign({className:"icon-leading",style:{zIndex:1}},{children:o.createElement(C,w)})),v?i(P,Object.assign({className:"text",style:{color:S,fontSize:W}},{children:[v,e("div",Object.assign({className:"text-subtitle"},{children:f}))]})):e(n,{}),x&&e("div",Object.assign({className:"icon-trailing",style:{zIndex:1}},{children:o.createElement(x,w)}))]}))}))}));b.displayName="Button";export{b as Button};
|
|
@@ -35,11 +35,6 @@ export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElemen
|
|
|
35
35
|
* @default undefined
|
|
36
36
|
*/
|
|
37
37
|
LeadingIcon?: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
|
|
38
|
-
/**
|
|
39
|
-
* Custom styles to be applied to the LeadingIcon
|
|
40
|
-
* @default undefined
|
|
41
|
-
*/
|
|
42
|
-
LeadingIconStyles?: React.CSSProperties;
|
|
43
38
|
/**
|
|
44
39
|
* The icon component that is the left of the buttonText
|
|
45
40
|
* Referred to https://ozzie.sh/passing-icons-as-props-in-a-consistent-way-using-react
|
|
@@ -9,7 +9,7 @@ import e from"styled-components";import{COLORS as o}from"../../constants/Theme.j
|
|
|
9
9
|
background-position: center;
|
|
10
10
|
background-size: cover;
|
|
11
11
|
position: relative;
|
|
12
|
-
height:
|
|
12
|
+
height: 500px;
|
|
13
13
|
overflow-y: auto;
|
|
14
14
|
border-radius: ${e=>{var o;return null!==(o=e.borderRadius)&&void 0!==o?o:"0px"}};
|
|
15
15
|
`,t=e.div`
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { ApplicationType } from '@bikdotai/bik-models/growth/models/bik-store';
|
|
1
2
|
import { VariableListInterfaceV2 } from "../add-variableV2/AddVariableV2";
|
|
2
3
|
import { CarouselProduct } from "./modalElements/EditWhatsAppCarouselTemplateV2";
|
|
3
4
|
import { WhatsAppCarouselTemplateVariables } from "../template-preview/models/WhatsappCarouselTemplate";
|
|
@@ -45,6 +46,7 @@ export interface TemplateContextMapperProps {
|
|
|
45
46
|
fetchCollections: any;
|
|
46
47
|
fetchProducts: any;
|
|
47
48
|
storeId: string;
|
|
49
|
+
appType?: ApplicationType;
|
|
48
50
|
};
|
|
49
51
|
selectedCarouselProducts?: CarouselProduct[];
|
|
50
52
|
disableEditExpiry?: boolean;
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { ApplicationType } from '@bikdotai/bik-models/growth/models/bik-store';
|
|
1
2
|
import { VariableV3 } from "../../../helpers";
|
|
2
3
|
import React, { LegacyRef } from 'react';
|
|
3
4
|
import Slider from 'react-slick';
|
|
@@ -55,6 +56,7 @@ export declare const TemplateModalContext: React.Context<{
|
|
|
55
56
|
fetchCollections: any;
|
|
56
57
|
fetchProducts: any;
|
|
57
58
|
storeId: string;
|
|
59
|
+
appType?: ApplicationType | undefined;
|
|
58
60
|
} | undefined;
|
|
59
61
|
carouselProducts?: CarouselProduct[] | undefined;
|
|
60
62
|
setCarouselProducts?: React.Dispatch<React.SetStateAction<CarouselProduct[]>> | undefined;
|
|
@@ -127,6 +129,7 @@ export declare const useTemplateModalContext: () => {
|
|
|
127
129
|
fetchCollections: any;
|
|
128
130
|
fetchProducts: any;
|
|
129
131
|
storeId: string;
|
|
132
|
+
appType?: ApplicationType | undefined;
|
|
130
133
|
} | undefined;
|
|
131
134
|
carouselProducts?: CarouselProduct[] | undefined;
|
|
132
135
|
setCarouselProducts?: React.Dispatch<React.SetStateAction<CarouselProduct[]>> | undefined;
|
package/dist/esm/components/template-context-mapper/modalElements/EditWhatsAppCarouselTemplateV2.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsxs as e,jsx as t,Fragment as l}from"react/jsx-runtime";import o from"../../../assets/icons/arrow_back.svg.js";import
|
|
1
|
+
import{jsxs as e,jsx as t,Fragment as l}from"react/jsx-runtime";import"../../../node_modules/@bikdotai/bik-models/growth/models/bik-store.js";import o from"../../../assets/icons/arrow_back.svg.js";import i from"../../../assets/icons/chevronLeft.svg.js";import n from"../../../assets/icons/chevronRight.svg.js";import r from"../../../assets/icons/PlusIcon.js";import{cloneDeep as a}from"lodash";import{useState as d,useEffect as s}from"react";import{Button as c}from"../../button/Button.js";import{IconButton as u}from"../../icon-button/IconButton.js";import{ProductPickerModal as p,ScreenName as m}from"../../product-picker-v2/modal.js";import{Badge as v}from"../Badge/index.js";import{useTemplateModalContext as h}from"../context/templateModalContext.js";import g from"./EditWhatsAppTemplateV2.js";import{ProductBox as f}from"./ProductBox.js";import"../../template-preview/TemplatePreview.js";import"../../template-preview/WhatsApp/WhatsAppLikePreview.js";import"../../template-preview/WhatsApp/WhatsAppLikePreviewV2.js";import{COLORS as y}from"../../../constants/Theme.js";import"../../curtain/CurtainHelper.js";import"../../variable-picker-v3/model.js";import"../../template-preview/models/TemplateMeta.js";import{POD as b}from"../../template-preview/models/WhatsAppTemplate.js";import"../../template-preview/models/Channels.js";import{isRCSChannel as j}from"../../template-preview/helpers/templateMiscHelper.js";import{TitleMedium as x,TitleRegular as C,BodySecondary as I,BodyCaption as k}from"../../TypographyStyle.js";import{__exports as w}from"../../../_virtual/bik-store.js";const O=O=>{let{template:P,whatsappSpecificPickerMeta:T,showVariableModal:S,variableListForImage:L,discountCode:B,setDiscountCode:E}=O;var A,M,V,D,F,R,W,_;const{selectedCarouselIndex:$,setTemplate:q,pickerConf:N,isProductCarouselType:z,pod:G,cardCount:H,carouselProducts:K,setCarouselProducts:J,isError:Q,cardImages:U,disableEditVariable:X,onDeleteSelectedProducts:Y,setSelectedCarouselIndex:Z,setVariableCallback:ee,setShowVariablePicker:te,sliderRef:le}=h(),[oe,ie]=d(j(null==P?void 0:P.channel)?"Carousel Cards":-1==$?"First Message (Step 1/2)":z?"Product Carousel "+((null===(M=null===(A=null==P?void 0:P.mapping)||void 0===A?void 0:A.body)||void 0===M?void 0:M.length)?"(Step 2/2)":""):"Carousel Cards "+((null===(D=null===(V=null==P?void 0:P.mapping)||void 0===V?void 0:V.body)||void 0===D?void 0:D.length)?"(Step 2/2)":"")),[ne,re]=d(!1),[ae,de]=d(!1),se=$===(null!=H?H:-1)-1,ce=(null!=$?$:-1)<1;s((()=>{var e,t,l,o;ie(j(null==P?void 0:P.channel)?"Carousel Cards":-1==$?"First Message (Step 1/2)":z?"Product Carousel "+((null===(t=null===(e=null==P?void 0:P.mapping)||void 0===e?void 0:e.body)||void 0===t?void 0:t.length)?"(Step 2/2)":""):"Carousel Cards "+((null===(o=null===(l=null==P?void 0:P.mapping)||void 0===l?void 0:l.body)||void 0===o?void 0:o.length)?"(Step 2/2)":""))}),[$]);const ue=e=>{null==J||J([{name:"variable",productName:e.actualValue}])};return s((()=>{-1===$&&j(null==P?void 0:P.channel)&&(null==Z||Z(0))}),[$,null==P?void 0:P.channel]),e("div",Object.assign({style:{display:"flex",flexDirection:"column",gap:"16px"}},{children:[e("div",Object.assign({style:{display:"flex",flexDirection:"row",alignItems:"center"}},{children:[!j(null==P?void 0:P.channel)&&null!=$&&$>=0&&!!(null===(R=null===(F=null==P?void 0:P.mapping)||void 0===F?void 0:F.body)||void 0===R?void 0:R.length)&&t(u,{Icon:o,onClick:()=>{null==Z||Z(-1)}}),t(x,Object.assign({style:{marginLeft:10}},{children:oe}))]})),z&&(null!==(W=null==K?void 0:K.length)&&void 0!==W?W:0)>0&&null!=$&&$>=0&&e("div",Object.assign({style:{display:"flex",rowGap:8,marginBottom:16,marginLeft:10,marginRight:10,flexDirection:"column"}},{children:[t(f,{editItem:()=>{1===(null==K?void 0:K.length)&&"variable"===K[0].name?(ee((()=>ue)),te(!0)):re(!ne)},cardBody:1===(null==K?void 0:K.length)&&"variable"===K[0].name?`${K[0].productName}`:`${null==K?void 0:K.length} Products Selected`,hideIcon:1===(null==K?void 0:K.length)&&"variable"===K[0].name,deleteItem:()=>{var e;if(1===(null==K?void 0:K.length)&&"variable"===K[0].name)return void(null==J||J([]));const t=a(Object.assign({},P));t&&(U&&U.length>0?null==U||U.forEach(((e,l)=>{var o;t.components[1].cards[l].components[0].example.header_handle=[null!==(o=U[l])&&void 0!==o?o:"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==q||q(t)),null==J||J([]),null==Y||Y()}}),K&&(null==K?void 0:K.length)>0&&"variable"!=K[0].name&&t(c,{disabled:(null!==(_=null==K?void 0:K.length)&&void 0!==_?_:0)<=1,style:{alignSelf:"flex-end"},onClick:()=>{de(!0),re(!0)},buttonText:"Rearrange Products",buttonType:"tertiary"})]})),!X&&z&&0===(null==K?void 0:K.length)&&null!=$&&$>=0&&e(l,{children:[e("div",Object.assign({style:{marginLeft:12}},{children:[t(C,{children:"Product(s)"}),t(I,{children:`Select ${null!=H?H:1} products`})]})),e("div",Object.assign({style:{marginTop:16,marginBottom:16,marginLeft:Q?16:12,marginRight:Q?16:12,flexDirection:"column",display:"flex",alignItems:"center"}},{children:[t(c,{matchParentWidth:!0,style:{flex:1,display:"flex",width:"100%",marginBottom:12,border:Q?`2px dashed ${y.content.negative}`:void 0},size:"medium",buttonText:"Add Product(s)",buttonType:Q?"tertiaryGray":"dashBold",LeadingIcon:()=>t("div",Object.assign({style:{display:"flex",width:18,height:18}},{children:t(r,{width:18,height:18,color:y.content.secondary})})),onClick:e=>{re(!0)}}),G===b.CHATBOT&&e(l,{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(k,Object.assign({style:{color:"#616161",overflow:"unset"}},{children:"OR"})),t("div",{style:{width:"100%",height:1,backgroundColor:"#E0E0E0",marginLeft:8}})]})),t(c,{matchParentWidth:!0,style:{flex:1,display:"flex",marginTop:12,width:"100%",border:Q?`2px dashed ${y.content.negative}`:void 0},size:"medium",buttonText:"Add Product(s) Variable",buttonType:Q?"tertiaryGray":"dashBold",LeadingIcon:()=>t("div",Object.assign({style:{display:"flex"}},{children:t(r,{width:18,height:18,color:y.content.secondary})})),onClick:e=>{ee((()=>ue)),te(!0)}})]})]})),Q&&t("div",Object.assign({style:{marginLeft:10,marginBottom:16}},{children:t(v,{padding:"8px",errorText:"Please add products"})}))]}),!z&&(null!=$?$:-1)>-1&&e("div",Object.assign({style:{display:"flex",background:y.surface.hovered,alignItems:"center"}},{children:[t(u,{Icon:i,disabled:ce,width:8,height:14,svgStyle:ce?{}:{color:y.content.secondary},onClick:()=>{var e;null===(e=null==le?void 0:le.current)||void 0===e||e.slickPrev(),(null!=$?$:-1)<1||null==Z||Z((e=>e-1))}}),t(C,Object.assign({style:{flex:1,display:"flex",justifyContent:"center"},color:y.content.secondary},{children:`Card ${(null!=$?$:0)+1}/${H}`})),t(u,{Icon:n,width:8,height:14,disabled:se,svgStyle:se?{}:{color:y.content.secondary},onClick:()=>{var e;null===(e=null==le?void 0:le.current)||void 0===e||e.slickNext(),(null!=$?$:-1)>=(null!=H?H:-1)-1||null==Z||Z((e=>e+1))}})]})),t(g,{whatsappSpecificPickerMeta:T,template:P,onTemplateChange:e=>{null==q||q(e)},showVariableModal:S,variableListForImage:L,discountCode:B,setDiscountCode:E}),ne&&N&&t(p,{zIndex:200,startupScreen:ae?m.RearrangeProducts:m.Collections,rearrangeEnabled:!0,storeId:N.storeId,selectedItems:(e=>{if(e.length>0){const t={};for(const l of e){const e=null==l?void 0:l.collectionId,o=l.productId,i=l.variantId;e in t||(t[e]={products:{},name:"",image:"",isSmartCollection:!1}),o in t[e].products||(t[e].products[o]={variants:{},name:(null==l?void 0:l.productName)||"",image:(null==l?void 0:l.productImage)||""}),t[e].products[o].variants[i]={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!=K?K:[]),collectionFetcher:N.fetchCollections,productFetcher:N.fetchProducts,onAdd:(e,t)=>{var l,o,i,n,r,d;de(!1);const s=[];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 c=a[e].variants;if(void 0!==c&&Object.keys(c).length)for(const u of Object.keys(c)){const{name:p,image:m,quantity:v,displayOrder:h}=c[u],g={name:p,image:null!==(o=null!=m?m:null===(l=a[e])||void 0===l?void 0:l.image)&&void 0!==o?o:"",quantity:v,variantId:u,productId:e,displayOrder:h,collectionId:t,productName:null!==(n=null===(i=a[e])||void 0===i?void 0:i.name)&&void 0!==n?n:"",productImage:null!==(d=null===(r=a[e])||void 0===r?void 0:r.image)&&void 0!==d?d:""};s.push(g)}}}const c=s.sort(((e,t)=>e.displayOrder-t.displayOrder)),u=s.map((e=>e.image)),p=a(Object.assign({},P));p&&(u.forEach(((e,t)=>{var l;p.components[1].cards[t].components[0].example.header_handle=e?[e]:[null!==(l=null==U?void 0:U[t])&&void 0!==l?l:""]})),null==q||q(p)),null==J||J(c),re(!1)},searchInCollectionFetcher:N.searchInCollection,searchFetcher:N.searchProducts,visible:ne,onClose:()=>{re(!1)},exactLimit:null!=H?H:1,appType:N.appType||w.ApplicationType.BIK})]}))};export{O as default};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsx as e,jsxs as t,Fragment as
|
|
1
|
+
import{jsx as e,jsxs as t,Fragment as i}from"react/jsx-runtime";import{useTemplateModalContext as l}from"../template-context-mapper/context/templateModalContext.js";import n from"../../utils/StringUtils.js";import{COLORS as o}from"../../constants/Theme.js";import a from"../../assets/icons/aiContentIcon.svg.js";import{TitleRegular as s}from"../TypographyStyle.js";import r from"./EmailTemplateThumbnailPreview.js";import{CHANNEL_TYPE as d}from"./models/Channels.js";import p from"./SmsTemplatePreview.js";import m from"./webpush/WebpushPreview.js";import c from"./WhatsAppTemplatePreview.js";const u=u=>{let{template:h,channel:g,whatsAppSpecificMeta:C,templateCreationsInfo:b,hideHeader:y,size:S,onlyTemplateContent:j,emailSpecificMeta:f,smsSpecificMeta:w,showSampleValues:T,carouselCardIndex:x,isWhatsappCarousel:O,isPreview:P,applyBorderBottom:W,webPushSpecificMeta:I,hidePointerEvents:H}=u;var A,B;const{setSelectedCarouselIndex:E}=l();return g===d.SMS?e("div",Object.assign({style:Object.assign({marginTop:b?16:0,border:b?`1px solid ${o.stroke.primary}`:"none",borderRadius:4},null==w?void 0:w.templateContainerStyles)},{children:e(p,{template:h,hideHeader:y,onlyTemplateContent:j,size:null!=S?S:"large",variableStore:null==w?void 0:w.smsVariableStore,display_content:null==w?void 0:w.smsDisplayContent,uniqueId:null==w?void 0:w.uniqueId})})):g===d.EMAIL?e("div",Object.assign({style:Object.assign({marginTop:b?16:0},null==f?void 0:f.templateContainerStyles)},{children:e(r,{template:h,handleViewTemplate:()=>{var e;null===(e=null==f?void 0:f.handleViewTemplate)||void 0===e||e.call(f)},hideHeader:y,hideViewButton:null==f?void 0:f.hideViewButtonForEmail,containerStyle:null==f?void 0:f.containerStyle,emailDisplayContent:null==f?void 0:f.emailDisplayContent,emailHtmlContainerId:null==f?void 0:f.emailHtmlContainerId,applyBorderBottom:W,hidePointerEvents:H})})):g===d.WHATSAPP||g===d.RCS?t("div",Object.assign({style:Object.assign(Object.assign(Object.assign({},null==C?void 0:C.templateContainerStyles),b?v.WhatsAppWrapper:{}),{position:"relative"}),onClick:()=>{var e,t;if(E&&O){if(-1===x&&!(null===(t=null===(e=null==h?void 0:h.mapping)||void 0===e?void 0:e.body)||void 0===t?void 0:t.length))return;E(null!=x?x:-1)}}},{children:[b?e("div",Object.assign({style:{padding:16}},{children:e(s,{children:n.convertToTitleCase(null!==(A=null==h?void 0:h.label)&&void 0!==A?A:"")})})):e(i,{}),e(c,{showSampleValues:T,showHeader:null==C?void 0:C.showWhatsAppHeader,extras:null==C?void 0:C.whatsAppExtras,template:h,size:b?"small":null!=S?S:"large",containerStyle:Object.assign(Object.assign({borderWidth:b?0:1,borderTopWidth:1},null!==(B=null==C?void 0:C.containerStyle)&&void 0!==B?B:{}),{height:"100%"}),zeroStateComponent:null==C?void 0:C.zeroStateComponent,usePlaceHolderName:null==C?void 0:C.usePlaceHolderName,carouselCardIndex:x,isWhatsappCarousel:O,isPreview:P,channel:g}),!!(null==h?void 0:h.aiContentConfigId)&&e("div",Object.assign({style:{position:"absolute",top:0,right:0,display:"flex",alignItems:"center",justifyContent:"center",width:48,height:48}},{children:e(a,{width:48,height:48})}))]})):g==d.WEBPUSH?e("div",Object.assign({style:Object.assign({},null==I?void 0:I.containerStyle)},{children:e(m,{template:h,extraContainerCss:null==I?void 0:I.extraContainerCss})})):e(i,{})},v={WhatsAppWrapper:{backgroundColor:o.surface.standard,borderRadius:4,border:`1px solid ${o.background.inactive}`,marginTop:16}};export{u as TemplatePreview};
|
|
@@ -9,7 +9,7 @@ import e from"styled-components";import{Caption as r}from"../../TypographyStyle.
|
|
|
9
9
|
border: 2px solid
|
|
10
10
|
${e=>e.hasError?`${o.content.negative}`:e.showBorder?`${o.stroke.brand}`:`${o.stroke.primary}`};
|
|
11
11
|
border: ${e=>e.showDashedBorder&&`2px dashed ${o.content.brand}`};
|
|
12
|
-
height:
|
|
12
|
+
height: 100%;
|
|
13
13
|
display: flex;
|
|
14
14
|
flex-direction: column;
|
|
15
15
|
:hover {
|
|
@@ -36,14 +36,14 @@ import e from"styled-components";import{Caption as r}from"../../TypographyStyle.
|
|
|
36
36
|
min-height: 152px;
|
|
37
37
|
margin-bottom: 4px;
|
|
38
38
|
margin: 0px 8px;
|
|
39
|
-
`,
|
|
39
|
+
`,p=e.div`
|
|
40
40
|
padding: 12px;
|
|
41
41
|
display: flex;
|
|
42
42
|
flex-direction: row;
|
|
43
43
|
justify-content: center;
|
|
44
44
|
align-items: center;
|
|
45
45
|
border-top: 1px solid ${o.stroke.primary};
|
|
46
|
-
`,
|
|
46
|
+
`,a=e.div`
|
|
47
47
|
display: flex;
|
|
48
48
|
flex-direction: row;
|
|
49
49
|
justify-content: space-between;
|
|
@@ -66,4 +66,4 @@ import e from"styled-components";import{Caption as r}from"../../TypographyStyle.
|
|
|
66
66
|
position: absolute;
|
|
67
67
|
top: 16px;
|
|
68
68
|
right: 16px;
|
|
69
|
-
`;export{
|
|
69
|
+
`;export{p as ChatBtnContainer,t as Container,d as FooterText,a as FooterWrapper,s as MediaContainer,i as TimeStamp};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{jsx as e,Fragment as t,jsxs as r}from"react/jsx-runtime";import o from"styled-components";import{useTemplateModalContext as s}from"../../template-context-mapper/context/templateModalContext.js";import{BACKGROUND_PREVIEW_IMAGE as a}from"../../template-context-mapper/utils/constants.js";import{TitleRegular as i}from"../../TypographyStyle.js";import{COLORS as p}from"../../../constants/Theme.js";import{getPreviewPropLen as n}from"../utils/getPreviewPropLen.js";import m from"./ChatHeader.js";import{ChatUIV2 as c}from"./ChatUiV2.js";const
|
|
1
|
+
import{jsx as e,Fragment as t,jsxs as r}from"react/jsx-runtime";import o from"styled-components";import{useTemplateModalContext as s}from"../../template-context-mapper/context/templateModalContext.js";import{BACKGROUND_PREVIEW_IMAGE as a}from"../../template-context-mapper/utils/constants.js";import{TitleRegular as i}from"../../TypographyStyle.js";import{COLORS as p}from"../../../constants/Theme.js";import{getPreviewPropLen as n}from"../utils/getPreviewPropLen.js";import m from"./ChatHeader.js";import{ChatUIV2 as c}from"./ChatUiV2.js";const h=o.div`
|
|
2
2
|
background-image: ${e=>e.isWhatsappCarousel?"none":`url(${a})`};
|
|
3
3
|
border-radius: 4px;
|
|
4
4
|
background-repeat: no-repeat;
|
|
@@ -6,6 +6,6 @@ import{jsx as e,Fragment as t,jsxs as r}from"react/jsx-runtime";import o from"st
|
|
|
6
6
|
background-size: cover;
|
|
7
7
|
position: relative;
|
|
8
8
|
height: ${e=>e.isWhatsappCarousel?"100%":"auto"};
|
|
9
|
-
`,
|
|
9
|
+
`,l=o(i)`
|
|
10
10
|
color: ${p.content.primary};
|
|
11
|
-
`,
|
|
11
|
+
`,d=o=>{const{hideDeviceContainerInPreview:a}=s();return 3===n(o)?e(t,{children:o.zeroStateComponent}):a?e(c,Object.assign({showHeader:o.showHeader},o)):e(t,{children:r(h,Object.assign({style:o.containerStyle,showHeader:o.showHeader,isWhatsappCarousel:o.isWhatsappCarousel},{children:[o.showHeader&&e(m,{}),r("div",Object.assign({style:{padding:"small"===o.size?"12px 32px 12px 12px":`16px ${o.isWhatsappCarousel?"0px":"56px"} ${o.isWhatsappCarousel?"2px":"16px"} 16px`,height:o.isWhatsappCarousel?"100%":"auto"}},{children:[!o.hidePreviewText&&e("div",Object.assign({style:{marginBottom:16}},{children:e(l,{children:"Preview"})})),e(c,Object.assign({showHeader:o.showHeader},o))]}))]}))})};export{d as WhatsappLikePreviewV2};
|
|
@@ -54,6 +54,7 @@ export type WhatsAppTemplate = {
|
|
|
54
54
|
isDraft?: boolean;
|
|
55
55
|
newQualityScore?: TEMPLATE_QUALITY;
|
|
56
56
|
previousQualityScore?: TEMPLATE_QUALITY;
|
|
57
|
+
aiContentConfigId?: string;
|
|
57
58
|
};
|
|
58
59
|
export type WhatsappTemplateButtonTypes = 'QUICK_REPLY' | 'URL' | 'PHONE_NUMBER' | 'COPY_CODE';
|
|
59
60
|
export type CreateTemplateType = {
|