@bikdotai/bik-component-library 0.0.445-beta.4 → 0.0.445

package/dist/esm/components/template-context-mapper/modalElements/EditWhatsAppCarouselTemplateV2.js

@@ -1,47 +0,0 @@
-import{jsxs as e,jsx as t,Fragment as o}from"react/jsx-runtime";import i from"../../../assets/icons/PlusIcon.js";import{cloneDeep as r}from"lodash";import{useState as l,useEffect as s}from"react";import a from"styled-components";import{AddVariableV2SideModal as n}from"../../add-variableV2/AddVariableV2SideModal.js";import"../../../_virtual/_tslib.js";import"../../add-variableV2/AddVariableV2.styled.js";import{Button as d}from"../../button/Button.js";import{IconButton as c}from"../../icon-button/IconButton.js";import"../../input/Input.js";import"../../tooltips/Tooltip.js";import{COLORS as p}from"../../../constants/Theme.js";import"../../modals/modal.styled.js";import"../../switch/Switch.js";import{TitleMedium as m,BodyCaption as u,TitleRegular as h}from"../../TypographyStyle.js";import{ProductPickerModal as f}from"../../product-picker-v2/modal.js";import{useTemplateModalContext as g}from"../context/templateModalContext.js";import y from"./EditWhatsAppTemplateV2.js";import"../../template-preview/TemplatePreview.js";import"../../template-preview/WhatsApp/WhatsAppLikePreview.js";import"../../template-preview/WhatsApp/WhatsAppLikePreviewV2.js";import"../../curtain/CurtainHelper.js";import"../../template-preview/models/TemplateMeta.js";import{POD as v}from"../../template-preview/models/WhatsAppTemplate.js";import b from"../../../assets/icons/box.svg.js";import x from"../../../assets/icons/delete.svg.js";import j from"../../../assets/icons/edit.svg.js";const I=a=>{let{template:c,whatsappSpecificPickerMeta:h,showVariableModal:b,variableList:x,variableListForImage:j,discountCode:I,setDiscountCode:C}=a;var O,T;const{selectedCarouselIndex:k,setTemplate:P,pickerConf:S,isProductCarouselType:V,pod:A,cardCount:E,carouselProducts:L,setCarouselProducts:B,isError:_,cardImages:M,disableEditVariable:F,onDeleteSelectedProducts:W}=g(),[z,D]=l(-1==k?"First Message (Step 1/2)":"Carousel Cards (Step 2/2)"),[q,R]=l(!1),[N,$]=l(!1),[G,H]=l(!1);s((()=>{D(-1==k?"First Message (Step 1/2)":"Carousel Cards (Step 2/2)")}),[k]);return e("div",{children:[t(m,Object.assign({style:{marginLeft:10,marginBottom:10}},{children:z})),V&&(null!==(O=null==L?void 0:L.length)&&void 0!==O?O:0)>0&&null!=k&&k>=0&&e("div",Object.assign({style:{display:"flex",rowGap:16,marginBottom:16,flexDirection:"column"}},{children:[t(w,{editItem:()=>R(!q),cardBody:`${null==L?void 0:L.length} Products Selected`,deleteItem:()=>{const e=r(Object.assign({},c));e&&(null==M||M.forEach(((t,o)=>{var i;e.components[1].cards[o].components[0].example.header_handle=[null!==(i=M[o])&&void 0!==i?i:""]})),null==P||P(e)),null==B||B([]),null==W||W()}}),t(d,{disabled:(null!==(T=null==L?void 0:L.length)&&void 0!==T?T:0)<=1,style:{alignSelf:"flex-end",background:p.surface.subdued},onClick:()=>{$(!0),R(!0)},buttonText:"Rearrange Products",buttonType:"tertiary"})]})),!F&&V&&0===(null==L?void 0:L.length)&&null!=k&&k>=0&&e("div",Object.assign({style:{marginTop:16,marginBottom:16,marginLeft:12,marginRight:12,flexDirection:"column",display:"flex",alignItems:"center"}},{children:[t(d,{matchParentWidth:!0,style:{flex:1,display:"flex",width:"100%",marginBottom:12,border:_?`2px dashed ${p.content.negative}`:void 0},size:"medium",buttonText:"Add Product(s)",buttonType:_?"tertiaryGray":"dashBold",LeadingIcon:i,onClick:e=>{R(!0)}}),A===v.CHATBOT&&e(o,{children:[e("div",Object.assign({style:{display:"flex",flex:1,alignItems:"center",justifyContent:"space-between",flexDirection:"row",width:"100%"}},{children:[t("div",{style:{width:"100%",height:1,backgroundColor:"#E0E0E0",marginRight:8}}),t(u,Object.assign({style:{color:"#616161",overflow:"unset"}},{children:"OR"})),t("div",{style:{width:"100%",height:1,backgroundColor:"#E0E0E0",marginLeft:8}})]})),t(d,{matchParentWidth:!0,style:{flex:1,display:"flex",marginTop:12,width:"100%"},size:"medium",buttonText:"Add Product(s) Variable",buttonType:"dashBold",LeadingIcon:i,onClick:e=>{H(!0)}})]})]})),t(y,{whatsappSpecificPickerMeta:h,template:c,onTemplateChange:e=>{null==P||P(e)},showVariableModal:b,variableList:x,variableListForImage:j,discountCode:I,setDiscountCode:C}),q&&S&&t(f,{zIndex:200,rearrangeEnabled:N,limit:null!=E?E:1,storeId:S.storeId,selectedItems:(e=>{if(e.length>0){const t={};for(const o of e){const e=null==o?void 0:o.collectionId,i=o.productId,r=o.variantId;e in t||(t[e]={products:{},name:"",image:"",isSmartCollection:!1}),i in t[e].products||(t[e].products[i]={variants:{},name:(null==o?void 0:o.productName)||"",image:(null==o?void 0:o.productImage)||""}),t[e].products[i].variants[r]={name:(null==o?void 0:o.name)||"",price:"",image:(null==o?void 0:o.image)||"",quantity:o.quantity||0,displayOrder:o.displayOrder}}return t}return{}})(null!=L?L:[]),collectionFetcher:S.fetchCollections,productFetcher:S.fetchProducts,onAdd:(e,t)=>{$(!1);const o=[];delete e.isCustom;for(const t of Object.keys(e)){const i=e[t].products;if(void 0!==i&&Object.keys(i).length)for(const e of Object.keys(i)){const r=i[e].variants;if(void 0!==r&&Object.keys(r).length)for(const l of Object.keys(r)){const{name:s,image:a,quantity:n,displayOrder:d}=r[l],c={name:s,image:a,quantity:n,variantId:l,productId:e,displayOrder:d,collectionId:t,productName:i[e].name,productImage:i[e].image};o.push(c)}}}const i=o.sort(((e,t)=>e.displayOrder-t.displayOrder)),l=o.map((e=>e.image)),s=r(Object.assign({},c));s&&(l.forEach(((e,t)=>{var o;s.components[1].cards[t].components[0].example.header_handle=e?[e]:[null!==(o=null==M?void 0:M[t])&&void 0!==o?o:""]})),null==P||P(s)),null==B||B(i),R(!1)},searchInCollectionFetcher:S.searchInCollection,searchFetcher:S.searchProducts,visible:q,onClose:()=>{R(!1)},exactLimit:null!=E?E:1}),G&&t(n,{zIndex:2e3,data:null!=x?x:[],showVariable:G,setShowVariable:H,placeholder:"Add a variable",customTrigger:e=>{}})]})},w=o=>{const{cardBody:i,deleteItem:r,editItem:l}=o;return e(C,Object.assign({width:"100%"},{children:[t("div",Object.assign({style:{width:36,height:36}},{children:t(b,{})})),t("div",Object.assign({className:"card-body"},{children:t(h,{children:i})})),e("div",Object.assign({style:{display:"flex",alignItems:"center"}},{children:[l&&t(c,{style:{display:"flex"},Icon:j,onClick:e=>{l(),e.stopPropagation()}}),t(c,{style:{display:"flex",color:"#919191"},Icon:x,onClick:e=>{r(),e.stopPropagation()}})]}))]}))},C=a.div`
-	width: ${e=>e.width};
-	padding: 12px;
-	display: flex;
-	flex-direction: row;
-	column-gap: 14px;
-	justify-content: center;
-	align-items: center;
-	background: #ffffff;
-
-	border: 1px solid #e0e0e0;
-	border-radius: 4px;
-
-	.card-body {
-		width: 256px;
-		display: flex;
-		flex-direction: column;
-		justify-content: center;
-
-		&__dynamic {
-			font-family: 'Inter';
-			font-style: normal;
-			font-weight: 400;
-			font-size: 16px;
-			line-height: 24px;
-			color: #731dcf;
-
-			&__desc {
-				font-family: 'Inter';
-				font-style: normal;
-				font-weight: 400;
-				font-size: 12px;
-				line-height: 16px;
-				color: #616161;
-			}
-		}
-
-		&__simple {
-			font-family: 'Inter';
-			font-style: normal;
-			font-weight: 400;
-			font-size: 16px;
-			line-height: 24px;
-			color: #000000;
-		}
-	}
-`;export{I as default};

