@bikdotai/bik-component-library 0.0.2-chips-beta → 0.0.2

package/dist/cjs/components/tag/model.d.ts

@@ -1,53 +0,0 @@
-/// <reference types="react" />
-export type TagTheme = 'light' | 'dark';
-export type TagVariant = 'regular' | 'circle';
-export type TagType = 'negative' | 'warning' | 'positive' | 'neutral' | 'white' | 'purple' | 'blue' | 'grey';
-export declare const ValidTagTypeMap: {
-    regular: {
-        negative: boolean;
-        warning: boolean;
-        positive: boolean;
-        neutral: boolean;
-        white: boolean;
-        purple: boolean;
-        blue: boolean;
-    };
-    circle: {
-        negative: boolean;
-        warning: boolean;
-        positive: boolean;
-        neutral: boolean;
-        blue: boolean;
-        grey: boolean;
-    };
-};
-export interface TagProps {
-    /**
-     * Set the theme of the Tag
-     * @default default light
-     */
-    theme?: TagTheme;
-    /**
-     * Set the color of the Tag
-     * @default default neutral
-     */
-    type?: TagType;
-    /**
-     * Set the color of the Tag
-     * @default default regular
-     */
-    variant?: TagVariant;
-    /**
-     * The icon component that is the left of the text
-     * Referred to https://ozzie.sh/passing-icons-as-props-in-a-consistent-way-using-react
-     * @default undefined
-     */
-    TrailingIcon?: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
-    /**
-     * The icon component that is to the right of the text
-     * Referred to https://ozzie.sh/passing-icons-as-props-in-a-consistent-way-using-react
-     * @default undefined
-     */
-    LeadingIcon?: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
-    tagText: string | number;
-}

package/dist/cjs/components/tag/model.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});exports.ValidTagTypeMap={regular:{negative:!0,warning:!0,positive:!0,neutral:!0,white:!0,purple:!0,blue:!0},circle:{negative:!0,warning:!0,positive:!0,neutral:!0,blue:!0,grey:!0}};

package/dist/cjs/components/tag/themes.d.ts

@@ -1,6 +0,0 @@
-import { TagTheme, TagType, TagVariant } from './model';
-export declare const getTagIconColor: (theme: TagTheme, type: TagType) => string;
-export declare const getTextColor: (theme: TagTheme, type: TagType) => string;
-export declare const generateBorder: (type: TagType) => string;
-export declare const getBackgroundColor: (theme: TagTheme | 'circle', type: TagType) => string;
-export declare const getPadding: (variant: TagVariant) => "4px 8px" | "2px 6px";

package/dist/cjs/components/tag/themes.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var r=require("../../constants/Theme.js");const e={blue:{iconColor:{light:r.COLORS.content.blue,dark:r.COLORS.content.primaryInverse},textColor:{light:r.COLORS.content.blue,dark:r.COLORS.content.primaryInverse},border:r.COLORS.stroke.blue.lightAlt,backgroundColor:{light:r.COLORS.background.blue.light,dark:r.COLORS.content.blue,circle:r.COLORS.content.blue}},purple:{iconColor:{light:r.COLORS.background.inverseLight,dark:r.COLORS.content.primaryInverse},textColor:{light:r.COLORS.background.inverseLight,dark:r.COLORS.content.primaryInverse},border:r.COLORS.stroke.brandLightAlt,backgroundColor:{light:r.COLORS.background.brandLight,dark:r.COLORS.background.inverse,circle:r.COLORS.background.inverse}},negative:{iconColor:{light:r.COLORS.content.negative,dark:r.COLORS.content.primaryInverse},textColor:{light:r.COLORS.content.negative,dark:r.COLORS.content.primaryInverse},border:r.COLORS.stroke.negative.lightAlt,backgroundColor:{light:r.COLORS.background.negative.light,dark:r.COLORS.background.negative.vibrant,circle:r.COLORS.background.negative.vibrant}},positive:{iconColor:{light:r.COLORS.content.positive,dark:r.COLORS.content.primaryInverse},textColor:{light:r.COLORS.content.positive,dark:r.COLORS.content.primaryInverse},border:r.COLORS.stroke.positive.lightAlt,backgroundColor:{light:r.COLORS.background.positive.light,dark:r.COLORS.background.positive.vibrant,circle:r.COLORS.background.positive.vibrant}},warning:{iconColor:{light:r.COLORS.content.warning,dark:r.COLORS.content.primary},textColor:{light:r.COLORS.content.warning,dark:r.COLORS.content.primary},border:r.COLORS.stroke.warning.lightAlt,backgroundColor:{light:r.COLORS.background.warning.light,dark:r.COLORS.background.warning.vibrant,circle:r.COLORS.background.warning.vibrant}},neutral:{iconColor:{light:r.COLORS.content.secondary,dark:r.COLORS.content.primaryInverse},textColor:{light:r.COLORS.content.secondary,dark:r.COLORS.content.primaryInverse},border:r.COLORS.stroke.primary,backgroundColor:{light:r.COLORS.surface.subdued,dark:r.COLORS.background.inverse,circle:r.COLORS.background.inverseLight}},white:{iconColor:{light:r.COLORS.content.secondary,dark:r.COLORS.content.primaryInverse},textColor:{light:r.COLORS.content.secondary,dark:r.COLORS.content.primaryInverse},border:r.COLORS.stroke.primary,backgroundColor:{light:r.COLORS.surface.subdued,dark:r.COLORS.background.inverse,circle:r.COLORS.background.inverseLight}},grey:{iconColor:{light:r.COLORS.content.secondary,dark:r.COLORS.content.primaryInverse},textColor:{light:r.COLORS.content.secondary,dark:r.COLORS.content.primaryInverse},border:r.COLORS.stroke.primary,backgroundColor:{light:r.COLORS.surface.subdued,dark:r.COLORS.content.secondary,circle:r.COLORS.content.secondary}}};exports.generateBorder=r=>e[r].border,exports.getBackgroundColor=(r,t)=>e[t].backgroundColor[r],exports.getPadding=r=>"regular"===r?"4px 8px":"2px 6px",exports.getTagIconColor=(r,t)=>e[t].iconColor[r],exports.getTextColor=(r,t)=>e[t].textColor[r];

package/dist/cjs/components/template-preview/EmailTemplatePreview.styled.d.ts

@@ -1,8 +0,0 @@
-export declare const Header: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const ImageContainer: import("styled-components").StyledComponent<"div", any, {
-    hideHeader?: boolean | undefined;
-}, never>;
-export declare const ViewButton: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const EmailContainer: import("styled-components").StyledComponent<"div", any, {
-    hideHeader?: boolean | undefined;
-}, never>;

package/dist/cjs/components/template-preview/EmailTemplatePreview.styled.js

@@ -1,29 +0,0 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var r=require("styled-components"),e=require("../../constants/Theme.js");function t(r){return r&&"object"==typeof r&&"default"in r?r:{default:r}}var o=t(r);const d=o.default.div`
-	padding: 16px;
-	padding-bottom: 12px;
-	border-top-left-radius: 4px;
-	border-top-right-radius: 4px;
-	border: 1px solid ${e.COLORS.stroke.primary};
-`,i=o.default.div`
-	width: 100%;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	border-left: 1px solid ${e.COLORS.stroke.primary};
-	border-right: 1px solid ${e.COLORS.stroke.primary};
-	border-top-color: ${e.COLORS.stroke.primary};
-	border-top-width: ${r=>r.hideHeader?"1px":"0px"};
-	overflow: scroll;
-`,a=o.default.div`
-	display: flex;
-	justify-content: center;
-	width: 100%;
-	background: ${e.COLORS.surface.standard};
-	border-bottom-left-radius: 4px;
-	border-bottom-right-radius: 4px;
-	border: 1px solid ${e.COLORS.stroke.primary};
-`,s=o.default.div`
-	border-radius: 4px;
-	background-color: ${e.COLORS.surface.standard};
-	margin-top: ${r=>r.hideHeader?0:16};
-`;exports.EmailContainer=s,exports.Header=d,exports.ImageContainer=i,exports.ViewButton=a;

