@bikdotai/bik-component-library 0.0.453 → 0.0.454-beta.ppi-2
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/bik-layout/MockMenus.d.ts +0 -1
- package/dist/cjs/components/product-picker-v2/ProductPickerTag.d.ts +8 -0
- package/dist/cjs/components/product-picker-v2/ProductPickerTag.js +1 -0
- package/dist/cjs/components/product-picker-v2/collectionScreen.d.ts +1 -0
- package/dist/cjs/components/product-picker-v2/collectionScreen.js +1 -1
- package/dist/cjs/components/product-picker-v2/helpers/ProductHelper.d.ts +2 -0
- package/dist/cjs/components/product-picker-v2/helpers/ProductHelper.js +1 -1
- package/dist/cjs/components/product-picker-v2/modal.d.ts +11 -2
- package/dist/cjs/components/product-picker-v2/modal.js +1 -1
- package/dist/cjs/components/product-picker-v2/productInfoOverlay.d.ts +11 -0
- package/dist/cjs/components/product-picker-v2/productInfoOverlay.js +39 -0
- package/dist/cjs/components/product-picker-v2/productScreen.d.ts +10 -3
- package/dist/cjs/components/product-picker-v2/productScreen.js +1 -1
- package/dist/cjs/components/product-picker-v2/rearrangeScreen.d.ts +3 -1
- package/dist/cjs/components/product-picker-v2/rearrangeScreen.js +1 -1
- package/dist/cjs/components/product-picker-v2/reducers.d.ts +1 -0
- package/dist/cjs/components/product-picker-v2/reducers.js +1 -1
- package/dist/cjs/components/product-picker-v2/searchScreen.d.ts +4 -1
- package/dist/cjs/components/product-picker-v2/searchScreen.js +1 -1
- package/dist/cjs/components/product-picker-v2/selectedScreen.d.ts +5 -1
- package/dist/cjs/components/product-picker-v2/selectedScreen.js +1 -1
- package/dist/cjs/components/product-picker-v2/style.js +12 -7
- package/dist/cjs/components/product-picker-v2/useFetchFbStatus copy.d.ts +2 -0
- package/dist/cjs/components/product-picker-v2/useFetchFbStatus copy.js +1 -0
- package/dist/cjs/components/product-picker-v2/useFetchFbStatus.d.ts +5 -0
- package/dist/cjs/components/product-picker-v2/useFetchFbStatus.js +1 -0
- package/dist/cjs/components/product-picker-v2/utility.d.ts +4 -0
- package/dist/cjs/components/product-picker-v2/utility.js +1 -1
- package/dist/cjs/components/product-picker-v2/variant.js +1 -1
- package/dist/cjs/components/template-context-mapper/modalElements/EditWhatsAppTemplateV2.js +1 -1
- package/dist/cjs/components/template-context-mapper/modalElements/VariableConnector.js +1 -1
- package/dist/esm/components/bik-layout/MockMenus.d.ts +0 -1
- package/dist/esm/components/product-picker-v2/ProductPickerTag.d.ts +8 -0
- package/dist/esm/components/product-picker-v2/ProductPickerTag.js +1 -0
- package/dist/esm/components/product-picker-v2/collectionScreen.d.ts +1 -0
- package/dist/esm/components/product-picker-v2/collectionScreen.js +1 -1
- package/dist/esm/components/product-picker-v2/helpers/ProductHelper.d.ts +2 -0
- package/dist/esm/components/product-picker-v2/helpers/ProductHelper.js +1 -1
- package/dist/esm/components/product-picker-v2/modal.d.ts +11 -2
- package/dist/esm/components/product-picker-v2/modal.js +1 -1
- package/dist/esm/components/product-picker-v2/productInfoOverlay.d.ts +11 -0
- package/dist/esm/components/product-picker-v2/productInfoOverlay.js +39 -0
- package/dist/esm/components/product-picker-v2/productScreen.d.ts +10 -3
- package/dist/esm/components/product-picker-v2/productScreen.js +1 -1
- package/dist/esm/components/product-picker-v2/rearrangeScreen.d.ts +3 -1
- package/dist/esm/components/product-picker-v2/rearrangeScreen.js +1 -1
- package/dist/esm/components/product-picker-v2/reducers.d.ts +1 -0
- package/dist/esm/components/product-picker-v2/reducers.js +1 -1
- package/dist/esm/components/product-picker-v2/searchScreen.d.ts +4 -1
- package/dist/esm/components/product-picker-v2/searchScreen.js +1 -1
- package/dist/esm/components/product-picker-v2/selectedScreen.d.ts +5 -1
- package/dist/esm/components/product-picker-v2/selectedScreen.js +1 -1
- package/dist/esm/components/product-picker-v2/style.js +14 -9
- package/dist/esm/components/product-picker-v2/useFetchFbStatus copy.d.ts +2 -0
- package/dist/esm/components/product-picker-v2/useFetchFbStatus copy.js +1 -0
- package/dist/esm/components/product-picker-v2/useFetchFbStatus.d.ts +5 -0
- package/dist/esm/components/product-picker-v2/useFetchFbStatus.js +1 -0
- package/dist/esm/components/product-picker-v2/utility.d.ts +4 -0
- package/dist/esm/components/product-picker-v2/utility.js +1 -1
- package/dist/esm/components/product-picker-v2/variant.js +1 -1
- package/dist/esm/components/template-context-mapper/modalElements/EditWhatsAppTemplateV2.js +1 -1
- package/dist/esm/components/template-context-mapper/modalElements/VariableConnector.js +1 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../assets/icons/delete.svg.js"),r=require("../../assets/icons/drag_handle.svg.js"),i=require("../../constants/Theme.js"),a=require("../icon-button/IconButton.js"),s=require("../shimmer-image/ShimmerImage.js"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../assets/icons/delete.svg.js"),r=require("../../assets/icons/drag_handle.svg.js"),i=require("../../constants/Theme.js"),a=require("../icon-button/IconButton.js"),s=require("../shimmer-image/ShimmerImage.js"),o=require("../TypographyStyle.js"),n=require("./collectionScreen.js"),c=require("./ProductPickerTag.js"),d=require("./style.js"),l=require("../tooltips/Tooltip.js");exports.VariantCardGridView=t=>{const{data:r}=t;return e.jsx(d.VariantCardGridStyle,{children:e.jsx(l.Tooltip,Object.assign({body:r.name,alwaysVisible:!1,variant:"dark",placement:"bottom"},{children:e.jsx(s.ShimmerImage,{width:72,height:72,imageUrl:r.image,alt:"Item",borderRadius:4})}))})},exports.VariantCardListView=u=>{const{data:m,selectedCollectionsDispatch:h,outOfStockAction:j}=u,g=e=>{let t;return t=m.name.includes(m.productName)?m.name:`${m.productName} ${m.name}`,e?n.truncate(t,34,!0):t};return e.jsxs(d.VariantCardListStyle,{children:[e.jsx(r.default,{width:24,height:24,color:i.COLORS.content.placeholder}),e.jsx("div",{children:e.jsx(s.ShimmerImage,{width:40,height:40,imageUrl:m.image,alt:"Item",borderRadius:4},m.variantId)}),e.jsxs("div",Object.assign({className:"tooltip-title-tag"},{children:[e.jsx(l.Tooltip,Object.assign({body:g(!1),placement:"bottom",delay:400},{children:e.jsx(o.TitleRegular,{children:g(!0)})})),e.jsx(c.ProductPickerTag,{isVariant:!0,data:m,outOfStockAction:j})]})),e.jsx(a.IconButton,{Icon:()=>e.jsx(t.default,{width:24,height:24,color:i.COLORS.content.placeholder}),onClick:()=>{h&&h({type:"variantUnselected",data:{productId:m.productId,variantId:m.variantId,collectionId:m.collectionId}}),u.onDelete&&u.onDelete()}})]})};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),n=require("lodash"),t=require("react"),o=require("../../template-preview/models/WhatsAppTemplate.js"),i=require("../context/templateModalContext.js"),s=require("../custom-hooks/useAdditionalVariables.js"),l=require("../utils/getDataFromTemplateComponent.js"),a=require("./BackTrackComponent.js"),d=require("./DiscountCodeComponent.js"),r=require("./EditMediaV2.style.js"),u=require("./EditWhatsAppTemplateMediaV2.js"),c=require("./VariableConnector.js"),p=require("./VariableConnectorsPanel.js"),m=require("./VariableConnectorWhatsApp.js"),v=require("./VariableEditorHeader.js"),b=require("./WhatsAppTemplateCardButtonV2.js");exports.default=g=>{let{template:j,onTemplateChange:f,whatsappSpecificPickerMeta:C,showVariableModal:O,variableList:h,variableListForImage:x,discountCode:T,setDiscountCode:y}=g;var V,B,E,L,U,k,q,D,I,w,R,A,P,S;const N=j.isCarouselType,{originalVariableList:M,pod:_,extras:Q,selectedCarouselIndex:H,isProductCarouselType:Y}=i.useTemplateModalContext(),{descriptionComponents:F,urlBtns:K,qrbBtns:W,imageComponent:$,bodyVariables:X,headerVariables:z}=l.getAllDataFromTemplateComponent(j),[G,J]=t.useState(!1),[Z,ee]=t.useState(-1===H?{descriptionComponents:F,urlBtns:K,qrbBtns:W,imageComponent:$,bodyVariables:X,headerVariables:z}:{}),[ne,te]=t.useState(!1);function oe(e,t,o){var i,s,l,a,d,r,u,c,p,m;const v=null!=H&&H>-1?{components:null===(i=Object.assign({},j).components[1].cards)||void 0===i?void 0:i[H].components,mapping:null===(s=Object.assign({},j).mapping.cards)||void 0===s?void 0:s[H]}:Object.assign({},j),b=n.cloneDeep(v),g="custom"===t&&"string"==typeof e,C=g?e:"string"!=typeof e?e.defaultValue:"";if(null!=H&&H>-1&&Y){const t=Object.assign({},j).components.map((e=>{var n;return"CAROUSEL"===e.type?Object.assign(Object.assign({},e),{cards:null===(n=e.cards)||void 0===n?void 0:n.map((e=>Object.assign(Object.assign({},e),{components:e.components.map((e=>{var n,t,i;if("BUTTONS"===e.type){const s=null===(n=e.buttons)||void 0===n?void 0:n.filter((e=>"URL"===e.type));let l=null!==(t=null==s?void 0:s[o])&&void 0!==t?t:{};l=Object.assign(Object.assign({},l),{url:"https://d.bik.ai/{{1}}",example:[C]});const a=null===(i=e.buttons)||void 0===i?void 0:i.map((e=>"URL"===e.type&&(null==e?void 0:e.text)===(null==l?void 0:l.text)?l:e));return Object.assign(Object.assign({},e),{buttons:a})}return e}))})))}):e})),i=null===(a=null===(l=Object.assign({},j).mapping)||void 0===l?void 0:l.cards)||void 0===a?void 0:a.map((n=>{var t;return Object.assign(Object.assign({},n),{buttons:null===(t=null==n?void 0:n.buttons)||void 0===t?void 0:t.map((n=>g?"((customBtnPlaceholder))":"string"!=typeof e?e.placeHolder:""))})})),s=n.cloneDeep(j);return s.components=t,s.mapping.cards=i,void(null==f||f(Object.assign({},s)))}const O=null==b?void 0:b.components.findIndex((e=>"BUTTONS"===e.type));if(void 0!==O&&O>-1){const n=null===(d=null==b?void 0:b.components[O].buttons)||void 0===d?void 0:d.filter((e=>"URL"===e.type));if((null==n?void 0:n.length)>0){const i="custom"===t&&"string"==typeof e,s=i?e:"string"!=typeof e?e.defaultValue:"";let l=n[o];l=Object.assign(Object.assign({},l),{url:"https://d.bik.ai/{{1}}",example:[s]});const a=[...null!==(c=null===(u=null===(r=b.components)||void 0===r?void 0:r[O])||void 0===u?void 0:u.buttons)&&void 0!==c?c:[]].map((e=>"URL"===e.type&&(null==e?void 0:e.text)===(null==l?void 0:l.text)?l:e)),d=Object.assign(Object.assign({},b.components[O]),{buttons:a}),m=null===(p=b.mapping)||void 0===p?void 0:p.buttons;m&&m.length>0&&(m[o]=i?"((customBtnPlaceholder))":"string"!=typeof e?e.placeHolder:"");const v=Object.assign(Object.assign({},b.mapping),{buttons:m});b.mapping=v;const g=[...b.components];g[O]=d,b.components=g}}if("string"!=typeof e){"checkout.checkoutUrl"===(null===(m=e.placeHolder)||void 0===m?void 0:m.slice(2,-2))?J(!0):(J(!1),null==y||y(""))}if(null!=H&&H>-1){const e=n.cloneDeep(j);e.components[1].cards[H].components=b.components,e.mapping.cards[H]=b.mapping,null==f||f(Object.assign({},e))}else null==f||f(b)}function ie(e,t,o){var i,s,l,a,d,r;const u=null!=H&&H>-1?{components:null===(i=Object.assign({},j).components[1].cards)||void 0===i?void 0:i[H].components,mapping:null===(s=Object.assign({},j).mapping.cards)||void 0===s?void 0:s[H]}:Object.assign({},j);if(null!=H&&H>-1&&Y){const t=Object.assign({},j).components.map((n=>{var t;return"CAROUSEL"===n.type?Object.assign(Object.assign({},n),{cards:null===(t=n.cards)||void 0===t?void 0:t.map((n=>Object.assign(Object.assign({},n),{components:n.components.map((n=>{var t,i,s;if("BUTTONS"===n.type){const l=null===(t=n.buttons)||void 0===t?void 0:t.filter((e=>"QUICK_REPLY"===e.type));let a=null!==(i=null==l?void 0:l[o])&&void 0!==i?i:{};a=Object.assign(Object.assign({},a),{flowId:e.flowId,flowName:e.flowName});const d=null===(s=n.buttons)||void 0===s?void 0:s.map((e=>"QUICK_REPLY"===e.type&&(null==e?void 0:e.text)===(null==a?void 0:a.text)?a:e));return Object.assign(Object.assign({},n),{buttons:d})}return n}))})))}):n})),i=n.cloneDeep(j);return i.components=t,void(null==f||f(Object.assign({},i)))}const c=null==u?void 0:u.components.findIndex((e=>"BUTTONS"===e.type));if(void 0!==c&&c>-1){const n=null===(l=null==u?void 0:u.components[c].buttons)||void 0===l?void 0:l.filter((e=>"QUICK_REPLY"===e.type));if(n){let t=n[o];t=Object.assign(Object.assign({},t),{flowId:e.flowId,flowName:e.flowName});const i=[...null!==(r=null===(d=null===(a=u.components)||void 0===a?void 0:a[c])||void 0===d?void 0:d.buttons)&&void 0!==r?r:[]].map((e=>"QUICK_REPLY"===e.type&&(null==e?void 0:e.text)===(null==t?void 0:t.text)?t:e)),s=Object.assign(Object.assign({},u.components[c]),{buttons:i}),l=[...u.components];l[c]=s,u.components=l}}if(null!=H&&H>-1){const e=n.cloneDeep(j);e.components[1].cards[H].components=u.components,null==f||f(Object.assign({},e))}else null==f||f(u)}t.useEffect((()=>{var e,n;if(null===(e=j.mapping.buttons)||void 0===e?void 0:e.find((e=>"checkout.checkoutUrl"===e.slice(2,-2))))J(!0);else{J(!1);const e=null===(n=null==Q?void 0:Q.discountCodeExtra)||void 0===n?void 0:n[1];null==e||e("")}}),[j]),t.useEffect((()=>{var e,n,t,o;if(null!=H&&H>-1){const i={components:null===(n=null===(e=j.components[1])||void 0===e?void 0:e.cards)||void 0===n?void 0:n[H].components,mapping:null===(o=null===(t=null==j?void 0:j.mapping)||void 0===t?void 0:t.cards)||void 0===o?void 0:o[H]},{descriptionComponents:s,urlBtns:a,qrbBtns:d,imageComponent:r,bodyVariables:u,headerVariables:c}=l.getAllDataFromTemplateComponent(i);ee({descriptionComponents:s,urlBtns:a,qrbBtns:d,imageComponent:r,bodyVariables:u,headerVariables:c})}else if(null!=H&&-1===H){const{descriptionComponents:e,urlBtns:n,qrbBtns:t,imageComponent:o,bodyVariables:i,headerVariables:s}=l.getAllDataFromTemplateComponent(j);ee({descriptionComponents:e,urlBtns:n,qrbBtns:t,imageComponent:o,bodyVariables:i,headerVariables:s})}}),[H]),t.useEffect((()=>{var e,n,t,o;if(null!=H&&H>-1&&ne){const i={components:null===(n=null===(e=j.components[1])||void 0===e?void 0:e.cards)||void 0===n?void 0:n[H].components,mapping:null===(o=null===(t=null==j?void 0:j.mapping)||void 0===t?void 0:t.cards)||void 0===o?void 0:o[H]},{descriptionComponents:s,urlBtns:a,qrbBtns:d,imageComponent:r,bodyVariables:u,headerVariables:c}=l.getAllDataFromTemplateComponent(i);ee({descriptionComponents:s,urlBtns:a,qrbBtns:d,imageComponent:r,bodyVariables:u,headerVariables:c}),te(!1)}}),[ne]);const se=s.useAdditionalVariables({variableList:h,categoryDisplayName:"Custom Variables",variableDisplayName:"Custom Text",variableValue:"{{custom.text}}"});return e.jsxs(p.Container,Object.assign({style:{flexDirection:"column",width:400,maxHeight:460}},{children:[!!Z.imageComponent&&!Y&&e.jsx(r.EditTemplateMediaContainer,{children:e.jsx(u.default,{whatsappSpecificPickerMeta:C,mediaComponent:N?Z.imageComponent:$,updateTemplateImageUrl:function(e,t){var o,i,s,l,a;let d;d=null!=H&&H>-1?{components:null===(i=null===(o=j.components[1])||void 0===o?void 0:o.cards)||void 0===i?void 0:i[H].components,mapping:null===(l=null===(s=null==j?void 0:j.mapping)||void 0===s?void 0:s.cards)||void 0===l?void 0:l[H]}:Object.assign({},j);const r=null===(a=null==d?void 0:d.components)||void 0===a?void 0:a.findIndex((e=>{if("HEADER"===e.type&&"NONE"!==e.format&&"TEXT"!==e.format)return!0}));if(void 0!==r&&r>-1&&(null==d?void 0:d.components[r])){const n=Object.assign(Object.assign({},d.components[r]),{format:t,example:{header_handle:[e]}}),o=[...d.components];o[r]=n,d=Object.assign(Object.assign({},d),{components:o})}if(d.mapping&&(d.mapping=Object.assign(Object.assign({},d.mapping),{header:void 0})),null!=H&&H>-1){const e=n.cloneDeep(j);e.components[1].cards[H].components=d.components,e.mapping.cards[H]=d.mapping,null==f||f(Object.assign({},e)),te(!0)}else null==f||f(Object.assign({},d))},template:j,variableListForImage:x})}),(Z.bodyVariables.length>0||Z.headerVariables.length>0)&&e.jsx(v.default,{containerStyle:{paddingTop:Z.mediaComponent?24:8},headerText:"Edit variable values",subText:"Edit values for the variables used in template",toolTipInfo:"Variables are placeholder texts which can either be filled through data or custom texts. These can be edited through the dropdowns below"}),null===(V=Z.descriptionComponents)||void 0===V?void 0:V.map(((n,t)=>e.jsx(m.default,{originalVariableList:null!=H&&H>-1?M.cards[H]:M,type:n.type,descriptionComponent:n.component,showVariableModal:O,variableList:h},t))),(null===(E=null===(B=null!=H&&H>-1?M.cards[H].buttons:null==M?void 0:M.buttons)||void 0===B?void 0:B.filter((e=>"URL"===e.type)))||void 0===E?void 0:E.length)>0&&e.jsx(v.default,{headerText:"Edit buttons",subText:"Edit the link connected to the CTA button"}),null===(U=null===(L=null!=H&&H>-1?M.cards[H].buttons:null==M?void 0:M.buttons)||void 0===L?void 0:L.filter((e=>!(null!=H&&H>-1)||"URL"===e.type)))||void 0===U?void 0:U.map(((n,t)=>{if("URL"===n.type)return e.jsx(b.default,{variableListIndex:t,CTAoptions:null==C?void 0:C.CTAoptions,button:n,currentVariableList:null!=H&&H>-1?Object.assign({},M.cards[H]):Object.assign({},M),updateSelectedURLTemplateBtn:oe,variableList:h},`${t}_${H}`)})),(null===(q=null===(k=null!=H&&H>-1?M.cards[H].buttons:null==M?void 0:M.buttons)||void 0===k?void 0:k.filter((e=>"QUICK_REPLY"===e.type)))||void 0===q?void 0:q.length)>0&&(_!==o.POD.CHATBOT?e.jsx(v.default,{headerText:"Edit buttons",subText:"Edit the chatflows triggered on clicking the buttons",toolTipInfo:"There is an option to trigger chatflows through the buttons which can keep the user engaged"}):e.jsx(a.BackTrackComponent,{backTrackMessage:null===(D=null==Q?void 0:Q.backTrackExtra)||void 0===D?void 0:D[0],setBackTrackMessage:null===(I=null==Q?void 0:Q.backTrackExtra)||void 0===I?void 0:I[1]})),null===(R=null===(w=null!=H&&H>-1?M.cards[H].buttons:null==M?void 0:M.buttons)||void 0===w?void 0:w.filter((e=>"QUICK_REPLY"===e.type)))||void 0===R?void 0:R.map(((n,t)=>{if("QUICK_REPLY"===n.type)return e.jsx(b.default,{variableListIndex:t,QRBoptions:null==C?void 0:C.QRBoptions,button:n,currentVariableList:null!=H&&H>-1?Object.assign({},M.cards[H]):Object.assign({},M),updateSelectedQRBTemplateBtn:ie},`${t}_${H}`)})),_===o.POD.CHATBOT&&G&&e.jsx(d.DiscountCodeComponent,{discountCode:null===(A=null==Q?void 0:Q.discountCodeExtra)||void 0===A?void 0:A[0],setDiscountCode:null===(P=null==Q?void 0:Q.discountCodeExtra)||void 0===P?void 0:P[1],variableList:h}),null===(S=null!=H&&H>-1?M.cards[H].buttons:null==M?void 0:M.buttons)||void 0===S?void 0:S.map(((n,t)=>{var o,i,s;if("COPY_CODE"===n.type)return e.jsx(c.default,{index:t,variable:{variableName:null!==(o=n.text)&&void 0!==o?o:"Copy Code",updatedValue:null!==(i=n.buttonVariable)&&void 0!==i?i:"",type:"string",isEditableVariable:!0,index:null!==(s=n.index)&&void 0!==s?s:0},showVariableModal:!0,variableList:se,componentType:"BUTTONS"},t)}))]}))};
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("lodash"),n=require("react"),o=require("../../template-preview/models/WhatsAppTemplate.js"),i=require("../context/templateModalContext.js"),s=require("../custom-hooks/useAdditionalVariables.js"),l=require("../utils/getDataFromTemplateComponent.js"),a=require("./BackTrackComponent.js"),d=require("./DiscountCodeComponent.js"),r=require("./EditMediaV2.style.js"),u=require("./EditWhatsAppTemplateMediaV2.js"),c=require("./VariableConnector.js"),p=require("./VariableConnectorsPanel.js"),m=require("./VariableConnectorWhatsApp.js"),v=require("./VariableEditorHeader.js"),b=require("./WhatsAppTemplateCardButtonV2.js");exports.default=g=>{let{template:j,onTemplateChange:f,whatsappSpecificPickerMeta:C,showVariableModal:O,variableList:h,variableListForImage:x,discountCode:T,setDiscountCode:y}=g;var V,B,E,L,U,k,q,D,I,w,R,A,P,S;const N=j.isCarouselType,{originalVariableList:M,pod:_,extras:Q,selectedCarouselIndex:H,isProductCarouselType:Y}=i.useTemplateModalContext(),{descriptionComponents:F,urlBtns:K,qrbBtns:W,imageComponent:$,bodyVariables:X,headerVariables:z}=l.getAllDataFromTemplateComponent(j),[G,J]=n.useState(!1),[Z,ee]=n.useState(-1===H?{descriptionComponents:F,urlBtns:K,qrbBtns:W,imageComponent:$,bodyVariables:X,headerVariables:z}:{}),[te,ne]=n.useState(!1);function oe(e,n,o){var i,s,l,a,d,r,u,c,p,m;const v=null!=H&&H>-1?{components:null===(i=Object.assign({},j).components[1].cards)||void 0===i?void 0:i[H].components,mapping:null===(s=Object.assign({},j).mapping.cards)||void 0===s?void 0:s[H]}:Object.assign({},j),b=t.cloneDeep(v),g="custom"===n&&"string"==typeof e,C=g?e:"string"!=typeof e?e.defaultValue:"";if(null!=H&&H>-1&&Y){const n=Object.assign({},j).components.map((e=>{var t;return"CAROUSEL"===e.type?Object.assign(Object.assign({},e),{cards:null===(t=e.cards)||void 0===t?void 0:t.map((e=>Object.assign(Object.assign({},e),{components:e.components.map((e=>{var t,n,i;if("BUTTONS"===e.type){const s=null===(t=e.buttons)||void 0===t?void 0:t.filter((e=>"URL"===e.type));let l=null!==(n=null==s?void 0:s[o])&&void 0!==n?n:{};l=Object.assign(Object.assign({},l),{url:"https://d.bik.ai/{{1}}",example:[C]});const a=null===(i=e.buttons)||void 0===i?void 0:i.map((e=>"URL"===e.type&&(null==e?void 0:e.text)===(null==l?void 0:l.text)?l:e));return Object.assign(Object.assign({},e),{buttons:a})}return e}))})))}):e})),i=null===(a=null===(l=Object.assign({},j).mapping)||void 0===l?void 0:l.cards)||void 0===a?void 0:a.map((t=>{var n;return Object.assign(Object.assign({},t),{buttons:null===(n=null==t?void 0:t.buttons)||void 0===n?void 0:n.map((t=>g?"((customBtnPlaceholder))":"string"!=typeof e?e.placeHolder:""))})})),s=t.cloneDeep(j);return s.components=n,s.mapping.cards=i,void(null==f||f(Object.assign({},s)))}const O=null==b?void 0:b.components.findIndex((e=>"BUTTONS"===e.type));if(void 0!==O&&O>-1){const t=null===(d=null==b?void 0:b.components[O].buttons)||void 0===d?void 0:d.filter((e=>"URL"===e.type));if((null==t?void 0:t.length)>0){const i="custom"===n&&"string"==typeof e,s=i?e:"string"!=typeof e?e.defaultValue:"";let l=t[o];l=Object.assign(Object.assign({},l),{url:"https://d.bik.ai/{{1}}",example:[s]});const a=[...null!==(c=null===(u=null===(r=b.components)||void 0===r?void 0:r[O])||void 0===u?void 0:u.buttons)&&void 0!==c?c:[]].map((e=>"URL"===e.type&&(null==e?void 0:e.text)===(null==l?void 0:l.text)?l:e)),d=Object.assign(Object.assign({},b.components[O]),{buttons:a}),m=null===(p=b.mapping)||void 0===p?void 0:p.buttons;m&&m.length>0&&(m[o]=i?"((customBtnPlaceholder))":"string"!=typeof e?e.placeHolder:"");const v=Object.assign(Object.assign({},b.mapping),{buttons:m});b.mapping=v;const g=[...b.components];g[O]=d,b.components=g}}if("string"!=typeof e){"checkout.checkoutUrl"===(null===(m=e.placeHolder)||void 0===m?void 0:m.slice(2,-2))?J(!0):(J(!1),null==y||y(""))}if(null!=H&&H>-1){const e=t.cloneDeep(j);e.components[1].cards[H].components=b.components,e.mapping.cards[H]=b.mapping,null==f||f(Object.assign({},e))}else null==f||f(b)}function ie(e,n,o){var i,s,l,a,d,r;const u=null!=H&&H>-1?{components:null===(i=Object.assign({},j).components[1].cards)||void 0===i?void 0:i[H].components,mapping:null===(s=Object.assign({},j).mapping.cards)||void 0===s?void 0:s[H]}:Object.assign({},j);if(null!=H&&H>-1&&Y){const n=Object.assign({},j).components.map((t=>{var n;return"CAROUSEL"===t.type?Object.assign(Object.assign({},t),{cards:null===(n=t.cards)||void 0===n?void 0:n.map((t=>Object.assign(Object.assign({},t),{components:t.components.map((t=>{var n,i,s;if("BUTTONS"===t.type){const l=null===(n=t.buttons)||void 0===n?void 0:n.filter((e=>"QUICK_REPLY"===e.type));let a=null!==(i=null==l?void 0:l[o])&&void 0!==i?i:{};a=Object.assign(Object.assign({},a),{flowId:e.flowId,flowName:e.flowName});const d=null===(s=t.buttons)||void 0===s?void 0:s.map((e=>"QUICK_REPLY"===e.type&&(null==e?void 0:e.text)===(null==a?void 0:a.text)?a:e));return Object.assign(Object.assign({},t),{buttons:d})}return t}))})))}):t})),i=t.cloneDeep(j);return i.components=n,void(null==f||f(Object.assign({},i)))}const c=null==u?void 0:u.components.findIndex((e=>"BUTTONS"===e.type));if(void 0!==c&&c>-1){const t=null===(l=null==u?void 0:u.components[c].buttons)||void 0===l?void 0:l.filter((e=>"QUICK_REPLY"===e.type));if(t){let n=t[o];n=Object.assign(Object.assign({},n),{flowId:e.flowId,flowName:e.flowName});const i=[...null!==(r=null===(d=null===(a=u.components)||void 0===a?void 0:a[c])||void 0===d?void 0:d.buttons)&&void 0!==r?r:[]].map((e=>"QUICK_REPLY"===e.type&&(null==e?void 0:e.text)===(null==n?void 0:n.text)?n:e)),s=Object.assign(Object.assign({},u.components[c]),{buttons:i}),l=[...u.components];l[c]=s,u.components=l}}if(null!=H&&H>-1){const e=t.cloneDeep(j);e.components[1].cards[H].components=u.components,null==f||f(Object.assign({},e))}else null==f||f(u)}n.useEffect((()=>{var e,t;if(null===(e=j.mapping.buttons)||void 0===e?void 0:e.find((e=>"checkout.checkoutUrl"===e.slice(2,-2))))J(!0);else{J(!1);const e=null===(t=null==Q?void 0:Q.discountCodeExtra)||void 0===t?void 0:t[1];null==e||e("")}}),[j]),n.useEffect((()=>{var e,t,n,o;if(null!=H&&H>-1){const i={components:null===(t=null===(e=j.components[1])||void 0===e?void 0:e.cards)||void 0===t?void 0:t[H].components,mapping:null===(o=null===(n=null==j?void 0:j.mapping)||void 0===n?void 0:n.cards)||void 0===o?void 0:o[H]},{descriptionComponents:s,urlBtns:a,qrbBtns:d,imageComponent:r,bodyVariables:u,headerVariables:c}=l.getAllDataFromTemplateComponent(i);ee({descriptionComponents:s,urlBtns:a,qrbBtns:d,imageComponent:r,bodyVariables:u,headerVariables:c})}else if(null!=H&&-1===H){const{descriptionComponents:e,urlBtns:t,qrbBtns:n,imageComponent:o,bodyVariables:i,headerVariables:s}=l.getAllDataFromTemplateComponent(j);ee({descriptionComponents:e,urlBtns:t,qrbBtns:n,imageComponent:o,bodyVariables:i,headerVariables:s})}}),[H]),n.useEffect((()=>{var e,t,n,o;if(null!=H&&H>-1&&te){const i={components:null===(t=null===(e=j.components[1])||void 0===e?void 0:e.cards)||void 0===t?void 0:t[H].components,mapping:null===(o=null===(n=null==j?void 0:j.mapping)||void 0===n?void 0:n.cards)||void 0===o?void 0:o[H]},{descriptionComponents:s,urlBtns:a,qrbBtns:d,imageComponent:r,bodyVariables:u,headerVariables:c}=l.getAllDataFromTemplateComponent(i);ee({descriptionComponents:s,urlBtns:a,qrbBtns:d,imageComponent:r,bodyVariables:u,headerVariables:c}),ne(!1)}}),[te]);const se=s.useAdditionalVariables({variableList:h,categoryDisplayName:"Custom Variables",variableDisplayName:"Custom Text",variableValue:"{{custom.text}}"});return e.jsxs(p.Container,Object.assign({style:{flexDirection:"column",width:400,maxHeight:460}},{children:[!!Z.imageComponent&&!Y&&e.jsx(r.EditTemplateMediaContainer,{children:e.jsx(u.default,{whatsappSpecificPickerMeta:C,mediaComponent:N?Z.imageComponent:$,updateTemplateImageUrl:function(e,n){var o,i,s,l,a;let d;d=null!=H&&H>-1?{components:null===(i=null===(o=j.components[1])||void 0===o?void 0:o.cards)||void 0===i?void 0:i[H].components,mapping:null===(l=null===(s=null==j?void 0:j.mapping)||void 0===s?void 0:s.cards)||void 0===l?void 0:l[H]}:Object.assign({},j);const r=null===(a=null==d?void 0:d.components)||void 0===a?void 0:a.findIndex((e=>{if("HEADER"===e.type&&"NONE"!==e.format&&"TEXT"!==e.format)return!0}));if(void 0!==r&&r>-1&&(null==d?void 0:d.components[r])){const t=Object.assign(Object.assign({},d.components[r]),{format:n,example:{header_handle:[e]}}),o=[...d.components];o[r]=t,d=Object.assign(Object.assign({},d),{components:o})}if(d.mapping&&(d.mapping=Object.assign(Object.assign({},d.mapping),{header:void 0})),null!=H&&H>-1){const e=t.cloneDeep(j);e.components[1].cards[H].components=d.components,e.mapping.cards[H]=d.mapping,null==f||f(Object.assign({},e)),ne(!0)}else null==f||f(Object.assign({},d))},template:j,variableListForImage:x})}),(Z.bodyVariables.length>0||Z.headerVariables.length>0)&&e.jsx(v.default,{containerStyle:{paddingTop:Z.mediaComponent?24:8},headerText:"Edit variable values",subText:"Edit values for the variables used in template",toolTipInfo:"Variables are placeholder texts which can either be filled through data or custom texts. These can be edited through the dropdowns below"}),null===(V=Z.descriptionComponents)||void 0===V?void 0:V.map(((t,n)=>e.jsx(m.default,{originalVariableList:null!=H&&H>-1?M.cards[H]:M,type:t.type,descriptionComponent:t.component,showVariableModal:O,variableList:h},n))),(null===(E=null===(B=null!=H&&H>-1?M.cards[H].buttons:null==M?void 0:M.buttons)||void 0===B?void 0:B.filter((e=>"URL"===e.type)))||void 0===E?void 0:E.length)>0&&e.jsx(v.default,{headerText:"Edit buttons",subText:"Edit the link connected to the CTA button"}),null===(U=null===(L=null!=H&&H>-1?M.cards[H].buttons:null==M?void 0:M.buttons)||void 0===L?void 0:L.filter((e=>_===o.POD.CHATBOT||"URL"===e.type)))||void 0===U?void 0:U.map(((t,n)=>{if("URL"===t.type)return e.jsx(b.default,{variableListIndex:n,CTAoptions:null==C?void 0:C.CTAoptions,button:t,currentVariableList:null!=H&&H>-1?Object.assign({},M.cards[H]):Object.assign({},M),updateSelectedURLTemplateBtn:oe,variableList:h},`${n}_${H}`)})),(null===(q=null===(k=null!=H&&H>-1?M.cards[H].buttons:null==M?void 0:M.buttons)||void 0===k?void 0:k.filter((e=>"QUICK_REPLY"===e.type)))||void 0===q?void 0:q.length)>0&&(_!==o.POD.CHATBOT?e.jsx(v.default,{headerText:"Edit buttons",subText:"Edit the chatflows triggered on clicking the buttons",toolTipInfo:"There is an option to trigger chatflows through the buttons which can keep the user engaged"}):e.jsx(a.BackTrackComponent,{backTrackMessage:null===(D=null==Q?void 0:Q.backTrackExtra)||void 0===D?void 0:D[0],setBackTrackMessage:null===(I=null==Q?void 0:Q.backTrackExtra)||void 0===I?void 0:I[1]})),null===(R=null===(w=null!=H&&H>-1?M.cards[H].buttons:null==M?void 0:M.buttons)||void 0===w?void 0:w.filter((e=>"QUICK_REPLY"===e.type)))||void 0===R?void 0:R.map(((t,n)=>{if("QUICK_REPLY"===t.type)return e.jsx(b.default,{variableListIndex:n,QRBoptions:null==C?void 0:C.QRBoptions,button:t,currentVariableList:null!=H&&H>-1?Object.assign({},M.cards[H]):Object.assign({},M),updateSelectedQRBTemplateBtn:ie},`${n}_${H}`)})),_===o.POD.CHATBOT&&G&&e.jsx(d.DiscountCodeComponent,{discountCode:null===(A=null==Q?void 0:Q.discountCodeExtra)||void 0===A?void 0:A[0],setDiscountCode:null===(P=null==Q?void 0:Q.discountCodeExtra)||void 0===P?void 0:P[1],variableList:h}),null===(S=null!=H&&H>-1?M.cards[H].buttons:null==M?void 0:M.buttons)||void 0===S?void 0:S.map(((t,n)=>{var o,i,s;if("COPY_CODE"===t.type)return e.jsx(c.default,{index:n,variable:{variableName:null!==(o=t.text)&&void 0!==o?o:"Copy Code",updatedValue:null!==(i=t.buttonVariable)&&void 0!==i?i:"",type:"string",isEditableVariable:!0,index:null!==(s=t.index)&&void 0!==s?s:0},showVariableModal:!0,variableList:se,componentType:"BUTTONS"},n)}))]}))};
|
|
@@ -13,4 +13,4 @@
|
|
|
13
13
|
background-color: rgba(0, 0, 0, 0.1);
|
|
14
14
|
z-index: 1000;
|
|
15
15
|
cursor: not-allowed;
|
|
16
|
-
`,f={value:"custom_link",label:"Custom URL"},E={value:"custom_text",label:"Custom text"},T={value:"static_expiry",label:"Static Expiry"};exports.Container=_,exports.default=n=>{let{onFocus:x,variable:h,index:A,showVariableModal:C,variableList:N,setShowDiscountCheckBox:P,componentType:S,CTAoptions:V}=n;var k,L,H;const[D,w]=i.useState(!1),[B,Y]=i.useState(""),[q,M]=i.useState([]),[R,U]=i.useState(),[I,W]=i.useState(!1),[$,z]=i.useState(!1),{device:Z,channel:F,isError:G,originalVariableList:K,template:J,templateSelectionTriggered:Q,setTemplate:X,setDisplayContent:ee,setOriginalVariableList:te,globalNormalizedPlaceholders:le,enabledCustomText:ae,pod:ie,selectedCarouselIndex:ne,isProductCarouselType:se,disableEditVariable:oe,disableEditExpiry:ue}=O.useTemplateModalContext();function de(){var e,t;const l=[];let a=[];if(F!==p.CHANNEL_TYPE.MESSAGE||ae){"link"===(null==h?void 0:h.type)?(l.push({label:"",options:[f,E]}),U(f)):"date_time"===(null==h?void 0:h.type)?(l.push({label:"",options:[f,E]}),U(T)):(l.push({label:"",options:[f,E,T]}),U(E));const e=null!=le?le:[];M([...l,...e.map((e=>{var t,l;return Object.assign(Object.assign({},e),{label:b.default.toCapitilize(null===(l=null===(t=e.label)||void 0===t?void 0:t.replace(/([A-Z])/g," $1"))||void 0===l?void 0:l.toLowerCase())})}))]),a=[...l,...e]}else{const e=null!=le?le:[];M([{label:"",options:[E,f]},...e]),a=[{label:"",options:[E,f]},...e]}if((F===p.CHANNEL_TYPE.WHATSAPP||F===p.CHANNEL_TYPE.EMAIL||F===p.CHANNEL_TYPE.MESSAGE)&&h.updatedValue)if(c.placeHolderNamePattern.test(h.updatedValue)&&F===p.CHANNEL_TYPE.WHATSAPP||h.updatedValue.startsWith("{{")&&F!==p.CHANNEL_TYPE.WHATSAPP){const e=function(e,t,l){var a;let i={label:"",value:""};const n=l===p.CHANNEL_TYPE.WHATSAPP?e.updatedValue.replace("[[","").replace("]]",""):e.updatedValue.replace("{{","").replace("}}","");if(C){let t=e.updatedValue;if(ie===m.POD.CHATBOT&&"BUTTONS"===S){const l=null==V?void 0:V.filter((t=>t.placeHolder===e.updatedValue));l&&l.length>0&&(t=l[0].label)}i={label:t?t.replace("{{","").replace("}}","").trim().replace("."," "):"",value:null!==(a=e.updatedValue)&&void 0!==a?a:""}}else t.map((e=>{e.options.map((e=>{var t;(null===(t=e.value)||void 0===t?void 0:t.replace("{{","").replace("}}","").trim())===n.trim()&&(i=e)}))}));return i}(h,a,F);e.value&&U(e)}else"date_time"===h.type?(U(T),Y(h.updatedValue),me(null!==(e=h.index)&&void 0!==e?e:0,h.updatedValue)):(null===(t=h.updatedValue)||void 0===t?void 0:t.startsWith("https"))?(U(f),Y(h.updatedValue.split("https://")[1])):(U(E),Y(h.updatedValue))}function re(e,t){var l,a,i;const n=e;Y(""),U(n),F===p.CHANNEL_TYPE.WHATSAPP?"custom_text"!==n.value&&"custom_link"!==n.value&&"static_expiry"!==n.value?(pe(null!==(l=n.value)&&void 0!==l?l:"","string"),null==me||me(null!==(a=h.index)&&void 0!==a?a:0,n.value,!0)):(null==me||me(null!==(i=h.index)&&void 0!==i?i:0,B,!0,n.value),pe("","url"===n.bikPlaceholderType?"link":"string")):"custom_text"!==n.value&&"custom_link"!==n.value?pe(n.value,"url"===n.bikPlaceholderType?"link":"string"):(Y(""),pe("",n.value))}function ce(e,t){var l;Y(t);const a="custom_link"===(null==R?void 0:R.value)&&t?t.includes("https")?t:`https://${t}`:t;pe(a,"static_expiry"===e?"string":e),F===p.CHANNEL_TYPE.WHATSAPP&&(null==me||me(null!==(l=h.index)&&void 0!==l?l:0,a,"custom_link"===e,e))}function pe(e,t){var l,i,n,s;const o="custom_link"===t?"link":"custom_text"===t?"string":t;if(F!==p.CHANNEL_TYPE.WHATSAPP){const a=j.getVariableNameForEmailByIndex(A+1),i=null===document||void 0===document?void 0:document.getElementById("mobile"===Z?"template_html_mobile":"template_html_desktop"),n=F===p.CHANNEL_TYPE.EMAIL?null===(l=null==i?void 0:i.contentWindow)||void 0===l?void 0:l.document.getElementById(a):document.getElementById(a);n&&(n.textContent="custom_text"!==t&&"custom_link"!==t||e?e:h.variableName);const s=K.map(((t,l)=>l===A?Object.assign(Object.assign({},t),{type:o,updatedValue:e}):t));null==te||te(s)}if(F===p.CHANNEL_TYPE.WHATSAPP){if(null!=ne&&ne>-1&&se){const t=Object.assign({},K).cards.map(((t,l)=>{var a;return Object.assign(Object.assign({},t),{body:null===(a=t.body)||void 0===a?void 0:a.map(((t,l)=>A===l?Object.assign(Object.assign({},t),{type:o,updatedValue:e}):t))})}));return void(null==te||te((e=>Object.assign(Object.assign({},e),{cards:t}))))}const l=null!=ne&&ne>-1?K.cards[ne]:K;let u=l.body,d=l.header,r=l.buttons;if("BODY"===S?u=null===(i=l.body)||void 0===i?void 0:i.map(((t,l)=>l===A?Object.assign(Object.assign({},t),{type:o,updatedValue:e}):t)):"HEADER"===S?d=null===(n=l.header)||void 0===n?void 0:n.map(((t,l)=>l===A?Object.assign(Object.assign({},t),{type:o,updatedValue:e}):t)):"BUTTONS"===S&&(r=null===(s=l.buttons)||void 0===s?void 0:s.map(((l,a)=>a===A?Object.assign(Object.assign({},l),{buttonVariable:"custom_link"===t?"((customPlaceholderName))":e,example:"COPY_CODE"===l.type?e:[e]}):l))),null!=ne&&ne>-1){const e=a.cloneDeep(K.cards);e[ne]={header:d,body:u,buttons:r},null==te||te((t=>Object.assign(Object.assign({},t),{cards:e})))}else null==te||te((e=>Object.assign(Object.assign({},e),{header:d,body:u,buttons:r})))}}function me(e,t,l,i){var n,s,o,u,d,r,c;if(null!=ne&&ne>-1&&se){const s=Object.assign({},J).components.map((l=>{var a;return"CAROUSEL"===l.type?Object.assign(Object.assign({},l),{cards:null===(a=l.cards)||void 0===a?void 0:a.map((l=>Object.assign(Object.assign({},l),{components:l.components.map((l=>{var a,i,n,s,o;if("BODY"!==l.type)return l;if(null===(i=null===(a=l.example)||void 0===a?void 0:a.body_text)||void 0===i?void 0:i[0]){const a=[...null!==(o=null===(s=null===(n=l.example)||void 0===n?void 0:n.body_text)||void 0===s?void 0:s[0])&&void 0!==o?o:[]];a[e]=t.replace("{{","").replace("}}","").replace("((","").replace("))","");const i=Object.assign(Object.assign({},l.example),{body_text:[a]});return Object.assign(Object.assign({},l),{example:i})}}))})))}):l})),o=a.cloneDeep(J);if(l){const l=null===(n=Object.assign({},J).mapping.cards)||void 0===n?void 0:n.map((l=>{var a;return Object.assign(Object.assign({},l),{body:null===(a=l.body)||void 0===a?void 0:a.map(((l,a)=>e===a?"custom_text"===i?`((editableVariable${a+10}))`:t:l))})}));o.mapping.cards=l}return o.components=s,void(null==X||X(o))}const p=null!=ne&&ne>-1?{components:null===(s=Object.assign({},J).components[1].cards)||void 0===s?void 0:s[ne].components,mapping:null===(o=Object.assign({},J).mapping.cards)||void 0===o?void 0:o[ne]}:Object.assign({},J),m=null===(u=null==p?void 0:p.components)||void 0===u?void 0:u.map((l=>{var a,i,n,s,o,u,d,r,c,p;const m=Object.assign({},l);if("BODY"===l.type&&"BODY"===S){if(null===(i=null===(a=l.example)||void 0===a?void 0:a.body_text)||void 0===i?void 0:i[0]){const l=[...null!==(o=null===(s=null===(n=m.example)||void 0===n?void 0:n.body_text)||void 0===s?void 0:s[0])&&void 0!==o?o:[]];l[e]=t.replace("{{","").replace("}}","").replace("((","").replace("))","");const a=Object.assign(Object.assign({},m.example),{body_text:[l]});return Object.assign(Object.assign({},m),{example:a})}}else if("HEADER"===l.type&&"HEADER"===S){if(null===(u=l.example)||void 0===u?void 0:u.header_text){const l=[...null!==(r=null===(d=m.example)||void 0===d?void 0:d.header_text)&&void 0!==r?r:[]];l[e]=t.replace("{{","").replace("}}","").replace("((","").replace("))","");const a=Object.assign(Object.assign({},m.example),{header_text:l});return Object.assign(Object.assign({},m),{example:a})}}else if("BUTTONS"===l.type&&"BUTTONS"===S){if(null===(p=null===(c=l.buttons)||void 0===c?void 0:c[e])||void 0===p?void 0:p.example){const a=l.buttons.map(((l,a)=>a===e?Object.assign(Object.assign({},l),{example:"COPY_CODE"===l.type?t:[t]}):l));return Object.assign(Object.assign({},m),{buttons:a})}}else if("limited_time_offer"===l.type&&"limited_time_offer"===S)return Object.assign(Object.assign({},m),{example:Object.assign(Object.assign({},m.example),{limited_time_offer:t})});return l}));if(p.components=m,l)if("BODY"===S&&(null===(d=null==p?void 0:p.mapping)||void 0===d?void 0:d.body))p.mapping=Object.assign(Object.assign({},p.mapping),{body:p.mapping.body.map(((l,a)=>e===a?"custom_text"===i?`((editableVariable${a+10}))`:t:l))});else if("HEADER"===S&&(null===(r=null==p?void 0:p.mapping)||void 0===r?void 0:r.header))p.mapping=Object.assign(Object.assign({},p.mapping),{header:p.mapping.header.map(((l,a)=>e===a?"custom_text"===i?`((editableVariable${a+20}))`:t:l))});else if("BUTTONS"===S&&(null===(c=null==p?void 0:p.mapping)||void 0===c?void 0:c.buttons)){let l=-1,a=-1;m.forEach((t=>{var i;"BUTTONS"===t.type&&(null===(i=t.buttons)||void 0===i||i.forEach(((t,i)=>{"URL"===t.type&&(l++,i===e&&"URL"==t.type&&(a=l))})))})),p.mapping=Object.assign(Object.assign({},p.mapping),{buttons:p.mapping.buttons.map(((e,l)=>l===a?"custom_link"===i?"((customPlaceholderName))":t:e))})}if(null!=ne&&ne>-1&&J){const e=a.cloneDeep(J);e.components[1].cards[ne].components=p.components,e.mapping.cards[ne]=p.mapping,null==X||X(e)}else null==X||X(Object.assign({},p))}return i.useEffect((()=>{D&&(null==x||x())}),[D]),i.useEffect((()=>{!function(){var e,t,l,a,i;const n="mobile"===Z?"template_html_mobile":"template_html_desktop",s=document.getElementById(n),o=(null!==(a=null===(l=null===(t=null===(e=null==s?void 0:s.contentWindow)||void 0===e?void 0:e.document)||void 0===t?void 0:t.body)||void 0===l?void 0:l.innerHTML)&&void 0!==a?a:"")+(null===(i=null==s?void 0:s.contentWindow)||void 0===i?void 0:i.document.head.innerHTML);F===p.CHANNEL_TYPE.EMAIL&&(null==ee||ee(o))}()}),[Q]),i.useEffect((()=>{de()}),[]),i.useEffect((()=>{de()}),[ne]),i.useEffect((()=>{Z&&R&&B&&setTimeout((()=>{pe("custom_link"===(null==R?void 0:R.value)&&B?B.includes("https")?B:`https://${B}`:B,R.value)}),100)}),[Z]),i.useEffect((()=>{!$&&R&&h.updatedValue&&setTimeout((()=>{pe("custom_link"===(null==R?void 0:R.value)&&h.updatedValue?h.updatedValue.includes("https")?h.updatedValue:`https://${h.updatedValue}`:h.updatedValue,R.value),z(!0)}),100)}),[R]),e.jsxs(_,Object.assign({channel:F,focused:D,onMouseEnter:()=>w(!0),onMouseLeave:()=>w(!1)},{children:[e.jsx("div",Object.assign({style:{marginBottom:8}},{children:e.jsxs(v.BodySecondary,Object.assign({style:{color:G&&!R?g.COLORS.content.negative:g.COLORS.content.primary}},{children:[null===(k=h.variableName)||void 0===k?void 0:k.replace("{{","").replace("}}","")," ","link"===(null==h?void 0:h.type)?"link":"variable"]}))})),e.jsx("div",Object.assign({style:{marginBottom:12}},{children:C?e.jsxs("div",Object.assign({style:{display:"flex",border:"#E0E0E0 1px solid",borderRadius:4,padding:10,justifyContent:(null==R?void 0:R.label)?"space-between":"flex-end"}},{children:[e.jsx(v.BodyPrimary,Object.assign({numberOfLines:1},{children:ie===m.POD.CHATBOT?["static_expiry","custom_text"].includes(null!==(L=null==R?void 0:R.value)&&void 0!==L?L:"")?null==R?void 0:R.label:null==R?void 0:R.value:r.truncate(null!==(H=null==R?void 0:R.label)&&void 0!==H?H:"",20,!0)})),oe||"date_time"===(null==h?void 0:h.type)&&ue?e.jsx(e.Fragment,{}):e.jsx(t.default,{onClick:()=>{W(!I)},width:24,height:24,color:g.COLORS.content.primary})]})):e.jsx(u.Dropdown,{disabled:oe,options:q,isSearchable:!1,onSelect:re,defaultOptions:R?[Object.assign(Object.assign({},R),{selected:!0})]:[]})})),("custom_text"===(null==R?void 0:R.value)||"custom_link"===(null==R?void 0:R.value))&&e.jsx(d.Input,{state:oe?"disabled":"none",labelText:"custom_text"===(null==R?void 0:R.value)?"Custom text value":"custom_link"===(null==R?void 0:R.value)?"Custom URL value":"",id:`variable-value-${null==R?void 0:R.value}-${A}`,value:B,errorMessage:G?B&&0!==B.trim().length?"custom_link"!==R.value||/^https?:\/\/(?:www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b(?:[-a-zA-Z0-9()@:%_\+.~#?&\/=]*)$/.test(`https://${B.trim()}`)&&0!==B.trim().length?"custom_link"!==R.value&&B.length>30?"Length cannot be more than 30":"BUTTONS"===S&&"custom_link"!==R.value?"Enter valid alpha numeric code":"":"Enter valid URL":"Required field":"",maxCharLimit:"custom_link"===(null==R?void 0:R.value)?2e3:"BUTTONS"===S?15:30,noKeyDownChange:!0,prefixText:"custom_link"===(null==R?void 0:R.value)?"https://":"",placeholder:"link"===h.type||"custom_link"===R.value?"Enter custom URL here":"Enter custom text here",onChangeText:e=>{ce(R.value,e)}}),"static_expiry"===(null==R?void 0:R.value)&&e.jsxs("div",Object.assign({style:{position:"relative"}},{children:[oe&&e.jsx(y,{onClick:e=>e.preventDefault()}),e.jsx(o.CustomDateTime,{placement:"auto",time:B?l.format(new Date(B),"hh:mm a"):l.format(new Date,"hh:mm a"),date:B?new Date(B):new Date,minDate:new Date,error:"",setError:()=>{},onChange:e=>{ce("static_expiry",e.toISOString())}})]})),I&&e.jsx(s.AddVariableV2SideModal,{zIndex:2e3,data:null!=N?N:[],showVariable:I,setShowVariable:W,placeholder:"Add a variable",customTrigger:e=>{null==P||P(!1),"{{custom.url}}"===e.actualValue?re({label:e.displayName,selected:!0,value:"custom_link"}):"{{custom.text}}"==e.actualValue?re({label:e.displayName,selected:!0,value:"custom_text"}):"{{static.expiry}}"==e.actualValue?re({label:e.displayName,selected:!0,value:"static_expiry"}):re({label:e.displayName.replace("{{","").replace("}}","").trim().replace("."," "),selected:!0,value:e.actualValue,bikPlaceholderType:"string"})}})]}))};
|
|
16
|
+
`,f={value:"custom_link",label:"Custom URL"},E={value:"custom_text",label:"Custom text"},T={value:"static_expiry",label:"Static Expiry"};exports.Container=_,exports.default=n=>{let{onFocus:x,variable:h,index:A,showVariableModal:C,variableList:N,setShowDiscountCheckBox:P,componentType:S,CTAoptions:V}=n;var k,L,H;const[D,w]=i.useState(!1),[B,Y]=i.useState(""),[q,M]=i.useState([]),[R,U]=i.useState(),[I,W]=i.useState(!1),[$,z]=i.useState(!1),{device:Z,channel:F,isError:G,originalVariableList:K,template:J,templateSelectionTriggered:Q,setTemplate:X,setDisplayContent:ee,setOriginalVariableList:te,globalNormalizedPlaceholders:le,enabledCustomText:ae,pod:ie,selectedCarouselIndex:ne,isProductCarouselType:se,disableEditVariable:oe,disableEditExpiry:ue}=O.useTemplateModalContext();function de(){var e,t;const l=[];let a=[];if(F!==p.CHANNEL_TYPE.MESSAGE||ae){"link"===(null==h?void 0:h.type)?(l.push({label:"",options:[f,E]}),U(f)):"date_time"===(null==h?void 0:h.type)?(l.push({label:"",options:[f,E]}),U(T)):(l.push({label:"",options:[f,E,T]}),U(E));const e=null!=le?le:[];M([...l,...e.map((e=>{var t,l;return Object.assign(Object.assign({},e),{label:b.default.toCapitilize(null===(l=null===(t=e.label)||void 0===t?void 0:t.replace(/([A-Z])/g," $1"))||void 0===l?void 0:l.toLowerCase())})}))]),a=[...l,...e]}else{const e=null!=le?le:[];M([{label:"",options:[E,f]},...e]),a=[{label:"",options:[E,f]},...e]}if((F===p.CHANNEL_TYPE.WHATSAPP||F===p.CHANNEL_TYPE.EMAIL||F===p.CHANNEL_TYPE.MESSAGE)&&h.updatedValue)if(c.placeHolderNamePattern.test(h.updatedValue)&&F===p.CHANNEL_TYPE.WHATSAPP||h.updatedValue.startsWith("{{")&&F!==p.CHANNEL_TYPE.WHATSAPP){const e=function(e,t,l){var a;let i={label:"",value:""};const n=l===p.CHANNEL_TYPE.WHATSAPP?e.updatedValue.replace("[[","").replace("]]",""):e.updatedValue.replace("{{","").replace("}}","");if(C){let t=e.updatedValue;if(ie===m.POD.CHATBOT&&"BUTTONS"===S){const l=null==V?void 0:V.filter((t=>t.placeHolder===e.updatedValue));l&&l.length>0&&(t=l[0].label)}i={label:t?t.replace("{{","").replace("}}","").trim().replace("."," "):"",value:null!==(a=e.updatedValue)&&void 0!==a?a:""}}else t.map((e=>{e.options.map((e=>{var t;(null===(t=e.value)||void 0===t?void 0:t.replace("{{","").replace("}}","").trim())===n.trim()&&(i=e)}))}));return i}(h,a,F);e.value&&U(e)}else"date_time"===h.type?(U(T),Y(h.updatedValue),me(null!==(e=h.index)&&void 0!==e?e:0,h.updatedValue)):(null===(t=h.updatedValue)||void 0===t?void 0:t.startsWith("https"))?(U(f),Y(h.updatedValue.split("https://")[1])):(U(E),Y(h.updatedValue))}function re(e,t){var l,a,i;const n=e;Y(""),U(n),F===p.CHANNEL_TYPE.WHATSAPP?"custom_text"!==n.value&&"custom_link"!==n.value&&"static_expiry"!==n.value?(pe(null!==(l=n.value)&&void 0!==l?l:"","string"),null==me||me(null!==(a=h.index)&&void 0!==a?a:0,n.value,!0)):(null==me||me(null!==(i=h.index)&&void 0!==i?i:0,B,!0,n.value),pe("","url"===n.bikPlaceholderType?"link":"string")):"custom_text"!==n.value&&"custom_link"!==n.value?pe(n.value,"url"===n.bikPlaceholderType?"link":"string"):(Y(""),pe("",n.value))}function ce(e,t){var l;Y(t);const a="custom_link"===(null==R?void 0:R.value)&&t?t.includes("https")?t:`https://${t}`:t;pe(a,"static_expiry"===e?"string":e),F===p.CHANNEL_TYPE.WHATSAPP&&(null==me||me(null!==(l=h.index)&&void 0!==l?l:0,a,"custom_link"===e,e))}function pe(e,t){var l,i,n,s;const o="custom_link"===t?"link":"custom_text"===t?"string":t;if(F!==p.CHANNEL_TYPE.WHATSAPP){const a=j.getVariableNameForEmailByIndex(A+1),i=null===document||void 0===document?void 0:document.getElementById("mobile"===Z?"template_html_mobile":"template_html_desktop"),n=F===p.CHANNEL_TYPE.EMAIL?null===(l=null==i?void 0:i.contentWindow)||void 0===l?void 0:l.document.getElementById(a):document.getElementById(a);n&&(n.textContent="custom_text"!==t&&"custom_link"!==t||e?e:h.variableName);const s=K.map(((t,l)=>l===A?Object.assign(Object.assign({},t),{type:o,updatedValue:e}):t));null==te||te(s)}if(F===p.CHANNEL_TYPE.WHATSAPP){if(null!=ne&&ne>-1&&se){const t=Object.assign({},K).cards.map(((t,l)=>{var a;return Object.assign(Object.assign({},t),{body:null===(a=t.body)||void 0===a?void 0:a.map(((t,l)=>A===l?Object.assign(Object.assign({},t),{type:o,updatedValue:e}):t))})}));return void(null==te||te((e=>Object.assign(Object.assign({},e),{cards:t}))))}const l=null!=ne&&ne>-1?K.cards[ne]:K;let u=l.body,d=l.header,r=l.buttons;if("BODY"===S?u=null===(i=l.body)||void 0===i?void 0:i.map(((t,l)=>l===A?Object.assign(Object.assign({},t),{type:o,updatedValue:e}):t)):"HEADER"===S?d=null===(n=l.header)||void 0===n?void 0:n.map(((t,l)=>l===A?Object.assign(Object.assign({},t),{type:o,updatedValue:e}):t)):"BUTTONS"===S&&(r=null===(s=l.buttons)||void 0===s?void 0:s.map(((l,a)=>a===A?Object.assign(Object.assign({},l),{buttonVariable:"custom_link"===t?"((customPlaceholderName))":e,example:"COPY_CODE"===l.type?e:[e]}):l))),null!=ne&&ne>-1){const e=a.cloneDeep(K.cards);e[ne]={header:d,body:u,buttons:r},null==te||te((t=>Object.assign(Object.assign({},t),{cards:e})))}else null==te||te((e=>Object.assign(Object.assign({},e),{header:d,body:u,buttons:r})))}}function me(e,t,l,i){var n,s,o,u,d,r,c;if(null!=ne&&ne>-1&&se){const s=Object.assign({},J).components.map((l=>{var a;return"CAROUSEL"===l.type?Object.assign(Object.assign({},l),{cards:null===(a=l.cards)||void 0===a?void 0:a.map((l=>Object.assign(Object.assign({},l),{components:l.components.map((l=>{var a,i,n,s,o;if("BODY"!==l.type)return l;if(null===(i=null===(a=l.example)||void 0===a?void 0:a.body_text)||void 0===i?void 0:i[0]){const a=[...null!==(o=null===(s=null===(n=l.example)||void 0===n?void 0:n.body_text)||void 0===s?void 0:s[0])&&void 0!==o?o:[]];a[e]=t.replace("{{","").replace("}}","").replace("((","").replace("))","");const i=Object.assign(Object.assign({},l.example),{body_text:[a]});return Object.assign(Object.assign({},l),{example:i})}}))})))}):l})),o=a.cloneDeep(J);if(l){const l=null===(n=Object.assign({},J).mapping.cards)||void 0===n?void 0:n.map((l=>{var a;return Object.assign(Object.assign({},l),{body:null===(a=l.body)||void 0===a?void 0:a.map(((l,a)=>e===a?"custom_text"===i?`((editableVariable${a+10}))`:t:l))})}));o.mapping.cards=l}return o.components=s,void(null==X||X(o))}const p=null!=ne&&ne>-1?{components:null===(s=Object.assign({},J).components[1].cards)||void 0===s?void 0:s[ne].components,mapping:null===(o=Object.assign({},J).mapping.cards)||void 0===o?void 0:o[ne]}:Object.assign({},J),m=null===(u=null==p?void 0:p.components)||void 0===u?void 0:u.map((l=>{var a,i,n,s,o,u,d,r,c;const p=Object.assign({},l);if("BODY"===l.type&&"BODY"===S){if(null===(i=null===(a=l.example)||void 0===a?void 0:a.body_text)||void 0===i?void 0:i[0]){const l=[...null!==(o=null===(s=null===(n=p.example)||void 0===n?void 0:n.body_text)||void 0===s?void 0:s[0])&&void 0!==o?o:[]];l[e]=t.replace("{{","").replace("}}","").replace("((","").replace("))","");const a=Object.assign(Object.assign({},p.example),{body_text:[l]});return Object.assign(Object.assign({},p),{example:a})}}else if("HEADER"===l.type&&"HEADER"===S){if(null===(u=l.example)||void 0===u?void 0:u.header_text){const l=[...null!==(r=null===(d=p.example)||void 0===d?void 0:d.header_text)&&void 0!==r?r:[]];l[e]=t.replace("{{","").replace("}}","").replace("((","").replace("))","");const a=Object.assign(Object.assign({},p.example),{header_text:l});return Object.assign(Object.assign({},p),{example:a})}}else{if("BUTTONS"===l.type&&"BUTTONS"===S){const a=null===(c=l.buttons)||void 0===c?void 0:c.map(((l,a)=>a===e?Object.assign(Object.assign({},l),{example:"COPY_CODE"===l.type?t:[t]}):l));return a?Object.assign(Object.assign({},p),{buttons:a}):p}if("limited_time_offer"===l.type&&"limited_time_offer"===S)return Object.assign(Object.assign({},p),{example:Object.assign(Object.assign({},p.example),{limited_time_offer:t})})}return l}));if(p.components=m,l)if("BODY"===S&&(null===(d=null==p?void 0:p.mapping)||void 0===d?void 0:d.body))p.mapping=Object.assign(Object.assign({},p.mapping),{body:p.mapping.body.map(((l,a)=>e===a?"custom_text"===i?`((editableVariable${a+10}))`:t:l))});else if("HEADER"===S&&(null===(r=null==p?void 0:p.mapping)||void 0===r?void 0:r.header))p.mapping=Object.assign(Object.assign({},p.mapping),{header:p.mapping.header.map(((l,a)=>e===a?"custom_text"===i?`((editableVariable${a+20}))`:t:l))});else if("BUTTONS"===S&&(null===(c=null==p?void 0:p.mapping)||void 0===c?void 0:c.buttons)){let l=-1,a=-1;m.forEach((t=>{var i;"BUTTONS"===t.type&&(null===(i=t.buttons)||void 0===i||i.forEach(((t,i)=>{"URL"===t.type&&(l++,i===e&&"URL"==t.type&&(a=l))})))})),p.mapping=Object.assign(Object.assign({},p.mapping),{buttons:p.mapping.buttons.map(((e,l)=>l===a?"custom_link"===i?"((customPlaceholderName))":t:e))})}if(null!=ne&&ne>-1&&J){const e=a.cloneDeep(J);e.components[1].cards[ne].components=p.components,e.mapping.cards[ne]=p.mapping,null==X||X(e)}else null==X||X(Object.assign({},p))}return i.useEffect((()=>{D&&(null==x||x())}),[D]),i.useEffect((()=>{!function(){var e,t,l,a,i;const n="mobile"===Z?"template_html_mobile":"template_html_desktop",s=document.getElementById(n),o=(null!==(a=null===(l=null===(t=null===(e=null==s?void 0:s.contentWindow)||void 0===e?void 0:e.document)||void 0===t?void 0:t.body)||void 0===l?void 0:l.innerHTML)&&void 0!==a?a:"")+(null===(i=null==s?void 0:s.contentWindow)||void 0===i?void 0:i.document.head.innerHTML);F===p.CHANNEL_TYPE.EMAIL&&(null==ee||ee(o))}()}),[Q]),i.useEffect((()=>{de()}),[]),i.useEffect((()=>{de()}),[ne]),i.useEffect((()=>{Z&&R&&B&&setTimeout((()=>{pe("custom_link"===(null==R?void 0:R.value)&&B?B.includes("https")?B:`https://${B}`:B,R.value)}),100)}),[Z]),i.useEffect((()=>{!$&&R&&h.updatedValue&&setTimeout((()=>{pe("custom_link"===(null==R?void 0:R.value)&&h.updatedValue?h.updatedValue.includes("https")?h.updatedValue:`https://${h.updatedValue}`:h.updatedValue,R.value),z(!0)}),100)}),[R]),e.jsxs(_,Object.assign({channel:F,focused:D,onMouseEnter:()=>w(!0),onMouseLeave:()=>w(!1)},{children:[e.jsx("div",Object.assign({style:{marginBottom:8}},{children:e.jsxs(v.BodySecondary,Object.assign({style:{color:G&&!R?g.COLORS.content.negative:g.COLORS.content.primary}},{children:[null===(k=h.variableName)||void 0===k?void 0:k.replace("{{","").replace("}}","")," ","link"===(null==h?void 0:h.type)?"link":"variable"]}))})),e.jsx("div",Object.assign({style:{marginBottom:12}},{children:C?e.jsxs("div",Object.assign({style:{display:"flex",border:"#E0E0E0 1px solid",borderRadius:4,padding:10,justifyContent:(null==R?void 0:R.label)?"space-between":"flex-end"}},{children:[e.jsx(v.BodyPrimary,Object.assign({numberOfLines:1},{children:ie===m.POD.CHATBOT?["static_expiry","custom_text"].includes(null!==(L=null==R?void 0:R.value)&&void 0!==L?L:"")?null==R?void 0:R.label:null==R?void 0:R.value:r.truncate(null!==(H=null==R?void 0:R.label)&&void 0!==H?H:"",20,!0)})),oe||"date_time"===(null==h?void 0:h.type)&&ue?e.jsx(e.Fragment,{}):e.jsx(t.default,{onClick:()=>{W(!I)},width:24,height:24,color:g.COLORS.content.primary})]})):e.jsx(u.Dropdown,{disabled:oe,options:q,isSearchable:!1,onSelect:re,defaultOptions:R?[Object.assign(Object.assign({},R),{selected:!0})]:[]})})),("custom_text"===(null==R?void 0:R.value)||"custom_link"===(null==R?void 0:R.value))&&e.jsx(d.Input,{state:oe?"disabled":"none",labelText:"custom_text"===(null==R?void 0:R.value)?"Custom text value":"custom_link"===(null==R?void 0:R.value)?"Custom URL value":"",id:`variable-value-${null==R?void 0:R.value}-${A}`,value:B,errorMessage:G?B&&0!==B.trim().length?"custom_link"!==R.value||/^https?:\/\/(?:www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b(?:[-a-zA-Z0-9()@:%_\+.~#?&\/=]*)$/.test(`https://${B.trim()}`)&&0!==B.trim().length?"custom_link"!==R.value&&B.length>30?"Length cannot be more than 30":"BUTTONS"===S&&"custom_link"!==R.value?"Enter valid alpha numeric code":"":"Enter valid URL":"Required field":"",maxCharLimit:"custom_link"===(null==R?void 0:R.value)?2e3:"BUTTONS"===S?15:30,noKeyDownChange:!0,prefixText:"custom_link"===(null==R?void 0:R.value)?"https://":"",placeholder:"link"===h.type||"custom_link"===R.value?"Enter custom URL here":"Enter custom text here",onChangeText:e=>{ce(R.value,e)}}),"static_expiry"===(null==R?void 0:R.value)&&e.jsxs("div",Object.assign({style:{position:"relative"}},{children:[oe&&e.jsx(y,{onClick:e=>e.preventDefault()}),e.jsx(o.CustomDateTime,{placement:"auto",time:B?l.format(new Date(B),"hh:mm a"):l.format(new Date,"hh:mm a"),date:B?new Date(B):new Date,minDate:new Date,error:"",setError:()=>{},onChange:e=>{ce("static_expiry",e.toISOString())}})]})),I&&e.jsx(s.AddVariableV2SideModal,{zIndex:2e3,data:null!=N?N:[],showVariable:I,setShowVariable:W,placeholder:"Add a variable",customTrigger:e=>{null==P||P(!1),"{{custom.url}}"===e.actualValue?re({label:e.displayName,selected:!0,value:"custom_link"}):"{{custom.text}}"==e.actualValue?re({label:e.displayName,selected:!0,value:"custom_text"}):"{{static.expiry}}"==e.actualValue?re({label:e.displayName,selected:!0,value:"static_expiry"}):re({label:e.displayName.replace("{{","").replace("}}","").trim().replace("."," "),selected:!0,value:e.actualValue,bikPlaceholderType:"string"})}})]}))};
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { Product, ProductVariant } from './modal';
|
|
2
|
+
import { OUT_OF_STOCK_ACTION } from './type';
|
|
3
|
+
export type ProductPickerTagType = {
|
|
4
|
+
isVariant: boolean;
|
|
5
|
+
data: Product | ProductVariant;
|
|
6
|
+
outOfStockAction?: OUT_OF_STOCK_ACTION;
|
|
7
|
+
};
|
|
8
|
+
export declare const ProductPickerTag: (props: ProductPickerTagType) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{jsx as t,Fragment as e}from"react/jsx-runtime";import{BikShimmer as i}from"../shimmer/ShimmerComponent/BikShimmer.js";import{Tag as l}from"../tag/Tag.js";import{ProductHelper as r}from"./helpers/ProductHelper.js";const o=o=>{var s,n;const{isVariant:a,data:m,outOfStockAction:p}=o;let d=m,c=a;1===Object.keys(null!==(s=null==m?void 0:m.variants)&&void 0!==s?s:{}).length&&(d=Object.values(null!==(n=null==m?void 0:m.variants)&&void 0!==n?n:{})[0],c=!0);const u=r.getProductLabels(d,p),g=r.getTagType(null!=u?u:"");return t("div",Object.assign({style:{display:"flex"}},{children:!(null==d?void 0:d.fbStatus)&&c?t(i,{boxes:[{height:"24px",width:"100px",marginTop:"0px"}]}):u?t("div",Object.assign({style:{display:"flex"}},{children:t(l,{tagText:u,type:g,theme:"light"})})):t(e,{})}))};export{o as ProductPickerTag};
|
|
@@ -13,6 +13,7 @@ interface CollectionsScreenInterface {
|
|
|
13
13
|
storeId: string;
|
|
14
14
|
selectedCollectionsDispatch: React.Dispatch<SelectedCollectionsActions>;
|
|
15
15
|
setCollectionId: React.Dispatch<React.SetStateAction<string>>;
|
|
16
|
+
setSelectedCollectionId: React.Dispatch<React.SetStateAction<string>>;
|
|
16
17
|
setScreen: React.Dispatch<React.SetStateAction<string>>;
|
|
17
18
|
collectionsDispatch: React.Dispatch<CollectionsActions>;
|
|
18
19
|
setSaveDisabled: React.Dispatch<boolean>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsxs as e,jsx as t,Fragment as o}from"react/jsx-runtime";import i from"../../assets/icons/chevronRight.svg.js";import{useRef as c,useState as s,useEffect as
|
|
1
|
+
import{jsxs as e,jsx as t,Fragment as o}from"react/jsx-runtime";import i from"../../assets/icons/chevronRight.svg.js";import{useRef as c,useState as s,useEffect as l}from"react";import{CheckBox as r}from"../checkBox/CheckBox.js";import{IconButton as n}from"../icon-button/IconButton.js";import{BikShimmer as d}from"../shimmer/ShimmerComponent/BikShimmer.js";import{Tag as a}from"../tag/Tag.js";import{Tooltip as h}from"../tooltips/Tooltip.js";import{TitleRegular as p}from"../TypographyStyle.js";import{EmptyState as u}from"./emptyState.js";import{CollectionCardStyle as m,CollectionCardInfoStyle as C,CollectionCardDetailStyle as b,CollectionNameHolder as g}from"./style.js";const v=(e,t,o)=>{if(e.length<=t)return e;const i=e.slice(0,t-1);return(o?i.slice(0,i.lastIndexOf(" ")):i)+"..."},y=o=>{const{customCollectionRestriction:i,dataLoading:r,collections:n,selectedCollectionsDispatch:a,setCollectionId:h,setSelectedCollectionId:p,selectedCollections:m,setScreen:C,collectionFetcher:b,collectionsDispatch:g,pagingControls:v,storeId:y,setSaveDisabled:k,hideCollectionCheckbox:j,renderWithoutModal:x,pickerType:O}=o,I=c(null),S=c(v.curPage),E=!!i&&(null==m?void 0:m.isCustom),[T,D]=s(!1),P=c(!1);l((()=>{S.current=v.curPage}),[v.curPage]),l((()=>{const e=new IntersectionObserver((e=>{e[0].isIntersecting&&S.current>0&&!P.current&&(k(!0),D(!0),b(S.current,y).then((e=>{g({type:"paged",data:(null==e?void 0:e.collections)||{}}),v.setCurPage(S.current+1),D(!1),k(!1),Object.keys(e).length||(P.current=!0)})).catch())}),{threshold:1});return I.current&&e.observe(I.current),()=>{I.current&&e.unobserve(I.current)}}),[I]);const w=e=>{var t,o;let i=0,c=0;if(m[e]){const s=null===(t=n[e])||void 0===t?void 0:t.products;s&&Object.keys(s).forEach((e=>{var t;const o=null===(t=s[e])||void 0===t?void 0:t.variants;o&&Object.keys(o).forEach((e=>i+=1))}));const l=null===(o=m[e])||void 0===o?void 0:o.products;return l&&Object.keys(l).forEach((e=>{var t;const o=null===(t=l[e])||void 0===t?void 0:t.variants;o&&Object.keys(o).forEach((e=>c+=1))})),!(i<=0&&c>0)&&(c>0&&i!==c)}return!1};return e("div",{children:[Object.keys(n).length?Object.keys(n).map((e=>t(f,{customCollectionRestriction:i,data:n[e],isDisabled:E&&!(null==m?void 0:m[e]),isChecked:!!(null==m?void 0:m[e]),isPartiallyChecked:w(e),selectedCollectionsDispatch:a,setCollectionId:h,setSelectedCollectionId:p,setScreen:C,id:e,hideCollectionCheckbox:j||"-1"===e,selectedCollections:m,renderWithoutModal:x,pickerType:O},e))):r?[1,2,3,4,5,6,7,8,9,10].map(((e,o)=>t("div",Object.assign({style:{borderBottom:"1px solid #E0E0E0"}},{children:t(d,{boxes:[{height:"64px",width:"100%",marginTop:"0px"}]})}),o))):t(u,{title:"No collections to show",subtitle:"We couldn’t find any collection."}),t("div",{ref:I}),T&&[1,2,3,4,5].map(((e,o)=>t("div",Object.assign({style:{borderBottom:"1px solid #E0E0E0"}},{children:t(d,{boxes:[{height:"64px",width:"100%",marginTop:"0px"}]})}),o)))]})},f=c=>{const{customCollectionRestriction:s,data:l,selectedCollectionsDispatch:d,setCollectionId:u,setSelectedCollectionId:y,isPartiallyChecked:f,setScreen:k,id:j,isChecked:x,isDisabled:O,hideCollectionCheckbox:I,pickerType:S,selectedCollections:E}=c;return e(m,Object.assign({isDisabled:O,onClick:e=>{if(!O){if("COLLECTION"===S)return e.stopPropagation(),d({type:"reset",data:{}}),d({type:"selected",data:{id:j,val:l,isRestricted:s}}),void u(j);u(j),k("products")}},isActive:!!E[j]},{children:[e(C,{children:[!I&&t(r,{isDisabled:O,isChecked:x,isPartiallyChecked:f,onValueChange:function(e,t,o){null==o||o.stopPropagation(),d(e?{type:"selected",data:{id:j,val:l,isRestricted:s}}:{type:"unselected",data:{id:j}}),y(e?j:"")}}),t(b,{children:t(h,Object.assign({body:l.name,placement:"bottom",delay:400},{children:e(g,{children:[t(p,{children:v(l.name,40,!0)}),l.isSmartCollection?t("div",Object.assign({style:{display:"flex"}},{children:t(a,{tagText:"Smart Collection",type:"warning"})})):t(o,{})]})}))})]}),"COLLECTION"!==S&&t(n,{height:12,width:12,disabled:O,Icon:i})]}))};export{y as CollectionsScreen,v as truncate};
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { TagType } from "../../tag/model";
|
|
1
2
|
import { Product, ProductVariant, SelectedItems } from '../modal';
|
|
2
3
|
import { OUT_OF_STOCK_ACTION } from '../type';
|
|
3
4
|
import { ProductVariantForRearrange } from '../variant';
|
|
@@ -31,6 +32,7 @@ export declare class ProductHelper {
|
|
|
31
32
|
* @param outOfStockAction
|
|
32
33
|
*/
|
|
33
34
|
static getProductLabels(productVariant: Product | ProductVariant, outOfStockAction?: OUT_OF_STOCK_ACTION): string | null;
|
|
35
|
+
static getTagType: (tagText: string) => TagType;
|
|
34
36
|
}
|
|
35
37
|
/**
|
|
36
38
|
* Loops through each collection, each product, each variant.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{OUT_OF_STOCK_ACTION as n}from"../type.js";const t={NORMAL:null,NOT_SYNCED:"Hidden",OUT_OF_STOCK:"Out of Stock"};class
|
|
1
|
+
import{OUT_OF_STOCK_ACTION as n}from"../type.js";const t={NORMAL:null,NOT_SYNCED:"Hidden",OUT_OF_STOCK:"Out of Stock",FB_REJECTED:"Rejected on FB catalog"};class l{static getProductLabels(l){let i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:n.NORMAL,u="NORMAL";if(l.variants)return t[u];const a=l;return"REJECTED"===(null==a?void 0:a.fbStatus)?t.FB_REJECTED:(i===n.HIDE&&(!a.skipSync||0!==(null==a?void 0:a.quantity)&&-2!==(null==a?void 0:a.quantity)||(u="NOT_SYNCED"),a.skipSync&&0!==(null==a?void 0:a.quantity)&&-2!==(null==a?void 0:a.quantity)&&(u="NOT_SYNCED"),a.skipSync||0!==(null==a?void 0:a.quantity)&&-2!==(null==a?void 0:a.quantity)||(u="NOT_SYNCED"),a.skipSync||0===(null==a?void 0:a.quantity)||-2===(null==a?void 0:a.quantity)||(u="NORMAL")),i===n.BLUR&&(!a.skipSync||0!==(null==a?void 0:a.quantity)&&-2!==(null==a?void 0:a.quantity)||(u="NOT_SYNCED"),a.skipSync&&0!==(null==a?void 0:a.quantity)&&-2!==(null==a?void 0:a.quantity)&&(u="NOT_SYNCED"),a.skipSync||0!==(null==a?void 0:a.quantity)&&-2!==(null==a?void 0:a.quantity)||(u="OUT_OF_STOCK"),a.skipSync||0===(null==a?void 0:a.quantity)||-2===(null==a?void 0:a.quantity)||(u="NORMAL")),i===n.NORMAL&&(!a.skipSync||0!==(null==a?void 0:a.quantity)&&-2!==(null==a?void 0:a.quantity)||(u="NOT_SYNCED"),a.skipSync&&0!==(null==a?void 0:a.quantity)&&-2!==(null==a?void 0:a.quantity)&&(u="NOT_SYNCED"),a.skipSync||0!==(null==a?void 0:a.quantity)&&-2!==(null==a?void 0:a.quantity)||(u="NORMAL"),a.skipSync||0===(null==a?void 0:a.quantity)||-2===(null==a?void 0:a.quantity)||(u="NORMAL")),t[u])}}Object.defineProperty(l,"getTagType",{enumerable:!0,configurable:!0,writable:!0,value:n=>t.FB_REJECTED===n?"negative":"warning"});const i=n=>{let t=[];Object.keys(n).forEach((l=>{var i;return Object.keys((null===(i=null==n?void 0:n[l])||void 0===i?void 0:i.products)||[]).forEach((i=>{var u,a;const d=null!==(u=n[l].products)&&void 0!==u?u:[],o=null!==(a=d[i].variants)&&void 0!==a?a:[];return Object.keys(o).map((n=>{const t=o[n];t.variantId=n,t.productId=i,t.collectionId=l,t.productName=d[i].name})),t=[...t,...Object.values(o)],t}))}));const l=t.sort(((n,t)=>null==n.displayOrder&&null==t.displayOrder?0:null==n.displayOrder?1:null==t.displayOrder?-1:n.displayOrder-t.displayOrder));return l.forEach(((n,t)=>{n.displayOrder=t})),l};export{l as ProductHelper,i as parseSelectedVariantsToArray};
|
|
@@ -7,10 +7,13 @@ export interface ProductVariant {
|
|
|
7
7
|
quantity: number;
|
|
8
8
|
skipSync?: boolean;
|
|
9
9
|
displayOrder?: number | null;
|
|
10
|
+
fbStatus?: FbProductStatus;
|
|
11
|
+
description?: string;
|
|
10
12
|
}
|
|
11
13
|
export interface Product {
|
|
12
14
|
name: string;
|
|
13
15
|
image: string;
|
|
16
|
+
description?: string;
|
|
14
17
|
variants?: {
|
|
15
18
|
[key: string]: ProductVariant;
|
|
16
19
|
};
|
|
@@ -38,6 +41,10 @@ export type CollectionFetcherReturn = Promise<{
|
|
|
38
41
|
export type ProductFetcherReturn = Promise<{
|
|
39
42
|
[key: string]: Product;
|
|
40
43
|
}>;
|
|
44
|
+
export type FbStatusFetcherReturn = Promise<{
|
|
45
|
+
[key: string]: FbProductStatus;
|
|
46
|
+
}>;
|
|
47
|
+
export type FbProductStatus = 'APPROVED' | 'REJECTED';
|
|
41
48
|
export declare enum ScreenName {
|
|
42
49
|
Collections = "collections",
|
|
43
50
|
RearrangeProducts = "rearrange",
|
|
@@ -49,10 +56,11 @@ export type ProductPickerInterface = {
|
|
|
49
56
|
hideGlobalSearch?: boolean;
|
|
50
57
|
hideInCollectionSearch?: boolean;
|
|
51
58
|
customCollectionRestriction?: boolean;
|
|
52
|
-
searchInCollectionFetcher: (storeId: string, collectionId: string, query: string) =>
|
|
59
|
+
searchInCollectionFetcher: (storeId: string, collectionId: string, query: string) => ProductFetcherReturn;
|
|
53
60
|
searchFetcher: (storeId: string, query: string) => Promise<SelectedItems>;
|
|
54
61
|
collectionFetcher: (offset: number, storeId: string) => CollectionFetcherReturn;
|
|
55
|
-
productFetcher: (collectionId: string, storeId: string) => ProductFetcherReturn;
|
|
62
|
+
productFetcher: (collectionId: string, storeId: string, limit?: number, offset?: number) => ProductFetcherReturn;
|
|
63
|
+
fbStatusFetcher?: (storeId: string, variantIds: string[]) => FbStatusFetcherReturn;
|
|
56
64
|
storeId: string;
|
|
57
65
|
selectedItems: SelectedItems;
|
|
58
66
|
onAdd: (items: SelectedItems, total: number) => void;
|
|
@@ -76,6 +84,7 @@ export type ProductPickerInterface = {
|
|
|
76
84
|
hideProductVariants?: boolean;
|
|
77
85
|
rearrangeEnabled?: boolean;
|
|
78
86
|
selectSingleItem?: boolean;
|
|
87
|
+
showProductDetailInfoIcon?: boolean;
|
|
79
88
|
} & ({
|
|
80
89
|
startupScreen: ScreenName.RearrangeProducts;
|
|
81
90
|
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
|
|
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 n,useEffect as i}from"react";import{COLORS as l}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 b,selectedColectionsReducer as S,CollectionIdContext as y}from"./reducers.js";import{SearchScreen as P}from"./searchScreen.js";import{SelectedScreen as j}from"./selectedScreen.js";import{ContainerStyle as v,ScrollContainerStyle as k}from"./style.js";import{OUT_OF_STOCK_ACTION as x}from"./type.js";import{useFetchFbStatusForCollections as I}from"./useFetchFbStatus.js";var F;!function(e){e.Collections="collections",e.RearrangeProducts="rearrange",e.SelectedProducts="view",e.SearchProducts="searchProducts",e.Products="products"}(F||(F={}));const O=O=>{const{storeId:T,selectedItems:D,onClose:R,visible:w,zIndex:E,exactLimit:A,limit:$,hideCollectionCheckbox:V,hideProductCheckbox:B,outOfStockAction:L=x.BLUR,hideVariantCheckbox:M,selectProductsFromCustomCollection:z,hideSelectionCount:G,title:H,width:W,renderWithoutModal:Y,onClickSave:K,pickerType:U,hideProductVariants:q=!1,startupScreen:J=F.Collections,rearrangeEnabled:N,selectSingleItem:Q=!1,showProductDetailInfoIcon:X}=O,[Z,_]=r(b,{}),[ee,te]=s([F.Collections,F.RearrangeProducts].includes(J)?J:F.Collections),[oe,ce]=s("grid"),[re,se]=s(""),[ne,ie]=s(""),[le,de]=s(0),[ae,ue]=s(!1),[he,pe]=s(0),[me,Ce]=s(""),[ge,fe]=s(!1),[be,Se]=s(!1),[ye,Pe]=s({}),[je,ve]=r(S,Object.keys(D).length>0?D:{}),ke=n(null),[xe,Ie]=s(!1),[Fe,Oe]=s();I(je,T,ve,O.fbStatusFetcher,!1),i((()=>{ue(!0),Se(!0),O.collectionFetcher(le,T).then((e=>{_({type:"fetched",data:(null==e?void 0:e.collections)||{}}),ue(!1),de((e=>e+1)),Se(!1)})).catch()}),[]),i((()=>{let e=0;Object.keys(je||[]).forEach((t=>{var o;Object.keys((null===(o=je[t])||void 0===o?void 0:o.products)||[]).forEach((o=>{var c,r;Object.keys((null===(r=null===(c=je[t].products)||void 0===c?void 0:c[o])||void 0===r?void 0:r.variants)||[]).forEach((()=>{e+=1}))}))})),pe(e)})),i((()=>{ne&&(ue(!0),O.productFetcher(ne,T).then((e=>{Object.keys(e).length&&_({type:"productsFetched",data:{collectionId:ne,products:e}}),ue(!1)})).catch())}),[ne]),i((()=>{const e=setTimeout((()=>{"rearrange"!==ee&&(me.length?(fe(!0),O.searchFetcher(T,me).then((e=>{Pe(Object.assign({},e)),te("searchProducts"),ue(!1),fe(!1)}))):te("collections"))}),800);return()=>clearTimeout(e)}),[me]),i((()=>{K&&(O.onAdd(je,he),Te())}),[K]),i((()=>{Q&&Object.keys(je||{}).length&&he&&(O.onAdd(je,he),Te())}),[Q,je,he]);const Te=()=>{ve({type:"reset",data:{}})},De=e(v,{children:[O.postHeader&&t("div",Object.assign({style:{padding:"0 24px"}},{children:O.postHeader})),!O.hideGlobalSearch&&t(o,{children:("collections"===ee||"searchProducts"===ee)&&t("div",Object.assign({style:{padding:Y?"8px 16px":"12px 24px",borderBottom:"1px solid #E0E0E0"}},{children:t(a,{noKeyDownChange:!0,noErrorHint:!0,rightIcon:{icon:()=>ge?t(h,{size:"small",color:l.content.primary}):t(c,{})},id:"listInput",height:"24px",type:"text",value:me,onChangeText:e=>{e.length&&e.trim().length?Ce(e):Ce("")}})}))}),e(k,Object.assign({ref:ke},{children:["collections"===ee&&t(m,{customCollectionRestriction:O.customCollectionRestriction,dataLoading:be,collections:Z,selectedCollectionsDispatch:ve,setCollectionId:se,setSelectedCollectionId:ie,setScreen:te,selectedCollections:je,collectionFetcher:O.collectionFetcher,storeId:T,collectionsDispatch:_,setSaveDisabled:ue,pagingControls:{curPage:le,setCurPage:de},hideCollectionCheckbox:V,renderWithoutModal:Y,pickerType:U}),"products"===ee&&re&&t(y.Provider,Object.assign({value:re},{children:t(g,{hideInCollectionSearch:O.hideInCollectionSearch,customCollectionRestriction:O.customCollectionRestriction,productFetcher:O.productFetcher,setScreen:te,storeId:T,data:Z[re],collectionsDispatch:_,selectedCollectionsDispatch:ve,selectedData:je,setSaveDisabled:ue,searchInCollectionFetcher:O.searchInCollectionFetcher,hideProductCheckbox:B,outOfStockAction:L,hideVariantCheckbox:M,selectProductsFromCustomCollection:z,renderWithoutModal:Y,pickerType:U,hideProductVariants:q,fbStatusFetcher:O.fbStatusFetcher,onInfoIconClick:e=>{Ie(!0),Oe(e)},showProductDetailInfoIcon:X})})),"view"===ee&&t(j,{selectedCollections:je||{},selectedCollectionsDispatch:ve,setScreen:te,collections:Z,outOfStockAction:L,storeId:T,fbStatusFetcher:O.fbStatusFetcher}),"rearrange"===ee&&t(f,{selectedCollections:je||{},selectedCollectionsDispatch:ve,setScreen:te,outOfStockAction:L,rearrangeViewType:"grid"===oe?"list":"grid",scrollContainerRef:ke,storeId:T,fbStatusFetcher:O.fbStatusFetcher}),"searchProducts"===ee&&t(P,{customCollectionRestriction:O.customCollectionRestriction,selectedCollections:je||{},searchedCollections:ye||{},setSearchedCollections:Pe,selectedCollectionsDispatch:ve,setScreen:te,collections:Z,onBackPress:()=>{Ce(""),Pe({})},pickerType:U,hideProductCheckbox:B,hideProductVariants:q,hideVariantCheckbox:M,storeId:T,fbStatusFetcher:O.fbStatusFetcher})]}))]});return t(o,{children:Y?De:e(u,Object.assign({zIndex:E,open:w,onClose:()=>{null==R||R(),Te()},headingTitle:H||("collections"===ee||"products"===ee?"Select Products":"view"===ee?"Selected Products":"searchProducts"===ee?"Searched Products":"rearrange"===ee?"Rearrange Products":void 0),footerShadow:!0,centralContainerStyles:{width:W||"600px"},headerRightCustomElement:"rearrange"===ee?(console.log("ignore:",ce),t(o,{})):t(o,{}),primaryButton:{buttonText:ae?"Loading...":ee===F.RearrangeProducts?"Done":"Add",disabled:ae||he<1||A&&he<A||!A&&$&&he>$||!1,onClick:()=>{O.onAdd(je,he),Te()}},footerLeftCustomElement:G?t(o,{}):A&&he>A?t(p,{tagText:`You can only select ${A} products`,type:"negative"}):$&&he>$?t(p,{tagText:`You can only select ${$} products`,type:"negative"}):t(d,he>0?{onClick:()=>{te(N?F.RearrangeProducts:F.SelectedProducts)},buttonText:A?`${he}/${A} products selected`:`${he} products selected`,buttonType:["rearrange","view"].includes(ee)?"tertiaryGray":"tertiary",disabled:["rearrange","view"].includes(ee)}:{disabled:!0,buttonText:A?`${he}/${A} products selected`:`${he} products selected`,buttonType:"tertiaryGray"}),hideCrossButton:xe},{children:[De,xe&&Fe?t(C,{productData:Fe,outOfStockAction:L,onClose:()=>{Ie(!1)}}):t(o,{})]}))})};export{O as ProductPickerModal,F as ScreenName};
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { Product, ProductVariant } from './modal';
|
|
2
|
+
import { OUT_OF_STOCK_ACTION } from './type';
|
|
3
|
+
export declare const ProductInfoOverlay: (props: {
|
|
4
|
+
productData: Product | ProductVariant;
|
|
5
|
+
onClose: () => void;
|
|
6
|
+
outOfStockAction?: OUT_OF_STOCK_ACTION;
|
|
7
|
+
}) => import("react/jsx-runtime").JSX.Element;
|
|
8
|
+
export declare const ProductInfoCard: (props: {
|
|
9
|
+
productData: Product | ProductVariant;
|
|
10
|
+
outOfStockAction?: OUT_OF_STOCK_ACTION;
|
|
11
|
+
}) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
import{jsxs as o,jsx as t}from"react/jsx-runtime";import i from"styled-components";import{COLORS as r}from"../../constants/Theme.js";import e from"../../assets/icons/cross.svg.js";import{IconButton as a}from"../icon-button/IconButton.js";import{ShimmerImage as d}from"../shimmer-image/ShimmerImage.js";import{TitleSmall as n,BodyCaption as c}from"../TypographyStyle.js";import{ProductPickerTag as s}from"./ProductPickerTag.js";const l=i=>o(m,{children:[t(u,{}),t(x,{children:t(a,{className:"close-button",onClick:i.onClose,Icon:e,width:20,height:20})}),t(p,{productData:i.productData,outOfStockAction:i.outOfStockAction})]}),p=i=>{var r;console.log("vj: product data",i);const e=void 0===i.productData.variants;return o(f,{children:[t(g,{children:t(d,{imageUrl:i.productData.image,width:"200px",height:200,borderRadius:4})}),o(h,{children:[t(n,Object.assign({style:{display:"flex"}},{children:i.productData.name})),t(c,{style:{display:"flex",flexDirection:"column"},dangerouslySetInnerHTML:{__html:null!==(r=i.productData.description)&&void 0!==r?r:""}}),t(s,{isVariant:e,data:i.productData,outOfStockAction:i.outOfStockAction})]})]})},m=i.div`
|
|
2
|
+
display: flex;
|
|
3
|
+
flex: 1;
|
|
4
|
+
background: rgba(0, 0, 0, 0.5);
|
|
5
|
+
flex-direction: column;
|
|
6
|
+
width: 100%;
|
|
7
|
+
height: 100%;
|
|
8
|
+
position: absolute;
|
|
9
|
+
bottom: 0;
|
|
10
|
+
z-index: 10;
|
|
11
|
+
`,u=i.div`
|
|
12
|
+
display: flex;
|
|
13
|
+
flex: 1;
|
|
14
|
+
background: rgba(0, 0, 0, 0.5);
|
|
15
|
+
`,x=i.div`
|
|
16
|
+
position: relative;
|
|
17
|
+
|
|
18
|
+
.close-button {
|
|
19
|
+
position: absolute;
|
|
20
|
+
top: -50px;
|
|
21
|
+
right: 0px;
|
|
22
|
+
margin: 10px;
|
|
23
|
+
background: ${r.surface.standard};
|
|
24
|
+
border-radius: 50%;
|
|
25
|
+
}
|
|
26
|
+
`,f=i.div`
|
|
27
|
+
display: flex;
|
|
28
|
+
background: white;
|
|
29
|
+
padding: 24px;
|
|
30
|
+
gap: 24px;
|
|
31
|
+
border-radius: 8px 8px 0px 0px;
|
|
32
|
+
`,g=i.div`
|
|
33
|
+
display: flex;
|
|
34
|
+
`,h=i.div`
|
|
35
|
+
display: flex;
|
|
36
|
+
flex: 1;
|
|
37
|
+
flex-direction: column;
|
|
38
|
+
gap: 10px;
|
|
39
|
+
`;export{p as ProductInfoCard,l as ProductInfoOverlay};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { Collection, Product, ProductFetcherReturn, ProductVariant, SelectedItems } from '.';
|
|
2
|
+
import { Collection, FbStatusFetcherReturn, Product, ProductFetcherReturn, ProductVariant, SelectedItems } from '.';
|
|
3
3
|
import { CollectionsActions, SelectedCollectionsActions } from './reducers';
|
|
4
4
|
import { OUT_OF_STOCK_ACTION } from './type';
|
|
5
5
|
interface ProductsScreenInterface {
|
|
@@ -9,8 +9,8 @@ interface ProductsScreenInterface {
|
|
|
9
9
|
collectionsDispatch: React.Dispatch<CollectionsActions>;
|
|
10
10
|
selectedData: SelectedItems;
|
|
11
11
|
selectedCollectionsDispatch: React.Dispatch<SelectedCollectionsActions>;
|
|
12
|
-
searchInCollectionFetcher: (storeId: string, collectionId: string, query: string) =>
|
|
13
|
-
productFetcher: (collectionId: string, storeId: string) => ProductFetcherReturn;
|
|
12
|
+
searchInCollectionFetcher: (storeId: string, collectionId: string, query: string) => ProductFetcherReturn;
|
|
13
|
+
productFetcher: (collectionId: string, storeId: string, limit?: number, offset?: number) => ProductFetcherReturn;
|
|
14
14
|
storeId: string;
|
|
15
15
|
setScreen: React.Dispatch<React.SetStateAction<string>>;
|
|
16
16
|
setSaveDisabled: React.Dispatch<React.SetStateAction<boolean>>;
|
|
@@ -21,6 +21,9 @@ interface ProductsScreenInterface {
|
|
|
21
21
|
renderWithoutModal?: boolean;
|
|
22
22
|
pickerType?: 'COLLECTION' | 'PRODUCT';
|
|
23
23
|
hideProductVariants?: boolean;
|
|
24
|
+
showProductDetailInfoIcon?: boolean;
|
|
25
|
+
fbStatusFetcher?: (storeId: string, variantIds: string[]) => FbStatusFetcherReturn;
|
|
26
|
+
onInfoIconClick: (productData: Product | ProductVariant) => void;
|
|
24
27
|
}
|
|
25
28
|
export declare const ProductsScreen: (props: ProductsScreenInterface) => import("react/jsx-runtime").JSX.Element;
|
|
26
29
|
interface ProductGroupInterface {
|
|
@@ -36,7 +39,9 @@ interface ProductGroupInterface {
|
|
|
36
39
|
outOfStockAction?: OUT_OF_STOCK_ACTION;
|
|
37
40
|
hideVariantCheckbox?: boolean;
|
|
38
41
|
hideProductVariants?: boolean;
|
|
42
|
+
showProductDetailInfoIcon?: boolean;
|
|
39
43
|
pickerType?: 'COLLECTION' | 'PRODUCT';
|
|
44
|
+
onInfoIconClick?: (productData: Product | ProductVariant) => void;
|
|
40
45
|
}
|
|
41
46
|
export declare const ProductGroup: (props: ProductGroupInterface) => import("react/jsx-runtime").JSX.Element;
|
|
42
47
|
interface ProductCardInterface {
|
|
@@ -54,7 +59,9 @@ interface ProductCardInterface {
|
|
|
54
59
|
outOfStockAction?: OUT_OF_STOCK_ACTION;
|
|
55
60
|
hideVariantCheckbox?: boolean;
|
|
56
61
|
hideProductVariants?: boolean;
|
|
62
|
+
showProductDetailInfoIcon?: boolean;
|
|
57
63
|
pickerType?: 'COLLECTION' | 'PRODUCT';
|
|
64
|
+
onInfoIconClick?: (productData: Product | ProductVariant) => void;
|
|
58
65
|
}
|
|
59
66
|
export declare const ProductCard: (props: ProductCardInterface) => import("react/jsx-runtime").JSX.Element;
|
|
60
67
|
export {};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsxs as t,jsx as e,Fragment as o}from"react/jsx-runtime";import i from"../../assets/icons/arrow_left.svg.js";import c from"../../assets/icons/box.svg.js";import d from"../../assets/icons/search.svg.js";import{cloneDeep as r}from"lodash";import{useContext as n,useState as l,useEffect as s}from"react";import{Tag as a}from"../tag/Tag.js";import{COLORS as u}from"../../constants/Theme.js";import{CheckBox as p}from"../checkBox/CheckBox.js";import{IconButton as h}from"../icon-button/IconButton.js";import{Input as v}from"../input/Input.js";import{BikShimmer as m}from"../shimmer/ShimmerComponent/BikShimmer.js";import{ShimmerImage as y}from"../shimmer-image/ShimmerImage.js";import{Spinner as f}from"../spinner/Spinner.js";import{Tooltip as g}from"../tooltips/Tooltip.js";import{BodyCaption as k,TitleRegular as b}from"../TypographyStyle.js";import{truncate as j}from"./collectionScreen.js";import{EmptyState as C}from"./emptyState.js";import{ProductHelper as I}from"./helpers/ProductHelper.js";import{CollectionIdContext as O}from"./reducers.js";import{ProductScreenHeader as x,ProductScreenCollectionCardStyle as P,ProductCardStyle as S}from"./style.js";import{OUT_OF_STOCK_ACTION as V}from"./type.js";import{liftTheStateUp as T}from"./utility.js";const w=o=>{const a=n(O),{data:y,collectionsDispatch:g,selectedData:j,selectedCollectionsDispatch:I,productFetcher:S,storeId:w,setScreen:E,setSaveDisabled:A,hideInCollectionSearch:B,customCollectionRestriction:R,hideProductCheckbox:U,outOfStockAction:F=V.BLUR,hideVariantCheckbox:H=!1,selectProductsFromCustomCollection:L=!1,pickerType:W,hideProductVariants:z}=o,[K,N]=l(""),[_,q]=l(!1),[G,J]=l(y);s((()=>{const t=setTimeout((()=>{K.length?(q(!0),o.searchInCollectionFetcher(w,a,K).then((t=>{var e;const o=r(y);o.products={};for(const i of t)(null===(e=null==y?void 0:y.products)||void 0===e?void 0:e[i])&&(o.products[i]=y.products[i]);J(o),A(!1),q(!1)}))):J(y)}),800);return()=>clearTimeout(t)}),[K]);const M=!!R&&y.isSmartCollection,Q=t=>{var e,o,i,c,d,r,n,l;let s=0,u=0;return!!((null===(o=null===(e=null==j?void 0:j[a])||void 0===e?void 0:e.products)||void 0===o?void 0:o[t])&&(null===(d=Object.keys((null===(c=null===(i=null==y?void 0:y.products)||void 0===i?void 0:i[t])||void 0===c?void 0:c.variants)||[]))||void 0===d||d.forEach((()=>u++)),Object.keys((null===(l=null===(n=null===(r=null==j?void 0:j[a])||void 0===r?void 0:r.products)||void 0===n?void 0:n[t])||void 0===l?void 0:l.variants)||[]).forEach((()=>s++)),s>0&&u!==s))};s((()=>{(null==y?void 0:y.products)||X()}),[]);const X=()=>{A(!0),q(!0),S(a,w).then((t=>{Object.keys(t).length&&(g({type:"productsFetched",data:{collectionId:a,products:t}}),J(Object.assign(Object.assign({},G),{products:t}))),A(!1),q(!1)})).catch()},Y=(t,e)=>{const o=T(e,y);I({type:t,data:Object.assign(Object.assign({},o),{isRestricted:R})})};return t("div",{children:[t(x,{children:[e(h,{Icon:i,height:16,onClick:()=>{E("collections")}}),e(k,Object.assign({style:{color:u.content.secondary}},{children:y.name}))]}),!B&&e("div",Object.assign({style:{padding:16,height:"76px",borderBottom:"1px solid #E0E0E0"}},{children:e(v,{noKeyDownChange:!0,noErrorHint:!0,rightIcon:{icon:()=>_&&K.length?e(f,{size:"small",color:u.content.primary}):e(d,{})},id:"listInput",height:"24px",type:"text",value:K,onChangeText:t=>{t.length&&t.trim().length?N(t):N("")},placeholder:"Search products in this collection..."})})),t("div",{children:[Object.keys((null==G?void 0:G.products)||[]).length>0&&!M&&!K.length&&!U&&t(P,{children:[e(p,{isChecked:!!(null==j?void 0:j[a]),isPartiallyChecked:(t=>{var e;let o=0,i=0;if(j[t]){const c=null==y?void 0:y.products;c&&Object.keys(c).forEach((t=>{var e;const i=null===(e=c[t])||void 0===e?void 0:e.variants;i&&Object.keys(i).forEach((t=>o+=1))}));const d=null===(e=j[t])||void 0===e?void 0:e.products;return d&&Object.keys(d).forEach((t=>{var e;const o=null===(e=d[t])||void 0===e?void 0:e.variants;o&&Object.keys(o).forEach((()=>i+=1))})),i>0&&o!==i}return!1})(a),onValueChange:function(t){I(t?{type:"selected",data:{id:a,val:y}}:{type:"unselected",data:{id:a}})}}),e("div",Object.assign({style:{width:40,height:40}},{children:e(c,{})})),e(b,{children:"All Products"})]}),Object.keys((null==G?void 0:G.products)||[]).length?Object.keys(G.products||[]).map((t=>e(D,{outOfStockAction:F,collectionId:a,isProductPartiallyChecked:Q(t),productId:t,data:G.products[t],selectedData:j,selectedCollectionsDispatch:I,viewOnly:!L&&!!M,upliftAdditions:Y,hideProductCheckbox:U,hideVariantCheckbox:H,hideProductVariants:z,pickerType:W},t))):_?[1,2,3,4,5,6,7,8,9,10].map(((t,o)=>e("div",Object.assign({style:{borderBottom:"1px solid #E0E0E0"}},{children:e(m,{boxes:[{height:"64px",width:"100%",marginTop:"0px"}]})}),o))):e(C,{title:"No products to show",subtitle:K.length?"We couldn't find the product you were looking for":"We couldn’t find any product in this collection."})]})]})},D=o=>{const{collectionId:i,productId:c,data:d,selectedData:r,selectedCollectionsDispatch:n,viewOnly:l,upliftAdditions:s,isProductPartiallyChecked:a,hideProductCheckbox:u,outOfStockAction:p,hideVariantCheckbox:h,hideProductVariants:v,pickerType:m}=o,y=t=>{var e,o,d,n,l,s;if(!(null===(o=null===(e=null==r?void 0:r[i])||void 0===e?void 0:e.products)||void 0===o?void 0:o[c]))return!1;return!!(null===(s=null===(l=null===(n=null===(d=null==r?void 0:r[i])||void 0===d?void 0:d.products)||void 0===n?void 0:n[c])||void 0===l?void 0:l.variants)||void 0===s?void 0:s[t])};return t("div",{children:[e(E,{isVariant:!1,data:d,productId:c,collectionId:i,isSelected:!!(null===(g=null===(f=null==r?void 0:r[i])||void 0===f?void 0:f.products)||void 0===g?void 0:g[c]),isPartiallyChecked:a,selectedCollectionsDispatch:n,upliftAdditions:s,viewOnly:l,hideProductCheckbox:u,hideVariantCheckbox:h,hideProductVariants:v,pickerType:m},c),v?null:Object.keys(d.variants||[]).map((t=>e(E,{isVariant:!0,hideVariantCheckbox:h,data:d.variants[t],variantId:t,productId:c,viewOnly:l,upliftAdditions:s,collectionId:i,isSelected:y(t),selectedCollectionsDispatch:n,outOfStockAction:p},t)))]});var f,g},E=i=>{const{isVariant:c,data:d,productId:r,collectionId:n,variantId:l,isSelected:s,selectedCollectionsDispatch:u,viewOnly:h,upliftAdditions:v,isPartiallyChecked:m,hideProductCheckbox:f,outOfStockAction:k,hideVariantCheckbox:C,hideProductVariants:O,pickerType:x}=i,P=I.getProductLabels(d,k);return t(S,Object.assign({isVariant:c,onClick:t=>{"PRODUCT"===x&&O&&(t.stopPropagation(),u({type:"reset",data:{}}),v("variantSelected",{productId:r,variantId:l||Object.keys(d.variants)[0],collectionId:n,variant:d}))},isActive:s},{children:[c&&!h&&!C||!c&&!h&&!f?e(p,{isChecked:s,isPartiallyChecked:m||!1,onValueChange:function(t){c?t?v("variantSelected",{productId:r,variantId:l,collectionId:n,variant:d}):u({type:"variantUnselected",data:{productId:r,variantId:l,collectionId:n}}):t?v("productSelected",{productId:r,collectionId:n,product:d}):u({type:"productUnselected",data:{productId:r,collectionId:n}})}}):e(o,{}),e("div",{children:e(y,{width:40,height:40,imageUrl:d.image,alt:"Item",borderRadius:4})}),e(g,Object.assign({body:d.name,placement:"bottom",delay:400},{children:t("div",Object.assign({style:{display:"flex",flexDirection:"column"}},{children:[e(b,{children:j(d.name,40,!0)}),P?e("div",Object.assign({style:{width:90,display:"flex"}},{children:e(a,{tagText:P,type:"warning",theme:"light"})})):e(o,{})]}))}))]}))};export{E as ProductCard,D as ProductGroup,w as ProductsScreen};
|
|
1
|
+
import{jsxs as t,jsx as o,Fragment as e}from"react/jsx-runtime";import i from"../../assets/icons/arrow_left.svg.js";import n from"../../assets/icons/box.svg.js";import c from"../../assets/icons/search.svg.js";import{cloneDeep as l}from"lodash";import{useContext as s,useRef as d,useState as r,useEffect as a}from"react";import{COLORS as u}from"../../constants/Theme.js";import v from"../../assets/icons/info.svg.js";import{CheckBox as h}from"../checkBox/CheckBox.js";import{IconButton as p}from"../icon-button/IconButton.js";import{Input as g}from"../input/Input.js";import{BikShimmer as f}from"../shimmer/ShimmerComponent/BikShimmer.js";import{ShimmerImage as b}from"../shimmer-image/ShimmerImage.js";import{Spinner as j}from"../spinner/Spinner.js";import{Tooltip as m}from"../tooltips/Tooltip.js";import{BodyCaption as y,TitleRegular as k,BodyPrimary as I}from"../TypographyStyle.js";import{EmptyState as O}from"./emptyState.js";import{ProductPickerTag as C}from"./ProductPickerTag.js";import{CollectionIdContext as P}from"./reducers.js";import{ProductScreenHeader as S,ProductScreenCollectionCardStyle as x,ProductCardStyle as E}from"./style.js";import{OUT_OF_STOCK_ACTION as D}from"./type.js";import{liftTheStateUp as V}from"./utility.js";const w=e=>{const{data:v,collectionsDispatch:b,selectedData:m,selectedCollectionsDispatch:I,productFetcher:C,storeId:E,setScreen:w,setSaveDisabled:T,hideInCollectionSearch:F,customCollectionRestriction:R,hideProductCheckbox:B,outOfStockAction:U=D.BLUR,hideVariantCheckbox:L=!1,selectProductsFromCustomCollection:H=!1,pickerType:J,hideProductVariants:W,fbStatusFetcher:z,onInfoIconClick:K,showProductDetailInfoIcon:M}=e,N=s(P),_=d(null),q=d(0),[G,Q]=r(!1),[X,Y]=r(""),[Z,$]=r(!1),[tt,ot]=r(v),et=d(!1);a((()=>{const t=setTimeout((()=>{X.length?($(!0),e.searchInCollectionFetcher(E,N,X).then((t=>{const o=l(v);o.products=t,ot(o);const e=ct(null!=t?t:{},!0);lt(e,null!=t?t:{},!0),T(!1),$(!1)}))):ot(v)}),800);return()=>clearTimeout(t)}),[X]),a((()=>{var t,o,e,i,n,c,l,s;console.log("vj: collectionId change before",v,v.products,null===(o=Object.keys(null!==(t=v.products)&&void 0!==t?t:{}))||void 0===o?void 0:o.length,et),et.current=!1,q.current=Math.floor((null===(i=Object.keys(null!==(e=v.products)&&void 0!==e?e:{}))||void 0===i?void 0:i.length)/10);const d=ct(null!==(n=v.products)&&void 0!==n?n:{});lt(d,null!==(c=v.products)&&void 0!==c?c:{}),console.log("vj: collectionId change after",v,v.products,null===(s=Object.keys(null!==(l=v.products)&&void 0!==l?l:{}))||void 0===s?void 0:s.length,et)}),[N]);const it=!!R&&v.isSmartCollection,nt=t=>{var o,e,i,n,c,l,s,d;let r=0,a=0;return!!((null===(e=null===(o=null==m?void 0:m[N])||void 0===o?void 0:o.products)||void 0===e?void 0:e[t])&&(null===(c=Object.keys((null===(n=null===(i=null==v?void 0:v.products)||void 0===i?void 0:i[t])||void 0===n?void 0:n.variants)||[]))||void 0===c||c.forEach((()=>a++)),Object.keys((null===(d=null===(s=null===(l=null==m?void 0:m[N])||void 0===l?void 0:l.products)||void 0===s?void 0:s[t])||void 0===d?void 0:d.variants)||[]).forEach((()=>r++)),r>0&&a!==r))};a((()=>{(null==v?void 0:v.products)||st(10)}),[]);const ct=(t,o)=>{const e=[];return console.log("vj: getVariantIdsForFbStatusFetch",t),Object.keys(null!=t?t:{}).forEach((i=>{var n,c;const l=null!==(c=null===(n=null==t?void 0:t[i])||void 0===n?void 0:n.variants)&&void 0!==c?c:{};Object.keys(l).forEach((n=>{var c,l,s,d,r;let a;a=o?null===(l=null===(c=null==t?void 0:t[i])||void 0===c?void 0:c.variants)||void 0===l?void 0:l[n]:null===(r=null===(d=null===(s=null==v?void 0:v.products)||void 0===s?void 0:s[i])||void 0===d?void 0:d.variants)||void 0===r?void 0:r[n],console.log("vj: variant fb status",{data:v,variant:a}),(null==a?void 0:a.fbStatus)||e.push(n)}))})),console.log("vj: getVariantIdsForFbStatusFetch returning",e),e},lt=(t,o,e)=>{if(console.log("fetchFbStatusAndDispatchProducts",{variantIdsToFetchFbStatus:t,fbStatusFetcher:z}),!z){const t=Object.assign({},o);if(Object.keys(o).forEach((e=>{var i,n,c;console.log("vj: response variants",null===(i=null==o?void 0:o[e])||void 0===i?void 0:i.variants),Object.keys(null!==(c=null===(n=null==o?void 0:o[e])||void 0===n?void 0:n.variants)&&void 0!==c?c:{}).forEach((i=>{var n,c;const l=null===(n=null==o?void 0:o[e].variants)||void 0===n?void 0:n[i];l&&(l.fbStatus="APPROVED");const s=null===(c=null==t?void 0:t[e])||void 0===c?void 0:c.variants;s&&s[i]&&(s[i]=l)}))})),console.log("vj: fetchFbStatusAndDispatchProducts updated Products",t),e){const o=Object.assign({},tt);o.products=t,ot(o)}else b({type:"productsPaged",data:{collectionId:N,products:t}})}t.length>0&&z&&z(E,t).then((t=>{console.log("vj: response",{response:t,products:o});const i=Object.assign({},o);if(Object.keys(o).forEach((e=>{var n,c,l;console.log("vj: response variants",null===(n=null==o?void 0:o[e])||void 0===n?void 0:n.variants),Object.keys(null!==(l=null===(c=null==o?void 0:o[e])||void 0===c?void 0:c.variants)&&void 0!==l?l:{}).forEach((n=>{var c,l;const s=null===(c=null==o?void 0:o[e].variants)||void 0===c?void 0:c[n];console.log("vj: v",{v:s,vId:n,status:t[n],response:t}),s&&"REJECTED"===t[n]?s.fbStatus="REJECTED":s&&"APPROVED"===t[n]&&(s.fbStatus="APPROVED");const d=null===(l=null==i?void 0:i[e])||void 0===l?void 0:l.variants;d&&d[n]&&(d[n]=s)}))})),console.log("vj: updated Products",i),e){const t=Object.assign({},tt);t.products=i,ot(t)}else b({type:"productsPaged",data:{collectionId:N,products:i}})})).catch((t=>{const i=Object.assign({},o);if(Object.keys(o).forEach((t=>{var e,n,c;console.log("vj: response variants",null===(e=null==o?void 0:o[t])||void 0===e?void 0:e.variants),Object.keys(null!==(c=null===(n=null==o?void 0:o[t])||void 0===n?void 0:n.variants)&&void 0!==c?c:{}).forEach((e=>{var n,c;const l=null===(n=null==o?void 0:o[t].variants)||void 0===n?void 0:n[e];l&&(l.fbStatus="APPROVED");const s=null===(c=null==i?void 0:i[t])||void 0===c?void 0:c.variants;s&&s[e]&&(s[e]=l)}))})),console.log("vj: fetchFbStatusAndDispatchProducts updated Products",i),e){const t=Object.assign({},tt);t.products=i,ot(t)}else b({type:"productsPaged",data:{collectionId:N,products:i}})}))};a((()=>{console.log("vj: observertarget",_.current);const t=new IntersectionObserver((t=>{console.log("vj: observertargetinside",t),t[0].isIntersecting&&(console.log("vj: nextPageRef",q.current,et),q.current>=0&&!et.current&&(T(!0),Q(!0),C(N,E,10,q.current).then((t=>{if(console.log("vj: fetched products",t,et,Object.keys(t).length),Object.keys(t).length||(console.log("vj: setHasAllCollectionLoaded ",!0),et.current=!0),Object.keys(t).length){const o=tt;o.products=Object.assign(Object.assign({},tt.products),t),ot(o);const e=ct(t);lt(e,t),q.current+=1}Q(!1),T(!1)})).catch()))}),{threshold:1});return _.current&&t.observe(_.current),()=>{_.current&&t.unobserve(_.current)}}),[_]);const st=t=>{console.log("vj: getProductsForCollection"),T(!0),$(!0),C(N,E,t,0).then((o=>{if(Object.keys(o).length||(console.log("vj: setHasAllCollectionLoaded ",!0),et.current=!0),Object.keys(o).length){ot(Object.assign(Object.assign({},tt),{products:o})),console.log("vj: next page when products loaded",q.current);const t=ct(o);lt(t,o),q.current=1}console.log("vj: product data",{productData:o,limit:t,data:v}),t||I({type:"selected",data:{id:N,val:Object.assign(Object.assign({},v),{products:o})}}),T(!1),$(!1)})).catch()},dt=(t,o)=>{const e=V(o,v);I({type:t,data:Object.assign(Object.assign({},e),{isRestricted:R})})};return t("div",{children:[t(S,{children:[o(p,{Icon:i,height:16,onClick:()=>{w("collections")}}),o(y,Object.assign({style:{color:u.content.secondary}},{children:v.name}))]}),!F&&o("div",Object.assign({style:{padding:16,height:"76px",borderBottom:"1px solid #E0E0E0"}},{children:o(g,{noKeyDownChange:!0,noErrorHint:!0,rightIcon:{icon:()=>Z&&X.length?o(j,{size:"small",color:u.content.primary}):o(c,{})},id:"listInput",height:"24px",type:"text",value:X,onChangeText:t=>{t.length&&t.trim().length?Y(t):Y("")},placeholder:"Search products in this collection..."})})),t("div",{children:[Object.keys((null==tt?void 0:tt.products)||[]).length>0&&!it&&!X.length&&!B&&"-1"!==N&&t(x,{children:[o(h,{isChecked:!!(null==m?void 0:m[N]),isPartiallyChecked:(t=>{var o;let e=0,i=0;if(m[t]){const n=null==v?void 0:v.products;n&&Object.keys(n).forEach((t=>{var o;const i=null===(o=n[t])||void 0===o?void 0:o.variants;i&&Object.keys(i).forEach((t=>e+=1))}));const c=null===(o=m[t])||void 0===o?void 0:o.products;return c&&Object.keys(c).forEach((t=>{var o;const e=null===(o=c[t])||void 0===o?void 0:o.variants;e&&Object.keys(e).forEach((()=>i+=1))})),i>0&&e!==i}return!1})(N),onValueChange:function(t){t?st():I({type:"unselected",data:{id:N}})}}),o("div",Object.assign({style:{width:40,height:40}},{children:o(n,{})})),o(k,{children:"All Products"})]}),Object.keys((null==tt?void 0:tt.products)||[]).length?Object.keys(tt.products||[]).map((t=>o(A,{outOfStockAction:U,collectionId:N,isProductPartiallyChecked:nt(t),productId:t,data:tt.products[t],selectedData:m,selectedCollectionsDispatch:I,viewOnly:!H&&!!it,upliftAdditions:dt,hideProductCheckbox:B,hideVariantCheckbox:L,hideProductVariants:W,pickerType:J,onInfoIconClick:K,showProductDetailInfoIcon:M},t))):Z?[1,2,3,4,5,6,7,8,9,10].map(((t,e)=>o("div",Object.assign({style:{borderBottom:"1px solid #E0E0E0"}},{children:o(f,{boxes:[{height:"64px",width:"100%",marginTop:"0px"}]})}),e))):o(O,{title:"No products to show",subtitle:X.length?"We couldn't find the product you were looking for":"We couldn’t find any product in this collection."}),o("div",{ref:_})]}),G&&[1,2,3,4,5].map(((t,e)=>o("div",Object.assign({style:{borderBottom:"1px solid #E0E0E0"}},{children:o(f,{boxes:[{height:"64px",width:"100%",marginTop:"0px"}]})}),e)))]})},A=e=>{const{collectionId:i,productId:n,data:c,selectedData:l,selectedCollectionsDispatch:s,viewOnly:d,upliftAdditions:r,isProductPartiallyChecked:a,hideProductCheckbox:u,outOfStockAction:v,hideVariantCheckbox:h,hideProductVariants:p,pickerType:g,onInfoIconClick:f,showProductDetailInfoIcon:b}=e,j=t=>{var o,e,c,s,d,r;if(!(null===(e=null===(o=null==l?void 0:l[i])||void 0===o?void 0:o.products)||void 0===e?void 0:e[n]))return!1;return!!(null===(r=null===(d=null===(s=null===(c=null==l?void 0:l[i])||void 0===c?void 0:c.products)||void 0===s?void 0:s[n])||void 0===d?void 0:d.variants)||void 0===r?void 0:r[t])};return t("div",{children:[o(T,{isVariant:!1,data:c,productId:n,collectionId:i,isSelected:!!(null===(y=null===(m=null==l?void 0:l[i])||void 0===m?void 0:m.products)||void 0===y?void 0:y[n]),isPartiallyChecked:a,selectedCollectionsDispatch:s,upliftAdditions:r,viewOnly:d,hideProductCheckbox:u,hideVariantCheckbox:h,hideProductVariants:p,pickerType:g,outOfStockAction:v,onInfoIconClick:f,showProductDetailInfoIcon:b},n),p?null:Object.keys(c.variants||[]).length>1&&Object.keys(c.variants||[]).map((t=>o(T,{isVariant:!0,hideVariantCheckbox:h,data:c.variants[t],variantId:t,productId:n,viewOnly:d,upliftAdditions:r,collectionId:i,isSelected:j(t),selectedCollectionsDispatch:s,outOfStockAction:v,onInfoIconClick:f,showProductDetailInfoIcon:b},t)))]});var m,y},T=i=>{const{isVariant:n,data:c,productId:l,collectionId:s,variantId:d,isSelected:r,selectedCollectionsDispatch:a,viewOnly:g,upliftAdditions:f,isPartiallyChecked:j,hideProductCheckbox:y,outOfStockAction:k,hideVariantCheckbox:O,hideProductVariants:P,pickerType:S,onInfoIconClick:x,showProductDetailInfoIcon:D}=i;return t(E,Object.assign({isVariant:n,onClick:t=>{"PRODUCT"===S&&P&&(t.stopPropagation(),a({type:"reset",data:{}}),f("variantSelected",{productId:l,variantId:d||Object.keys(c.variants)[0],collectionId:s,variant:c}))},isActive:r},{children:[n&&!g&&!O||!n&&!g&&!y?o(h,{isChecked:r,isPartiallyChecked:j||!1,onValueChange:function(t){n?t?f("variantSelected",{productId:l,variantId:d,collectionId:s,variant:c}):a({type:"variantUnselected",data:{productId:l,variantId:d,collectionId:s}}):t?f("productSelected",{productId:l,collectionId:s,product:c}):a({type:"productUnselected",data:{productId:l,collectionId:s}})}}):o(e,{}),o("div",{children:o(b,{width:40,height:40,imageUrl:c.image,alt:"Item",borderRadius:4})}),o(m,Object.assign({variant:"light",body:c.name,placement:"bottom",delay:400},{children:t("div",Object.assign({style:{display:"flex",flexDirection:"column",flex:1}},{children:[t("div",Object.assign({style:{display:"flex",alignItems:"center",justifyContent:"space-between"}},{children:[o(I,Object.assign({numberOfLines:1},{children:c.name})),D&&o(p,{onClick:()=>{null==x||x(c)},Icon:()=>o(v,{width:20,height:20,color:u.content.placeholder})})]})),o(C,{isVariant:n,data:c,outOfStockAction:k})]}))}))]}))};export{T as ProductCard,A as ProductGroup,w as ProductsScreen};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { SelectedItems } from '.';
|
|
2
|
+
import { FbStatusFetcherReturn, SelectedItems } from '.';
|
|
3
3
|
import { SelectedCollectionsActions } from './reducers';
|
|
4
4
|
import { OUT_OF_STOCK_ACTION } from './type';
|
|
5
5
|
interface RearrangeScreenInterface {
|
|
@@ -9,6 +9,8 @@ interface RearrangeScreenInterface {
|
|
|
9
9
|
rearrangeViewType: 'grid' | 'list';
|
|
10
10
|
outOfStockAction?: OUT_OF_STOCK_ACTION;
|
|
11
11
|
scrollContainerRef: React.RefObject<HTMLDivElement>;
|
|
12
|
+
storeId: string;
|
|
13
|
+
fbStatusFetcher?: (storeId: string, variantIds: string[]) => FbStatusFetcherReturn;
|
|
12
14
|
}
|
|
13
15
|
/**
|
|
14
16
|
* Screen will be opened on two conditions -
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsxs as
|
|
1
|
+
import{jsxs as t,jsx as e}from"react/jsx-runtime";import o from"../../assets/icons/arrow_left.svg.js";import{useState as r,useEffect as s}from"react";import{DragDropContext as c}from"react-beautiful-dnd";import{COLORS as i}from"../../constants/Theme.js";import{IconButton as n}from"../icon-button/IconButton.js";import{BodyCaption as l}from"../TypographyStyle.js";import{EmptyState as a}from"./emptyState.js";import{parseSelectedVariantsToArray as d}from"./helpers/ProductHelper.js";import{SelectedScreenHeader as p}from"./style.js";import{useFetchFbStatusForCollections as m}from"./useFetchFbStatus.js";import{VariantsList as u,VariantsGrid as f}from"./variantComponents.js";const h=h=>{const{selectedCollections:j,selectedCollectionsDispatch:S,setScreen:y,rearrangeViewType:b,outOfStockAction:g,scrollContainerRef:C,storeId:O,fbStatusFetcher:v}=h,[V,k]=r(d(j)),{fetchFbStatus:w}=m(j,O,S,v,!1);s((()=>{var t;null===(t=null==C?void 0:C.current)||void 0===t||t.scrollTo({top:0}),w(),k(d(j))}),[j]);return t(c,Object.assign({onDragEnd:t=>{if(!t.destination)return;const e=V,[o]=e.splice(t.source.index,1);e.splice(t.destination.index,0,o),e.forEach(((t,e)=>{t.displayOrder=e})),k(e)}},{children:[t(p,{children:[e(n,{Icon:o,width:16,height:16,color:i.content.secondary,onClick:()=>{y("collections")}}),e(l,Object.assign({color:i.content.secondary},{children:"All Products"}))]}),Object.keys(j).length>0?"list"===b?e(u,{selectedVariants:V,setSelectedVariants:k,selectedCollectionsDispatch:S,outOfStockAction:g}):e(f,{selectedVariants:V,setSelectedVariants:k,selectedCollectionsDispatch:S}):e(a,{title:"No Products Selected",subtitle:"Selected products will appear here"})]}))};export{h as RearrangeScreen};
|
|
@@ -14,4 +14,5 @@ export interface CollectionsActions {
|
|
|
14
14
|
};
|
|
15
15
|
}
|
|
16
16
|
export declare function collectionsReducer(collections: Collection, action: CollectionsActions): any;
|
|
17
|
+
export declare function paginationReducer(collections: SelectedItems, action: SelectedCollectionsActions): SelectedItems;
|
|
17
18
|
export declare const CollectionIdContext: import("react").Context<string>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{cloneDeep as t}from"lodash";import{createContext as
|
|
1
|
+
import{cloneDeep as t}from"lodash";import{createContext as e}from"react";function a(e,a){var o,c,s,d,n,l;let r={},i="",u="",p="";switch(console.log("vj: selected Items",e),a.type){case"selected":return console.log("vj: selectedColectionsReducer selected",a),r=t(e),a.data.val.isSmartCollection&&(a.data.isRestricted&&(r={}),r.isCustom=!0),r[a.data.id]=a.data.val,r;case"unselected":return r=t(e),(null==r?void 0:r.isCustom)&&(r.isCustom=!1),delete r[a.data.id],r;case"productUnselected":return r=t(e),i=a.data.productId,u=a.data.collectionId,delete r[u].products[i],Object.keys(r[u].products).length||((null==r?void 0:r.isCustom)&&(r.isCustom=!1),delete r[u]),r;case"productSelected":return r=t(e),i=a.data.productId,u=a.data.collectionId,(null===(o=a.data.catalogOnlyData)||void 0===o?void 0:o.isSmartCollection)&&(a.data.isRestricted&&(r={}),r.isCustom=!0),(null==r?void 0:r[u])||(r[u]=a.data.catalogOnlyData,r[u].products={}),r[u].products[i]=a.data.product,r;case"variantSelected":return r=t(e),i=a.data.productId,u=a.data.collectionId,p=a.data.variantId,(null===(c=a.data.catalogOnlyData)||void 0===c?void 0:c.isSmartCollection)&&(a.data.isRestricted&&(r={}),r.isCustom=!0),(null==r?void 0:r[u])||(r[u]=a.data.catalogOnlyData,r[u].products={},r[u].products[i]=a.data.productOnlyData,r[u].products[i].variants={}),(null===(d=null===(s=null==r?void 0:r[u])||void 0===s?void 0:s.products)||void 0===d?void 0:d[i])||((null===(n=null==r?void 0:r[u])||void 0===n?void 0:n.products)||(r[u].products={}),r[u].products[i]=a.data.productOnlyData,r[u].products[i].variants={}),r[u].products[i].variants[p]=a.data.variant,r;case"variantUnselected":return r=t(e),i=a.data.productId,u=a.data.collectionId,p=a.data.variantId,delete r[u].products[i].variants[p],Object.keys(r[u].products[i].variants).length||(delete r[u].products[i],Object.keys(r[u].products).length||((null===(l=r[u])||void 0===l?void 0:l.isSmartCollection)&&(r.isCustom=!1),delete r[u])),r;case"reset":return{};default:return e}}function o(t,e){let a={};switch(e.type){case"fetched":return a=Object.assign({},e.data),a;case"productsFetched":return console.log("vj: productsFetched",{collections:t,action:e}),a=Object.assign({},t),a[e.data.collectionId].products=e.data.products,console.log("vj: collectionsCopy",{collectionsCopy:a}),a;case"paged":return console.log("vj: paged",{collections:t,action:e}),a=Object.assign(Object.assign({},t),e.data),a;case"productsPaged":return console.log("vj: pagedProducts",{collections:t,action:e}),a=Object.assign({},t),e.data.collectionId,a[e.data.collectionId].products=Object.assign(Object.assign({},a[e.data.collectionId].products),e.data.products),a;default:return{}}}function c(t,e){let a={};switch(console.log("vj: selected Items",t),e.type){case"paginate":console.log("vj: paginate",e),a=Object.assign({},t);for(const t in e.data)if(Object.prototype.hasOwnProperty.call(e.data,t)){const o=e.data[t];if(Object.prototype.hasOwnProperty.call(a,t)){const e=a[t];a[t]=Object.assign(Object.assign({},e),{products:Object.assign(Object.assign({},e.products),o.products)})}else a[t]=o}return console.log("vj: collections copy",a),a;case"update":return console.log("vj: update",e),a=Object.assign({},t),console.log("vj: update collection",e),a;case"set":return a=Object.assign(Object.assign({},t),e.data),console.log("vj: update collection",e),a;case"filter":a={};for(const o in t)if(o in e.data){const c=Object.assign({},t[o]),s=e.data[o],d={};for(const t in c.products)if(t in s.products){const e=Object.assign({},c.products[t]),a=s.products[t],o={};for(const t in e.variants)t in a.variants&&(o[t]=Object.assign({},e.variants[t]));Object.keys(o).length>0&&(e.variants=o,d[t]=e)}Object.keys(d).length>0&&(c.products=d,a[o]=c)}return a;default:return t}}const s=e("");export{s as CollectionIdContext,o as collectionsReducer,c as paginationReducer,a as selectedColectionsReducer};
|
|
@@ -1,10 +1,11 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
import { Collection, SelectedItems } from '.';
|
|
2
|
+
import { Collection, FbStatusFetcherReturn, SelectedItems } from '.';
|
|
3
3
|
import { SelectedCollectionsActions } from './reducers';
|
|
4
4
|
interface SearchScreenInterface {
|
|
5
5
|
customCollectionRestriction?: boolean;
|
|
6
6
|
selectedCollections: SelectedItems;
|
|
7
7
|
searchedCollections: SelectedItems;
|
|
8
|
+
setSearchedCollections: React.Dispatch<React.SetStateAction<SelectedItems>>;
|
|
8
9
|
selectedCollectionsDispatch: React.Dispatch<SelectedCollectionsActions>;
|
|
9
10
|
setScreen: React.Dispatch<React.SetStateAction<string>>;
|
|
10
11
|
collections: {
|
|
@@ -15,6 +16,8 @@ interface SearchScreenInterface {
|
|
|
15
16
|
pickerType?: 'COLLECTION' | 'PRODUCT';
|
|
16
17
|
hideProductVariants?: boolean;
|
|
17
18
|
hideProductCheckbox?: boolean;
|
|
19
|
+
storeId: string;
|
|
20
|
+
fbStatusFetcher?: (storeId: string, variantIds: string[]) => FbStatusFetcherReturn;
|
|
18
21
|
}
|
|
19
22
|
export declare const SearchScreen: (props: SearchScreenInterface) => import("react/jsx-runtime").JSX.Element;
|
|
20
23
|
export {};
|