package/dist/esm/components/template-preview/models/WhatsappCarouselTemplate.d.ts

@@ -1,82 +0,0 @@
-import { HEADER_TYPES, TEMPLATE_STATUS, WhatsAppTemplateVariables } from "..";
-import { CHANNEL_TYPE } from "./Channels";
-import { CUSTOM_VARIABLE } from './TemplateMeta';
-export type WhatsAppCarouselTemplate = {
-    name: string;
-    label: string;
-    recommended?: boolean;
-    templateId?: string;
-    channel: CHANNEL_TYPE;
-    templateCategory: string;
-    type?: 'email' | 'whatsapp';
-    components: {
-        type: 'BODY' | 'CAROUSEL';
-        format?: HEADER_TYPES;
-        text?: string;
-        example?: {
-            header_handle?: Array<string>;
-            body_text?: Array<string[]>;
-            header_text?: Array<string>;
-        };
-        cards?: {
-            components: {
-                type: 'HEADER' | 'BODY' | 'BUTTONS' | 'FOOTER';
-                format?: HEADER_TYPES;
-                text?: string;
-                buttons?: {
-                    type: 'QUICK_REPLY' | 'URL' | 'PHONE_NUMBER';
-                    text?: string;
-                    url?: string;
-                    example?: string[];
-                    linkMode?: 'custom' | 'home';
-                    phone_number?: string;
-                    flowName?: string;
-                    flowId?: string;
-                }[];
-                example?: {
-                    header_handle?: Array<string>;
-                    body_text?: Array<string[]>;
-                    header_text?: Array<string>;
-                };
-            }[];
-        }[];
-    }[];
-    mapping: {
-        header?: string[];
-        body?: string[];
-        buttons?: string[];
-        cards?: {
-            header?: string[];
-            body?: string[];
-            buttons?: string[];
-        }[];
-    };
-    templateComponentValues: {
-        components: {
-            header?: string[];
-            body?: string[];
-            buttons?: string[];
-            cards?: {
-                header?: string[];
-                body?: string[];
-                buttons?: string[];
-            }[];
-        };
-    };
-    htmlContentUrl?: string;
-    language: 'en_US';
-    status: TEMPLATE_STATUS;
-    category: string;
-    thumbnailImageUrl?: string;
-    FB_blob_key?: string;
-    reason?: string;
-    createdAt: number;
-    updatedAt: number;
-    isDraft?: boolean;
-    isProductCarouselType?: boolean;
-    isCarouselType?: boolean;
-};
-export interface WhatsAppCarouselTemplateVariables {
-    body: CUSTOM_VARIABLE[];
-    cards: WhatsAppTemplateVariables[];
-}