package/dist/cjs/components/template-preview/EmailTemplateThumbnailPreview.d.ts

@@ -1,13 +0,0 @@
-import React from 'react';
-import { CSSProperties } from 'styled-components';
-import { EmailTemplateType } from './models/EmailTemplate';
-declare const EmailTemplateThumbnailPreview: React.FC<{
-    template: EmailTemplateType;
-    hideHeader?: boolean;
-    handleViewTemplate: () => void;
-    hideViewButton?: boolean;
-    containerStyle?: CSSProperties;
-    emailHtmlContainerId?: string;
-    emailDisplayContent?: string;
-}>;
-export default EmailTemplateThumbnailPreview;

package/dist/cjs/components/template-preview/EmailTemplateThumbnailPreview.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../button/Button.js"),i=require("../TypographyStyle.js"),n=require("./EmailTemplatePreview.styled.js");exports.default=r=>{let{template:l,handleViewTemplate:a,hideHeader:s,hideViewButton:d,containerStyle:o,emailHtmlContainerId:u,emailDisplayContent:c}=r;return e.jsxs(n.EmailContainer,Object.assign({hideHeader:s,style:Object.assign({},null!=o?o:{})},{children:[!s&&e.jsx(n.Header,{children:e.jsx(i.TitleRegular,Object.assign({style:{maxWidth:"100%"}},{children:l.name}))}),c?e.jsx("iframe",{title:"Email template preview",id:null!=u?u:"",width:"100%",srcDoc:c,height:"100%",style:{pointerEvents:"none"}}):e.jsx(n.ImageContainer,Object.assign({hideHeader:s},{children:e.jsx("img",{alt:"Email thumbnail",src:l.thumbnailUrl,style:{objectFit:"contain",width:"100%"}})})),!d&&e.jsx(n.ViewButton,{children:e.jsx(t.Button,{buttonType:"tertiary",buttonText:"View",onClick:()=>{a&&a()}})})]}))};

package/dist/cjs/components/template-preview/SMS/SMSBubble.d.ts

@@ -1,9 +0,0 @@
-/// <reference types="react" />
-export declare const SideCaret: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const SMSContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
-export type SMSBubbleProps = {
-    content: string;
-    size?: 'small' | 'large';
-};
-declare const SMSBubble: (props: SMSBubbleProps) => JSX.Element;
-export default SMSBubble;

package/dist/cjs/components/template-preview/SMS/SMSBubble.js

