@bikdotai/bik-component-library 0.0.552-beta.10 → 0.0.552-beta.112
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/components/alerts/Alert.d.ts +2 -1
- package/dist/cjs/components/alerts/Alert.js +1 -1
- package/dist/cjs/components/bik-layout/MockMenus.d.ts +0 -1
- package/dist/cjs/components/icon-button/IconButton.js +1 -1
- package/dist/cjs/components/icon-button/model.d.ts +1 -0
- package/dist/cjs/components/product-picker-v2/modal.d.ts +2 -0
- package/dist/cjs/components/product-picker-v2/modal.js +1 -1
- package/dist/cjs/components/template-context-mapper/modalElements/WhatsAppTemplateCardButtonV2.js +1 -1
- package/dist/esm/components/alerts/Alert.d.ts +2 -1
- package/dist/esm/components/alerts/Alert.js +1 -1
- package/dist/esm/components/bik-layout/MockMenus.d.ts +0 -1
- package/dist/esm/components/icon-button/IconButton.js +1 -1
- package/dist/esm/components/icon-button/model.d.ts +1 -0
- package/dist/esm/components/product-picker-v2/modal.d.ts +2 -0
- package/dist/esm/components/product-picker-v2/modal.js +1 -1
- package/dist/esm/components/template-context-mapper/modalElements/WhatsAppTemplateCardButtonV2.js +1 -1
- package/package.json +1 -1
|
@@ -2,7 +2,7 @@ import React from 'react';
|
|
|
2
2
|
import { ALERT_TYPES, CONTENT_POSITION } from "./AlertHelper";
|
|
3
3
|
export type AlertProps = {
|
|
4
4
|
type: ALERT_TYPES;
|
|
5
|
-
text: string;
|
|
5
|
+
text: string | React.ReactNode;
|
|
6
6
|
icon?: React.FC<{
|
|
7
7
|
width: number;
|
|
8
8
|
height: number;
|
|
@@ -11,5 +11,6 @@ export type AlertProps = {
|
|
|
11
11
|
textColor?: string;
|
|
12
12
|
contentPosition?: CONTENT_POSITION;
|
|
13
13
|
containerStyle?: React.CSSProperties;
|
|
14
|
+
iconStyle?: React.CSSProperties;
|
|
14
15
|
};
|
|
15
16
|
export declare const Alert: React.FC<AlertProps>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("./Alert.styled.js"),r=require("./AlertHelper.js"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("./Alert.styled.js"),r=require("./AlertHelper.js"),i=require("../TypographyStyle.js");exports.Alert=o=>e.jsxs(t.AlertStyle,Object.assign({type:o.type,contentPosition:o.contentPosition,style:o.containerStyle},{children:[o.icon&&e.jsx("div",Object.assign({style:o.iconStyle||{display:"flex"}},{children:e.jsx(o.icon,{color:r.COLOR_CONFIG_MAP[o.type].textColor,height:20,width:20})})),e.jsx(i.BodyCaption,Object.assign({style:{color:o.textColor||r.COLOR_CONFIG_MAP[o.type].textColor,marginLeft:12}},{children:o.text}))]}));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../_virtual/_tslib.js"),t=require("react/jsx-runtime"),r=require("react"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../_virtual/_tslib.js"),t=require("react/jsx-runtime"),r=require("react"),o=require("./IconButton.styled.js"),i=require("./theme.js");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var s=n(r);const d=r.forwardRef(((r,n)=>{var{id:d,iconButtonType:l="default",Icon:c,height:u=20,width:a=20,bordered:y,disabled:b,isSelected:h,style:f,svgStyle:j,iconColor:p}=r,g=e.__rest(r,["id","iconButtonType","Icon","height","width","bordered","disabled","isSelected","style","svgStyle","iconColor"]);const v=i.getIconColor(l,b,h);return t.jsx(o.IconButton,Object.assign({id:d,ref:n,style:f,iconButtonType:l,bordered:y,disabled:b,isSelected:h},g,{children:s.default.createElement(c,{height:u,width:a,color:p||v,style:Object.assign({display:"block"},null!=j?j:{})})}))}));d.displayName="IconButton",exports.IconButton=d;
|
|
@@ -82,6 +82,7 @@ export type ProductPickerInterface = {
|
|
|
82
82
|
title?: string;
|
|
83
83
|
postHeader?: React.ReactNode;
|
|
84
84
|
width?: string;
|
|
85
|
+
left?: string;
|
|
85
86
|
renderWithoutModal?: boolean;
|
|
86
87
|
onClickSave?: number;
|
|
87
88
|
pickerType?: 'COLLECTION' | 'PRODUCT';
|
|
@@ -91,6 +92,7 @@ export type ProductPickerInterface = {
|
|
|
91
92
|
stickyFooter?: boolean;
|
|
92
93
|
showProductDetails?: boolean;
|
|
93
94
|
containerStyle?: React.CSSProperties;
|
|
95
|
+
crossButtonInsideHeader?: boolean;
|
|
94
96
|
} & ({
|
|
95
97
|
startupScreen: ScreenName.RearrangeProducts;
|
|
96
98
|
rearrangeEnabled: true;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t=require("react/jsx-runtime"),o=require("../../assets/icons/search.svg.js"),c=require("react"),r=require("../../constants/Theme.js"),s=require("../button/Button.js"),n=require("../input/Input.js"),l=require("../modals/styledModal.js"),i=require("../spinner/Spinner.js"),a=require("../tag/Tag.js"),d=require("./collectionScreen.js"),u=require("./productInfoOverlay.js"),h=require("./productScreen.js"),p=require("./rearrangeScreen.js"),S=require("./reducers.js"),C=require("./searchScreen.js"),x=require("./selectedScreen.js"),g=require("./style.js"),j=require("./type.js");exports.ScreenName=void 0,(e=exports.ScreenName||(exports.ScreenName={})).Collections="collections",e.RearrangeProducts="rearrange",e.SelectedProducts="view",e.SearchProducts="searchProducts",e.Products="products";exports.ProductPickerModal=e=>{const{storeId:
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t=require("react/jsx-runtime"),o=require("../../assets/icons/search.svg.js"),c=require("react"),r=require("../../constants/Theme.js"),s=require("../button/Button.js"),n=require("../input/Input.js"),l=require("../modals/styledModal.js"),i=require("../spinner/Spinner.js"),a=require("../tag/Tag.js"),d=require("./collectionScreen.js"),u=require("./productInfoOverlay.js"),h=require("./productScreen.js"),p=require("./rearrangeScreen.js"),S=require("./reducers.js"),C=require("./searchScreen.js"),x=require("./selectedScreen.js"),g=require("./style.js"),j=require("./type.js"),y=require("../../assets/icons/cross.svg.js");exports.ScreenName=void 0,(e=exports.ScreenName||(exports.ScreenName={})).Collections="collections",e.RearrangeProducts="rearrange",e.SelectedProducts="view",e.SearchProducts="searchProducts",e.Products="products";exports.ProductPickerModal=e=>{const{storeId:f,selectedItems:b,onClose:m,visible:v,zIndex:P,exactLimit:k,limit:O,hideCollectionCheckbox:I,hideProductCheckbox:F,outOfStockAction:R=j.OUT_OF_STOCK_ACTION.BLUR,hideVariantCheckbox:T,selectProductsFromCustomCollection:q,hideSelectionCount:E,title:D,width:w,left:N,renderWithoutModal:A,onClickSave:B,pickerType:L,hideProductVariants:M=!1,startupScreen:V=exports.ScreenName.Collections,rearrangeEnabled:$,selectSingleItem:_=!1,showProductDetails:z,containerStyle:H,crossButtonInsideHeader:W=!1}=e,[G,K]=c.useReducer(S.collectionsReducer,{}),[U,Y]=c.useState([exports.ScreenName.Collections,exports.ScreenName.RearrangeProducts].includes(V)?V:exports.ScreenName.Collections),[J,Q]=c.useState("grid"),[X,Z]=c.useState(""),[ee,te]=c.useState(""),[oe,ce]=c.useState(0),[re,se]=c.useState(!1),[ne,le]=c.useState(0),[ie,ae]=c.useState(""),[de,ue]=c.useState(!1),[he,pe]=c.useState(!1),[Se,Ce]=c.useReducer(S.searchReducer,{collections:{},products:{}}),[xe,ge]=c.useReducer(S.selectedColectionsReducer,Object.keys(b).length>0?b:{}),je=c.useRef(null),[ye,fe]=c.useState(!1),[be,me]=c.useState();c.useEffect((()=>{se(!0),pe(!0),e.collectionFetcher(oe,f).then((e=>{K({type:"fetched",data:(null==e?void 0:e.collections)||{}}),se(!1),ce((e=>e+1)),pe(!1)})).catch()}),[]),c.useEffect((()=>{let e=0;M?Object.keys(xe||[]).forEach((t=>{var o;Object.keys((null===(o=xe[t])||void 0===o?void 0:o.products)||[]).forEach((o=>{var c;"-1"!==t&&xe[-1]&&(null===(c=xe[-1].products)||void 0===c?void 0:c[o])||(e+=1)}))})):Object.keys(xe||[]).forEach((t=>{var o;Object.keys((null===(o=xe[t])||void 0===o?void 0:o.products)||[]).forEach((o=>{var c,r;Object.keys((null===(r=null===(c=xe[t].products)||void 0===c?void 0:c[o])||void 0===r?void 0:r.variants)||[]).forEach((()=>{e+=1}))}))})),le(e)}),[G,xe,M]),c.useEffect((()=>{ee&&(se(!0),e.productFetcher(ee,f).then((e=>{Object.keys(e).length&&K({type:"productsFetched",data:{collectionId:ee,products:e}}),se(!1)})).catch())}),[ee]),c.useEffect((()=>{const t=setTimeout((()=>{"rearrange"!==U&&(ie.length||"collections"!==U)&&(ie.length?(ue(!0),e.searchFetcher(f,ie).then((e=>{"collections"in e&&"products"in e?(Ce({type:"set",data:e}),K({type:"searched",data:e.collections})):(Ce({type:"set",data:{collections:{},products:e}}),K({type:"searched",data:e})),Y("searchProducts"),se(!1),ue(!1)}))):Y("collections"))}),800);return()=>clearTimeout(t)}),[ie]),c.useEffect((()=>{B&&(e.onAdd(xe,ne),ve())}),[B]),c.useEffect((()=>{_&&Object.keys(xe||{}).length&&ne&&(e.onAdd(xe,ne),ve())}),[_,xe,ne]);const ve=()=>{ge({type:"reset",data:{}})},Pe=t.jsxs(g.ContainerStyle,Object.assign({style:null!=H?H:{}},{children:[e.postHeader&&t.jsx("div",Object.assign({style:{padding:"0 24px"}},{children:e.postHeader})),!e.hideGlobalSearch&&t.jsx(t.Fragment,{children:("collections"===U||"searchProducts"===U)&&t.jsx("div",Object.assign({style:{padding:A?"8px 16px":"12px 24px",borderBottom:"1px solid #E0E0E0"}},{children:t.jsx(n.Input,{placeholder:"Search Collections or Products",noKeyDownChange:!0,noErrorHint:!0,rightIcon:{icon:()=>de?t.jsx(i.Spinner,{size:"small",color:r.COLORS.content.primary}):t.jsx(o.default,{})},id:"listInput",height:"24px",type:"text",value:ie,onChangeText:e=>{e.length&&e.trim().length?ae(e):ae("")}})}))}),t.jsxs(g.ScrollContainerStyle,Object.assign({ref:je,screenName:U},{children:["collections"===U&&t.jsx(d.CollectionsScreen,{customCollectionRestriction:e.customCollectionRestriction,dataLoading:he,collections:G,selectedCollectionsDispatch:ge,setCollectionId:Z,setSelectedCollectionId:te,setScreen:Y,selectedCollections:xe,collectionFetcher:e.collectionFetcher,storeId:f,collectionsDispatch:K,setSaveDisabled:se,pagingControls:{curPage:oe,setCurPage:ce},hideCollectionCheckbox:I,renderWithoutModal:A,pickerType:L,scrollContainerRef:je}),"products"===U&&X&&t.jsx(S.CollectionIdContext.Provider,Object.assign({value:X},{children:t.jsx(h.ProductsScreen,{hideInCollectionSearch:e.hideInCollectionSearch,customCollectionRestriction:e.customCollectionRestriction,productFetcher:e.productFetcher,setScreen:Y,storeId:f,data:G[X],collectionsDispatch:K,selectedCollectionsDispatch:ge,selectedData:xe,setSaveDisabled:se,searchInCollectionFetcher:e.searchInCollectionFetcher,hideProductCheckbox:F,outOfStockAction:R,hideVariantCheckbox:T,selectProductsFromCustomCollection:q,renderWithoutModal:A,pickerType:L,hideProductVariants:M,fbStatusFetcher:e.fbStatusFetcher,onProductDetailClick:e=>{fe(!0),me(e)},showProductDetailInfoIcon:z,scrollContainerRef:je})})),"view"===U&&t.jsx(x.SelectedScreen,{selectedCollections:xe||{},selectedCollectionsDispatch:ge,setScreen:Y,collections:G,hideProductVariants:M,outOfStockAction:R,storeId:f,fbStatusFetcher:e.fbStatusFetcher}),"rearrange"===U&&t.jsx(p.RearrangeScreen,{selectedCollections:xe||{},selectedCollectionsDispatch:ge,setScreen:Y,outOfStockAction:R,rearrangeViewType:"grid"===J?"list":"grid",scrollContainerRef:je,storeId:f,fbStatusFetcher:e.fbStatusFetcher}),"searchProducts"===U&&t.jsx(C.SearchScreen,{customCollectionRestriction:e.customCollectionRestriction,selectedCollections:xe||{},searchedCollections:Se||{},searchedCollectionsDispatch:Ce,selectedCollectionsDispatch:ge,setScreen:Y,collections:G,onBackPress:()=>{ae(""),Ce({type:"set",data:{collections:{},products:{}}})},pickerType:L,hideProductCheckbox:F,hideProductVariants:M,hideVariantCheckbox:T,storeId:f,fbStatusFetcher:e.fbStatusFetcher,setCollectionId:Z,setSelectedCollectionId:te,renderWithoutModal:A,hideCollectionCheckbox:I,outOfStockAction:R})]}))]}));return t.jsx(t.Fragment,{children:A?Pe:t.jsxs(l.StyledModal,Object.assign({zIndex:P,open:v,onClose:()=>{null==m||m(),ve()},headingTitle:D||("collections"===U||"products"===U?"Select Products":"view"===U?"Selected Products":"searchProducts"===U?"Searched Results":"rearrange"===U?"Rearrange Products":void 0),footerShadow:!0,centralContainerStyles:{width:w||"600px",left:N||"auto"},headerRightCustomElement:W?t.jsx("div",Object.assign({style:{cursor:"pointer",display:"flex"},onClick:m},{children:t.jsx(y.default,{width:20,height:20,color:r.COLORS.content.secondary})})):t.jsx(t.Fragment,{}),footerContainerStyle:e.stickyFooter?{position:"absolute",bottom:0,left:0,width:"100%",zIndex:9,background:r.COLORS.surface.standard}:void 0,primaryButton:{buttonText:re?"Loading...":U===exports.ScreenName.RearrangeProducts?"Done":"Add",disabled:re||ne<1||k&&ne<k||!k&&O&&ne>O||!1,onClick:()=>{e.onAdd(xe,ne),ve()}},wrapperStyle:e.stickyFooter?{height:"calc(100vh - 168px)"}:void 0,footerLeftCustomElement:E?t.jsx(t.Fragment,{}):k&&ne>k?t.jsx(a.Tag,{tagText:`You can only select ${k} products`,type:"negative"}):O&&ne>O?t.jsx(a.Tag,{tagText:`You can only select ${O} products`,type:"negative"}):ne>0?t.jsx(s.Button,{onClick:()=>{Y($?exports.ScreenName.RearrangeProducts:exports.ScreenName.SelectedProducts)},buttonText:k?`${ne}/${k} products selected`:`${ne} products selected`,buttonType:["rearrange","view"].includes(U)?"tertiaryGray":"tertiary",disabled:["rearrange","view"].includes(U)}):t.jsx(s.Button,{disabled:!0,buttonText:k?`${ne}/${k} products selected`:`${ne} products selected`,buttonType:"tertiaryGray"}),hideCrossButton:ye||W},{children:[Pe,ye&&be?t.jsx(u.ProductInfoOverlay,{productData:be,outOfStockAction:R,onClose:()=>{fe(!1)}}):t.jsx(t.Fragment,{})]}))})};
|
package/dist/cjs/components/template-context-mapper/modalElements/WhatsAppTemplateCardButtonV2.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("lodash"),l=require("react"),s=require("../../dropdown/Dropdown.js"),a=require("../../input/Input.js"),n=require("../../template-preview/constants/regexPatterns.js"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("lodash"),l=require("react"),s=require("../../dropdown/Dropdown.js"),a=require("../../input/Input.js"),n=require("../../template-preview/constants/regexPatterns.js"),i=require("../../template-preview/models/TemplateMeta.js"),o=require("../../template-preview/models/WhatsAppTemplate.js"),r=require("../../TypographyStyle.js"),u=require("../../../constants/Theme.js"),c=require("../context/templateModalContext.js"),d=require("../utils/validateIsUrl.js"),b=require("./VariableConnector.js");exports.default=p=>{let{variableListIndex:j,button:m,updateSelectedURLTemplateBtn:g,updateSelectedQRBTemplateBtn:O,currentVariableList:v,CTAoptions:x,QRBoptions:f}=p;var y,L,h,R,U;const[V,T]=l.useState(""),[C,I]=l.useState(),{isError:q,disableEditVariable:w,pod:P,selectedCarouselIndex:E,originalVariableList:N,setOriginalVariableList:S,isProductCarouselType:_}=c.useTemplateModalContext();function B(e){if(T(e),null!=E&&E>-1&&_){const l=t.cloneDeep(N);if("URL"===m.type){const t=l.cards.map((t=>{let l=t.buttons.filter((e=>"URL"===e.type))[j];l=Object.assign(Object.assign({},l),{buttonVariable:"((customPlaceholderName))",example:[`https://${e}`]});const s=t.buttons.map((e=>"URL"===e.type&&(null==e?void 0:e.text)===(null==l?void 0:l.text)?l:e));return Object.assign(Object.assign({},t),{buttons:s})}));null==S||S((e=>Object.assign(Object.assign({},e),{cards:t}))),null==g||g(`https://${e}`,"custom",j)}return}let l=v.buttons.filter((e=>"URL"===e.type))[j];l=Object.assign(Object.assign({},l),{buttonVariable:"((customPlaceholderName))",example:[`https://${e}`]});const s=v.buttons.map((e=>"URL"===e.type&&(null==e?void 0:e.text)===(null==l?void 0:l.text)?l:e)),a=Object.assign({},null!=E&&E>-1?N.cards[E]:N);if(a.buttons=s,null!=E&&E>-1){const e=[...N.cards];e[E]=a,null==S||S((t=>Object.assign(Object.assign({},t),{cards:e})))}else null==S||S((e=>Object.assign(Object.assign({},e),{buttons:[...s]})));null==g||g(`https://${e}`,"custom",j)}return l.useEffect((()=>{var e;if(m.buttonVariable&&n.editableVarPattern.test(m.buttonVariable))I(i.CUSTOM_URL_NAME),T((null===(e=m.example)||void 0===e?void 0:e[0].split("https://")[1])||"");else{let e=-1;const t="URL"===m.type?x:f;e="URL"===m.type?t.findIndex((e=>e.placeHolder===m.buttonVariable)):t.findIndex((e=>e.label===m.flowName)),e>-1&&I(t[e])}}),[]),P!==o.POD.CHATBOT?e.jsxs(b.Container,{children:[e.jsx("div",Object.assign({style:{marginBottom:8}},{children:e.jsxs(r.BodySecondary,Object.assign({style:{color:u.COLORS.content.primary}},{children:[m.text," button"]}))})),e.jsx("div",Object.assign({style:{marginBottom:12}},{children:e.jsx(s.Dropdown,{disabled:w,options:"URL"===m.type?x:f,isSearchable:!0,onSelect:function(e,l){const s=e;I(s);const a=("URL"===m.type?x:f).find((e=>e.placeHolder===s.placeHolder));if(a)if("custom_link"!==a.value){if(null!=E&&E>-1&&_){const e=t.cloneDeep(N);if("URL"===m.type){const t=e.cards.map((e=>{let t=e.buttons.filter((e=>"URL"===e.type))[j];t=Object.assign(Object.assign({},t),{buttonVariable:s.placeHolder});const l=e.buttons.map((e=>"URL"===e.type&&(null==e?void 0:e.text)===(null==t?void 0:t.text)?t:e));return Object.assign(Object.assign({},e),{buttons:l})}));null==g||g({defaultValue:a.value,placeHolder:a.placeHolder},"placeholder",j),null==S||S((e=>Object.assign(Object.assign({},e),{cards:t})))}else if("QUICK_REPLY"===m.type){const t=e.cards.map((e=>{let t=e.buttons.filter((e=>"QUICK_REPLY"===e.type))[j];t=Object.assign(Object.assign({},t),{flowName:s.label,flowId:s.value});const l=e.buttons.map((e=>"QUICK_REPLY"===e.type&&(null==e?void 0:e.text)===(null==t?void 0:t.text)?t:e));return Object.assign(Object.assign({},e),{buttons:l})}));null==O||O({flowName:s.label,flowId:s.value},"placeholder",j),null==S||S((e=>Object.assign(Object.assign({},e),{cards:t})))}return}let e;if("URL"===m.type){let t=v.buttons.filter((e=>"URL"===e.type))[j];t=Object.assign(Object.assign({},t),{buttonVariable:s.placeHolder}),e=v.buttons.map((e=>"URL"===e.type&&(null==e?void 0:e.text)===(null==t?void 0:t.text)?t:e)),null==g||g({defaultValue:a.value,placeHolder:a.placeHolder},"placeholder",j)}else{let t=v.buttons.filter((e=>"QUICK_REPLY"===e.type))[j];t=Object.assign(Object.assign({},t),{flowName:s.label,flowId:s.value}),e=v.buttons.map((e=>"QUICK_REPLY"===e.type&&(null==e?void 0:e.text)===(null==t?void 0:t.text)?t:e)),null==O||O({flowName:s.label,flowId:s.value},"placeholder",j)}const l=Object.assign({},null!=E&&E>-1?N.cards[E]:N);if(l.buttons=e,null!=E&&E>-1){const e=[...N.cards];e[E]=l,null==S||S((t=>Object.assign(Object.assign({},t),{cards:e})))}else null==S||S((t=>Object.assign(Object.assign({},t),{buttons:[...e]})))}else B("")},defaultOptions:C?[Object.assign(Object.assign({},C),{selected:!0})]:[]})})),"custom_link"===(null==C?void 0:C.value)&&e.jsx("div",Object.assign({style:{marginBottom:20}},{children:e.jsx(a.Input,{state:w?"disabled":"none",errorMessage:q?V?d.validateIsUrl(V)?"":"Enter valid URL":"Required field":"",value:V,prefixText:"https://",placeholder:"Enter custom URL here",onChangeText:B,maxCharLimit:2e3})}))]}):e.jsx(b.default,{index:j,variable:{variableName:null!==(y=m.text)&&void 0!==y?y:"",updatedValue:"((customPlaceholderName))"===m.buttonVariable?`${null===(L=m.example)||void 0===L?void 0:L[0]}`:null!==(h=m.buttonVariable)&&void 0!==h?h:"",type:"link",isEditableVariable:!0,index:null!==(R=m.index)&&void 0!==R?R:0,queryParams:null!==(U=m.queryParams)&&void 0!==U?U:[]},showVariableModal:!0,componentType:"BUTTONS",buttonType:m.type,CTAoptions:x})};
|
|
@@ -2,7 +2,7 @@ import React from 'react';
|
|
|
2
2
|
import { ALERT_TYPES, CONTENT_POSITION } from "./AlertHelper";
|
|
3
3
|
export type AlertProps = {
|
|
4
4
|
type: ALERT_TYPES;
|
|
5
|
-
text: string;
|
|
5
|
+
text: string | React.ReactNode;
|
|
6
6
|
icon?: React.FC<{
|
|
7
7
|
width: number;
|
|
8
8
|
height: number;
|
|
@@ -11,5 +11,6 @@ export type AlertProps = {
|
|
|
11
11
|
textColor?: string;
|
|
12
12
|
contentPosition?: CONTENT_POSITION;
|
|
13
13
|
containerStyle?: React.CSSProperties;
|
|
14
|
+
iconStyle?: React.CSSProperties;
|
|
14
15
|
};
|
|
15
16
|
export declare const Alert: React.FC<AlertProps>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsxs as t,jsx as e}from"react/jsx-runtime";import{AlertStyle as o}from"./Alert.styled.js";import{COLOR_CONFIG_MAP as r}from"./AlertHelper.js";import{BodyCaption as i}from"../TypographyStyle.js";const l=l=>t(o,Object.assign({type:l.type,contentPosition:l.contentPosition,style:l.containerStyle},{children:[l.icon&&e("div",Object.assign({style:{display:"flex"}},{children:e(l.icon,{color:r[l.type].textColor,height:20,width:20})})),e(i,Object.assign({style:{color:l.textColor||r[l.type].textColor,marginLeft:12}},{children:l.text}))]}));export{l as Alert};
|
|
1
|
+
import{jsxs as t,jsx as e}from"react/jsx-runtime";import{AlertStyle as o}from"./Alert.styled.js";import{COLOR_CONFIG_MAP as r}from"./AlertHelper.js";import{BodyCaption as i}from"../TypographyStyle.js";const l=l=>t(o,Object.assign({type:l.type,contentPosition:l.contentPosition,style:l.containerStyle},{children:[l.icon&&e("div",Object.assign({style:l.iconStyle||{display:"flex"}},{children:e(l.icon,{color:r[l.type].textColor,height:20,width:20})})),e(i,Object.assign({style:{color:l.textColor||r[l.type].textColor,marginLeft:12}},{children:l.text}))]}));export{l as Alert};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{__rest as e}from"../../_virtual/_tslib.js";import{jsx as t}from"react/jsx-runtime";import o,{forwardRef as i}from"react";import{IconButton as r}from"./IconButton.styled.js";import{getIconColor as s}from"./theme.js";const d=i(((i,d)=>{var{id:l,iconButtonType:n="default",Icon:c,height:a=20,width:m=20,bordered:y,disabled:h,isSelected:p,style:u,svgStyle:b}=i,
|
|
1
|
+
import{__rest as e}from"../../_virtual/_tslib.js";import{jsx as t}from"react/jsx-runtime";import o,{forwardRef as i}from"react";import{IconButton as r}from"./IconButton.styled.js";import{getIconColor as s}from"./theme.js";const d=i(((i,d)=>{var{id:l,iconButtonType:n="default",Icon:c,height:a=20,width:m=20,bordered:y,disabled:h,isSelected:p,style:u,svgStyle:b,iconColor:f}=i,g=e(i,["id","iconButtonType","Icon","height","width","bordered","disabled","isSelected","style","svgStyle","iconColor"]);const j=s(n,h,p);return t(r,Object.assign({id:l,ref:d,style:u,iconButtonType:n,bordered:y,disabled:h,isSelected:p},g,{children:o.createElement(c,{height:a,width:m,color:f||j,style:Object.assign({display:"block"},null!=b?b:{})})}))}));d.displayName="IconButton";export{d as IconButton};
|
|
@@ -82,6 +82,7 @@ export type ProductPickerInterface = {
|
|
|
82
82
|
title?: string;
|
|
83
83
|
postHeader?: React.ReactNode;
|
|
84
84
|
width?: string;
|
|
85
|
+
left?: string;
|
|
85
86
|
renderWithoutModal?: boolean;
|
|
86
87
|
onClickSave?: number;
|
|
87
88
|
pickerType?: 'COLLECTION' | 'PRODUCT';
|
|
@@ -91,6 +92,7 @@ export type ProductPickerInterface = {
|
|
|
91
92
|
stickyFooter?: boolean;
|
|
92
93
|
showProductDetails?: boolean;
|
|
93
94
|
containerStyle?: React.CSSProperties;
|
|
95
|
+
crossButtonInsideHeader?: boolean;
|
|
94
96
|
} & ({
|
|
95
97
|
startupScreen: ScreenName.RearrangeProducts;
|
|
96
98
|
rearrangeEnabled: true;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsxs as e,jsx as t,Fragment as o}from"react/jsx-runtime";import c from"../../assets/icons/search.svg.js";import{useReducer as r,useState as s,useRef as i,useEffect as l}from"react";import{COLORS as n}from"../../constants/Theme.js";import{Button as d}from"../button/Button.js";import{Input as a}from"../input/Input.js";import{StyledModal as u}from"../modals/styledModal.js";import{Spinner as h}from"../spinner/Spinner.js";import{Tag as p}from"../tag/Tag.js";import{CollectionsScreen as m}from"./collectionScreen.js";import{ProductInfoOverlay as C}from"./productInfoOverlay.js";import{ProductsScreen as g}from"./productScreen.js";import{RearrangeScreen as f}from"./rearrangeScreen.js";import{collectionsReducer as
|
|
1
|
+
import{jsxs as e,jsx as t,Fragment as o}from"react/jsx-runtime";import c from"../../assets/icons/search.svg.js";import{useReducer as r,useState as s,useRef as i,useEffect as l}from"react";import{COLORS as n}from"../../constants/Theme.js";import{Button as d}from"../button/Button.js";import{Input as a}from"../input/Input.js";import{StyledModal as u}from"../modals/styledModal.js";import{Spinner as h}from"../spinner/Spinner.js";import{Tag as p}from"../tag/Tag.js";import{CollectionsScreen as m}from"./collectionScreen.js";import{ProductInfoOverlay as C}from"./productInfoOverlay.js";import{ProductsScreen as g}from"./productScreen.js";import{RearrangeScreen as f}from"./rearrangeScreen.js";import{collectionsReducer as y,searchReducer as b,selectedColectionsReducer as S,CollectionIdContext as v}from"./reducers.js";import{SearchScreen as k}from"./searchScreen.js";import{SelectedScreen as j}from"./selectedScreen.js";import{ContainerStyle as P,ScrollContainerStyle as x}from"./style.js";import{OUT_OF_STOCK_ACTION as I}from"./type.js";import F from"../../assets/icons/cross.svg.js";var O;!function(e){e.Collections="collections",e.RearrangeProducts="rearrange",e.SelectedProducts="view",e.SearchProducts="searchProducts",e.Products="products"}(O||(O={}));const T=T=>{const{storeId:D,selectedItems:R,onClose:w,visible:E,zIndex:A,exactLimit:V,limit:$,hideCollectionCheckbox:B,hideProductCheckbox:L,outOfStockAction:M=I.BLUR,hideVariantCheckbox:z,selectProductsFromCustomCollection:H,hideSelectionCount:W,title:G,width:Y,left:K,renderWithoutModal:N,onClickSave:U,pickerType:q,hideProductVariants:J=!1,startupScreen:Q=O.Collections,rearrangeEnabled:X,selectSingleItem:Z=!1,showProductDetails:_,containerStyle:ee,crossButtonInsideHeader:te=!1}=T,[oe,ce]=r(y,{}),[re,se]=s([O.Collections,O.RearrangeProducts].includes(Q)?Q:O.Collections),[ie,le]=s("grid"),[ne,de]=s(""),[ae,ue]=s(""),[he,pe]=s(0),[me,Ce]=s(!1),[ge,fe]=s(0),[ye,be]=s(""),[Se,ve]=s(!1),[ke,je]=s(!1),[Pe,xe]=r(b,{collections:{},products:{}}),[Ie,Fe]=r(S,Object.keys(R).length>0?R:{}),Oe=i(null),[Te,De]=s(!1),[Re,we]=s();l((()=>{Ce(!0),je(!0),T.collectionFetcher(he,D).then((e=>{ce({type:"fetched",data:(null==e?void 0:e.collections)||{}}),Ce(!1),pe((e=>e+1)),je(!1)})).catch()}),[]),l((()=>{let e=0;J?Object.keys(Ie||[]).forEach((t=>{var o;Object.keys((null===(o=Ie[t])||void 0===o?void 0:o.products)||[]).forEach((o=>{var c;"-1"!==t&&Ie[-1]&&(null===(c=Ie[-1].products)||void 0===c?void 0:c[o])||(e+=1)}))})):Object.keys(Ie||[]).forEach((t=>{var o;Object.keys((null===(o=Ie[t])||void 0===o?void 0:o.products)||[]).forEach((o=>{var c,r;Object.keys((null===(r=null===(c=Ie[t].products)||void 0===c?void 0:c[o])||void 0===r?void 0:r.variants)||[]).forEach((()=>{e+=1}))}))})),fe(e)}),[oe,Ie,J]),l((()=>{ae&&(Ce(!0),T.productFetcher(ae,D).then((e=>{Object.keys(e).length&&ce({type:"productsFetched",data:{collectionId:ae,products:e}}),Ce(!1)})).catch())}),[ae]),l((()=>{const e=setTimeout((()=>{"rearrange"!==re&&(ye.length||"collections"!==re)&&(ye.length?(ve(!0),T.searchFetcher(D,ye).then((e=>{"collections"in e&&"products"in e?(xe({type:"set",data:e}),ce({type:"searched",data:e.collections})):(xe({type:"set",data:{collections:{},products:e}}),ce({type:"searched",data:e})),se("searchProducts"),Ce(!1),ve(!1)}))):se("collections"))}),800);return()=>clearTimeout(e)}),[ye]),l((()=>{U&&(T.onAdd(Ie,ge),Ee())}),[U]),l((()=>{Z&&Object.keys(Ie||{}).length&&ge&&(T.onAdd(Ie,ge),Ee())}),[Z,Ie,ge]);const Ee=()=>{Fe({type:"reset",data:{}})},Ae=e(P,Object.assign({style:null!=ee?ee:{}},{children:[T.postHeader&&t("div",Object.assign({style:{padding:"0 24px"}},{children:T.postHeader})),!T.hideGlobalSearch&&t(o,{children:("collections"===re||"searchProducts"===re)&&t("div",Object.assign({style:{padding:N?"8px 16px":"12px 24px",borderBottom:"1px solid #E0E0E0"}},{children:t(a,{placeholder:"Search Collections or Products",noKeyDownChange:!0,noErrorHint:!0,rightIcon:{icon:()=>Se?t(h,{size:"small",color:n.content.primary}):t(c,{})},id:"listInput",height:"24px",type:"text",value:ye,onChangeText:e=>{e.length&&e.trim().length?be(e):be("")}})}))}),e(x,Object.assign({ref:Oe,screenName:re},{children:["collections"===re&&t(m,{customCollectionRestriction:T.customCollectionRestriction,dataLoading:ke,collections:oe,selectedCollectionsDispatch:Fe,setCollectionId:de,setSelectedCollectionId:ue,setScreen:se,selectedCollections:Ie,collectionFetcher:T.collectionFetcher,storeId:D,collectionsDispatch:ce,setSaveDisabled:Ce,pagingControls:{curPage:he,setCurPage:pe},hideCollectionCheckbox:B,renderWithoutModal:N,pickerType:q,scrollContainerRef:Oe}),"products"===re&&ne&&t(v.Provider,Object.assign({value:ne},{children:t(g,{hideInCollectionSearch:T.hideInCollectionSearch,customCollectionRestriction:T.customCollectionRestriction,productFetcher:T.productFetcher,setScreen:se,storeId:D,data:oe[ne],collectionsDispatch:ce,selectedCollectionsDispatch:Fe,selectedData:Ie,setSaveDisabled:Ce,searchInCollectionFetcher:T.searchInCollectionFetcher,hideProductCheckbox:L,outOfStockAction:M,hideVariantCheckbox:z,selectProductsFromCustomCollection:H,renderWithoutModal:N,pickerType:q,hideProductVariants:J,fbStatusFetcher:T.fbStatusFetcher,onProductDetailClick:e=>{De(!0),we(e)},showProductDetailInfoIcon:_,scrollContainerRef:Oe})})),"view"===re&&t(j,{selectedCollections:Ie||{},selectedCollectionsDispatch:Fe,setScreen:se,collections:oe,hideProductVariants:J,outOfStockAction:M,storeId:D,fbStatusFetcher:T.fbStatusFetcher}),"rearrange"===re&&t(f,{selectedCollections:Ie||{},selectedCollectionsDispatch:Fe,setScreen:se,outOfStockAction:M,rearrangeViewType:"grid"===ie?"list":"grid",scrollContainerRef:Oe,storeId:D,fbStatusFetcher:T.fbStatusFetcher}),"searchProducts"===re&&t(k,{customCollectionRestriction:T.customCollectionRestriction,selectedCollections:Ie||{},searchedCollections:Pe||{},searchedCollectionsDispatch:xe,selectedCollectionsDispatch:Fe,setScreen:se,collections:oe,onBackPress:()=>{be(""),xe({type:"set",data:{collections:{},products:{}}})},pickerType:q,hideProductCheckbox:L,hideProductVariants:J,hideVariantCheckbox:z,storeId:D,fbStatusFetcher:T.fbStatusFetcher,setCollectionId:de,setSelectedCollectionId:ue,renderWithoutModal:N,hideCollectionCheckbox:B,outOfStockAction:M})]}))]}));return t(o,{children:N?Ae:e(u,Object.assign({zIndex:A,open:E,onClose:()=>{null==w||w(),Ee()},headingTitle:G||("collections"===re||"products"===re?"Select Products":"view"===re?"Selected Products":"searchProducts"===re?"Searched Results":"rearrange"===re?"Rearrange Products":void 0),footerShadow:!0,centralContainerStyles:{width:Y||"600px",left:K||"auto"},headerRightCustomElement:te?t("div",Object.assign({style:{cursor:"pointer",display:"flex"},onClick:w},{children:t(F,{width:20,height:20,color:n.content.secondary})})):t(o,{}),footerContainerStyle:T.stickyFooter?{position:"absolute",bottom:0,left:0,width:"100%",zIndex:9,background:n.surface.standard}:void 0,primaryButton:{buttonText:me?"Loading...":re===O.RearrangeProducts?"Done":"Add",disabled:me||ge<1||V&&ge<V||!V&&$&&ge>$||!1,onClick:()=>{T.onAdd(Ie,ge),Ee()}},wrapperStyle:T.stickyFooter?{height:"calc(100vh - 168px)"}:void 0,footerLeftCustomElement:W?t(o,{}):V&&ge>V?t(p,{tagText:`You can only select ${V} products`,type:"negative"}):$&&ge>$?t(p,{tagText:`You can only select ${$} products`,type:"negative"}):t(d,ge>0?{onClick:()=>{se(X?O.RearrangeProducts:O.SelectedProducts)},buttonText:V?`${ge}/${V} products selected`:`${ge} products selected`,buttonType:["rearrange","view"].includes(re)?"tertiaryGray":"tertiary",disabled:["rearrange","view"].includes(re)}:{disabled:!0,buttonText:V?`${ge}/${V} products selected`:`${ge} products selected`,buttonType:"tertiaryGray"}),hideCrossButton:Te||te},{children:[Ae,Te&&Re?t(C,{productData:Re,outOfStockAction:M,onClose:()=>{De(!1)}}):t(o,{})]}))})};export{T as ProductPickerModal,O as ScreenName};
|
package/dist/esm/components/template-context-mapper/modalElements/WhatsAppTemplateCardButtonV2.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsxs as t,jsx as e}from"react/jsx-runtime";import{cloneDeep as l}from"lodash";import{useState as s,useEffect as a}from"react";import{Dropdown as n}from"../../dropdown/Dropdown.js";import{Input as o}from"../../input/Input.js";import{editableVarPattern as i}from"../../template-preview/constants/regexPatterns.js";import{CUSTOM_URL_NAME as r}from"../../template-preview/models/TemplateMeta.js";import{POD as c}from"../../template-preview/models/WhatsAppTemplate.js";import{BodySecondary as u}from"../../TypographyStyle.js";import{COLORS as d}from"../../../constants/Theme.js";import{useTemplateModalContext as p}from"../context/templateModalContext.js";import{validateIsUrl as b}from"../utils/validateIsUrl.js";import m,{Container as
|
|
1
|
+
import{jsxs as t,jsx as e}from"react/jsx-runtime";import{cloneDeep as l}from"lodash";import{useState as s,useEffect as a}from"react";import{Dropdown as n}from"../../dropdown/Dropdown.js";import{Input as o}from"../../input/Input.js";import{editableVarPattern as i}from"../../template-preview/constants/regexPatterns.js";import{CUSTOM_URL_NAME as r}from"../../template-preview/models/TemplateMeta.js";import{POD as c}from"../../template-preview/models/WhatsAppTemplate.js";import{BodySecondary as u}from"../../TypographyStyle.js";import{COLORS as d}from"../../../constants/Theme.js";import{useTemplateModalContext as p}from"../context/templateModalContext.js";import{validateIsUrl as b}from"../utils/validateIsUrl.js";import m,{Container as j}from"./VariableConnector.js";const f=f=>{let{variableListIndex:g,button:O,updateSelectedURLTemplateBtn:v,updateSelectedQRBTemplateBtn:y,currentVariableList:x,CTAoptions:h,QRBoptions:L}=f;var R,U,V,T,w;const[I,C]=s(""),[P,E]=s(),{isError:H,disableEditVariable:N,pod:B,selectedCarouselIndex:Q,originalVariableList:_,setOriginalVariableList:S,isProductCarouselType:K}=p();function Y(t){if(C(t),null!=Q&&Q>-1&&K){const e=l(_);if("URL"===O.type){const l=e.cards.map((e=>{let l=e.buttons.filter((t=>"URL"===t.type))[g];l=Object.assign(Object.assign({},l),{buttonVariable:"((customPlaceholderName))",example:[`https://${t}`]});const s=e.buttons.map((t=>"URL"===t.type&&(null==t?void 0:t.text)===(null==l?void 0:l.text)?l:t));return Object.assign(Object.assign({},e),{buttons:s})}));null==S||S((t=>Object.assign(Object.assign({},t),{cards:l}))),null==v||v(`https://${t}`,"custom",g)}return}let e=x.buttons.filter((t=>"URL"===t.type))[g];e=Object.assign(Object.assign({},e),{buttonVariable:"((customPlaceholderName))",example:[`https://${t}`]});const s=x.buttons.map((t=>"URL"===t.type&&(null==t?void 0:t.text)===(null==e?void 0:e.text)?e:t)),a=Object.assign({},null!=Q&&Q>-1?_.cards[Q]:_);if(a.buttons=s,null!=Q&&Q>-1){const t=[..._.cards];t[Q]=a,null==S||S((e=>Object.assign(Object.assign({},e),{cards:t})))}else null==S||S((t=>Object.assign(Object.assign({},t),{buttons:[...s]})));null==v||v(`https://${t}`,"custom",g)}return a((()=>{var t;if(O.buttonVariable&&i.test(O.buttonVariable))E(r),C((null===(t=O.example)||void 0===t?void 0:t[0].split("https://")[1])||"");else{let t=-1;const e="URL"===O.type?h:L;t="URL"===O.type?e.findIndex((t=>t.placeHolder===O.buttonVariable)):e.findIndex((t=>t.label===O.flowName)),t>-1&&E(e[t])}}),[]),B!==c.CHATBOT?t(j,{children:[e("div",Object.assign({style:{marginBottom:8}},{children:t(u,Object.assign({style:{color:d.content.primary}},{children:[O.text," button"]}))})),e("div",Object.assign({style:{marginBottom:12}},{children:e(n,{disabled:N,options:"URL"===O.type?h:L,isSearchable:!0,onSelect:function(t,e){const s=t;E(s);const a=("URL"===O.type?h:L).find((t=>t.placeHolder===s.placeHolder));if(a)if("custom_link"!==a.value){if(null!=Q&&Q>-1&&K){const t=l(_);if("URL"===O.type){const e=t.cards.map((t=>{let e=t.buttons.filter((t=>"URL"===t.type))[g];e=Object.assign(Object.assign({},e),{buttonVariable:s.placeHolder});const l=t.buttons.map((t=>"URL"===t.type&&(null==t?void 0:t.text)===(null==e?void 0:e.text)?e:t));return Object.assign(Object.assign({},t),{buttons:l})}));null==v||v({defaultValue:a.value,placeHolder:a.placeHolder},"placeholder",g),null==S||S((t=>Object.assign(Object.assign({},t),{cards:e})))}else if("QUICK_REPLY"===O.type){const e=t.cards.map((t=>{let e=t.buttons.filter((t=>"QUICK_REPLY"===t.type))[g];e=Object.assign(Object.assign({},e),{flowName:s.label,flowId:s.value});const l=t.buttons.map((t=>"QUICK_REPLY"===t.type&&(null==t?void 0:t.text)===(null==e?void 0:e.text)?e:t));return Object.assign(Object.assign({},t),{buttons:l})}));null==y||y({flowName:s.label,flowId:s.value},"placeholder",g),null==S||S((t=>Object.assign(Object.assign({},t),{cards:e})))}return}let t;if("URL"===O.type){let e=x.buttons.filter((t=>"URL"===t.type))[g];e=Object.assign(Object.assign({},e),{buttonVariable:s.placeHolder}),t=x.buttons.map((t=>"URL"===t.type&&(null==t?void 0:t.text)===(null==e?void 0:e.text)?e:t)),null==v||v({defaultValue:a.value,placeHolder:a.placeHolder},"placeholder",g)}else{let e=x.buttons.filter((t=>"QUICK_REPLY"===t.type))[g];e=Object.assign(Object.assign({},e),{flowName:s.label,flowId:s.value}),t=x.buttons.map((t=>"QUICK_REPLY"===t.type&&(null==t?void 0:t.text)===(null==e?void 0:e.text)?e:t)),null==y||y({flowName:s.label,flowId:s.value},"placeholder",g)}const e=Object.assign({},null!=Q&&Q>-1?_.cards[Q]:_);if(e.buttons=t,null!=Q&&Q>-1){const t=[..._.cards];t[Q]=e,null==S||S((e=>Object.assign(Object.assign({},e),{cards:t})))}else null==S||S((e=>Object.assign(Object.assign({},e),{buttons:[...t]})))}else Y("")},defaultOptions:P?[Object.assign(Object.assign({},P),{selected:!0})]:[]})})),"custom_link"===(null==P?void 0:P.value)&&e("div",Object.assign({style:{marginBottom:20}},{children:e(o,{state:N?"disabled":"none",errorMessage:H?I?b(I)?"":"Enter valid URL":"Required field":"",value:I,prefixText:"https://",placeholder:"Enter custom URL here",onChangeText:Y,maxCharLimit:2e3})}))]}):e(m,{index:g,variable:{variableName:null!==(R=O.text)&&void 0!==R?R:"",updatedValue:"((customPlaceholderName))"===O.buttonVariable?`${null===(U=O.example)||void 0===U?void 0:U[0]}`:null!==(V=O.buttonVariable)&&void 0!==V?V:"",type:"link",isEditableVariable:!0,index:null!==(T=O.index)&&void 0!==T?T:0,queryParams:null!==(w=O.queryParams)&&void 0!==w?w:[]},showVariableModal:!0,componentType:"BUTTONS",buttonType:O.type,CTAoptions:h})};export{f as default};
|