@@ -1,12 +0,0 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../../assets/icons/union.svg.js"),r=require("styled-components"),s=require("../../../constants/Theme.js");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var n=o(r);const i=n.default.div`
-	position: absolute;
-	width: 30px;
-	height: 30px;
-	left: -10px;
-	bottom: -1px;
-`,a=n.default.div`
-	padding: 12px;
-	background: ${s.COLORS.background.base};
-	border-radius: 16px;
-	position: relative;
-`;exports.SMSContainer=a,exports.SideCaret=i,exports.default=r=>{const{content:o,size:n}=r;return e.jsxs(a,{children:[e.jsx(i,{children:e.jsx(t.default,{color:s.COLORS.background.base,height:27,width:27})}),e.jsx("div",{style:{fontSize:"small"===n?12:14},dangerouslySetInnerHTML:{__html:o}})]})};

package/dist/cjs/components/template-preview/SmsTemplatePreview.d.ts

@@ -1,12 +0,0 @@
-import React from 'react';
-import { SMSTemplateType } from './models/SmsTemplate';
-import { CUSTOM_VARIABLE } from './models/TemplateMeta';
-declare const SmsTemplatePreview: React.FC<{
-    template: SMSTemplateType;
-    variableStore?: CUSTOM_VARIABLE[];
-    hideHeader?: boolean;
-    onlyTemplateContent?: boolean;
-    display_content?: string;
-    size?: 'small' | 'large';
-}>;
-export default SmsTemplatePreview;

package/dist/cjs/components/template-preview/SmsTemplatePreview.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),s=require("../../assets/icons/arrow_left.svg.js"),r=require("../../assets/icons/more_vertical.svg.js"),t=require("../../assets/icons/search.svg.js"),i=require("../../constants/Theme.js"),l=require("../TypographyStyle.js"),n=require("./helpers/SmsTemplateHelper.js"),a=require("./SMS/SMSBubble.js"),o=require("./SmsTemplatePreview.styled.js");exports.default=d=>{let{template:c,variableStore:j,hideHeader:u,display_content:h,onlyTemplateContent:x,size:g}=d;var p;const S=null==c?void 0:c.content;return e.jsxs(e.Fragment,{children:[!u&&!x&&e.jsx(o.SMSCardHeader,{children:e.jsx(l.TitleRegular,Object.assign({style:{maxWidth:"100%"}},{children:c.name}))}),!x&&e.jsx(o.SMSHeader,{children:e.jsxs(e.Fragment,{children:[e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"row",gap:8}},{children:[e.jsx(s.default,{width:16,height:16,color:i.COLORS.content.secondary}),e.jsx(l.Caption,{children:null===(p=c.headers)||void 0===p?void 0:p[0]})]})),e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"row",gap:8}},{children:[e.jsx(t.default,{width:16,height:16,color:i.COLORS.content.secondary}),e.jsx(r.default,{width:16,height:16,color:i.COLORS.content.secondary})]}))]})}),e.jsx(o.SMSBubbleContainer,Object.assign({size:g},{children:e.jsx(a.default,{size:null!=g?g:"large",content:null!=h?h:n.renderVariableUIForPreview(S,null!=j?j:[])})}))]})};

package/dist/cjs/components/template-preview/SmsTemplatePreview.styled.d.ts

@@ -1,13 +0,0 @@
-export declare const SideCaret: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const SMSBubbleContainer: import("styled-components").StyledComponent<"div", any, {
-    size?: "small" | "large" | undefined;
-}, never>;
-export declare const SMSCardHeader: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const SMSContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const SMSInnerContainer: import("styled-components").StyledComponent<"div", any, {
-    hideHeader?: boolean | undefined;
-    outsidePreview?: boolean | undefined;
-}, never>;
-export declare const BubbleSideCaret: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const BubbleContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const SMSHeader: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/cjs/components/template-preview/SmsTemplatePreview.styled.js

@@ -1,46 +0,0 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("styled-components"),r=require("../../constants/Theme.js");function d(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var t=d(e);t.default.div`
-	position: absolute;
-	width: 8px;
-	height: 8px;
-	left: -5px;
-	bottom: 2px;
-`;const o=t.default.div`
-	padding: ${e=>"small"===e.size?"12px 32px 12px 12px":"16px 56px 12px 16px"};
-	background: ${r.COLORS.surface.standard};
-	border-radius: 4px;
-`,a=t.default.div`
-	padding: 16px;
-	background: ${r.COLORS.surface.standard};
-	border-top-left-radius: 4px;
-	border-top-right-radius: 4px;
-	border-bottom: 1px solid ${r.COLORS.stroke.primary};
-`;t.default.div`
-	border: 1px solid ${r.COLORS.stroke.primary};
-	height: 100%;
-	border-top-left-radius: 4px;
-	border-top-right-radius: 4px;
-`,t.default.div`
-	margin-top: ${e=>e.hideHeader?0:"16px"};
-	border-radius: 4px;
-	border-color: ${r.COLORS.stroke.primary};
-	border-width: ${e=>e.outsidePreview?0:"1px"};
-`,t.default.div`
-	position: absolute;
-	width: 30px;
-	height: 30px;
-	left: -10px;
-	bottom: -1px;
-`,t.default.div`
-	padding: 12px;
-	background: ${r.COLORS.background.base};
-	border-radius: 16px;
-`;const p=t.default.div`
-	padding: 10px;
-	position: sticky;
-	top: 0;
-	z-index: 1;
-	background: ${r.COLORS.surface.standard};
-	display: flex;
-	justify-content: space-between;
-	border-bottom: 1px solid ${r.COLORS.background.base};
-`;exports.SMSBubbleContainer=o,exports.SMSCardHeader=a,exports.SMSHeader=p;

package/dist/cjs/components/template-preview/TemplatePreview.d.ts

@@ -1,18 +0,0 @@
-import React from 'react';
-import { CHANNEL_TYPE } from './models/Channels';
-import { EmailMeta, EmailTemplateType } from './models/EmailTemplate';
-import { SMSMeta, SMSTemplateType } from './models/SmsTemplate';
-import { WhatsappMeta, WhatsAppTemplate } from './models/WhatsAppTemplate';
-export declare const TemplatePreview: React.FC<{
-    template: WhatsAppTemplate | SMSTemplateType | EmailTemplateType;
-    channel: CHANNEL_TYPE;
-    onlyTemplateContent?: boolean;
-    outsidePreview?: boolean;
-    templateCreationsInfo?: boolean;
-    whatsAppSpecificMeta?: WhatsappMeta;
-    emailSpecificMeta?: EmailMeta;
-    smsSpecificMeta?: SMSMeta;
-    hideHeader?: boolean;
-    size?: 'small' | 'large';
-    templateContainerStyles?: React.CSSProperties;
-}>;

package/dist/cjs/components/template-preview/TemplatePreview.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),l=require("../../utils/StringUtils.js"),t=require("../../constants/Theme.js"),i=require("../TypographyStyle.js"),a=require("./EmailTemplateThumbnailPreview.js"),n=require("./models/Channels.js"),r=require("./SmsTemplatePreview.js"),s=require("./WhatsAppTemplatePreview.js");const o={WhatsAppWrapper:{backgroundColor:t.COLORS.surface.standard,borderRadius:4,border:`1px solid ${t.COLORS.background.inactive}`,marginTop:16}};exports.TemplatePreview=d=>{let{template:p,channel:u,whatsAppSpecificMeta:m,templateContainerStyles:c,templateCreationsInfo:v,hideHeader:j,size:h,onlyTemplateContent:S,emailSpecificMeta:y,smsSpecificMeta:C,outsidePreview:b}=d;var g,T;return u===n.CHANNEL_TYPE.SMS?e.jsx("div",Object.assign({style:Object.assign({marginTop:v?16:0,border:v?`1px solid ${t.COLORS.stroke.primary}`:"none",borderRadius:4},null==C?void 0:C.templateContainerStyles)},{children:e.jsx(r.default,{template:p,hideHeader:j,onlyTemplateContent:S,size:null!=h?h:"large",variableStore:null==C?void 0:C.smsVariableStore,display_content:null==C?void 0:C.smsDisplayContent})})):u===n.CHANNEL_TYPE.EMAIL?e.jsx("div",Object.assign({style:Object.assign({marginTop:v?16:0},null==y?void 0:y.templateContainerStyles)},{children:e.jsx(a.default,{template:p,handleViewTemplate:()=>{var e;null===(e=null==y?void 0:y.handleViewTemplate)||void 0===e||e.call(y)},hideHeader:j,hideViewButton:null==y?void 0:y.hideViewButtonForEmail,containerStyle:null==y?void 0:y.containerStyle,emailDisplayContent:null==y?void 0:y.emailDisplayContent,emailHtmlContainerId:null==y?void 0:y.emailHtmlContainerId})})):u===n.CHANNEL_TYPE.WHATSAPP?e.jsxs("div",Object.assign({style:Object.assign(Object.assign({},null==m?void 0:m.templateContainerStyles),v?o.WhatsAppWrapper:{})},{children:[v?e.jsx("div",Object.assign({style:{padding:16}},{children:e.jsx(i.TitleRegular,{children:l.default.convertToTitleCase(null!==(g=null==p?void 0:p.label)&&void 0!==g?g:"")})})):e.jsx(e.Fragment,{}),e.jsx(s.default,{showHeader:null==m?void 0:m.showWhatsAppHeader,extras:null==m?void 0:m.whatsAppExtras,template:p,size:v?"small":null!=h?h:"large",containerStyle:Object.assign({borderWidth:v?0:1,borderTopWidth:1},null!==(T=null==m?void 0:m.containerStyle)&&void 0!==T?T:{}),zeroStateComponent:null==m?void 0:m.zeroStateComponent,usePlaceHolderName:null==m?void 0:m.usePlaceHolderName})]})):e.jsx(e.Fragment,{})};

package/dist/cjs/components/template-preview/WhatsApp/ChatBtn.d.ts

@@ -1,9 +0,0 @@
-import React from 'react';
-export declare const ChatBtn: React.FC<{
-    Icon?: React.FC<React.SVGProps<SVGSVGElement>>;
-    text: string;
-    extraContent?: string;
-    placeholder?: string;
-    textTypography?: React.FC;
-    size?: 'small' | 'large';
-}>;

package/dist/cjs/components/template-preview/WhatsApp/ChatBtn.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../TypographyStyle.js"),r=require("../../../constants/Theme.js"),n=require("./ChatUI.style.js");exports.ChatBtn=s=>{let{Icon:i,text:c,extraContent:a,placeholder:l,textTypography:o,size:p}=s;const d=o||t.BodySecondary;return e.jsx(n.ChatBtnContainer,{children:e.jsxs("div",Object.assign({style:{textAlign:"center",maxWidth:"100%"}},{children:[e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"row",justifyContent:"center",alignItems:"center"}},{children:[i&&e.jsx(i,{color:r.COLORS.special.brand.facebook,height:16,width:16,style:{marginRight:8}}),e.jsx(d,Object.assign({style:{color:r.COLORS.special.brand.facebook,textAlign:"center",fontSize:"small"===p?12:14}},{children:c}))]})),!!a&&e.jsx(t.Caption,Object.assign({style:{marginTop:2,color:r.COLORS.content.placeholder}},{children:l?function(e){return e.replace("[[","").replace("]]","").replace(/([A-Z])/g," $1").replace(/^./,(function(e){return e.toUpperCase()}))}(l):a}))]}))})};

package/dist/cjs/components/template-preview/WhatsApp/ChatHeader.d.ts

@@ -1,3 +0,0 @@
-/// <reference types="react" />
-declare const ChatHeader: () => JSX.Element;
-export default ChatHeader;

package/dist/cjs/components/template-preview/WhatsApp/ChatHeader.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("../../../assets/icons/arrow_left.svg.js"),s=require("../../../assets/icons/user_icon.svg.js"),t=require("../../../assets/icons/vertical_dots.svg.js"),n=require("../../TypographyStyle.js"),i=require("../../../constants/Theme.js"),o=require("./ChatHeader.style.js");exports.default=()=>e.jsxs(o.HeaderContainer,{children:[e.jsxs(o.LeftContainer,{children:[e.jsx(r.default,{height:16,width:16,color:i.COLORS.content.primaryInverse}),e.jsx(o.IconContainer,{children:e.jsx(s.default,{height:14,width:14,color:i.COLORS.content.primaryInverse})}),e.jsxs(o.TitleContainer,{children:[e.jsx(n.BodyTiny,Object.assign({color:i.COLORS.content.primaryInverse},{children:"Brand name"})),e.jsx(o.SubTitle,{children:"Business account"})]})]}),e.jsx(t.default,{height:16,width:16,color:i.COLORS.content.primaryInverse})]});

package/dist/cjs/components/template-preview/WhatsApp/ChatHeader.style.d.ts

@@ -1,5 +0,0 @@
-export declare const HeaderContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const LeftContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const IconContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const TitleContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const SubTitle: import("styled-components").StyledComponent<"p", any, {}, never>;

package/dist/cjs/components/template-preview/WhatsApp/ChatHeader.style.js

@@ -1,37 +0,0 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("styled-components"),t=require("../../../constants/Theme.js");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var i=n(e);const o=i.default.div`
-	height: 50px;
-	background-color: #008069;
-	position: sticky;
-	top: 0px;
-	z-index: 200;
-	padding: 6px 4px;
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	gap: 5px;
-`,r=i.default.div`
-	display: flex;
-	align-items: center;
-	gap: 5px;
-`,a=i.default.div`
-	height: 27px;
-	width: 27px;
-	border-radius: 15px;
-	background-color: #d1d8db;
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	gap: 6px;
-`,p=i.default.div`
-	display: flex;
-	flex-direction: column;
-	justify-content: space-between;
-`,s=i.default.p`
-	font-family: 'Inter';
-	font-style: normal;
-	font-weight: 400;
-	font-size: 8px;
-	line-height: 11px;
-	color: ${t.COLORS.content.primaryInverse};
-	margin-bottom: 0px;
-`;exports.HeaderContainer=o,exports.IconContainer=a,exports.LeftContainer=r,exports.SubTitle=s,exports.TitleContainer=p;

package/dist/cjs/components/template-preview/WhatsApp/ChatUI.d.ts

@@ -1,4 +0,0 @@
-/// <reference types="react" />
-import { WhatsappLikePreviewTypes } from '../models/WhatsAppTemplate';
-declare const ChatUI: (props: WhatsappLikePreviewTypes) => JSX.Element;
-export default ChatUI;

package/dist/cjs/components/template-preview/WhatsApp/ChatUI.js

@@ -1,7 +0,0 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../../assets/icons/halfRectangle.svg.js"),r=require("../../../assets/icons/phone.svg.js"),s=require("../../../assets/icons/RedirectToNew.svg.js"),a=require("react"),i=require("styled-components"),o=require("../../TypographyStyle.js"),n=require("../../../constants/Theme.js"),d=require("../helpers/WhatsAppFormatToHTML.js"),l=require("../models/TemplateMeta.js"),h=require("./ChatBtn.js"),p=require("./ChatUI.style.js"),c=require("./MediaCard.js"),x=require("./RenderTemplateWithVariable.js");function T(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const u=T(i).default.div`
-	position: absolute;
-	width: 8px;
-	height: 8px;
-	left: -8px;
-	top: -9px;
-`;exports.default=i=>{const{bodyText:T,footerText:m,headerMediaType:j,headerText:y,headerAssetLink:S,headerAssetName:f,quickReplybtn:g,ctaBtn:E,actionTypes:q,textType:v,extras:C,showHeader:A,imagePreviewStyles:N,size:b}=i,w=new d.WhatsAppFormatToHTML,M=a.useMemo((()=>({color:n.COLORS.content.primary,margin:12,fontSize:A?n.FONTS.caption.fontSize:n.FONTS.bodySecondary.fontSize,fontWeight:n.FONTS.bodySecondary.fontWeight,maxWidth:"100%",whiteSpace:"pre-wrap",marginBottom:0,marginTop:8,wordBreak:"break-word"})),[]);return e.jsxs(p.Container,{children:[e.jsx(u,{children:e.jsx(t.default,{color:"white",height:8,width:8})}),j===l.HEADER_TYPES.TEXT?e.jsx(x.default,{bold:!0,text:y}):j!==l.HEADER_TYPES.NONE?e.jsx(c.MediaCard,{headerAssetLink:S,headerAssetName:f,mediaType:j,imagePreviewStyles:j===l.HEADER_TYPES.IMAGE?N:{}}):e.jsx(e.Fragment,{}),!!T&&e.jsx(e.Fragment,{children:"html"===v?e.jsx("div",{className:"richTextEditor",style:M,dangerouslySetInnerHTML:{__html:w.convertToHTML(T)}}):e.jsx(o.BodySecondary,{children:T})}),e.jsxs(p.FooterWrapper,{children:[e.jsx(p.TimeStamp,Object.assign({style:{flex:1}},{children:m})),e.jsx(p.TimeStamp,{children:"16:48"})]}),q===l.ACTIONS_TYPES.QUICK_REPLY?e.jsx("div",{children:null==g?void 0:g.map(((t,r)=>e.jsx(h.ChatBtn,{text:t.text},r)))}):q===l.ACTIONS_TYPES.CTA_BTN?e.jsx("div",{children:null==E?void 0:E.map(((t,a)=>e.jsx(h.ChatBtn,{textTypography:A?o.Caption:o.BodySecondary,extraContent:C?t.extra:void 0,placeholder:t.placeholder,text:t.text,Icon:"phoneNumber"===t.type?r.default:s.default,size:b},a)))}):e.jsx(e.Fragment,{})]})};

package/dist/cjs/components/template-preview/WhatsApp/ChatUI.style.d.ts

@@ -1,7 +0,0 @@
-export declare const Container: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const TimeStamp: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const MediaContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const ChatBtnContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const FooterWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const MediaNameAbsWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const DownloadMediaIconHolder: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/cjs/components/template-preview/WhatsApp/ChatUI.style.js

@@ -1,52 +0,0 @@
-"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 a=i.default.div`
-	background: ${r.COLORS.surface.standard};
-	box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.12);
-	border-top-left-radius: 0px;
-	border-top-right-radius: 12px;
-	border-bottom-right-radius: 12px;
-	border-bottom-left-radius: 12px;
-	position: relative;
-	padding: 8px 0px;
-`,n=i.default(t.Caption)`
-	color: ${r.COLORS.content.secondary};
-`,d=i.default.div`
-	border-radius: 8px;
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	justify-content: center;
-	min-height: 152px;
-	margin-bottom: 4px;
-	margin: 0px 8px;
-`,p=i.default.div`
-	padding: 12px;
-	display: flex;
-	flex-direction: row;
-	justify-content: center;
-	align-items: center;
-	border-top: 1px solid ${r.COLORS.stroke.primary};
-`,s=i.default.div`
-	display: flex;
-
-	flex-direction: row;
-	justify-content: space-between;
-	margin: 8px 12px;
-`;i.default.div`
-	position: absolute;
-	bottom: -1px;
-	left: 0;
-	text-align: center;
-	width: 100%;
-	padding: 10px;
-	align-items: center;
-	display: flex;
-	flex-direction: row;
-	justify-content: start;
-	background: ${r.COLORS.surface.hovered};
-	border-bottom-right-radius: 8px;
-	border-bottom-left-radius: 8px;
-`,i.default.div`
-	position: absolute;
-	top: 16px;
-	right: 16px;
-`,exports.ChatBtnContainer=p,exports.Container=a,exports.FooterWrapper=s,exports.MediaContainer=d,exports.TimeStamp=n;

package/dist/cjs/components/template-preview/WhatsApp/MediaCard.d.ts

@@ -1,14 +0,0 @@
-import React from 'react';
-import { CSSProperties } from 'styled-components';
-import { HEADER_TYPES } from '../models/TemplateMeta';
-export declare const NoMediaCard: React.FC<{
-    headerAssetLink?: string;
-    headerAssetName?: string;
-    mediaType?: HEADER_TYPES;
-}>;
-export declare const MediaCard: React.FC<{
-    headerAssetLink?: string;
-    headerAssetName?: string;
-    mediaType: HEADER_TYPES;
-    imagePreviewStyles?: CSSProperties;
-}>;

package/dist/cjs/components/template-preview/WhatsApp/MediaCard.js

@@ -1 +0,0 @@
-"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"),t=require("../../../assets/icons/videoRecorder.svg.js"),a=require("../../TypographyStyle.js"),i=require("../../../constants/Theme.js"),n=require("../models/TemplateMeta.js"),d=require("./ChatUI.style.js");const o=o=>{let{headerAssetName:c,mediaType:l}=o;const j=l===n.HEADER_TYPES.IMAGE?r.default:l===n.HEADER_TYPES.VIDEO?t.default:s.default;return e.jsxs(d.MediaContainer,{children:[e.jsx(j,{height:40,width:40,color:i.COLORS.icon.placeholder}),!!c&&e.jsx(a.BodySecondary,Object.assign({style:{color:i.COLORS.content.secondary,marginTop:8}},{children:c}))]})};exports.MediaCard=s=>{let{headerAssetLink:r,headerAssetName:t,mediaType:a,imagePreviewStyles:i}=s;if(!r||a===n.HEADER_TYPES.DOCUMENT)return e.jsx(o,Object.assign({},{headerAssetLink:r,headerAssetName:t,mediaType:a}));const c={width:"100%",minHeight:"156px",borderRadius:8};return e.jsx(d.MediaContainer,{children:a===n.HEADER_TYPES.IMAGE?e.jsx("img",{alt:"Header displays here",style:Object.assign(Object.assign({},c),i),src:r}):a===n.HEADER_TYPES.VIDEO?e.jsx("video",Object.assign({src:r,style:c,controls:!0},{children:e.jsx("track",{default:!0,kind:"captions",srcLang:"en",src:r})})):e.jsx(e.Fragment,{})})},exports.NoMediaCard=o;

package/dist/cjs/components/template-preview/WhatsApp/RenderTemplateWithVariable.d.ts

@@ -1,7 +0,0 @@
-/// <reference types="react" />
-export interface RenderTemplateWithVariableInterface {
-    text?: string;
-    bold?: boolean;
-}
-declare const RenderTemplateWithVariable: (props: RenderTemplateWithVariableInterface) => JSX.Element;
-export default RenderTemplateWithVariable;

package/dist/cjs/components/template-preview/WhatsApp/RenderTemplateWithVariable.js

@@ -1,4 +0,0 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("styled-components"),r=require("../../TypographyStyle.js"),n=require("../../../constants/Theme.js"),s=require("../constants/regexPatterns.js");function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const l=a(t).default.div`
-	padding: 8px 12px 0px;
-	/* display: inline; */
-`;exports.default=t=>{const{text:a,bold:i}=t,o=null==a?void 0:a.match(s.templateVariablePattern),d=i?{fontWeight:"600"}:{};return a?e.jsx(l,{children:a.split(s.templateVariablePattern).map(((t,s)=>e.jsxs(e.Fragment,{children:[e.jsx(r.BodyRegular,Object.assign({style:d},{children:t})),!!(null==o?void 0:o[s])&&e.jsx(r.BodyRegular,Object.assign({style:Object.assign({color:n.COLORS.content.brand},d)},{children:null==o?void 0:o[s]}))]})))}):e.jsx(e.Fragment,{})};

package/dist/cjs/components/template-preview/WhatsApp/WhatsAppLikePreview.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-import { WhatsappLikePreviewTypes } from '../models/WhatsAppTemplate';
-export declare const WhatsappLikePreview: React.FC<WhatsappLikePreviewTypes>;

package/dist/cjs/components/template-preview/WhatsApp/WhatsAppLikePreview.js

@@ -1,12 +0,0 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("styled-components"),t=require("../../TypographyStyle.js"),s=require("../../../constants/Theme.js"),a=require("../utils/getPreviewPropLen.js"),i=require("./ChatHeader.js"),o=require("./ChatUI.js");function d(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var n=d(r);const p=n.default.div`
-	background-image: url('https://firebasestorage.googleapis.com/v0/b/bikayi-chat.appspot.com/o/images-uid%2F341dba50-e84e-4457-b5b5-d9d8a0b95a73?alt=media&token=6fd32f23-8bb2-4980-bbee-bef39b38fd9f');
-	border: ${e=>e.showHeader?0:1}px solid
-		${s.COLORS.stroke.primary};
-	border-radius: 4px;
-	background-repeat: no-repeat;
-	background-position: center;
-	background-size: cover;
-	position: relative;
-`,l=n.default(t.TitleRegular)`
-	color: ${s.COLORS.content.primary};
-`;exports.WhatsappLikePreview=r=>3===a.getPreviewPropLen(r)?e.jsx(e.Fragment,{children:r.zeroStateComponent}):e.jsx(e.Fragment,{children:e.jsxs(p,Object.assign({style:r.containerStyle,showHeader:r.showHeader},{children:[r.showHeader&&e.jsx(i.default,{}),e.jsxs("div",Object.assign({style:{padding:"small"===r.size?"12px 32px 12px 12px":"16px 56px 12px 16px"}},{children:[!r.hidePreviewText&&e.jsx("div",Object.assign({style:{marginBottom:16}},{children:e.jsx(l,{children:"Preview"})})),e.jsx(o.default,Object.assign({showHeader:r.showHeader},r))]}))]}))});

package/dist/cjs/components/template-preview/WhatsAppTemplatePreview.d.ts

@@ -1,13 +0,0 @@
-import React, { ReactElement } from 'react';
-import { CSSProperties } from 'styled-components';
-import { WhatsAppTemplate } from './models/WhatsAppTemplate';
-declare const WhatsappTemplatePreview: React.FC<{
-    template?: WhatsAppTemplate;
-    extras?: boolean;
-    containerStyle?: CSSProperties;
-    usePlaceHolderName?: boolean;
-    showHeader?: boolean;
-    zeroStateComponent?: ReactElement;
-    size?: 'small' | 'large';
-}>;
-export default WhatsappTemplatePreview;

package/dist/cjs/components/template-preview/WhatsAppTemplatePreview.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),l=require("./helpers/TemplateCreatorHelper.js"),i=require("./models/TemplateMeta.js"),n=require("./utils/TemplateHelperUtils.js"),r=require("./WhatsApp/WhatsAppLikePreview.js");exports.default=a=>{let{template:o,extras:d,containerStyle:s,usePlaceHolderName:u,showHeader:p,zeroStateComponent:v,size:h}=a;var x,c,m,b,T,y,B,w,k,j,N,q,H,L,P,f;const[A,S]=t.useState(),g=new l.TemplateCreatorHelper,C=new n.TemplateHelperUtils,F=[];return(null===(c=null===(x=null==A?void 0:A.ctaBtn)||void 0===x?void 0:x.phoneNumber)||void 0===c?void 0:c.isChecked)&&F.push({type:"phoneNumber",text:null!==(m=A.ctaBtn.phoneNumber.btnText)&&void 0!==m?m:"",extra:null!==(b=A.ctaBtn.phoneNumber.phoneNumber)&&void 0!==b?b:""}),(null===(y=null===(T=null==A?void 0:A.ctaBtn)||void 0===T?void 0:T.websiteLinkBtn)||void 0===y?void 0:y.isChecked)&&F.push({type:"website",text:null!==(B=A.ctaBtn.websiteLinkBtn.btnText)&&void 0!==B?B:"",extra:null!==(k=null===(w=A.ctaBtn.websiteLinkBtn)||void 0===w?void 0:w.linkOpens)&&void 0!==k?k:"",placeholder:null!==(j=A.ctaBtn.websiteLinkBtn.placeholder)&&void 0!==j?j:""}),t.useEffect((()=>{o&&g.parseUITemplateFromDBFormat(o).then((e=>{S(Object.assign({},e))}))}),[o]),o?e.jsx(r.WhatsappLikePreview,{showHeader:p,containerPadding:"large"===h?"16px 56px 12px 16px":"12px 56px 12px 12px",containerStyle:s,textType:"html",bodyText:C.whatsappOnlyFillVariablesValueInBodyText(null!==(N=null==A?void 0:A.bodyText)&&void 0!==N?N:"",null!==(q=null==A?void 0:A.bodyVariables)&&void 0!==q?q:[],u),footerText:null==A?void 0:A.footerText,headerMediaType:(null==A?void 0:A.headerType)||i.HEADER_TYPES.NONE,headerText:C.fillVariablesValInBodyText(null!==(H=null==A?void 0:A.headerText)&&void 0!==H?H:"",null!==(L=null==A?void 0:A.headerVariables)&&void 0!==L?L:[],u),headerAssetLink:null!==(P=null==A?void 0:A.headerAssetLink)&&void 0!==P?P:"",headerAssetName:null!==(f=null==A?void 0:A.headerAssetName)&&void 0!==f?f:"",quickReplybtn:null==A?void 0:A.quickReply,ctaBtn:F,actionTypes:null==A?void 0:A.actionsType,extras:d,hidePreviewText:!0,imagePreviewStyles:{objectFit:"cover"},zeroStateComponent:null!=v?v:e.jsx(e.Fragment,{children:" "})}):e.jsx(e.Fragment,{children:v})};

package/dist/cjs/components/template-preview/constants/TemplateConstants.d.ts

@@ -1,23 +0,0 @@
-export declare const CREATE_TEMPLATE_DOM_IDS: {
-    name: string;
-    header: string;
-    body: string;
-    actionButtons: string;
-    footer: string;
-};
-export declare const REQUIRED_FIELD = "Required field";
-export declare const HEADER_LEN_ERROR = "Maximum 60 characters are allowed";
-export declare const NAME_LEN_ERROR = "Maximum 512 characters allowed";
-export declare const NO_SPECIAL_CHAR = "No special characters allowed";
-export declare const BODY_LEN_ERROR = "Maximum 1,024 characters are allowed";
-export declare const QUICK_REPLY_LEN_ERROR = "Maximum 20 characters are allowed";
-export declare const QUICK_REPLY_NAME_ERROR = "Buttons with same name are not allowed";
-export declare const VALID_PHONE_NUMBER = "Please enter a valid 10-digit phone number";
-export declare const BUTTON_EMOJI_ERROR = "Emojis are not allowed in button";
-export declare const HEADER_ASSET_LINK_ERROR = "Please attach the required media";
-export declare const ONE_VAR_ALLOWED = "Only one variable allowed in text header";
-export declare const HEADER_TEXT_LEN_LIMIT = 60;
-export declare const NAME_LEN_LIMIT = 512;
-export declare const BODY_TEXT_LEN_LIMIT = 1024;
-export declare const QUICK_REPLY_BTN_TEXT_LIMIT = 25;
-export declare const QUICK_REPLY_NAME_LEN_LIMIT = 20;

package/dist/cjs/components/template-preview/constants/TemplateConstants.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const e="create-template",t={name:`${e}-name`,header:`${e}-header`,body:`${e}-body`,actionButtons:`${e}-action-buttons`,footer:`${e}-footer`};exports.BODY_LEN_ERROR="Maximum 1,024 characters are allowed",exports.BODY_TEXT_LEN_LIMIT=1024,exports.BUTTON_EMOJI_ERROR="Emojis are not allowed in button",exports.CREATE_TEMPLATE_DOM_IDS=t,exports.HEADER_ASSET_LINK_ERROR="Please attach the required media",exports.HEADER_LEN_ERROR="Maximum 60 characters are allowed",exports.HEADER_TEXT_LEN_LIMIT=60,exports.NAME_LEN_ERROR="Maximum 512 characters allowed",exports.NAME_LEN_LIMIT=512,exports.NO_SPECIAL_CHAR="No special characters allowed",exports.ONE_VAR_ALLOWED="Only one variable allowed in text header",exports.QUICK_REPLY_BTN_TEXT_LIMIT=25,exports.QUICK_REPLY_LEN_ERROR="Maximum 20 characters are allowed",exports.QUICK_REPLY_NAME_ERROR="Buttons with same name are not allowed",exports.QUICK_REPLY_NAME_LEN_LIMIT=20,exports.REQUIRED_FIELD="Required field",exports.VALID_PHONE_NUMBER="Please enter a valid 10-digit phone number";

package/dist/cjs/components/template-preview/constants/regexPatterns.d.ts

@@ -1,11 +0,0 @@
-export declare const lockedVarPattern: RegExp;
-export declare const editableVarPattern: RegExp;
-export declare const placeHolderNamePattern: RegExp;
-export declare const globalVariablePattern: RegExp;
-export declare const templateVariablePattern: RegExp;
-export declare const globalHalfVariablePattern: RegExp;
-export declare const specialCharPattern: RegExp;
-export declare const variablePattern: RegExp;
-export declare const variablePatternGlobal: RegExp;
-export declare const previewLinkMDFormatPattern: RegExp;
-export declare const editableBracketPattern: RegExp;

package/dist/cjs/components/template-preview/constants/regexPatterns.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const e=/\{\{[A-Za-z0-9 ]+\}\}/g,t=e;exports.editableBracketPattern=/[((|))]/,exports.editableVarPattern=/\((\(|\[)[A-Za-z0-9 ]+(\]|\))\)/,exports.globalHalfVariablePattern=/\{\{[a-zA-Z0-9]+(?=( |\}))(?!\}\})/g,exports.globalVariablePattern=e,exports.lockedVarPattern=/\[\[[A-Za-z0-9 ]+\]\]/,exports.placeHolderNamePattern=/(\[\[|\(\()(.*)(\)\)|\]\])/,exports.previewLinkMDFormatPattern=/\[([^[]+)\](\(.*\))/,exports.specialCharPattern=/[!@#$%^&*()_+\-=[\]{};':"\\|,.<>/?]+/,exports.templateVariablePattern=t,exports.variablePattern=/\{\{[A-Za-z0-9 _]+\}\}/,exports.variablePatternGlobal=/\{\{[A-Za-z0-9 _]+\}\}/g;

package/dist/cjs/components/template-preview/helpers/SmsTemplateHelper.d.ts

@@ -1,2 +0,0 @@
-import { CUSTOM_VARIABLE } from '../models/TemplateMeta';
-export declare const renderVariableUIForPreview: (content: string, variablStore?: CUSTOM_VARIABLE[], brandColor?: string) => string;

package/dist/cjs/components/template-preview/helpers/SmsTemplateHelper.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../../constants/Theme.js"),n=require("../constants/regexPatterns.js");exports.renderVariableUIForPreview=function(r,a){let t=arguments.length>2&&void 0!==arguments[2]?arguments[2]:e.COLORS.content.brand;const l=(null==a?void 0:a.length)?null==a?void 0:a.map((e=>e.updatedValue)):r.match(n.variablePatternGlobal);return n.variablePatternGlobal.lastIndex=0,r.split(n.variablePattern).map(((e,n)=>{var r;return(null==l?void 0:l[n])?`${e}<span></span><span id="connectors_variable_${n+1}" style="color: ${t}; text-decoration: underline; word-break: break-word;">${null!==(r=null==l?void 0:l[n])&&void 0!==r?r:""}</span><span> </span>`:e})).join("")};

package/dist/cjs/components/template-preview/helpers/TemplateCreatorHelper.d.ts

@@ -1,16 +0,0 @@
-import { CreateTemplateType, WhatsAppTemplate } from '../models/WhatsAppTemplate';
-export declare class TemplateCreatorHelper {
-    private parseDataFromHeaderComponent;
-    /**
-     * Check if current template state is ready for saving as a draft/submit-template or not
-     * @param state
-     */
-    validateState(state: CreateTemplateType): {
-        status: 'invalid' | 'valid';
-        errors: CreateTemplateType['error'];
-    };
-    private parseBodyComponent;
-    private parseFooterComponent;
-    private parseButtonComponent;
-    parseUITemplateFromDBFormat(dbFormattedTemplate: WhatsAppTemplate, isDuplicate?: boolean): Promise<CreateTemplateType>;
-}

package/dist/cjs/components/template-preview/helpers/TemplateCreatorHelper.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../../_virtual/_tslib.js"),t=require("../../../constants/Theme.js"),n=require("../constants/regexPatterns.js"),i=require("../constants/TemplateConstants.js"),o=require("../models/TemplateMeta.js"),l=require("../utils/TemplateHelperUtils.js");exports.TemplateCreatorHelper=class{parseDataFromHeaderComponent(e){var t,n,i,l,a,d,r;const s={headerType:o.HEADER_TYPES.NONE,headerVariables:[]},v=null===(t=e.components)||void 0===t?void 0:t.find((e=>"HEADER"===e.type));if(v){s.headerType=v.format,s.headerText=v.text,s.headerAssetLink=null===(i=null===(n=v.example)||void 0===n?void 0:n.header_handle)||void 0===i?void 0:i[0];const t=null===(a=null===(l=v.example)||void 0===l?void 0:l.header_text)||void 0===a?void 0:a[0],o=null===(r=null===(d=e.mapping)||void 0===d?void 0:d.header)||void 0===r?void 0:r[0];if(t&&o){const e=/\(\(/.test(o),n={idx:0,variableVal:t,editable:e,editableDefaultValues:e?void 0:t,variableName:o};s.headerVariables=[n]}}return s}validateState(e){var t,a,d,r,s,v,E,u,T,p,_,c,R,m,b,h,I,L,N,y,B;const A=/\p{Extended_Pictographic}/u;let C="valid";const D={meta:{},ctaBtn:{phoneNumber:{btnText:"",link:""},websiteLink:{btnText:"",link:""}},quickReply:[null,null,null]},O=new l.TemplateHelperUtils;let x=!1;const P=e=>{var t;null===(t=document.getElementById(e))||void 0===t||t.scrollIntoView({behavior:"smooth",block:"nearest"})};if((null===(t=e.meta)||void 0===t?void 0:t.name)?e.meta.name.trim().length>i.NAME_LEN_LIMIT?(D.meta.name=i.NAME_LEN_ERROR,C="invalid"):n.specialCharPattern.test(e.meta.name.trim())&&(D.meta.name=i.NO_SPECIAL_CHAR,C="invalid"):(D.meta.name=i.REQUIRED_FIELD,C="invalid"),D.meta.name&&!x&&(P(i.CREATE_TEMPLATE_DOM_IDS.name),x=!0),e.headerType===o.HEADER_TYPES.TEXT){const t=null!==(d=null===(a=e.headerText)||void 0===a?void 0:a.trim())&&void 0!==d?d:"";if(t)if(t.length>i.HEADER_TEXT_LEN_LIMIT)D.header=i.HEADER_LEN_ERROR,C="invalid";else{const e=O.getTemplateVariablesFromState(t);e&&e.length>1&&(D.header=i.ONE_VAR_ALLOWED,C="invalid")}else D.header=i.REQUIRED_FIELD,C="invalid"}else e.headerType===o.HEADER_TYPES.DOCUMENT||e.headerType===o.HEADER_TYPES.IMAGE||(e.headerType,o.HEADER_TYPES.VIDEO);if(e.headerType!==o.HEADER_TYPES.DOCUMENT&&e.headerType!==o.HEADER_TYPES.IMAGE&&e.headerType!==o.HEADER_TYPES.VIDEO||e.headerAssetLink||(D.header=i.HEADER_ASSET_LINK_ERROR,C="invalid"),D.header&&!x&&(P(i.CREATE_TEMPLATE_DOM_IDS.header),x=!0),e.bodyText?e.bodyTextRaw&&(null===(r=e.bodyTextRaw)||void 0===r?void 0:r.trim().length)>i.BODY_TEXT_LEN_LIMIT&&(D.body=i.BODY_LEN_ERROR,C="invalid"):(D.body=i.REQUIRED_FIELD,C="invalid"),D.body&&!x&&(P(i.CREATE_TEMPLATE_DOM_IDS.body),x=!0),e.footerText&&e.footerText.length>i.HEADER_TEXT_LEN_LIMIT&&(D.footer=i.HEADER_LEN_ERROR,C="invalid"),(null==D?void 0:D.footer)&&!x&&(P(i.CREATE_TEMPLATE_DOM_IDS.footer),x=!0),e.actionsType===o.ACTIONS_TYPES.CTA_BTN){if(null===(v=null===(s=e.ctaBtn)||void 0===s?void 0:s.phoneNumber)||void 0===v?void 0:v.isChecked){const t=null===(E=e.ctaBtn.phoneNumber.btnText)||void 0===E?void 0:E.trim(),n=e.ctaBtn.phoneNumber.phoneNumber;D.ctaBtn&&!t?(D.ctaBtn.phoneNumber.btnText=i.REQUIRED_FIELD,C="invalid"):D.ctaBtn&&t&&t.length>i.QUICK_REPLY_BTN_TEXT_LIMIT?(D.ctaBtn.phoneNumber.btnText=i.QUICK_REPLY_LEN_ERROR,C="invalid"):D.ctaBtn&&t&&A.test(t)&&(D.ctaBtn.phoneNumber.btnText=i.BUTTON_EMOJI_ERROR,C="invalid"),D.ctaBtn&&!n?(D.ctaBtn.phoneNumber.link=i.REQUIRED_FIELD,C="invalid"):D.ctaBtn&&n&&n.length<10&&(D.ctaBtn.phoneNumber.link=i.VALID_PHONE_NUMBER,C="invalid")}if(null===(T=null===(u=e.ctaBtn)||void 0===u?void 0:u.websiteLinkBtn)||void 0===T?void 0:T.isChecked){const t=null===(p=e.ctaBtn.websiteLinkBtn.btnText)||void 0===p?void 0:p.trim(),n=null===(_=e.ctaBtn.websiteLinkBtn.linkOpens)||void 0===_?void 0:_.trim(),o=null===(c=e.ctaBtn.websiteLinkBtn.placeholder)||void 0===c?void 0:c.trim();D.ctaBtn&&!t?(D.ctaBtn.websiteLink.btnText=i.REQUIRED_FIELD,C="invalid"):D.ctaBtn&&t&&t.length>i.QUICK_REPLY_BTN_TEXT_LIMIT?(D.ctaBtn.websiteLink.btnText=i.QUICK_REPLY_LEN_ERROR,C="invalid"):D.ctaBtn&&t&&A.test(t)&&(D.ctaBtn.websiteLink.btnText=i.BUTTON_EMOJI_ERROR,C="invalid"),!D.ctaBtn||n||o||(D.ctaBtn.websiteLink.link=i.REQUIRED_FIELD,C="invalid")}}else if(e.actionsType===o.ACTIONS_TYPES.QUICK_REPLY){const t=["","",""];e.quickReply.forEach(((n,o)=>{const l=n.text.trim();if(l)if(l.length>i.QUICK_REPLY_NAME_LEN_LIMIT)t[o]=i.QUICK_REPLY_LEN_ERROR,C="invalid";else if(A.test(l))t[o]=i.BUTTON_EMOJI_ERROR,C="invalid";else{const n=[...e.quickReply];n.splice(o,1);n.find((e=>e.text===l))&&(t[o]=i.QUICK_REPLY_NAME_ERROR,C="invalid")}else t[o]=i.REQUIRED_FIELD,C="invalid"})),D.quickReply=t}if(e.actionsType===o.ACTIONS_TYPES.CTA_BTN||e.actionsType===o.ACTIONS_TYPES.QUICK_REPLY){const e=null===(R=D.quickReply)||void 0===R?void 0:R.reduce(((e,t)=>e||!!t),!1);((null===(b=null===(m=null==D?void 0:D.ctaBtn)||void 0===m?void 0:m.websiteLink)||void 0===b?void 0:b.link)||(null===(I=null===(h=D.ctaBtn)||void 0===h?void 0:h.websiteLink)||void 0===I?void 0:I.btnText)||(null===(N=null===(L=D.ctaBtn)||void 0===L?void 0:L.phoneNumber)||void 0===N?void 0:N.link)||(null===(B=null===(y=D.ctaBtn)||void 0===y?void 0:y.phoneNumber)||void 0===B?void 0:B.btnText)||e)&&!x&&(P(i.CREATE_TEMPLATE_DOM_IDS.actionButtons),x=!0)}return{status:C,errors:D}}parseBodyComponent(e){var i,o,l,a,d;const r=[];let s="";const v=null===(i=e.components)||void 0===i?void 0:i.find((e=>"BODY"===e.type));return v&&(null===(l=null===(o=v.example)||void 0===o?void 0:o.body_text)||void 0===l||l[0].forEach(((t,i)=>{var o,l;let a=null===(l=null===(o=e.mapping)||void 0===o?void 0:o.body)||void 0===l?void 0:l[i];const d=a&&/\(\(/.test(a),s=null==a?void 0:a.match(n.placeHolderNamePattern);(null==s?void 0:s[2])&&(a=null==s?void 0:s[2]),r.push({idx:i,variableVal:t,editable:!!d,editableDefaultValues:d?void 0:t,variableName:null!=a?a:""})})),s=e.htmlContentUrl?e.htmlContentUrl:(null===(a=v.text)||void 0===a?void 0:a.split(/\{\{[0-9]+\}\}/).length)?null===(d=v.text)||void 0===d?void 0:d.split(/\{\{[0-9]+\}\}/).map(((e,n)=>{if(null==r?void 0:r[n]){const i=r[n].variableName;return`${e} <span> </span><span  style="color: ${t.COLORS.content.brand}; text-decoration: underline;">{{${i}}}</span><span> </span>`}return e})).join(""):""),{bodyVariable:r,bodyText:s}}parseFooterComponent(e){var t;const n=null===(t=e.components)||void 0===t?void 0:t.find((e=>"FOOTER"===e.type));return null==n?void 0:n.text}parseButtonComponent(e){var t,i,l,a,d,r;const s={actionsType:o.ACTIONS_TYPES.NONE,quickReply:[],ctaBtn:{phoneNumber:void 0,websiteLinkBtn:void 0}},v=null===(t=e.components)||void 0===t?void 0:t.find((e=>"BUTTONS"===e.type));if(v&&(null===(i=null==v?void 0:v.buttons)||void 0===i?void 0:i.length)){const t="QUICK_REPLY"===(null===(l=null==v?void 0:v.buttons)||void 0===l?void 0:l[0].type)?o.ACTIONS_TYPES.QUICK_REPLY:o.ACTIONS_TYPES.CTA_BTN;if(s.actionsType=t,t===o.ACTIONS_TYPES.QUICK_REPLY){const e=null!==(d=null===(a=null==v?void 0:v.buttons)||void 0===a?void 0:a.map((e=>e)))&&void 0!==d?d:[];return s.quickReply=e,s}t===o.ACTIONS_TYPES.CTA_BTN&&(null===(r=null==v?void 0:v.buttons)||void 0===r||r.forEach((t=>{var i,o,l,a;if(t.phone_number&&(s.ctaBtn.phoneNumber={isChecked:!0,btnText:t.text,phoneNumber:t.phone_number}),t.url){const d=null!==(l=null===(o=null===(i=null==e?void 0:e.mapping)||void 0===i?void 0:i.buttons)||void 0===o?void 0:o[0])&&void 0!==l?l:void 0;let r=!1;d&&n.editableVarPattern.test(d)&&(r=!0),s.ctaBtn.websiteLinkBtn={isChecked:!0,btnText:t.text,linkOpens:r?null===(a=t.example)||void 0===a?void 0:a[0]:t.url,placeholder:r?void 0:d}}})))}return s}parseUITemplateFromDBFormat(t,n){var i;return e.__awaiter(this,void 0,void 0,(function*(){const{headerType:e,headerAssetLink:o,headerAssetName:l,headerText:a,headerVariables:d}=yield this.parseDataFromHeaderComponent(t),{bodyText:r,bodyVariable:s}=yield this.parseBodyComponent(t),{actionsType:v,quickReply:E,ctaBtn:u}=yield this.parseButtonComponent(t),T={quickReply:E,ctaBtn:u,meta:{name:n?`${t.label} Copy`:t.label,category:null===(i=t.category)||void 0===i?void 0:i.toUpperCase(),subCategory:t.templateCategory,language:t.language,templateId:t.templateId},error:{header:void 0,body:void 0,footer:void 0,quickReply:void 0,meta:void 0,ctaBtn:void 0},actionsType:v,footerText:this.parseFooterComponent(t),bodyVariables:s,bodyText:r,headerType:e,headerAssetLink:o,headerAssetName:l,headerText:a,headerVariables:d,alreadyAsADraft:t.isDraft,mode:"edit",initialLoading:!1},{errors:p}=this.validateState(T);return T.error=p,T}))}};

package/dist/cjs/components/template-preview/helpers/WhatsAppFormatToHTML.d.ts

@@ -1,8 +0,0 @@
-export declare class WhatsAppFormatToHTML {
-    convertToHTML(str: string): string;
-    convertToBold(str: string): string;
-    convertItalics(str: string): string;
-    convertStrike(str: string): string;
-    convertNewline(str: string): string;
-    removeExtraNewLines(md: string): string;
-}

package/dist/cjs/components/template-preview/helpers/WhatsAppFormatToHTML.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});exports.WhatsAppFormatToHTML=class{convertToHTML(e){return this.convertNewline(this.convertStrike(this.convertItalics(this.convertToBold(e))))}convertToBold(e){return e.replace(/\*(.*?)\*/gim,"<b>$1</b>")}convertItalics(e){return e.replace(/_(.*)_/gim,"<em>$1</em>")}convertStrike(e){return e.replace(/~(.*)~/gim,"<s>$1</s>")}convertNewline(e){return e}removeExtraNewLines(e){return e.replace(/\n\n/g,"\n")}};