npm - @bikdotai/bik-component-library - Versions diffs - 0.0.840 → 0.0.841-beta.0 - Mend

@bikdotai/bik-component-library 0.0.840 → 0.0.841-beta.0

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.

Files changed (99) hide show

package/dist/cjs/components/testimonial-card/TestimonialCard.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TestimonialCard.js","sources":["../../../../src/components/testimonial-card/TestimonialCard.tsx"],"sourcesContent":["import React from 'react';\nimport {\n\tAvatar,\n\tAVATAR_BACKGROUND,\n\tAVATAR_TYPES,\n\tSIZE,\n} from '@src/components/avatar';\nimport { StarRating } from '@src/components/star-rating';\nimport {\n\tBodyLarge,\n\tBodyPrimary,\n\tTitleLarge,\n\tTitleMedium,\n\tTitleRegular,\n} from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport FooterArrowIcon from '../../assets/icons/card_footer_arraw.svg';\nimport {\n\tFooterArrow,\n\tFooterStat,\n\tFooterText,\n\tLogo,\n\tTestimonialCardStyle,\n\tTestimonialProfileCard,\n\tTestimonialProfileFooter,\n\tTestimonialProfileInfo,\n\tTestimonialProfileInfo2,\n} from './TestimonialCard.style';\n\nexport interface TestimonialCardProps {\n\ttestimonial: string;\n\tratingValue: number;\n\treviewerName: string;\n\tavatarUrl: string;\n\treviewerCaption?: string;\n\tratingMaxValue?: number;\n\tavatarSize?: SIZE;\n\tfooterText?: string;\n\tfooterStat?: string;\n\twidth?: string;\n\theight?: string;\n\tversion?: 'v1' \| 'v2';\n}\n\nexport const TestimonialCard: React.FC<TestimonialCardProps> = (props) => {\n\tconst version = props.version ?? 'v1';\n\n\tconst getHTMLBody = () => {\n\t\tif (version == 'v2') {\n\t\t\treturn (\n\t\t\t\t<TestimonialProfileInfo2>\n\t\t\t\t\t<Logo src={props.avatarUrl} />\n\t\t\t\t\t<BodyPrimary color={COLORS.content.secondary}>\n\t\t\t\t\t\t{props.reviewerName}\n\t\t\t\t\t</BodyPrimary>\n\t\t\t\t</TestimonialProfileInfo2>\n\t\t\t);\n\t\t}\n\n\t\treturn (\n\t\t\t<TestimonialProfileCard>\n\t\t\t\t<Avatar\n\t\t\t\t\ttype={AVATAR_TYPES.IMAGE}\n\t\t\t\t\tsize={props.avatarSize ?? SIZE.MEDIUM}\n\t\t\t\t\tbackground={AVATAR_BACKGROUND.LIGHT}\n\t\t\t\t\tphotoUrl={props.avatarUrl}\n\t\t\t\t/>\n\t\t\t\t<TestimonialProfileInfo>\n\t\t\t\t\t<TitleMedium color={COLORS.content.secondary}>\n\t\t\t\t\t\t{props.reviewerName}\n\t\t\t\t\t</TitleMedium>\n\t\t\t\t\t<BodyPrimary color={COLORS.content.secondary}>\n\t\t\t\t\t\t{props.reviewerCaption}\n\t\t\t\t\t</BodyPrimary>\n\t\t\t\t</TestimonialProfileInfo>\n\t\t\t</TestimonialProfileCard>\n\t\t);\n\t};\n\n\tconst getFooterHTML = () => {\n\t\tif (version === 'v2') {\n\t\t\treturn (\n\t\t\t\t<TestimonialProfileFooter width={props.width}>\n\t\t\t\t\t<FooterText>\n\t\t\t\t\t\t<TitleRegular color={COLORS.text.white}>\n\t\t\t\t\t\t\t{props?.footerText}\n\t\t\t\t\t\t</TitleRegular>\n\t\t\t\t\t</FooterText>\n\n\t\t\t\t\t<FooterStat>\n\t\t\t\t\t\t<TitleLarge color={COLORS.text.white}>\n\t\t\t\t\t\t\t{props?.footerStat}\n\t\t\t\t\t\t</TitleLarge>\n\t\t\t\t\t</FooterStat>\n\n\t\t\t\t\t<FooterArrow>\n\t\t\t\t\t\t<FooterArrowIcon />\n\t\t\t\t\t</FooterArrow>\n\t\t\t\t</TestimonialProfileFooter>\n\t\t\t);\n\t\t}\n\n\t\treturn null;\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<TestimonialCardStyle\n\t\t\t\twidth={props.width}\n\t\t\t\theight={props.height}\n\t\t\t\tversion={version}\n\t\t\t>\n\t\t\t\t<StarRating\n\t\t\t\t\tstarSize={24}\n\t\t\t\t\tmaxValue={props.ratingMaxValue ?? 5}\n\t\t\t\t\tvalue={props.ratingValue}\n\t\t\t\t\tonChange={(stars) => console.log(stars)}\n\t\t\t\t\tmode={'VIEW'}\n\t\t\t\t\tversion={version}\n\t\t\t\t/>\n\t\t\t\t<BodyLarge color={COLORS.content.secondary}>\n\t\t\t\t\t{props.testimonial}\n\t\t\t\t</BodyLarge>\n\t\t\t\t{getHTMLBody()}\n\t\t\t</TestimonialCardStyle>\n\n\t\t\t{getFooterHTML()}\n\t\t</>\n\t);\n};\n"],"names":["TestimonialCard","props","version","getHTMLBody","TestimonialProfileInfo2","jsx","Logo","BodyPrimary","COLORS","TestimonialProfileCard","Avatar","AVATAR_TYPES","SIZE","AVATAR_BACKGROUND","TestimonialProfileInfo","TitleMedium","getFooterHTML","jsxs","TestimonialProfileFooter","FooterText","TitleRegular","FooterStat","TitleLarge","FooterArrow","FooterArrowIcon","Fragment","TestimonialCardStyle","StarRating","stars","BodyLarge"],"mappings":"iZA4CaA,EAAmDC,GAAU,CACzE,MAAMC,EAAUD,EAAM,SAAW,KAE3BE,EAAc,IACfD,GAAW,YAEZE,0BAAA,CACA,SAAA,CAAAC,EAAAA,IAACC,EAAAA,KAAA,CAAK,IAAKL,EAAM,SAAA,CAAW,QAC3BM,EAAAA,YAAA,CAAY,MAAOC,EAAAA,OAAO,QAAQ,UACjC,WAAM,YAAA,CACR,CAAA,EACD,SAKAC,yBAAA,CACA,SAAA,CAAAJ,EAAAA,IAACK,EAAAA,OAAA,CACA,KAAMC,EAAAA,aAAa,MACnB,KAAMV,EAAM,YAAcW,EAAAA,KAAK,OAC/B,WAAYC,EAAAA,kBAAkB,MAC9B,SAAUZ,EAAM,SAAA,CAAA,SAEhBa,EAAAA,uBAAA,CACA,SAAA,CAAAT,MAACU,EAAAA,aAAY,MAAOP,EAAAA,OAAO,QAAQ,UACjC,WAAM,aACR,QACCD,EAAAA,YAAA,CAAY,MAAOC,EAAAA,OAAO,QAAQ,UACjC,WAAM,eAAA,CACR,CAAA,CAAA,CACD,CAAA,EACD,EAIIQ,EAAgB,IACjBd,IAAY,KAEde,EAAAA,KAACC,EAAAA,yBAAA,CAAyB,MAAOjB,EAAM,MACtC,SAAA,CAAAI,EAAAA,IAACc,EAAAA,WAAA,CACA,eAACC,EAAAA,aAAA,CAAa,MAAOZ,EAAAA,OAAO,KAAK,MAC/B,SAAAP,GAAO,UAAA,CACT,CAAA,CACD,EAEAI,EAAAA,IAACgB,EAAAA,WAAA,CACA,SAAAhB,EAAAA,IAACiB,EAAAA,WAAA,CAAW,MAAOd,EAAAA,OAAO,KAAK,MAC7B,SAAAP,GAAO,UAAA,CACT,CAAA,CACD,EAEAI,EAAAA,IAACkB,EAAAA,YAAA,CACA,SAAAlB,EAAAA,IAACmB,EAAAA,QAAA,CAAA,CAAgB,CAAA,CAClB,CAAA,EACD,EAIK,KAGR,OACCP,EAAAA,KAAAQ,WAAA,CACC,SAAA,CAAAR,EAAAA,KAACS,EAAAA,qBAAA,CACA,MAAOzB,EAAM,MACb,OAAQA,EAAM,OACd,QAAAC,EAEA,SAAA,CAAAG,EAAAA,IAACsB,EAAAA,WAAA,CACA,SAAU,GACV,SAAU1B,EAAM,gBAAkB,EAClC,MAAOA,EAAM,YACb,SAAW2B,GAAU,QAAQ,IAAIA,CAAK,EACtC,KAAM,OACN,QAAA1B,CAAA,CAAA,QAEA2B,EAAAA,UAAA,CAAU,MAAOrB,EAAAA,OAAO,QAAQ,UAC/B,WAAM,YACR,EACCL,EAAA,CAAY,CAAA,CAAA,EAGba,EAAA,CAAc,EAChB,CAEF"}
1	+ {"version":3,"file":"TestimonialCard.js","sources":["../../../../src/components/testimonial-card/TestimonialCard.tsx"],"sourcesContent":["import React from 'react';\nimport {\n\tAvatar,\n\tAVATAR_BACKGROUND,\n\tAVATAR_TYPES,\n\tSIZE,\n} from '@src/components/avatar';\nimport { StarRating } from '@src/components/star-rating';\nimport {\n\tBodyLarge,\n\tBodyPrimary,\n\tTitleLarge,\n\tTitleMedium,\n\tTitleRegular,\n} from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport FooterArrowIcon from '../../assets/icons/card_footer_arraw.svg';\nimport {\n\tFooterArrow,\n\tFooterStat,\n\tFooterText,\n\tLogo,\n\tTestimonialCardStyle,\n\tTestimonialProfileCard,\n\tTestimonialProfileFooter,\n\tTestimonialProfileInfo,\n\tTestimonialProfileInfo2,\n} from './TestimonialCard.style';\n\nexport interface TestimonialCardProps {\n\ttestimonial: string;\n\tratingValue: number;\n\treviewerName: string;\n\tavatarUrl: string;\n\treviewerCaption?: string;\n\tratingMaxValue?: number;\n\tavatarSize?: SIZE;\n\tfooterText?: string;\n\tfooterStat?: string;\n\twidth?: string;\n\theight?: string;\n\tversion?: 'v1' \| 'v2';\n}\n\nexport const TestimonialCard: React.FC<TestimonialCardProps> = (props) => {\n\tconst version = props.version ?? 'v1';\n\n\tconst getHTMLBody = () => {\n\t\tif (version == 'v2') {\n\t\t\treturn (\n\t\t\t\t<TestimonialProfileInfo2>\n\t\t\t\t\t<Logo src={props.avatarUrl} />\n\t\t\t\t\t<BodyPrimary color={COLORS.content.secondary}>\n\t\t\t\t\t\t{props.reviewerName}\n\t\t\t\t\t</BodyPrimary>\n\t\t\t\t</TestimonialProfileInfo2>\n\t\t\t);\n\t\t}\n\n\t\treturn (\n\t\t\t<TestimonialProfileCard>\n\t\t\t\t<Avatar\n\t\t\t\t\ttype={AVATAR_TYPES.IMAGE}\n\t\t\t\t\tsize={props.avatarSize ?? SIZE.MEDIUM}\n\t\t\t\t\tbackground={AVATAR_BACKGROUND.LIGHT}\n\t\t\t\t\tphotoUrl={props.avatarUrl}\n\t\t\t\t/>\n\t\t\t\t<TestimonialProfileInfo>\n\t\t\t\t\t<TitleMedium color={COLORS.content.secondary}>\n\t\t\t\t\t\t{props.reviewerName}\n\t\t\t\t\t</TitleMedium>\n\t\t\t\t\t<BodyPrimary color={COLORS.content.secondary}>\n\t\t\t\t\t\t{props.reviewerCaption}\n\t\t\t\t\t</BodyPrimary>\n\t\t\t\t</TestimonialProfileInfo>\n\t\t\t</TestimonialProfileCard>\n\t\t);\n\t};\n\n\tconst getFooterHTML = () => {\n\t\tif (version === 'v2') {\n\t\t\treturn (\n\t\t\t\t<TestimonialProfileFooter width={props.width}>\n\t\t\t\t\t<FooterText>\n\t\t\t\t\t\t<TitleRegular color={COLORS.text.white}>\n\t\t\t\t\t\t\t{props?.footerText}\n\t\t\t\t\t\t</TitleRegular>\n\t\t\t\t\t</FooterText>\n\n\t\t\t\t\t<FooterStat>\n\t\t\t\t\t\t<TitleLarge color={COLORS.text.white}>\n\t\t\t\t\t\t\t{props?.footerStat}\n\t\t\t\t\t\t</TitleLarge>\n\t\t\t\t\t</FooterStat>\n\n\t\t\t\t\t<FooterArrow>\n\t\t\t\t\t\t<FooterArrowIcon />\n\t\t\t\t\t</FooterArrow>\n\t\t\t\t</TestimonialProfileFooter>\n\t\t\t);\n\t\t}\n\n\t\treturn null;\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<TestimonialCardStyle\n\t\t\t\tdata-testid=\"testimonial-card\"\n\t\t\t\twidth={props.width}\n\t\t\t\theight={props.height}\n\t\t\t\tversion={version}\n\t\t\t>\n\t\t\t\t<StarRating\n\t\t\t\t\tstarSize={24}\n\t\t\t\t\tmaxValue={props.ratingMaxValue ?? 5}\n\t\t\t\t\tvalue={props.ratingValue}\n\t\t\t\t\tonChange={(stars) => console.log(stars)}\n\t\t\t\t\tmode={'VIEW'}\n\t\t\t\t\tversion={version}\n\t\t\t\t/>\n\t\t\t\t<BodyLarge color={COLORS.content.secondary}>\n\t\t\t\t\t{props.testimonial}\n\t\t\t\t</BodyLarge>\n\t\t\t\t{getHTMLBody()}\n\t\t\t</TestimonialCardStyle>\n\n\t\t\t{getFooterHTML()}\n\t\t</>\n\t);\n};\n"],"names":["TestimonialCard","props","version","getHTMLBody","TestimonialProfileInfo2","jsx","Logo","BodyPrimary","COLORS","TestimonialProfileCard","Avatar","AVATAR_TYPES","SIZE","AVATAR_BACKGROUND","TestimonialProfileInfo","TitleMedium","getFooterHTML","jsxs","TestimonialProfileFooter","FooterText","TitleRegular","FooterStat","TitleLarge","FooterArrow","FooterArrowIcon","Fragment","TestimonialCardStyle","StarRating","stars","BodyLarge"],"mappings":"iZA4CaA,EAAmDC,GAAU,CACzE,MAAMC,EAAUD,EAAM,SAAW,KAE3BE,EAAc,IACfD,GAAW,YAEZE,0BAAA,CACA,SAAA,CAAAC,EAAAA,IAACC,EAAAA,KAAA,CAAK,IAAKL,EAAM,SAAA,CAAW,QAC3BM,EAAAA,YAAA,CAAY,MAAOC,EAAAA,OAAO,QAAQ,UACjC,WAAM,YAAA,CACR,CAAA,EACD,SAKAC,yBAAA,CACA,SAAA,CAAAJ,EAAAA,IAACK,EAAAA,OAAA,CACA,KAAMC,EAAAA,aAAa,MACnB,KAAMV,EAAM,YAAcW,EAAAA,KAAK,OAC/B,WAAYC,EAAAA,kBAAkB,MAC9B,SAAUZ,EAAM,SAAA,CAAA,SAEhBa,EAAAA,uBAAA,CACA,SAAA,CAAAT,MAACU,EAAAA,aAAY,MAAOP,EAAAA,OAAO,QAAQ,UACjC,WAAM,aACR,QACCD,EAAAA,YAAA,CAAY,MAAOC,EAAAA,OAAO,QAAQ,UACjC,WAAM,eAAA,CACR,CAAA,CAAA,CACD,CAAA,EACD,EAIIQ,EAAgB,IACjBd,IAAY,KAEde,EAAAA,KAACC,EAAAA,yBAAA,CAAyB,MAAOjB,EAAM,MACtC,SAAA,CAAAI,EAAAA,IAACc,EAAAA,WAAA,CACA,eAACC,EAAAA,aAAA,CAAa,MAAOZ,EAAAA,OAAO,KAAK,MAC/B,SAAAP,GAAO,UAAA,CACT,CAAA,CACD,EAEAI,EAAAA,IAACgB,EAAAA,WAAA,CACA,SAAAhB,EAAAA,IAACiB,EAAAA,WAAA,CAAW,MAAOd,EAAAA,OAAO,KAAK,MAC7B,SAAAP,GAAO,UAAA,CACT,CAAA,CACD,EAEAI,EAAAA,IAACkB,EAAAA,YAAA,CACA,SAAAlB,EAAAA,IAACmB,EAAAA,QAAA,CAAA,CAAgB,CAAA,CAClB,CAAA,EACD,EAIK,KAGR,OACCP,EAAAA,KAAAQ,WAAA,CACC,SAAA,CAAAR,EAAAA,KAACS,EAAAA,qBAAA,CACA,cAAY,mBACZ,MAAOzB,EAAM,MACb,OAAQA,EAAM,OACd,QAAAC,EAEA,SAAA,CAAAG,EAAAA,IAACsB,EAAAA,WAAA,CACA,SAAU,GACV,SAAU1B,EAAM,gBAAkB,EAClC,MAAOA,EAAM,YACb,SAAW2B,GAAU,QAAQ,IAAIA,CAAK,EACtC,KAAM,OACN,QAAA1B,CAAA,CAAA,QAEA2B,EAAAA,UAAA,CAAU,MAAOrB,EAAAA,OAAO,QAAQ,UAC/B,WAAM,YACR,EACCL,EAAA,CAAY,CAAA,CAAA,EAGba,EAAA,CAAc,EAChB,CAEF"}

package/dist/cjs/components/unsatisfactory-response-list/UnsatisfactoryResponseList.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),p=require("@bikdotai/bik-models/growth/models/bik-store"),T=require("../../assets/icons/cross.svg.js"),U=require("../../assets/icons/info.svg.js"),u=require("date-fns"),o=require("react"),n=require("../../constants/Theme.js"),r=require("../TypographyStyle.js"),A=require("./UnsatisfactoryCountIntentWiseModal.js"),b=require("./UnsatisfactoryResponseList.style.js"),f=require("../states/StateComponent.js"),a=require("../avatar/AvatarHelper.js"),O=require("../avatar/Avatar.js"),q=require("../button/Button.js"),L=h=>{const{storeId:g,appType:i,incorrectMessages:s,onIncorrectMessageBubbleClick:x,setShowIncorrectReplies:c,ChecklistType:I,IntentWiseUnsatisfactoryResponse:S,IntentHeaderTitle:j,redirectToUnsatisfactoryResponse:m,fetchUnsatisfactoryResponseCountIntentWise:R,fetchUnsatisfactoryResponseCount:l}=h,[C,v]=o.useState(""),[d,M]=o.useState(s?.length>0),[w,y]=o.useState(!1);return o.useEffect(()=>{!d&&l&&l().then(t=>{t>0&&M(!0),t===0&&c(!1)})},[]),e.jsx("div",{style:{overflow:"scroll",height:"100%"},children:e.jsxs(b.IncorrectRepliesStyle,{children:[i==p.ApplicationType.MANIFEST&&e.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"8px"},children:[e.jsxs("div",{style:{display:"flex",justifyContent:"space-between",alignItems:"center"},children:[e.jsx(r.TitleRegular,{children:"Unsatisfactory responses"}),e.jsx("div",{style:{cursor:"pointer"},onClick:()=>c(!1),children:e.jsx(T.default,{height:16,width:16,color:n.COLORS.content.primary})})]}),e.jsx(r.BodySecondary,{style:{color:n.COLORS.content.secondary},children:"Spot unsatisfactory replies, dive deeper, and enhance with relevant data for improved responses."})]}),!s?.length&&e.jsx("div",{style:{display:"flex",justifyContent:"center",alignItems:"center",height:"100%"},children:e.jsx(f.StateComponent,{states:f.StateInterface.WARNING,heading:"No unsatisfactory responses",subline:"As of now, all responses are correct",isButtonEnabled:!1,width:0,size:a.SIZE.SMALL,icon:e.jsx(O.Avatar,{type:a.AVATAR_TYPES.ICON,size:a.SIZE.MEDIUM,background:a.AVATAR_BACKGROUND.LIGHT,icon:()=>e.jsx(U.default,{width:16,height:16,color:n.COLORS.content.warning})})})}),!!s?.length&&e.jsxs(e.Fragment,{children:[i==p.ApplicationType.MANIFEST&&e.jsx("div",{style:{display:"flex",width:"100%",justifyContent:s?.length?"flex-start":"center"},children:e.jsx(q.Button,{buttonText:"Fix all unsatisfactory responses",buttonType:"tertiary",size:"small",onClick:()=>{y(!0)},disabled:!d})}),e.jsx(A.UnsatisfactoryCountIntentWiseModal,{storeId:g,setShowUnsatisfactoryResponseModal:y,showUnsatisfactoryResponseModal:w,ChecklistType:I,UnsatisfactoryResponseIntentList:S,IntentHeaderTitle:j,fetchUnsatisfactoryResponseCountIntentWise:R,viewIntentWiseUnsatisfactoryResponse:m}),s&&s?.length>0&&e.jsx("div",{className:"wrapper",children:s.map((t,N)=>e.jsxs("div",{className:"bubble",onClick:()=>{x(t.messageId),v(t.messageId)},style:C===t.messageId?{backgroundColor:n.COLORS.surface.hovered}:{},children:[e.jsx(r.BodySecondary,{style:{color:n.COLORS.content.primary},children:t.message}),e.jsx("div",{children:e.jsxs(r.Caption,{style:{color:n.COLORS.content.secondary},children:[u.format(new Date(t?.date),"hh:mm a")," |"," ",u.format(new Date(t?.date),"dd/MM/yyyy")]})})]},t.messageId))})]})]})})};exports.UnsatisfactoryResponseList=L;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),p=require("@bikdotai/bik-models/growth/models/bik-store"),T=require("../../assets/icons/cross.svg.js"),U=require("../../assets/icons/info.svg.js"),u=require("date-fns"),o=require("react"),n=require("../../constants/Theme.js"),r=require("../TypographyStyle.js"),b=require("./UnsatisfactoryCountIntentWiseModal.js"),A=require("./UnsatisfactoryResponseList.style.js"),f=require("../states/StateComponent.js"),a=require("../avatar/AvatarHelper.js"),O=require("../avatar/Avatar.js"),q=require("../button/Button.js"),L=h=>{const{storeId:g,appType:i,incorrectMessages:s,onIncorrectMessageBubbleClick:x,setShowIncorrectReplies:c,ChecklistType:I,IntentWiseUnsatisfactoryResponse:S,IntentHeaderTitle:m,redirectToUnsatisfactoryResponse:j,fetchUnsatisfactoryResponseCountIntentWise:R,fetchUnsatisfactoryResponseCount:l}=h,[C,v]=o.useState(""),[d,M]=o.useState(s?.length>0),[w,y]=o.useState(!1);return o.useEffect(()=>{!d&&l&&l().then(t=>{t>0&&M(!0),t===0&&c(!1)})},[]),e.jsx("div",{style:{overflow:"scroll",height:"100%"},children:e.jsxs(A.IncorrectRepliesStyle,{children:[i==p.ApplicationType.MANIFEST&&e.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"8px"},children:[e.jsxs("div",{style:{display:"flex",justifyContent:"space-between",alignItems:"center"},children:[e.jsx(r.TitleRegular,{children:"Unsatisfactory responses"}),e.jsx("div",{"data-testid":"manifest-close-button",style:{cursor:"pointer"},onClick:()=>c(!1),children:e.jsx(T.default,{height:16,width:16,color:n.COLORS.content.primary})})]}),e.jsx(r.BodySecondary,{style:{color:n.COLORS.content.secondary},children:"Spot unsatisfactory replies, dive deeper, and enhance with relevant data for improved responses."})]}),!s?.length&&e.jsx("div",{style:{display:"flex",justifyContent:"center",alignItems:"center",height:"100%"},children:e.jsx(f.StateComponent,{states:f.StateInterface.WARNING,heading:"No unsatisfactory responses",subline:"As of now, all responses are correct",isButtonEnabled:!1,width:0,size:a.SIZE.SMALL,icon:e.jsx(O.Avatar,{type:a.AVATAR_TYPES.ICON,size:a.SIZE.MEDIUM,background:a.AVATAR_BACKGROUND.LIGHT,icon:()=>e.jsx(U.default,{width:16,height:16,color:n.COLORS.content.warning})})})}),!!s?.length&&e.jsxs(e.Fragment,{children:[i==p.ApplicationType.MANIFEST&&e.jsx("div",{style:{display:"flex",width:"100%",justifyContent:s?.length?"flex-start":"center"},children:e.jsx(q.Button,{buttonText:"Fix all unsatisfactory responses",buttonType:"tertiary",size:"small",onClick:()=>{y(!0)},disabled:!d})}),e.jsx(b.UnsatisfactoryCountIntentWiseModal,{storeId:g,setShowUnsatisfactoryResponseModal:y,showUnsatisfactoryResponseModal:w,ChecklistType:I,UnsatisfactoryResponseIntentList:S,IntentHeaderTitle:m,fetchUnsatisfactoryResponseCountIntentWise:R,viewIntentWiseUnsatisfactoryResponse:j}),s&&s?.length>0&&e.jsx("div",{className:"wrapper",children:s.map((t,N)=>e.jsxs("div",{className:"bubble",onClick:()=>{x(t.messageId),v(t.messageId)},style:C===t.messageId?{backgroundColor:n.COLORS.surface.hovered}:{},children:[e.jsx(r.BodySecondary,{style:{color:n.COLORS.content.primary},children:t.message}),e.jsx("div",{children:e.jsxs(r.Caption,{style:{color:n.COLORS.content.secondary},children:[u.format(new Date(t?.date),"hh:mm a")," |"," ",u.format(new Date(t?.date),"dd/MM/yyyy")]})})]},t.messageId))})]})]})})};exports.UnsatisfactoryResponseList=L;
 //# sourceMappingURL=UnsatisfactoryResponseList.js.map

package/dist/cjs/components/unsatisfactory-response-list/UnsatisfactoryResponseList.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"UnsatisfactoryResponseList.js","sources":["../../../../src/components/unsatisfactory-response-list/UnsatisfactoryResponseList.tsx"],"sourcesContent":["import { ApplicationType } from '@bikdotai/bik-models/growth/models/bik-store';\nimport CrossIcon from '@src/assets/icons/cross.svg';\nimport InfoIcon from '@src/assets/icons/info.svg';\nimport { format } from 'date-fns';\nimport React, { useEffect, useState } from 'react';\nimport { COLORS } from '@src/constants/Theme';\nimport { Avatar, AVATAR_BACKGROUND, AVATAR_TYPES, SIZE } from '../avatar';\nimport { Button } from '../button';\nimport { StateComponent, StateInterface } from '../states';\nimport { BodySecondary, Caption, TitleRegular } from '../TypographyStyle';\nimport { UnsatisfactoryCountIntentWiseModal } from './UnsatisfactoryCountIntentWiseModal';\nimport { IncorrectRepliesStyle } from './UnsatisfactoryResponseList.style';\n\nexport interface UnsatisfactoryResponseListProps {\n\tstoreId?: string;\n\tappType: ApplicationType;\n\tincorrectMessages: any;\n\tonIncorrectMessageBubbleClick: (messageId: string) => void;\n\tsetShowIncorrectReplies: (show: boolean) => void;\n\n\t// ui\n\tChecklistType: Record<string, string>;\n\tIntentHeaderTitle?: Record<string, string>;\n\tIntentWiseUnsatisfactoryResponse?: string[];\n\n\tredirectToUnsatisfactoryResponse?: (intent: string) => void;\n\n\t// data fetch\n\tfetchUnsatisfactoryResponseCountIntentWise?: () => Promise<{\n\t\t[keys in string]?: number;\n\t}>;\n\tfetchUnsatisfactoryResponseCount?: () => Promise<number>;\n}\n\nexport const UnsatisfactoryResponseList: React.FC<\n\tUnsatisfactoryResponseListProps\n> = (props: UnsatisfactoryResponseListProps) => {\n\tconst {\n\t\tstoreId,\n\t\tappType,\n\t\tincorrectMessages,\n\t\tonIncorrectMessageBubbleClick,\n\t\tsetShowIncorrectReplies,\n\t\tChecklistType,\n\t\tIntentWiseUnsatisfactoryResponse,\n\t\tIntentHeaderTitle,\n\t\tredirectToUnsatisfactoryResponse,\n\t\tfetchUnsatisfactoryResponseCountIntentWise,\n\t\tfetchUnsatisfactoryResponseCount,\n\t} = props;\n\tconst [messageId, setMessageId] = useState<string>('');\n\tconst [hasUnsatisfactoryMessage, setHasUnsatisfactoryMessage] =\n\t\tuseState<boolean>(incorrectMessages?.length > 0);\n\tconst [showIncorrectDataModal, setShowIncorrectDataModal] =\n\t\tuseState<boolean>(false);\n\n\tuseEffect(() => {\n\t\tif (!hasUnsatisfactoryMessage && fetchUnsatisfactoryResponseCount) {\n\t\t\tfetchUnsatisfactoryResponseCount().then((response: number) => {\n\t\t\t\tif (response > 0) {\n\t\t\t\t\tsetHasUnsatisfactoryMessage(true);\n\t\t\t\t}\n\t\t\t\tif (response === 0) {\n\t\t\t\t\tsetShowIncorrectReplies(false);\n\t\t\t\t}\n\t\t\t});\n\t\t}\n\t}, []);\n\n\treturn (\n\t\t<div\n\t\t\tstyle={{\n\t\t\t\toverflow: 'scroll',\n\t\t\t\theight: '100%',\n\t\t\t}}\n\t\t>\n\t\t\t<IncorrectRepliesStyle>\n\t\t\t\t{appType == ApplicationType.MANIFEST && (\n\t\t\t\t\t<div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t\t\tjustifyContent: 'space-between',\n\t\t\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<TitleRegular>Unsatisfactory responses</TitleRegular>\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tstyle={{ cursor: 'pointer' }}\n\t\t\t\t\t\t\t\tonClick={() => setShowIncorrectReplies(false)}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<CrossIcon\n\t\t\t\t\t\t\t\t\theight={16}\n\t\t\t\t\t\t\t\t\twidth={16}\n\t\t\t\t\t\t\t\t\tcolor={COLORS.content.primary}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<BodySecondary style={{ color: COLORS.content.secondary }}>\n\t\t\t\t\t\t\tSpot unsatisfactory replies, dive deeper, and enhance with\n\t\t\t\t\t\t\trelevant data for improved responses.\n\t\t\t\t\t\t</BodySecondary>\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t\t{!incorrectMessages?.length && (\n\t\t\t\t\t<div\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t\tjustifyContent: 'center',\n\t\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t<StateComponent\n\t\t\t\t\t\t\tstates={StateInterface.WARNING}\n\t\t\t\t\t\t\theading={'No unsatisfactory responses'}\n\t\t\t\t\t\t\tsubline={'As of now, all responses are correct'}\n\t\t\t\t\t\t\tisButtonEnabled={false}\n\t\t\t\t\t\t\twidth={0}\n\t\t\t\t\t\t\tsize={SIZE.SMALL}\n\t\t\t\t\t\t\ticon={\n\t\t\t\t\t\t\t\t<Avatar\n\t\t\t\t\t\t\t\t\ttype={AVATAR_TYPES.ICON}\n\t\t\t\t\t\t\t\t\tsize={SIZE.MEDIUM}\n\t\t\t\t\t\t\t\t\tbackground={AVATAR_BACKGROUND.LIGHT}\n\t\t\t\t\t\t\t\t\ticon={() => (\n\t\t\t\t\t\t\t\t\t\t<InfoIcon\n\t\t\t\t\t\t\t\t\t\t\twidth={16}\n\t\t\t\t\t\t\t\t\t\t\theight={16}\n\t\t\t\t\t\t\t\t\t\t\tcolor={COLORS.content.warning}\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t\t{!!incorrectMessages?.length && (\n\t\t\t\t\t<>\n\t\t\t\t\t\t{appType == ApplicationType.MANIFEST && (\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t\t\t\twidth: '100%',\n\t\t\t\t\t\t\t\t\tjustifyContent: incorrectMessages?.length\n\t\t\t\t\t\t\t\t\t\t? 'flex-start'\n\t\t\t\t\t\t\t\t\t\t: 'center',\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\tbuttonText={'Fix all unsatisfactory responses'}\n\t\t\t\t\t\t\t\t\tbuttonType={'tertiary'}\n\t\t\t\t\t\t\t\t\tsize={'small'}\n\t\t\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\t\t\tsetShowIncorrectDataModal(true);\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\tdisabled={!hasUnsatisfactoryMessage}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t)}\n\n\t\t\t\t\t\t<UnsatisfactoryCountIntentWiseModal\n\t\t\t\t\t\t\tstoreId={storeId}\n\t\t\t\t\t\t\tsetShowUnsatisfactoryResponseModal={setShowIncorrectDataModal}\n\t\t\t\t\t\t\tshowUnsatisfactoryResponseModal={showIncorrectDataModal}\n\t\t\t\t\t\t\tChecklistType={ChecklistType}\n\t\t\t\t\t\t\tUnsatisfactoryResponseIntentList={\n\t\t\t\t\t\t\t\tIntentWiseUnsatisfactoryResponse\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tIntentHeaderTitle={IntentHeaderTitle}\n\t\t\t\t\t\t\tfetchUnsatisfactoryResponseCountIntentWise={\n\t\t\t\t\t\t\t\tfetchUnsatisfactoryResponseCountIntentWise\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tviewIntentWiseUnsatisfactoryResponse={\n\t\t\t\t\t\t\t\tredirectToUnsatisfactoryResponse\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t{incorrectMessages && incorrectMessages?.length > 0 && (\n\t\t\t\t\t\t\t<div className={'wrapper'}>\n\t\t\t\t\t\t\t\t{incorrectMessages.map((each, index) => (\n\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\tkey={each.messageId}\n\t\t\t\t\t\t\t\t\t\tclassName={'bubble'}\n\t\t\t\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\t\t\t\tonIncorrectMessageBubbleClick(each.messageId);\n\t\t\t\t\t\t\t\t\t\t\tsetMessageId(each.messageId);\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\tstyle={\n\t\t\t\t\t\t\t\t\t\t\tmessageId === each.messageId\n\t\t\t\t\t\t\t\t\t\t\t\t? { backgroundColor: COLORS.surface.hovered }\n\t\t\t\t\t\t\t\t\t\t\t\t: {}\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<BodySecondary style={{ color: COLORS.content.primary }}>\n\t\t\t\t\t\t\t\t\t\t\t{each.message}\n\t\t\t\t\t\t\t\t\t\t</BodySecondary>\n\t\t\t\t\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t\t\t\t\t<Caption style={{ color: COLORS.content.secondary }}>\n\t\t\t\t\t\t\t\t\t\t\t\t{format(new Date(each?.date), 'hh:mm a')} \|{' '}\n\t\t\t\t\t\t\t\t\t\t\t\t{format(new Date(each?.date), 'dd/MM/yyyy')}\n\t\t\t\t\t\t\t\t\t\t\t</Caption>\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</>\n\t\t\t\t)}\n\t\t\t</IncorrectRepliesStyle>\n\t\t</div>\n\t);\n};\n"],"names":["UnsatisfactoryResponseList","props","storeId","appType","incorrectMessages","onIncorrectMessageBubbleClick","setShowIncorrectReplies","ChecklistType","IntentWiseUnsatisfactoryResponse","IntentHeaderTitle","redirectToUnsatisfactoryResponse","fetchUnsatisfactoryResponseCountIntentWise","fetchUnsatisfactoryResponseCount","messageId","setMessageId","useState","hasUnsatisfactoryMessage","setHasUnsatisfactoryMessage","showIncorrectDataModal","setShowIncorrectDataModal","useEffect","response","jsx","IncorrectRepliesStyle","ApplicationType","jsxs","TitleRegular","CrossIcon","COLORS","BodySecondary","StateComponent","StateInterface","SIZE","Avatar","AVATAR_TYPES","AVATAR_BACKGROUND","InfoIcon","Fragment","Button","UnsatisfactoryCountIntentWiseModal","each","index","Caption","format"],"mappings":"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"}
1	+ {"version":3,"file":"UnsatisfactoryResponseList.js","sources":["../../../../src/components/unsatisfactory-response-list/UnsatisfactoryResponseList.tsx"],"sourcesContent":["import { ApplicationType } from '@bikdotai/bik-models/growth/models/bik-store';\nimport CrossIcon from '@src/assets/icons/cross.svg';\nimport InfoIcon from '@src/assets/icons/info.svg';\nimport { format } from 'date-fns';\nimport React, { useEffect, useState } from 'react';\nimport { COLORS } from '@src/constants/Theme';\nimport { Avatar, AVATAR_BACKGROUND, AVATAR_TYPES, SIZE } from '../avatar';\nimport { Button } from '../button';\nimport { StateComponent, StateInterface } from '../states';\nimport { BodySecondary, Caption, TitleRegular } from '../TypographyStyle';\nimport { UnsatisfactoryCountIntentWiseModal } from './UnsatisfactoryCountIntentWiseModal';\nimport { IncorrectRepliesStyle } from './UnsatisfactoryResponseList.style';\n\nexport interface UnsatisfactoryResponseListProps {\n\tstoreId?: string;\n\tappType: ApplicationType;\n\tincorrectMessages: any;\n\tonIncorrectMessageBubbleClick: (messageId: string) => void;\n\tsetShowIncorrectReplies: (show: boolean) => void;\n\n\t// ui\n\tChecklistType: Record<string, string>;\n\tIntentHeaderTitle?: Record<string, string>;\n\tIntentWiseUnsatisfactoryResponse?: string[];\n\n\tredirectToUnsatisfactoryResponse?: (intent: string) => void;\n\n\t// data fetch\n\tfetchUnsatisfactoryResponseCountIntentWise?: () => Promise<{\n\t\t[keys in string]?: number;\n\t}>;\n\tfetchUnsatisfactoryResponseCount?: () => Promise<number>;\n}\n\nexport const UnsatisfactoryResponseList: React.FC<\n\tUnsatisfactoryResponseListProps\n> = (props: UnsatisfactoryResponseListProps) => {\n\tconst {\n\t\tstoreId,\n\t\tappType,\n\t\tincorrectMessages,\n\t\tonIncorrectMessageBubbleClick,\n\t\tsetShowIncorrectReplies,\n\t\tChecklistType,\n\t\tIntentWiseUnsatisfactoryResponse,\n\t\tIntentHeaderTitle,\n\t\tredirectToUnsatisfactoryResponse,\n\t\tfetchUnsatisfactoryResponseCountIntentWise,\n\t\tfetchUnsatisfactoryResponseCount,\n\t} = props;\n\tconst [messageId, setMessageId] = useState<string>('');\n\tconst [hasUnsatisfactoryMessage, setHasUnsatisfactoryMessage] =\n\t\tuseState<boolean>(incorrectMessages?.length > 0);\n\tconst [showIncorrectDataModal, setShowIncorrectDataModal] =\n\t\tuseState<boolean>(false);\n\n\tuseEffect(() => {\n\t\tif (!hasUnsatisfactoryMessage && fetchUnsatisfactoryResponseCount) {\n\t\t\tfetchUnsatisfactoryResponseCount().then((response: number) => {\n\t\t\t\tif (response > 0) {\n\t\t\t\t\tsetHasUnsatisfactoryMessage(true);\n\t\t\t\t}\n\t\t\t\tif (response === 0) {\n\t\t\t\t\tsetShowIncorrectReplies(false);\n\t\t\t\t}\n\t\t\t});\n\t\t}\n\t}, []);\n\n\treturn (\n\t\t<div\n\t\t\tstyle={{\n\t\t\t\toverflow: 'scroll',\n\t\t\t\theight: '100%',\n\t\t\t}}\n\t\t>\n\t\t\t<IncorrectRepliesStyle>\n\t\t\t\t{appType == ApplicationType.MANIFEST && (\n\t\t\t\t\t<div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t\t\tjustifyContent: 'space-between',\n\t\t\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<TitleRegular>Unsatisfactory responses</TitleRegular>\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tdata-testid=\"manifest-close-button\"\n\t\t\t\t\t\t\t\tstyle={{ cursor: 'pointer' }}\n\t\t\t\t\t\t\t\tonClick={() => setShowIncorrectReplies(false)}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<CrossIcon\n\t\t\t\t\t\t\t\t\theight={16}\n\t\t\t\t\t\t\t\t\twidth={16}\n\t\t\t\t\t\t\t\t\tcolor={COLORS.content.primary}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<BodySecondary style={{ color: COLORS.content.secondary }}>\n\t\t\t\t\t\t\tSpot unsatisfactory replies, dive deeper, and enhance with\n\t\t\t\t\t\t\trelevant data for improved responses.\n\t\t\t\t\t\t</BodySecondary>\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t\t{!incorrectMessages?.length && (\n\t\t\t\t\t<div\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t\tjustifyContent: 'center',\n\t\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t<StateComponent\n\t\t\t\t\t\t\tstates={StateInterface.WARNING}\n\t\t\t\t\t\t\theading={'No unsatisfactory responses'}\n\t\t\t\t\t\t\tsubline={'As of now, all responses are correct'}\n\t\t\t\t\t\t\tisButtonEnabled={false}\n\t\t\t\t\t\t\twidth={0}\n\t\t\t\t\t\t\tsize={SIZE.SMALL}\n\t\t\t\t\t\t\ticon={\n\t\t\t\t\t\t\t\t<Avatar\n\t\t\t\t\t\t\t\t\ttype={AVATAR_TYPES.ICON}\n\t\t\t\t\t\t\t\t\tsize={SIZE.MEDIUM}\n\t\t\t\t\t\t\t\t\tbackground={AVATAR_BACKGROUND.LIGHT}\n\t\t\t\t\t\t\t\t\ticon={() => (\n\t\t\t\t\t\t\t\t\t\t<InfoIcon\n\t\t\t\t\t\t\t\t\t\t\twidth={16}\n\t\t\t\t\t\t\t\t\t\t\theight={16}\n\t\t\t\t\t\t\t\t\t\t\tcolor={COLORS.content.warning}\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t\t{!!incorrectMessages?.length && (\n\t\t\t\t\t<>\n\t\t\t\t\t\t{appType == ApplicationType.MANIFEST && (\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t\t\t\twidth: '100%',\n\t\t\t\t\t\t\t\t\tjustifyContent: incorrectMessages?.length\n\t\t\t\t\t\t\t\t\t\t? 'flex-start'\n\t\t\t\t\t\t\t\t\t\t: 'center',\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\tbuttonText={'Fix all unsatisfactory responses'}\n\t\t\t\t\t\t\t\t\tbuttonType={'tertiary'}\n\t\t\t\t\t\t\t\t\tsize={'small'}\n\t\t\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\t\t\tsetShowIncorrectDataModal(true);\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\tdisabled={!hasUnsatisfactoryMessage}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t)}\n\n\t\t\t\t\t\t<UnsatisfactoryCountIntentWiseModal\n\t\t\t\t\t\t\tstoreId={storeId}\n\t\t\t\t\t\t\tsetShowUnsatisfactoryResponseModal={setShowIncorrectDataModal}\n\t\t\t\t\t\t\tshowUnsatisfactoryResponseModal={showIncorrectDataModal}\n\t\t\t\t\t\t\tChecklistType={ChecklistType}\n\t\t\t\t\t\t\tUnsatisfactoryResponseIntentList={\n\t\t\t\t\t\t\t\tIntentWiseUnsatisfactoryResponse\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tIntentHeaderTitle={IntentHeaderTitle}\n\t\t\t\t\t\t\tfetchUnsatisfactoryResponseCountIntentWise={\n\t\t\t\t\t\t\t\tfetchUnsatisfactoryResponseCountIntentWise\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tviewIntentWiseUnsatisfactoryResponse={\n\t\t\t\t\t\t\t\tredirectToUnsatisfactoryResponse\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t{incorrectMessages && incorrectMessages?.length > 0 && (\n\t\t\t\t\t\t\t<div className={'wrapper'}>\n\t\t\t\t\t\t\t\t{incorrectMessages.map((each, index) => (\n\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\tkey={each.messageId}\n\t\t\t\t\t\t\t\t\t\tclassName={'bubble'}\n\t\t\t\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\t\t\t\tonIncorrectMessageBubbleClick(each.messageId);\n\t\t\t\t\t\t\t\t\t\t\tsetMessageId(each.messageId);\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\tstyle={\n\t\t\t\t\t\t\t\t\t\t\tmessageId === each.messageId\n\t\t\t\t\t\t\t\t\t\t\t\t? { backgroundColor: COLORS.surface.hovered }\n\t\t\t\t\t\t\t\t\t\t\t\t: {}\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<BodySecondary style={{ color: COLORS.content.primary }}>\n\t\t\t\t\t\t\t\t\t\t\t{each.message}\n\t\t\t\t\t\t\t\t\t\t</BodySecondary>\n\t\t\t\t\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t\t\t\t\t<Caption style={{ color: COLORS.content.secondary }}>\n\t\t\t\t\t\t\t\t\t\t\t\t{format(new Date(each?.date), 'hh:mm a')} \|{' '}\n\t\t\t\t\t\t\t\t\t\t\t\t{format(new Date(each?.date), 'dd/MM/yyyy')}\n\t\t\t\t\t\t\t\t\t\t\t</Caption>\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</>\n\t\t\t\t)}\n\t\t\t</IncorrectRepliesStyle>\n\t\t</div>\n\t);\n};\n"],"names":["UnsatisfactoryResponseList","props","storeId","appType","incorrectMessages","onIncorrectMessageBubbleClick","setShowIncorrectReplies","ChecklistType","IntentWiseUnsatisfactoryResponse","IntentHeaderTitle","redirectToUnsatisfactoryResponse","fetchUnsatisfactoryResponseCountIntentWise","fetchUnsatisfactoryResponseCount","messageId","setMessageId","useState","hasUnsatisfactoryMessage","setHasUnsatisfactoryMessage","showIncorrectDataModal","setShowIncorrectDataModal","useEffect","response","jsx","IncorrectRepliesStyle","ApplicationType","jsxs","TitleRegular","CrossIcon","COLORS","BodySecondary","StateComponent","StateInterface","SIZE","Avatar","AVATAR_TYPES","AVATAR_BACKGROUND","InfoIcon","Fragment","Button","UnsatisfactoryCountIntentWiseModal","each","index","Caption","format"],"mappings":"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"}

package/dist/esm/components/avatar/Avatar.d.ts CHANGED Viewed

@@ -45,6 +45,7 @@ export declare const enum MESSAGE_CHANNELS {
     SMTP = "smtp",
     FACEBOOK_CATALOG = "facebook-catalog",
     TASKS = "tasks",
-    BIK_LIVECHAT = "livechat"
+    BIK_LIVECHAT = "livechat",
+    VOICE = "voice"
 }
 export declare const Avatar: React.FC<AvatarProps>;

package/dist/esm/components/avatar/Avatar.js CHANGED Viewed

@@ -1,16 +1,17 @@
 import { jsxs as m, jsx as e } from "react/jsx-runtime";
 import { useState as R } from "react";
-import { TitleMedium as k, TitleSmall as A, SubHeading as w, BodyTiny as x } from "../TypographyStyle.js";
+import { TitleMedium as k, TitleSmall as w, SubHeading as A, BodyTiny as O } from "../TypographyStyle.js";
 import { COLORS as i } from "../../constants/Theme.js";
-import O from "../../assets/icons/bik_livechat.svg.js";
+import x from "../../assets/icons/bik_livechat.svg.js";
 import u from "../../assets/icons/email-channel.svg.js";
 import d from "../../assets/icons/facebook_channel.svg.js";
 import z from "../../assets/icons/gmail.svg.js";
 import C from "../../assets/icons/instagram-channel.svg.js";
-import L from "../../assets/icons/task.svg.js";
+import P from "../../assets/icons/task.svg.js";
 import U from "../../assets/icons/whatsapp_color.svg.js";
-import { AvatarStyle as B } from "./Avatar.styled.js";
-import { SIZE as a, AVATAR_TYPES as r, AVATAR_BACKGROUND as s, AVATAR_SIZE_MAP as l } from "./AvatarHelper.js";
+import { AvatarStyle as B, PhoneIconWrapper as L } from "./Avatar.styled.js";
+import { SIZE as a, AVATAR_TYPES as r, AVATAR_BACKGROUND as s, AVATAR_SIZE_MAP as h } from "./AvatarHelper.js";
+import F from "../../icons/Informational/Communication/Phone.js";
 const n = {
   [a.EXTRA_SMALL]: 10,
   [a.SMALL]: 16,
@@ -22,32 +23,32 @@ const n = {
   [s.DARK]: i.surface.standard,
   [s.BRAND]: i.background.inverseLight
 };
-var P = /* @__PURE__ */ ((t) => (t.INSTAGRAM = "instagram", t.MESSENGER = "messenger", t.WHATSAPP = "whatsapp", t.GMAIL = "gmail", t.LIVECHAT = "livechat", t.GOOGLE_BUSINESS_CHAT = "gbm", t.SHOPIFY = "shopify", t.FACEBOOK = "facebook", t.EMAIL = "email", t.SMTP = "smtp", t.FACEBOOK_CATALOG = "facebook-catalog", t.TASKS = "tasks", t.BIK_LIVECHAT = "livechat", t))(P || {});
-const J = (t) => {
-  const [h, f] = R(!1), g = () => {
-    const o = (t.name || "").split(".").join(" ").split(" ").map((v) => v.charAt(0).toUpperCase()).slice(0, 2).join(""), c = b[t.background];
-    return t.size === a.LARGE ? /* @__PURE__ */ e(k, { style: { color: c }, children: o }) : t.size === a.MEDIUM ? /* @__PURE__ */ e(A, { style: { color: c }, children: o }) : t.size === a.SMALL ? /* @__PURE__ */ e(w, { style: { color: c }, children: o }) : /* @__PURE__ */ e(x, { style: { color: c, fontSize: "6.667px", lineHeight: "8px" }, children: o });
-  }, I = () => t.useNameFallback && (!t.photoUrl || h) && t.name ? /* @__PURE__ */ e("div", { children: g() }) : t.useNameFallback && t.photoUrl && !h ? /* @__PURE__ */ e(
+var V = /* @__PURE__ */ ((t) => (t.INSTAGRAM = "instagram", t.MESSENGER = "messenger", t.WHATSAPP = "whatsapp", t.GMAIL = "gmail", t.LIVECHAT = "livechat", t.GOOGLE_BUSINESS_CHAT = "gbm", t.SHOPIFY = "shopify", t.FACEBOOK = "facebook", t.EMAIL = "email", t.SMTP = "smtp", t.FACEBOOK_CATALOG = "facebook-catalog", t.TASKS = "tasks", t.BIK_LIVECHAT = "livechat", t.VOICE = "voice", t))(V || {});
+const H = (t) => {
+  const [l, I] = R(!1), g = () => {
+    const o = (t.name || "").split(".").join(" ").split(" ").map((T) => T.charAt(0).toUpperCase()).slice(0, 2).join(""), c = b[t.background];
+    return t.size === a.LARGE ? /* @__PURE__ */ e(k, { style: { color: c }, children: o }) : t.size === a.MEDIUM ? /* @__PURE__ */ e(w, { style: { color: c }, children: o }) : t.size === a.SMALL ? /* @__PURE__ */ e(A, { style: { color: c }, children: o }) : /* @__PURE__ */ e(O, { style: { color: c, fontSize: "6.667px", lineHeight: "8px" }, children: o });
+  }, f = () => t.useNameFallback && (!t.photoUrl || l) && t.name ? /* @__PURE__ */ e("div", { children: g() }) : t.useNameFallback && t.photoUrl && !l ? /* @__PURE__ */ e(
     "img",
     {
       alt: "",
-      width: l[t.size],
-      height: l[t.size],
+      width: h[t.size],
+      height: h[t.size],
       style: {
         borderRadius: t?.borderRadius || "50%",
         objectFit: "contain"
       },
       src: t.photoUrl,
       onError: () => {
-        f(!0);
+        I(!0);
       }
     }
   ) : /* @__PURE__ */ e(
     "img",
     {
       alt: "",
-      width: l[t.size],
-      height: l[t.size],
+      width: h[t.size],
+      height: h[t.size],
       style: {
         borderRadius: t?.borderRadius || "50%",
         objectFit: "contain"
@@ -73,11 +74,20 @@ const J = (t) => {
       case "gmail":
         return /* @__PURE__ */ e(z, { width: 11, height: 11 });
       case "tasks":
-        return /* @__PURE__ */ e(L, { width: 11, height: 11 });
+        return /* @__PURE__ */ e(P, { width: 11, height: 11 });
       case "livechat":
-        return /* @__PURE__ */ e(O, { width: 11, height: 11 });
+        return /* @__PURE__ */ e(x, { width: 11, height: 11 });
+      case "voice":
+        return /* @__PURE__ */ e(L, { children: /* @__PURE__ */ e(
+          F,
+          {
+            width: 8,
+            height: 8,
+            color: i.content.secondaryInverse
+          }
+        ) });
     }
-  }, T = () => t.status ? /* @__PURE__ */ e(
+  }, v = () => t.status ? /* @__PURE__ */ e(
     "div",
     {
       style: {
@@ -98,11 +108,11 @@ const J = (t) => {
         /* @__PURE__ */ m(
           B,
           {
-            type: t.type === r.IMAGE && (h || !t.photoUrl) && t.useNameFallback && t.name ? r.INITIALS : t.type,
+            type: t.type === r.IMAGE && (l || !t.photoUrl) && t.useNameFallback && t.name ? r.INITIALS : t.type,
             size: t.size,
             background: t.background,
             children: [
-              t.type === r.IMAGE && I(),
+              t.type === r.IMAGE && f(),
               t.type === r.INITIALS && /* @__PURE__ */ e("div", { children: g() }),
               t.type === r.ICON && t.icon && /* @__PURE__ */ e(
                 t.icon,
@@ -150,7 +160,7 @@ const J = (t) => {
               backgroundColor: i.surface.standard,
               alignItems: "center"
             },
-            children: T()
+            children: v()
           }
         )
       ]
@@ -159,8 +169,8 @@ const J = (t) => {
 };
 export {
   n as AVATAR_SIZE_VS_ICON_SIZE_MAP,
-  J as Avatar,
+  H as Avatar,
   b as BACKGROUND_VS_TEXT_COLOR_MAP,
-  P as MESSAGE_CHANNELS
+  V as MESSAGE_CHANNELS
 };
 //# sourceMappingURL=Avatar.js.map

package/dist/esm/components/avatar/Avatar.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Avatar.js","sources":["../../../../src/components/avatar/Avatar.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport {\n\tBodyTiny,\n\tSubHeading,\n\tTitleMedium,\n\tTitleSmall,\n} from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport BikLivechatIcon from '../../assets/icons/bik_livechat.svg';\nimport EmailIcon from '../../assets/icons/email-channel.svg';\nimport FacebookIcon from '../../assets/icons/facebook_channel.svg';\nimport GmailIcon from '../../assets/icons/gmail.svg';\nimport InstagramIcon from '../../assets/icons/instagram-channel.svg';\nimport TaskIcon from '../../assets/icons/task.svg';\nimport WhatsappIcon from '../../assets/icons/whatsapp_color.svg';\nimport { AvatarStyle } from './Avatar.styled';\nimport {\n\tAVATAR_BACKGROUND,\n\tAVATAR_SIZE_MAP,\n\tAVATAR_TYPES,\n\tSIZE,\n} from './AvatarHelper';\n\nexport const AVATAR_SIZE_VS_ICON_SIZE_MAP = {\n\t[SIZE.EXTRA_SMALL]: 10,\n\t[SIZE.SMALL]: 16,\n\t[SIZE.MEDIUM]: 20,\n\t[SIZE.LARGE]: 32,\n};\n\nexport const BACKGROUND_VS_TEXT_COLOR_MAP = {\n\t[AVATAR_BACKGROUND.LIGHT]: COLORS.content.secondary,\n\t[AVATAR_BACKGROUND.WHITE]: COLORS.content.secondary,\n\t[AVATAR_BACKGROUND.DARK]: COLORS.surface.standard,\n\t[AVATAR_BACKGROUND.BRAND]: COLORS.background.inverseLight,\n};\n\nexport type AvatarProps = {\n\ttype: AVATAR_TYPES;\n\tsize: SIZE;\n\tbackground: AVATAR_BACKGROUND;\n\tname?: string;\n\tphotoUrl?: string;\n\ticon?: React.FC<{ width: number; height: number; color: string }>;\n\tuseNameFallback?: boolean;\n\tchannelName?: MESSAGE_CHANNELS;\n\tborderRadius?: string;\n\tinboxSettings?: {\n\t\tisSelected: boolean;\n\t\tisComments: boolean;\n\t};\n\tstatus?: 'ONLINE' \| 'OFFLINE' \| 'AWAY';\n};\n\nexport const enum MESSAGE_CHANNELS {\n\tINSTAGRAM = 'instagram',\n\tMESSENGER = 'messenger',\n\tWHATSAPP = 'whatsapp',\n\tGMAIL = 'gmail',\n\tLIVECHAT = 'livechat',\n\tGOOGLE_BUSINESS_CHAT = 'gbm',\n\tSHOPIFY = 'shopify',\n\tFACEBOOK = 'facebook',\n\tEMAIL = 'email',\n\tSMTP = 'smtp',\n\tFACEBOOK_CATALOG = 'facebook-catalog',\n\tTASKS = 'tasks',\n\tBIK_LIVECHAT = 'livechat',\n}\n\nexport const Avatar: React.FC<AvatarProps> = (props) => {\n\tconst [imgError, setImgError] = useState<boolean>(false);\n\n\tconst getInitials = () => {\n\t\tconst initials = (props.name \|\| '')\n\t\t\t.split('.')\n\t\t\t.join(' ')\n\t\t\t.split(' ')\n\t\t\t.map((e) => e.charAt(0).toUpperCase())\n\t\t\t.slice(0, 2)\n\t\t\t.join('');\n\n\t\tconst color = BACKGROUND_VS_TEXT_COLOR_MAP[props.background];\n\n\t\tif (props.size === SIZE.LARGE) {\n\t\t\treturn <TitleMedium style={{ color }}>{initials}</TitleMedium>;\n\t\t}\n\t\tif (props.size === SIZE.MEDIUM) {\n\t\t\treturn <TitleSmall style={{ color }}>{initials}</TitleSmall>;\n\t\t}\n\t\tif (props.size === SIZE.SMALL) {\n\t\t\treturn <SubHeading style={{ color }}>{initials}</SubHeading>;\n\t\t}\n\t\t// EXTRA_SMALL: 6.667px / 8px per Figma. BodyTiny's 10px/12px is too large\n\t\t// for the 16px circle (leaves 2px padding instead of the intended 4px).\n\t\treturn (\n\t\t\t<BodyTiny style={{ color, fontSize: '6.667px', lineHeight: '8px' }}>\n\t\t\t\t{initials}\n\t\t\t</BodyTiny>\n\t\t);\n\t};\n\n\tconst getImageBlock = () => {\n\t\tif (props.useNameFallback && (!props.photoUrl \|\| imgError) && props.name) {\n\t\t\treturn <div>{getInitials()}</div>;\n\t\t}\n\t\tif (props.useNameFallback && props.photoUrl && !imgError) {\n\t\t\treturn (\n\t\t\t\t<img\n\t\t\t\t\talt=\"\"\n\t\t\t\t\twidth={AVATAR_SIZE_MAP[props.size]}\n\t\t\t\t\theight={AVATAR_SIZE_MAP[props.size]}\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tborderRadius: props?.borderRadius \|\| '50%',\n\t\t\t\t\t\tobjectFit: 'contain',\n\t\t\t\t\t}}\n\t\t\t\t\tsrc={props.photoUrl}\n\t\t\t\t\tonError={() => {\n\t\t\t\t\t\tsetImgError(true);\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t);\n\t\t}\n\n\t\treturn (\n\t\t\t<img\n\t\t\t\talt=\"\"\n\t\t\t\twidth={AVATAR_SIZE_MAP[props.size]}\n\t\t\t\theight={AVATAR_SIZE_MAP[props.size]}\n\t\t\t\tstyle={{\n\t\t\t\t\tborderRadius: props?.borderRadius \|\| '50%',\n\t\t\t\t\tobjectFit: 'contain',\n\t\t\t\t}}\n\t\t\t\tsrc={props.photoUrl}\n\t\t\t/>\n\t\t);\n\t};\n\n\tconst getChannelIcon = () => {\n\t\tswitch (props.channelName) {\n\t\t\tcase MESSAGE_CHANNELS.EMAIL:\n\t\t\t\treturn <EmailIcon width={11} height={11} />;\n\t\t\tcase MESSAGE_CHANNELS.SMTP:\n\t\t\t\treturn <EmailIcon width={11} height={11} />;\n\t\t\tcase MESSAGE_CHANNELS.FACEBOOK:\n\t\t\t\treturn <FacebookIcon width={11} height={11} />;\n\t\t\tcase MESSAGE_CHANNELS.FACEBOOK_CATALOG:\n\t\t\t\treturn <FacebookIcon width={11} height={11} />;\n\t\t\tcase MESSAGE_CHANNELS.MESSENGER:\n\t\t\t\treturn <FacebookIcon width={11} height={11} />;\n\t\t\tcase MESSAGE_CHANNELS.INSTAGRAM:\n\t\t\t\treturn <InstagramIcon width={11} height={11} />;\n\t\t\tcase MESSAGE_CHANNELS.WHATSAPP:\n\t\t\t\treturn <WhatsappIcon width={11} height={11} />;\n\t\t\tcase MESSAGE_CHANNELS.GMAIL:\n\t\t\t\treturn <GmailIcon width={11} height={11} />;\n\t\t\tcase MESSAGE_CHANNELS.TASKS:\n\t\t\t\treturn <TaskIcon width={11} height={11} />;\n\t\t\tcase MESSAGE_CHANNELS.BIK_LIVECHAT:\n\t\t\t\treturn <BikLivechatIcon width={11} height={11} />;\n\t\t}\n\t};\n\n\tconst getOnlineStatusIcon = () => {\n\t\treturn props.status ? (\n\t\t\t<div\n\t\t\t\tstyle={{\n\t\t\t\t\tbackgroundColor:\n\t\t\t\t\t\tprops.status === 'ONLINE'\n\t\t\t\t\t\t\t? COLORS.special.whatsapp.brand\n\t\t\t\t\t\t\t: COLORS.content.inactive,\n\t\t\t\t\twidth: '8px',\n\t\t\t\t\theight: '8px',\n\t\t\t\t\tborderRadius: '50%',\n\t\t\t\t}}\n\t\t\t></div>\n\t\t) : null;\n\t};\n\n\tconst getPropsType = () => {\n\t\tif (\n\t\t\tprops.type === AVATAR_TYPES.IMAGE &&\n\t\t\t(imgError \|\| !props.photoUrl) &&\n\t\t\tprops.useNameFallback &&\n\t\t\tprops.name\n\t\t) {\n\t\t\treturn AVATAR_TYPES.INITIALS;\n\t\t}\n\n\t\treturn props.type;\n\t};\n\n\treturn (\n\t\t<div\n\t\t\tstyle={{\n\t\t\t\tposition: 'relative',\n\t\t\t}}\n\t\t>\n\t\t\t<AvatarStyle\n\t\t\t\ttype={getPropsType()}\n\t\t\t\tsize={props.size}\n\t\t\t\tbackground={props.background}\n\t\t\t>\n\t\t\t\t{props.type === AVATAR_TYPES.IMAGE && getImageBlock()}\n\t\t\t\t{props.type === AVATAR_TYPES.INITIALS && <div>{getInitials()}</div>}\n\t\t\t\t{props.type === AVATAR_TYPES.ICON && props.icon && (\n\t\t\t\t\t<props.icon\n\t\t\t\t\t\twidth={AVATAR_SIZE_VS_ICON_SIZE_MAP[props.size]}\n\t\t\t\t\t\theight={AVATAR_SIZE_VS_ICON_SIZE_MAP[props.size]}\n\t\t\t\t\t\tcolor={BACKGROUND_VS_TEXT_COLOR_MAP[props.background]}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t</AvatarStyle>\n\t\t\t{props.inboxSettings && (\n\t\t\t\t<div\n\t\t\t\t\tdata-test=\"avatar-inbox-badge\"\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tposition: 'absolute',\n\t\t\t\t\t\tleft: AVATAR_SIZE_VS_ICON_SIZE_MAP[props.size] + 'px',\n\t\t\t\t\t\ttop: AVATAR_SIZE_VS_ICON_SIZE_MAP[props.size] + 'px',\n\t\t\t\t\t\twidth: 14,\n\t\t\t\t\t\theight: 14,\n\t\t\t\t\t\tborderRadius: props?.borderRadius \|\| '50%',\n\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\tjustifyContent: 'center',\n\t\t\t\t\t\tbackgroundColor: props.inboxSettings.isSelected\n\t\t\t\t\t\t\t? props.inboxSettings.isComments\n\t\t\t\t\t\t\t\t? COLORS.content.primary\n\t\t\t\t\t\t\t\t: COLORS.background.brandLight\n\t\t\t\t\t\t\t: props.inboxSettings.isComments\n\t\t\t\t\t\t\t? COLORS.content.primary\n\t\t\t\t\t\t\t: COLORS.surface.standard,\n\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{getChannelIcon()}\n\t\t\t\t</div>\n\t\t\t)}\n\t\t\t{props.status && (\n\t\t\t\t<div\n\t\t\t\t\tdata-test=\"avatar-status-indicator\"\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tposition: 'absolute',\n\t\t\t\t\t\tleft: AVATAR_SIZE_VS_ICON_SIZE_MAP[props.size] + 'px',\n\t\t\t\t\t\ttop: AVATAR_SIZE_VS_ICON_SIZE_MAP[props.size] + 'px',\n\t\t\t\t\t\twidth: 11,\n\t\t\t\t\t\theight: 11,\n\t\t\t\t\t\tborderRadius: '50%',\n\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\tjustifyContent: 'center',\n\t\t\t\t\t\tbackgroundColor: COLORS.surface.standard,\n\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{getOnlineStatusIcon()}\n\t\t\t\t</div>\n\t\t\t)}\n\t\t</div>\n\t);\n};\n"],"names":["AVATAR_SIZE_VS_ICON_SIZE_MAP","SIZE","BACKGROUND_VS_TEXT_COLOR_MAP","AVATAR_BACKGROUND","COLORS","MESSAGE_CHANNELS","Avatar","props","imgError","setImgError","useState","getInitials","initials","e","color","TitleMedium","TitleSmall","SubHeading","jsx","BodyTiny","getImageBlock","AVATAR_SIZE_MAP","getChannelIcon","EmailIcon","FacebookIcon","InstagramIcon","WhatsappIcon","GmailIcon","TaskIcon","BikLivechatIcon","getOnlineStatusIcon","jsxs","AvatarStyle","AVATAR_TYPES"],"mappings":"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"}
1	+ {"version":3,"file":"Avatar.js","sources":["../../../../src/components/avatar/Avatar.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { Phone as PhoneIcon } from '@src/icons';\nimport {\n\tBodyTiny,\n\tSubHeading,\n\tTitleMedium,\n\tTitleSmall,\n} from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport BikLivechatIcon from '../../assets/icons/bik_livechat.svg';\nimport EmailIcon from '../../assets/icons/email-channel.svg';\nimport FacebookIcon from '../../assets/icons/facebook_channel.svg';\nimport GmailIcon from '../../assets/icons/gmail.svg';\nimport InstagramIcon from '../../assets/icons/instagram-channel.svg';\nimport TaskIcon from '../../assets/icons/task.svg';\nimport WhatsappIcon from '../../assets/icons/whatsapp_color.svg';\nimport { AvatarStyle, PhoneIconWrapper } from './Avatar.styled';\nimport {\n\tAVATAR_BACKGROUND,\n\tAVATAR_SIZE_MAP,\n\tAVATAR_TYPES,\n\tSIZE,\n} from './AvatarHelper';\n\nexport const AVATAR_SIZE_VS_ICON_SIZE_MAP = {\n\t[SIZE.EXTRA_SMALL]: 10,\n\t[SIZE.SMALL]: 16,\n\t[SIZE.MEDIUM]: 20,\n\t[SIZE.LARGE]: 32,\n};\n\nexport const BACKGROUND_VS_TEXT_COLOR_MAP = {\n\t[AVATAR_BACKGROUND.LIGHT]: COLORS.content.secondary,\n\t[AVATAR_BACKGROUND.WHITE]: COLORS.content.secondary,\n\t[AVATAR_BACKGROUND.DARK]: COLORS.surface.standard,\n\t[AVATAR_BACKGROUND.BRAND]: COLORS.background.inverseLight,\n};\n\nexport type AvatarProps = {\n\ttype: AVATAR_TYPES;\n\tsize: SIZE;\n\tbackground: AVATAR_BACKGROUND;\n\tname?: string;\n\tphotoUrl?: string;\n\ticon?: React.FC<{ width: number; height: number; color: string }>;\n\tuseNameFallback?: boolean;\n\tchannelName?: MESSAGE_CHANNELS;\n\tborderRadius?: string;\n\tinboxSettings?: {\n\t\tisSelected: boolean;\n\t\tisComments: boolean;\n\t};\n\tstatus?: 'ONLINE' \| 'OFFLINE' \| 'AWAY';\n};\n\nexport const enum MESSAGE_CHANNELS {\n\tINSTAGRAM = 'instagram',\n\tMESSENGER = 'messenger',\n\tWHATSAPP = 'whatsapp',\n\tGMAIL = 'gmail',\n\tLIVECHAT = 'livechat',\n\tGOOGLE_BUSINESS_CHAT = 'gbm',\n\tSHOPIFY = 'shopify',\n\tFACEBOOK = 'facebook',\n\tEMAIL = 'email',\n\tSMTP = 'smtp',\n\tFACEBOOK_CATALOG = 'facebook-catalog',\n\tTASKS = 'tasks',\n\tBIK_LIVECHAT = 'livechat',\n\tVOICE = 'voice',\n}\n\nexport const Avatar: React.FC<AvatarProps> = (props) => {\n\tconst [imgError, setImgError] = useState<boolean>(false);\n\n\tconst getInitials = () => {\n\t\tconst initials = (props.name \|\| '')\n\t\t\t.split('.')\n\t\t\t.join(' ')\n\t\t\t.split(' ')\n\t\t\t.map((e) => e.charAt(0).toUpperCase())\n\t\t\t.slice(0, 2)\n\t\t\t.join('');\n\n\t\tconst color = BACKGROUND_VS_TEXT_COLOR_MAP[props.background];\n\n\t\tif (props.size === SIZE.LARGE) {\n\t\t\treturn <TitleMedium style={{ color }}>{initials}</TitleMedium>;\n\t\t}\n\t\tif (props.size === SIZE.MEDIUM) {\n\t\t\treturn <TitleSmall style={{ color }}>{initials}</TitleSmall>;\n\t\t}\n\t\tif (props.size === SIZE.SMALL) {\n\t\t\treturn <SubHeading style={{ color }}>{initials}</SubHeading>;\n\t\t}\n\t\t// EXTRA_SMALL: 6.667px / 8px per Figma. BodyTiny's 10px/12px is too large\n\t\t// for the 16px circle (leaves 2px padding instead of the intended 4px).\n\t\treturn (\n\t\t\t<BodyTiny style={{ color, fontSize: '6.667px', lineHeight: '8px' }}>\n\t\t\t\t{initials}\n\t\t\t</BodyTiny>\n\t\t);\n\t};\n\n\tconst getImageBlock = () => {\n\t\tif (props.useNameFallback && (!props.photoUrl \|\| imgError) && props.name) {\n\t\t\treturn <div>{getInitials()}</div>;\n\t\t}\n\t\tif (props.useNameFallback && props.photoUrl && !imgError) {\n\t\t\treturn (\n\t\t\t\t<img\n\t\t\t\t\talt=\"\"\n\t\t\t\t\twidth={AVATAR_SIZE_MAP[props.size]}\n\t\t\t\t\theight={AVATAR_SIZE_MAP[props.size]}\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tborderRadius: props?.borderRadius \|\| '50%',\n\t\t\t\t\t\tobjectFit: 'contain',\n\t\t\t\t\t}}\n\t\t\t\t\tsrc={props.photoUrl}\n\t\t\t\t\tonError={() => {\n\t\t\t\t\t\tsetImgError(true);\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t);\n\t\t}\n\n\t\treturn (\n\t\t\t<img\n\t\t\t\talt=\"\"\n\t\t\t\twidth={AVATAR_SIZE_MAP[props.size]}\n\t\t\t\theight={AVATAR_SIZE_MAP[props.size]}\n\t\t\t\tstyle={{\n\t\t\t\t\tborderRadius: props?.borderRadius \|\| '50%',\n\t\t\t\t\tobjectFit: 'contain',\n\t\t\t\t}}\n\t\t\t\tsrc={props.photoUrl}\n\t\t\t/>\n\t\t);\n\t};\n\n\tconst getChannelIcon = () => {\n\t\tswitch (props.channelName) {\n\t\t\tcase MESSAGE_CHANNELS.EMAIL:\n\t\t\t\treturn <EmailIcon width={11} height={11} />;\n\t\t\tcase MESSAGE_CHANNELS.SMTP:\n\t\t\t\treturn <EmailIcon width={11} height={11} />;\n\t\t\tcase MESSAGE_CHANNELS.FACEBOOK:\n\t\t\t\treturn <FacebookIcon width={11} height={11} />;\n\t\t\tcase MESSAGE_CHANNELS.FACEBOOK_CATALOG:\n\t\t\t\treturn <FacebookIcon width={11} height={11} />;\n\t\t\tcase MESSAGE_CHANNELS.MESSENGER:\n\t\t\t\treturn <FacebookIcon width={11} height={11} />;\n\t\t\tcase MESSAGE_CHANNELS.INSTAGRAM:\n\t\t\t\treturn <InstagramIcon width={11} height={11} />;\n\t\t\tcase MESSAGE_CHANNELS.WHATSAPP:\n\t\t\t\treturn <WhatsappIcon width={11} height={11} />;\n\t\t\tcase MESSAGE_CHANNELS.GMAIL:\n\t\t\t\treturn <GmailIcon width={11} height={11} />;\n\t\t\tcase MESSAGE_CHANNELS.TASKS:\n\t\t\t\treturn <TaskIcon width={11} height={11} />;\n\t\t\tcase MESSAGE_CHANNELS.BIK_LIVECHAT:\n\t\t\t\treturn <BikLivechatIcon width={11} height={11} />;\n\t\t\tcase MESSAGE_CHANNELS.VOICE:\n\t\t\t\treturn (\n\t\t\t\t\t<PhoneIconWrapper>\n\t\t\t\t\t\t<PhoneIcon\n\t\t\t\t\t\t\twidth={8}\n\t\t\t\t\t\t\theight={8}\n\t\t\t\t\t\t\tcolor={COLORS.content.secondaryInverse}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</PhoneIconWrapper>\n\t\t\t\t);\n\t\t}\n\t};\n\n\tconst getOnlineStatusIcon = () => {\n\t\treturn props.status ? (\n\t\t\t<div\n\t\t\t\tstyle={{\n\t\t\t\t\tbackgroundColor:\n\t\t\t\t\t\tprops.status === 'ONLINE'\n\t\t\t\t\t\t\t? COLORS.special.whatsapp.brand\n\t\t\t\t\t\t\t: COLORS.content.inactive,\n\t\t\t\t\twidth: '8px',\n\t\t\t\t\theight: '8px',\n\t\t\t\t\tborderRadius: '50%',\n\t\t\t\t}}\n\t\t\t></div>\n\t\t) : null;\n\t};\n\n\tconst getPropsType = () => {\n\t\tif (\n\t\t\tprops.type === AVATAR_TYPES.IMAGE &&\n\t\t\t(imgError \|\| !props.photoUrl) &&\n\t\t\tprops.useNameFallback &&\n\t\t\tprops.name\n\t\t) {\n\t\t\treturn AVATAR_TYPES.INITIALS;\n\t\t}\n\n\t\treturn props.type;\n\t};\n\n\treturn (\n\t\t<div\n\t\t\tstyle={{\n\t\t\t\tposition: 'relative',\n\t\t\t}}\n\t\t>\n\t\t\t<AvatarStyle\n\t\t\t\ttype={getPropsType()}\n\t\t\t\tsize={props.size}\n\t\t\t\tbackground={props.background}\n\t\t\t>\n\t\t\t\t{props.type === AVATAR_TYPES.IMAGE && getImageBlock()}\n\t\t\t\t{props.type === AVATAR_TYPES.INITIALS && <div>{getInitials()}</div>}\n\t\t\t\t{props.type === AVATAR_TYPES.ICON && props.icon && (\n\t\t\t\t\t<props.icon\n\t\t\t\t\t\twidth={AVATAR_SIZE_VS_ICON_SIZE_MAP[props.size]}\n\t\t\t\t\t\theight={AVATAR_SIZE_VS_ICON_SIZE_MAP[props.size]}\n\t\t\t\t\t\tcolor={BACKGROUND_VS_TEXT_COLOR_MAP[props.background]}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t</AvatarStyle>\n\t\t\t{props.inboxSettings && (\n\t\t\t\t<div\n\t\t\t\t\tdata-test=\"avatar-inbox-badge\"\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tposition: 'absolute',\n\t\t\t\t\t\tleft: AVATAR_SIZE_VS_ICON_SIZE_MAP[props.size] + 'px',\n\t\t\t\t\t\ttop: AVATAR_SIZE_VS_ICON_SIZE_MAP[props.size] + 'px',\n\t\t\t\t\t\twidth: 14,\n\t\t\t\t\t\theight: 14,\n\t\t\t\t\t\tborderRadius: props?.borderRadius \|\| '50%',\n\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\tjustifyContent: 'center',\n\t\t\t\t\t\tbackgroundColor: props.inboxSettings.isSelected\n\t\t\t\t\t\t\t? props.inboxSettings.isComments\n\t\t\t\t\t\t\t\t? COLORS.content.primary\n\t\t\t\t\t\t\t\t: COLORS.background.brandLight\n\t\t\t\t\t\t\t: props.inboxSettings.isComments\n\t\t\t\t\t\t\t? COLORS.content.primary\n\t\t\t\t\t\t\t: COLORS.surface.standard,\n\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{getChannelIcon()}\n\t\t\t\t</div>\n\t\t\t)}\n\t\t\t{props.status && (\n\t\t\t\t<div\n\t\t\t\t\tdata-test=\"avatar-status-indicator\"\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tposition: 'absolute',\n\t\t\t\t\t\tleft: AVATAR_SIZE_VS_ICON_SIZE_MAP[props.size] + 'px',\n\t\t\t\t\t\ttop: AVATAR_SIZE_VS_ICON_SIZE_MAP[props.size] + 'px',\n\t\t\t\t\t\twidth: 11,\n\t\t\t\t\t\theight: 11,\n\t\t\t\t\t\tborderRadius: '50%',\n\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\tjustifyContent: 'center',\n\t\t\t\t\t\tbackgroundColor: COLORS.surface.standard,\n\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{getOnlineStatusIcon()}\n\t\t\t\t</div>\n\t\t\t)}\n\t\t</div>\n\t);\n};\n"],"names":["AVATAR_SIZE_VS_ICON_SIZE_MAP","SIZE","BACKGROUND_VS_TEXT_COLOR_MAP","AVATAR_BACKGROUND","COLORS","MESSAGE_CHANNELS","Avatar","props","imgError","setImgError","useState","getInitials","initials","e","color","TitleMedium","TitleSmall","SubHeading","jsx","BodyTiny","getImageBlock","AVATAR_SIZE_MAP","getChannelIcon","EmailIcon","FacebookIcon","InstagramIcon","WhatsappIcon","GmailIcon","TaskIcon","BikLivechatIcon","PhoneIconWrapper","PhoneIcon","getOnlineStatusIcon","jsxs","AvatarStyle","AVATAR_TYPES"],"mappings":"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"}

package/dist/esm/components/avatar/Avatar.styled.d.ts CHANGED Viewed

@@ -4,3 +4,4 @@ export declare const AvatarStyle: import('styled-components').StyledComponent<"d
     background: AVATAR_BACKGROUND;
     type: AVATAR_TYPES;
 }, never>;
+export declare const PhoneIconWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;

package/dist/esm/components/avatar/Avatar.styled.js CHANGED Viewed

@@ -1,17 +1,26 @@
 import o from "styled-components";
-import { AVATAR_SIZE_MAP as d, AVATAR_TYPES as t, AVATAR_BACKGROUND as e } from "./AvatarHelper.js";
-import { COLORS as a } from "../../constants/Theme.js";
-const A = o.div`
-	width: ${(r) => d[r.size] + "px"};
-	height: ${(r) => d[r.size] + "px"};
+import { AVATAR_SIZE_MAP as t, AVATAR_TYPES as d, AVATAR_BACKGROUND as n } from "./AvatarHelper.js";
+import { COLORS as e } from "../../constants/Theme.js";
+const s = o.div`
+	width: ${(r) => t[r.size] + "px"};
+	height: ${(r) => t[r.size] + "px"};
 	display: flex;
 	justify-content: center;
 	align-items: center;
-	background-color: ${(r) => r.type === t.IMAGE ? "null" : r.background === e.LIGHT ? a.background.base : r.background === e.WHITE ? a.surface.standard : r.background === e.BRAND ? a.background.brandLight : a.background.inverse};
-	border: ${(r) => r.background === e.LIGHT || r.background === e.WHITE ? "1px solid " + a.stroke.primary : 0};
+	background-color: ${(r) => r.type === d.IMAGE ? "null" : r.background === n.LIGHT ? e.background.base : r.background === n.WHITE ? e.surface.standard : r.background === n.BRAND ? e.background.brandLight : e.background.inverse};
+	border: ${(r) => r.background === n.LIGHT || r.background === n.WHITE ? "1px solid " + e.stroke.primary : 0};
 	border-radius: 50%;
+`, u = o.div`
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 11px;
+	height: 11px;
+	border-radius: 4px;
+	background-color: ${e.content.secondary};
 `;
 export {
-  A as AvatarStyle
+  s as AvatarStyle,
+  u as PhoneIconWrapper
 };
 //# sourceMappingURL=Avatar.styled.js.map

package/dist/esm/components/avatar/Avatar.styled.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Avatar.styled.js","sources":["../../../../src/components/avatar/Avatar.styled.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport {\n\tAVATAR_BACKGROUND,\n\tAVATAR_SIZE_MAP,\n\tAVATAR_TYPES,\n\tSIZE,\n} from '@src/components/avatar/AvatarHelper';\nimport { COLORS } from '@src/constants/Theme';\n\nexport const AvatarStyle = styled.div<{\n\tsize: SIZE;\n\tbackground: AVATAR_BACKGROUND;\n\ttype: AVATAR_TYPES;\n}>`\n\twidth: ${(props) => AVATAR_SIZE_MAP[props.size] + 'px'};\n\theight: ${(props) => AVATAR_SIZE_MAP[props.size] + 'px'};\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tbackground-color: ${(props) =>\n\t\tprops.type === AVATAR_TYPES.IMAGE\n\t\t\t? 'null'\n\t\t\t: props.background === AVATAR_BACKGROUND.LIGHT\n\t\t\t? COLORS.background.base\n\t\t\t: props.background === AVATAR_BACKGROUND.WHITE\n\t\t\t? COLORS.surface.standard\n\t\t\t: props.background === AVATAR_BACKGROUND.BRAND\n\t\t\t? COLORS.background.brandLight\n\t\t\t: COLORS.background.inverse};\n\tborder: ${(props) =>\n\t\tprops.background === AVATAR_BACKGROUND.LIGHT \|\|\n\t\tprops.background === AVATAR_BACKGROUND.WHITE\n\t\t\t? '1px solid ' + COLORS.stroke.primary\n\t\t\t: 0};\n\tborder-radius: 50%;\n`;\n"],"names":["AvatarStyle","styled","props","AVATAR_SIZE_MAP","AVATAR_TYPES","AVATAR_BACKGROUND","COLORS"],"mappings":";;;AASO,MAAMA,IAAcC,EAAO;AAAA,UAKxB,CAACC,MAAUC,EAAgBD,EAAM,IAAI,IAAI,IAAI;AAAA,WAC5C,CAACA,MAAUC,EAAgBD,EAAM,IAAI,IAAI,IAAI;AAAA;AAAA;AAAA;AAAA,qBAInC,CAACA,MACpBA,EAAM,SAASE,EAAa,QACzB,SACAF,EAAM,eAAeG,EAAkB,QACvCC,EAAO,WAAW,OAClBJ,EAAM,eAAeG,EAAkB,QACvCC,EAAO,QAAQ,WACfJ,EAAM,eAAeG,EAAkB,QACvCC,EAAO,WAAW,aAClBA,EAAO,WAAW,OAAO;AAAA,WACnB,CAACJ,MACVA,EAAM,eAAeG,EAAkB,SACvCH,EAAM,eAAeG,EAAkB,QACpC,eAAeC,EAAO,OAAO,UAC7B,CAAC;AAAA;AAAA;"}
1	+ {"version":3,"file":"Avatar.styled.js","sources":["../../../../src/components/avatar/Avatar.styled.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport {\n\tAVATAR_BACKGROUND,\n\tAVATAR_SIZE_MAP,\n\tAVATAR_TYPES,\n\tSIZE,\n} from '@src/components/avatar/AvatarHelper';\nimport { COLORS } from '@src/constants/Theme';\n\nexport const AvatarStyle = styled.div<{\n\tsize: SIZE;\n\tbackground: AVATAR_BACKGROUND;\n\ttype: AVATAR_TYPES;\n}>`\n\twidth: ${(props) => AVATAR_SIZE_MAP[props.size] + 'px'};\n\theight: ${(props) => AVATAR_SIZE_MAP[props.size] + 'px'};\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tbackground-color: ${(props) =>\n\t\tprops.type === AVATAR_TYPES.IMAGE\n\t\t\t? 'null'\n\t\t\t: props.background === AVATAR_BACKGROUND.LIGHT\n\t\t\t? COLORS.background.base\n\t\t\t: props.background === AVATAR_BACKGROUND.WHITE\n\t\t\t? COLORS.surface.standard\n\t\t\t: props.background === AVATAR_BACKGROUND.BRAND\n\t\t\t? COLORS.background.brandLight\n\t\t\t: COLORS.background.inverse};\n\tborder: ${(props) =>\n\t\tprops.background === AVATAR_BACKGROUND.LIGHT \|\|\n\t\tprops.background === AVATAR_BACKGROUND.WHITE\n\t\t\t? '1px solid ' + COLORS.stroke.primary\n\t\t\t: 0};\n\tborder-radius: 50%;\n`;\n\nexport const PhoneIconWrapper = styled.div`\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\twidth: 11px;\n\theight: 11px;\n\tborder-radius: 4px;\n\tbackground-color: ${COLORS.content.secondary};\n`;\n"],"names":["AvatarStyle","styled","props","AVATAR_SIZE_MAP","AVATAR_TYPES","AVATAR_BACKGROUND","COLORS","PhoneIconWrapper"],"mappings":";;;AASO,MAAMA,IAAcC,EAAO;AAAA,UAKxB,CAACC,MAAUC,EAAgBD,EAAM,IAAI,IAAI,IAAI;AAAA,WAC5C,CAACA,MAAUC,EAAgBD,EAAM,IAAI,IAAI,IAAI;AAAA;AAAA;AAAA;AAAA,qBAInC,CAACA,MACpBA,EAAM,SAASE,EAAa,QACzB,SACAF,EAAM,eAAeG,EAAkB,QACvCC,EAAO,WAAW,OAClBJ,EAAM,eAAeG,EAAkB,QACvCC,EAAO,QAAQ,WACfJ,EAAM,eAAeG,EAAkB,QACvCC,EAAO,WAAW,aAClBA,EAAO,WAAW,OAAO;AAAA,WACnB,CAACJ,MACVA,EAAM,eAAeG,EAAkB,SACvCH,EAAM,eAAeG,EAAkB,QACpC,eAAeC,EAAO,OAAO,UAC7B,CAAC;AAAA;AAAA,GAIOC,IAAmBN,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAOlBK,EAAO,QAAQ,SAAS;AAAA;"}

package/dist/esm/components/card-selector/CardSelector.js CHANGED Viewed

@@ -1,12 +1,13 @@
 import { jsx as t, Fragment as l, jsxs as n } from "react/jsx-runtime";
 import { COLORS as i } from "../../constants/Theme.js";
-import { Spinner as a } from "../spinner/Spinner.js";
-import { TitleSmall as o, BodyCaption as h } from "../TypographyStyle.js";
-import { Container as d, Loader as m } from "./CardSelector.styled.js";
-import { Tooltip as r } from "../tooltips/Tooltip.js";
-const u = (e) => /* @__PURE__ */ t(l, { children: e.tooltip ? /* @__PURE__ */ t(r, { title: e.tooltip, children: /* @__PURE__ */ t(
+import { Spinner as c } from "../spinner/Spinner.js";
+import { TitleSmall as o, BodyCaption as r } from "../TypographyStyle.js";
+import { Container as d, Loader as h } from "./CardSelector.styled.js";
+import { Tooltip as m } from "../tooltips/Tooltip.js";
+const u = (e) => /* @__PURE__ */ t(l, { children: e.tooltip ? /* @__PURE__ */ t(m, { title: e.tooltip, children: /* @__PURE__ */ t(
   d,
   {
+    "data-testid": "card-selector-container",
     style: {
       alignItems: e.title && e.subtitle ? "flex-start" : "center"
     },
@@ -17,11 +18,12 @@ const u = (e) => /* @__PURE__ */ t(l, { children: e.tooltip ? /* @__PURE__ */ t(
       !e.disabled && !e.loading && e.onCardClick(e.id);
     },
     isTooltipPresent: !!e.tooltip,
-    children: /* @__PURE__ */ t(c, { ...e })
+    children: /* @__PURE__ */ t(a, { ...e })
   }
 ) }) : /* @__PURE__ */ t(
   d,
   {
+    "data-testid": "card-selector-container",
     style: {
       alignItems: e.title && e.subtitle ? "flex-start" : "center"
     },
@@ -32,9 +34,9 @@ const u = (e) => /* @__PURE__ */ t(l, { children: e.tooltip ? /* @__PURE__ */ t(
       !e.disabled && !e.loading && e.onCardClick(e.id);
     },
     isTooltipPresent: !!e.tooltip,
-    children: /* @__PURE__ */ t(c, { ...e })
+    children: /* @__PURE__ */ t(a, { ...e })
   }
-) }), c = (e) => /* @__PURE__ */ t(l, { children: e.loading ? /* @__PURE__ */ t(m, { children: /* @__PURE__ */ t(a, { size: "large" }) }) : /* @__PURE__ */ n(l, { children: [
+) }), a = (e) => /* @__PURE__ */ t(l, { children: e.loading ? /* @__PURE__ */ t(h, { children: /* @__PURE__ */ t(c, { size: "large" }) }) : /* @__PURE__ */ n(l, { children: [
   e?.icon && /* @__PURE__ */ t("div", { style: { width: 24, height: 24 }, children: /* @__PURE__ */ t(
     e.icon,
     {
@@ -53,7 +55,7 @@ const u = (e) => /* @__PURE__ */ t(l, { children: e.tooltip ? /* @__PURE__ */ t(
       }
     ),
     e.subtitle && /* @__PURE__ */ t(
-      h,
+      r,
       {
         style: {
           marginTop: e.title ? 4 : 0,

package/dist/esm/components/card-selector/CardSelector.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CardSelector.js","sources":["../../../../src/components/card-selector/CardSelector.tsx"],"sourcesContent":["import React from 'react';\nimport { COLORS } from '@src/constants/Theme';\nimport { Spinner } from '../spinner/Spinner';\nimport { Tooltip } from '../tooltips';\nimport { BodyCaption, TitleSmall } from '../TypographyStyle';\nimport { Container, Loader } from './CardSelector.styled';\n\nexport type CardSelectorProps = {\n\tid: number;\n\ticon?: React.FunctionComponent<React.SVGAttributes<SVGElement>>;\n\ttitle?: string;\n\tsubtitle?: string;\n\tselected: boolean;\n\tloading?: boolean;\n\tdisabled?: boolean;\n\tdataTestId?: string;\n\ttooltip?: string;\n};\n\ntype CardSelectorInternalProps = CardSelectorProps & {\n\tonCardClick: (id: number) => void;\n};\n\nexport const CardSelector: React.FC<CardSelectorInternalProps> = (props) => {\n\treturn (\n\t\t<>\n\t\t\t{props.tooltip ? (\n\t\t\t\t<Tooltip title={props.tooltip}>\n\t\t\t\t\t<Container\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\talignItems:\n\t\t\t\t\t\t\t\tprops.title && props.subtitle ? 'flex-start' : 'center',\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tselected={props.selected}\n\t\t\t\t\t\tdisabled={props.disabled ?? false}\n\t\t\t\t\t\tloading={props.loading ?? false}\n\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\tif (!props.disabled && !props.loading) {\n\t\t\t\t\t\t\t\tprops.onCardClick(props.id);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tisTooltipPresent={!!props.tooltip}\n\t\t\t\t\t>\n\t\t\t\t\t\t<EachSelector {...props} />\n\t\t\t\t\t</Container>\n\t\t\t\t</Tooltip>\n\t\t\t) : (\n\t\t\t\t<Container\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\talignItems: props.title && props.subtitle ? 'flex-start' : 'center',\n\t\t\t\t\t}}\n\t\t\t\t\tselected={props.selected}\n\t\t\t\t\tdisabled={props.disabled ?? false}\n\t\t\t\t\tloading={props.loading ?? false}\n\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\tif (!props.disabled && !props.loading) {\n\t\t\t\t\t\t\tprops.onCardClick(props.id);\n\t\t\t\t\t\t}\n\t\t\t\t\t}}\n\t\t\t\t\tisTooltipPresent={!!props.tooltip}\n\t\t\t\t>\n\t\t\t\t\t<EachSelector {...props} />\n\t\t\t\t</Container>\n\t\t\t)}\n\t\t</>\n\t);\n};\n\nconst EachSelector: React.FC<CardSelectorInternalProps> = (props) => {\n\treturn (\n\t\t<>\n\t\t\t{props.loading ? (\n\t\t\t\t<Loader>\n\t\t\t\t\t<Spinner size={'large'} />\n\t\t\t\t</Loader>\n\t\t\t) : (\n\t\t\t\t<>\n\t\t\t\t\t{props?.icon && (\n\t\t\t\t\t\t<div style={{ width: 24, height: 24 }}>\n\t\t\t\t\t\t\t<props.icon\n\t\t\t\t\t\t\t\twidth={24}\n\t\t\t\t\t\t\t\tcolor={\n\t\t\t\t\t\t\t\t\tprops.selected\n\t\t\t\t\t\t\t\t\t\t? COLORS.content.brand\n\t\t\t\t\t\t\t\t\t\t: props.disabled\n\t\t\t\t\t\t\t\t\t\t? COLORS.content.inactive\n\t\t\t\t\t\t\t\t\t\t: COLORS.content.placeholder\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t\t<div data-test={props?.dataTestId}>\n\t\t\t\t\t\t{props.title && (\n\t\t\t\t\t\t\t<TitleSmall\n\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\tcolor: props.selected\n\t\t\t\t\t\t\t\t\t\t? COLORS.content.brand\n\t\t\t\t\t\t\t\t\t\t: props.disabled\n\t\t\t\t\t\t\t\t\t\t? COLORS.content.inactive\n\t\t\t\t\t\t\t\t\t\t: COLORS.content.secondary,\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{props.title}\n\t\t\t\t\t\t\t</TitleSmall>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{props.subtitle && (\n\t\t\t\t\t\t\t<BodyCaption\n\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\tmarginTop: props.title ? 4 : 0,\n\t\t\t\t\t\t\t\t\tcolor: props.selected\n\t\t\t\t\t\t\t\t\t\t? COLORS.content.brand\n\t\t\t\t\t\t\t\t\t\t: props.disabled\n\t\t\t\t\t\t\t\t\t\t? COLORS.content.inactive\n\t\t\t\t\t\t\t\t\t\t: COLORS.content.secondary,\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{props.subtitle}\n\t\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t</>\n\t\t\t)}\n\t\t</>\n\t);\n};\n"],"names":["CardSelector","props","Tooltip","jsx","Container","EachSelector","Fragment","Loader","Spinner","jsxs","COLORS","TitleSmall","BodyCaption"],"mappings":";;;;;;AAuBO,MAAMA,IAAoD,CAACC,6BAG9D,UAAAA,EAAM,4BACLC,GAAA,EAAQ,OAAOD,EAAM,SACrB,UAAA,gBAAAE;AAAA,EAACC;AAAA,EAAA;AAAA,IACA,OAAO;AAAA,MACN,YACCH,EAAM,SAASA,EAAM,WAAW,eAAe;AAAA,IAAA;AAAA,IAEjD,UAAUA,EAAM;AAAA,IAChB,UAAUA,EAAM,YAAY;AAAA,IAC5B,SAASA,EAAM,WAAW;AAAA,IAC1B,SAAS,MAAM;AACd,MAAI,CAACA,EAAM,YAAY,CAACA,EAAM,WAC7BA,EAAM,YAAYA,EAAM,EAAE;AAAA,IAE5B;AAAA,IACA,kBAAkB,CAAC,CAACA,EAAM;AAAA,IAE1B,UAAA,gBAAAE,EAACE,GAAA,EAAc,GAAGJ,EAAA,CAAO;AAAA,EAAA;AAAA,GAE3B,IAEA,gBAAAE;AAAA,EAACC;AAAA,EAAA;AAAA,IACA,OAAO;AAAA,MACN,YAAYH,EAAM,SAASA,EAAM,WAAW,eAAe;AAAA,IAAA;AAAA,IAE5D,UAAUA,EAAM;AAAA,IAChB,UAAUA,EAAM,YAAY;AAAA,IAC5B,SAASA,EAAM,WAAW;AAAA,IAC1B,SAAS,MAAM;AACd,MAAI,CAACA,EAAM,YAAY,CAACA,EAAM,WAC7BA,EAAM,YAAYA,EAAM,EAAE;AAAA,IAE5B;AAAA,IACA,kBAAkB,CAAC,CAACA,EAAM;AAAA,IAE1B,UAAA,gBAAAE,EAACE,GAAA,EAAc,GAAGJ,EAAA,CAAO;AAAA,EAAA;AAAA,GAG5B,GAIII,IAAoD,CAACJ,MAEzD,gBAAAE,EAAAG,GAAA,EACE,UAAAL,EAAM,UACN,gBAAAE,EAACI,GAAA,EACA,UAAA,gBAAAJ,EAACK,GAAA,EAAQ,MAAM,QAAA,CAAS,EAAA,CACzB,IAEA,gBAAAC,EAAAH,GAAA,EACE,UAAA;AAAA,EAAAL,GAAO,0BACN,OAAA,EAAI,OAAO,EAAE,OAAO,IAAI,QAAQ,GAAA,GAChC,UAAA,gBAAAE;AAAA,IAACF,EAAM;AAAA,IAAN;AAAA,MACA,OAAO;AAAA,MACP,OACCA,EAAM,WACHS,EAAO,QAAQ,QACfT,EAAM,WACNS,EAAO,QAAQ,WACfA,EAAO,QAAQ;AAAA,IAAA;AAAA,EAAA,GAGrB;AAAA,EAED,gBAAAD,EAAC,OAAA,EAAI,aAAWR,GAAO,YACrB,UAAA;AAAA,IAAAA,EAAM,SACN,gBAAAE;AAAA,MAACQ;AAAA,MAAA;AAAA,QACA,OAAO;AAAA,UACN,OAAOV,EAAM,WACVS,EAAO,QAAQ,QACfT,EAAM,WACNS,EAAO,QAAQ,WACfA,EAAO,QAAQ;AAAA,QAAA;AAAA,QAGlB,UAAAT,EAAM;AAAA,MAAA;AAAA,IAAA;AAAA,IAGRA,EAAM,YACN,gBAAAE;AAAA,MAACS;AAAA,MAAA;AAAA,QACA,OAAO;AAAA,UACN,WAAWX,EAAM,QAAQ,IAAI;AAAA,UAC7B,OAAOA,EAAM,WACVS,EAAO,QAAQ,QACfT,EAAM,WACNS,EAAO,QAAQ,WACfA,EAAO,QAAQ;AAAA,QAAA;AAAA,QAGlB,UAAAT,EAAM;AAAA,MAAA;AAAA,IAAA;AAAA,EACR,EAAA,CAEF;AAAA,EAAA,CACD,EAAA,CAEF;"}
1	+ {"version":3,"file":"CardSelector.js","sources":["../../../../src/components/card-selector/CardSelector.tsx"],"sourcesContent":["import React from 'react';\nimport { COLORS } from '@src/constants/Theme';\nimport { Spinner } from '../spinner/Spinner';\nimport { Tooltip } from '../tooltips';\nimport { BodyCaption, TitleSmall } from '../TypographyStyle';\nimport { Container, Loader } from './CardSelector.styled';\n\nexport type CardSelectorProps = {\n\tid: number;\n\ticon?: React.FunctionComponent<React.SVGAttributes<SVGElement>>;\n\ttitle?: string;\n\tsubtitle?: string;\n\tselected: boolean;\n\tloading?: boolean;\n\tdisabled?: boolean;\n\tdataTestId?: string;\n\ttooltip?: string;\n};\n\ntype CardSelectorInternalProps = CardSelectorProps & {\n\tonCardClick: (id: number) => void;\n};\n\nexport const CardSelector: React.FC<CardSelectorInternalProps> = (props) => {\n\treturn (\n\t\t<>\n\t\t\t{props.tooltip ? (\n\t\t\t\t<Tooltip title={props.tooltip}>\n\t\t\t\t\t<Container\n\t\t\t\t\t\tdata-testid=\"card-selector-container\"\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\talignItems:\n\t\t\t\t\t\t\t\tprops.title && props.subtitle ? 'flex-start' : 'center',\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tselected={props.selected}\n\t\t\t\t\t\tdisabled={props.disabled ?? false}\n\t\t\t\t\t\tloading={props.loading ?? false}\n\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\tif (!props.disabled && !props.loading) {\n\t\t\t\t\t\t\t\tprops.onCardClick(props.id);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tisTooltipPresent={!!props.tooltip}\n\t\t\t\t\t>\n\t\t\t\t\t\t<EachSelector {...props} />\n\t\t\t\t\t</Container>\n\t\t\t\t</Tooltip>\n\t\t\t) : (\n\t\t\t\t<Container\n\t\t\t\t\tdata-testid=\"card-selector-container\"\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\talignItems: props.title && props.subtitle ? 'flex-start' : 'center',\n\t\t\t\t\t}}\n\t\t\t\t\tselected={props.selected}\n\t\t\t\t\tdisabled={props.disabled ?? false}\n\t\t\t\t\tloading={props.loading ?? false}\n\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\tif (!props.disabled && !props.loading) {\n\t\t\t\t\t\t\tprops.onCardClick(props.id);\n\t\t\t\t\t\t}\n\t\t\t\t\t}}\n\t\t\t\t\tisTooltipPresent={!!props.tooltip}\n\t\t\t\t>\n\t\t\t\t\t<EachSelector {...props} />\n\t\t\t\t</Container>\n\t\t\t)}\n\t\t</>\n\t);\n};\n\nconst EachSelector: React.FC<CardSelectorInternalProps> = (props) => {\n\treturn (\n\t\t<>\n\t\t\t{props.loading ? (\n\t\t\t\t<Loader>\n\t\t\t\t\t<Spinner size={'large'} />\n\t\t\t\t</Loader>\n\t\t\t) : (\n\t\t\t\t<>\n\t\t\t\t\t{props?.icon && (\n\t\t\t\t\t\t<div style={{ width: 24, height: 24 }}>\n\t\t\t\t\t\t\t<props.icon\n\t\t\t\t\t\t\t\twidth={24}\n\t\t\t\t\t\t\t\tcolor={\n\t\t\t\t\t\t\t\t\tprops.selected\n\t\t\t\t\t\t\t\t\t\t? COLORS.content.brand\n\t\t\t\t\t\t\t\t\t\t: props.disabled\n\t\t\t\t\t\t\t\t\t\t? COLORS.content.inactive\n\t\t\t\t\t\t\t\t\t\t: COLORS.content.placeholder\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t\t<div data-test={props?.dataTestId}>\n\t\t\t\t\t\t{props.title && (\n\t\t\t\t\t\t\t<TitleSmall\n\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\tcolor: props.selected\n\t\t\t\t\t\t\t\t\t\t? COLORS.content.brand\n\t\t\t\t\t\t\t\t\t\t: props.disabled\n\t\t\t\t\t\t\t\t\t\t? COLORS.content.inactive\n\t\t\t\t\t\t\t\t\t\t: COLORS.content.secondary,\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{props.title}\n\t\t\t\t\t\t\t</TitleSmall>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{props.subtitle && (\n\t\t\t\t\t\t\t<BodyCaption\n\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\tmarginTop: props.title ? 4 : 0,\n\t\t\t\t\t\t\t\t\tcolor: props.selected\n\t\t\t\t\t\t\t\t\t\t? COLORS.content.brand\n\t\t\t\t\t\t\t\t\t\t: props.disabled\n\t\t\t\t\t\t\t\t\t\t? COLORS.content.inactive\n\t\t\t\t\t\t\t\t\t\t: COLORS.content.secondary,\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{props.subtitle}\n\t\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t</>\n\t\t\t)}\n\t\t</>\n\t);\n};\n"],"names":["CardSelector","props","Tooltip","jsx","Container","EachSelector","Fragment","Loader","Spinner","jsxs","COLORS","TitleSmall","BodyCaption"],"mappings":";;;;;;AAuBO,MAAMA,IAAoD,CAACC,6BAG9D,UAAAA,EAAM,4BACLC,GAAA,EAAQ,OAAOD,EAAM,SACrB,UAAA,gBAAAE;AAAA,EAACC;AAAA,EAAA;AAAA,IACA,eAAY;AAAA,IACZ,OAAO;AAAA,MACN,YACCH,EAAM,SAASA,EAAM,WAAW,eAAe;AAAA,IAAA;AAAA,IAEjD,UAAUA,EAAM;AAAA,IAChB,UAAUA,EAAM,YAAY;AAAA,IAC5B,SAASA,EAAM,WAAW;AAAA,IAC1B,SAAS,MAAM;AACd,MAAI,CAACA,EAAM,YAAY,CAACA,EAAM,WAC7BA,EAAM,YAAYA,EAAM,EAAE;AAAA,IAE5B;AAAA,IACA,kBAAkB,CAAC,CAACA,EAAM;AAAA,IAE1B,UAAA,gBAAAE,EAACE,GAAA,EAAc,GAAGJ,EAAA,CAAO;AAAA,EAAA;AAAA,GAE3B,IAEA,gBAAAE;AAAA,EAACC;AAAA,EAAA;AAAA,IACA,eAAY;AAAA,IACZ,OAAO;AAAA,MACN,YAAYH,EAAM,SAASA,EAAM,WAAW,eAAe;AAAA,IAAA;AAAA,IAE5D,UAAUA,EAAM;AAAA,IAChB,UAAUA,EAAM,YAAY;AAAA,IAC5B,SAASA,EAAM,WAAW;AAAA,IAC1B,SAAS,MAAM;AACd,MAAI,CAACA,EAAM,YAAY,CAACA,EAAM,WAC7BA,EAAM,YAAYA,EAAM,EAAE;AAAA,IAE5B;AAAA,IACA,kBAAkB,CAAC,CAACA,EAAM;AAAA,IAE1B,UAAA,gBAAAE,EAACE,GAAA,EAAc,GAAGJ,EAAA,CAAO;AAAA,EAAA;AAAA,GAG5B,GAIII,IAAoD,CAACJ,MAEzD,gBAAAE,EAAAG,GAAA,EACE,UAAAL,EAAM,UACN,gBAAAE,EAACI,GAAA,EACA,UAAA,gBAAAJ,EAACK,GAAA,EAAQ,MAAM,QAAA,CAAS,EAAA,CACzB,IAEA,gBAAAC,EAAAH,GAAA,EACE,UAAA;AAAA,EAAAL,GAAO,0BACN,OAAA,EAAI,OAAO,EAAE,OAAO,IAAI,QAAQ,GAAA,GAChC,UAAA,gBAAAE;AAAA,IAACF,EAAM;AAAA,IAAN;AAAA,MACA,OAAO;AAAA,MACP,OACCA,EAAM,WACHS,EAAO,QAAQ,QACfT,EAAM,WACNS,EAAO,QAAQ,WACfA,EAAO,QAAQ;AAAA,IAAA;AAAA,EAAA,GAGrB;AAAA,EAED,gBAAAD,EAAC,OAAA,EAAI,aAAWR,GAAO,YACrB,UAAA;AAAA,IAAAA,EAAM,SACN,gBAAAE;AAAA,MAACQ;AAAA,MAAA;AAAA,QACA,OAAO;AAAA,UACN,OAAOV,EAAM,WACVS,EAAO,QAAQ,QACfT,EAAM,WACNS,EAAO,QAAQ,WACfA,EAAO,QAAQ;AAAA,QAAA;AAAA,QAGlB,UAAAT,EAAM;AAAA,MAAA;AAAA,IAAA;AAAA,IAGRA,EAAM,YACN,gBAAAE;AAAA,MAACS;AAAA,MAAA;AAAA,QACA,OAAO;AAAA,UACN,WAAWX,EAAM,QAAQ,IAAI;AAAA,UAC7B,OAAOA,EAAM,WACVS,EAAO,QAAQ,QACfT,EAAM,WACNS,EAAO,QAAQ,WACfA,EAAO,QAAQ;AAAA,QAAA;AAAA,QAGlB,UAAAT,EAAM;AAAA,MAAA;AAAA,IAAA;AAAA,EACR,EAAA,CAEF;AAAA,EAAA,CACD,EAAA,CAEF;"}

package/dist/esm/components/card-selector/CardSelectorGroup.js CHANGED Viewed

@@ -3,6 +3,7 @@ import { CardSelector as l } from "./CardSelector.js";
 const a = (e) => /* @__PURE__ */ i(
   "div",
   {
+    "data-testid": "card-selector-group",
     style: {
       display: "flex",
       flexDirection: e.align === "vertical" ? "column" : "row",

package/dist/esm/components/card-selector/CardSelectorGroup.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CardSelectorGroup.js","sources":["../../../../src/components/card-selector/CardSelectorGroup.tsx"],"sourcesContent":["import React from 'react';\nimport { CardSelector, CardSelectorProps } from './CardSelector';\n\nexport type CardSelectorGroupProps = {\n\tgap?: number;\n\talign?: 'horizontal' \| 'vertical';\n\tcards: CardSelectorProps[];\n\tonClick: (id: number) => void;\n\t'data-test': string;\n};\n\nexport const CardSelectorGroup: React.FC<CardSelectorGroupProps> = (props) => {\n\treturn (\n\t\t<div\n\t\t\tstyle={{\n\t\t\t\tdisplay: 'flex',\n\t\t\t\tflexDirection: props.align === 'vertical' ? 'column' : 'row',\n\t\t\t\tgap: props.gap \|\| 16,\n\t\t\t}}\n\t\t>\n\t\t\t{props.cards.map((card) => (\n\t\t\t\t<div key={card.id} style={{ display: 'flex', flex: 1 }}>\n\t\t\t\t\t<CardSelector\n\t\t\t\t\t\tdata-test={props['data-test']}\n\t\t\t\t\t\tid={card.id}\n\t\t\t\t\t\ticon={card.icon}\n\t\t\t\t\t\ttitle={card.title}\n\t\t\t\t\t\tsubtitle={card.subtitle}\n\t\t\t\t\t\tselected={card.selected}\n\t\t\t\t\t\tonCardClick={props.onClick}\n\t\t\t\t\t\tloading={card.loading}\n\t\t\t\t\t\tdisabled={card.disabled}\n\t\t\t\t\t\tdataTestId={card.dataTestId}\n\t\t\t\t\t\ttooltip={card.tooltip}\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t))}\n\t\t</div>\n\t);\n};\n"],"names":["CardSelectorGroup","props","jsx","card","CardSelector"],"mappings":";;AAWO,MAAMA,IAAsD,CAACC,MAElE,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACA,OAAO;AAAA,MACN,SAAS;AAAA,MACT,eAAeD,EAAM,UAAU,aAAa,WAAW;AAAA,MACvD,KAAKA,EAAM,OAAO;AAAA,IAAA;AAAA,IAGlB,UAAAA,EAAM,MAAM,IAAI,CAACE,MACjB,gBAAAD,EAAC,OAAA,EAAkB,OAAO,EAAE,SAAS,QAAQ,MAAM,KAClD,UAAA,gBAAAA;AAAA,MAACE;AAAA,MAAA;AAAA,QACA,aAAWH,EAAM,WAAW;AAAA,QAC5B,IAAIE,EAAK;AAAA,QACT,MAAMA,EAAK;AAAA,QACX,OAAOA,EAAK;AAAA,QACZ,UAAUA,EAAK;AAAA,QACf,UAAUA,EAAK;AAAA,QACf,aAAaF,EAAM;AAAA,QACnB,SAASE,EAAK;AAAA,QACd,UAAUA,EAAK;AAAA,QACf,YAAYA,EAAK;AAAA,QACjB,SAASA,EAAK;AAAA,MAAA;AAAA,IAAA,EACf,GAbSA,EAAK,EAcf,CACA;AAAA,EAAA;AAAA;"}
1	+ {"version":3,"file":"CardSelectorGroup.js","sources":["../../../../src/components/card-selector/CardSelectorGroup.tsx"],"sourcesContent":["import React from 'react';\nimport { CardSelector, CardSelectorProps } from './CardSelector';\n\nexport type CardSelectorGroupProps = {\n\tgap?: number;\n\talign?: 'horizontal' \| 'vertical';\n\tcards: CardSelectorProps[];\n\tonClick: (id: number) => void;\n\t'data-test': string;\n};\n\nexport const CardSelectorGroup: React.FC<CardSelectorGroupProps> = (props) => {\n\treturn (\n\t\t<div\n\t\t\tdata-testid=\"card-selector-group\"\n\t\t\tstyle={{\n\t\t\t\tdisplay: 'flex',\n\t\t\t\tflexDirection: props.align === 'vertical' ? 'column' : 'row',\n\t\t\t\tgap: props.gap \|\| 16,\n\t\t\t}}\n\t\t>\n\t\t\t{props.cards.map((card) => (\n\t\t\t\t<div key={card.id} style={{ display: 'flex', flex: 1 }}>\n\t\t\t\t\t<CardSelector\n\t\t\t\t\t\tdata-test={props['data-test']}\n\t\t\t\t\t\tid={card.id}\n\t\t\t\t\t\ticon={card.icon}\n\t\t\t\t\t\ttitle={card.title}\n\t\t\t\t\t\tsubtitle={card.subtitle}\n\t\t\t\t\t\tselected={card.selected}\n\t\t\t\t\t\tonCardClick={props.onClick}\n\t\t\t\t\t\tloading={card.loading}\n\t\t\t\t\t\tdisabled={card.disabled}\n\t\t\t\t\t\tdataTestId={card.dataTestId}\n\t\t\t\t\t\ttooltip={card.tooltip}\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t))}\n\t\t</div>\n\t);\n};\n"],"names":["CardSelectorGroup","props","jsx","card","CardSelector"],"mappings":";;AAWO,MAAMA,IAAsD,CAACC,MAElE,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACA,eAAY;AAAA,IACZ,OAAO;AAAA,MACN,SAAS;AAAA,MACT,eAAeD,EAAM,UAAU,aAAa,WAAW;AAAA,MACvD,KAAKA,EAAM,OAAO;AAAA,IAAA;AAAA,IAGlB,UAAAA,EAAM,MAAM,IAAI,CAACE,MACjB,gBAAAD,EAAC,OAAA,EAAkB,OAAO,EAAE,SAAS,QAAQ,MAAM,KAClD,UAAA,gBAAAA;AAAA,MAACE;AAAA,MAAA;AAAA,QACA,aAAWH,EAAM,WAAW;AAAA,QAC5B,IAAIE,EAAK;AAAA,QACT,MAAMA,EAAK;AAAA,QACX,OAAOA,EAAK;AAAA,QACZ,UAAUA,EAAK;AAAA,QACf,UAAUA,EAAK;AAAA,QACf,aAAaF,EAAM;AAAA,QACnB,SAASE,EAAK;AAAA,QACd,UAAUA,EAAK;AAAA,QACf,YAAYA,EAAK;AAAA,QACjB,SAASA,EAAK;AAAA,MAAA;AAAA,IAAA,EACf,GAbSA,EAAK,EAcf,CACA;AAAA,EAAA;AAAA;"}

package/dist/esm/components/carousel/carousel.js CHANGED Viewed

@@ -1,17 +1,17 @@
-import { jsx as r, Fragment as e } from "react/jsx-runtime";
+import { jsx as r, Fragment as o } from "react/jsx-runtime";
 import i from "../../assets/icons/chevronLeft.svg.js";
-import n from "../../assets/icons/chevronRight.svg.js";
-import { Carousel as l } from "@trendyol-js/react-carousel";
+import a from "../../assets/icons/chevronRight.svg.js";
+import { Carousel as n } from "@trendyol-js/react-carousel";
 import s from "styled-components";
-const a = () => /* @__PURE__ */ r(o, { className: "left", children: /* @__PURE__ */ r(i, { width: 16, height: 16, color: "#fff" }) }), h = () => /* @__PURE__ */ r(o, { className: "right", children: /* @__PURE__ */ r(n, { width: 16, height: 16, color: "#fff" }) }), p = (t) => /* @__PURE__ */ r(e, { children: /* @__PURE__ */ r(
-  l,
+const l = () => /* @__PURE__ */ r(e, { className: "left", "data-testid": "carousel-left-arrow", children: /* @__PURE__ */ r(i, { width: 16, height: 16, color: "#fff" }) }), h = () => /* @__PURE__ */ r(e, { className: "right", "data-testid": "carousel-right-arrow", children: /* @__PURE__ */ r(a, { width: 16, height: 16, color: "#fff" }) }), u = (t) => /* @__PURE__ */ r(o, { children: /* @__PURE__ */ r(
+  n,
   {
-    leftArrow: /* @__PURE__ */ r(a, {}),
+    leftArrow: /* @__PURE__ */ r(l, {}),
     rightArrow: /* @__PURE__ */ r(h, {}),
     ...t,
     children: t.children
   }
-) }), o = s.div`
+) }), e = s.div`
 	cursor: pointer;
 	margin: 0 8px;
 	width: 50px;
@@ -34,6 +34,6 @@ const a = () => /* @__PURE__ */ r(o, { className: "left", children: /* @__PURE__
 	}
 `;
 export {
-  p as Carousel
+  u as Carousel
 };
 //# sourceMappingURL=carousel.js.map

package/dist/esm/components/carousel/carousel.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"carousel.js","sources":["../../../../src/components/carousel/carousel.tsx"],"sourcesContent":["import ChevronLeft from '@src/assets/icons/chevronLeft.svg';\nimport ChevronRight from '@src/assets/icons/chevronRight.svg';\nimport { Carousel as ReactCarousel } from '@trendyol-js/react-carousel';\nimport { CarouselProps } from '@trendyol-js/react-carousel/dist/types/components/carousel';\nimport styled from 'styled-components';\n\nconst LeftArrow = () => {\n\treturn (\n\t\t<ArrowContainer className=\"left\">\n\t\t\t<ChevronLeft width={16} height={16} color=\"#fff\" />\n\t\t</ArrowContainer>\n\t);\n};\n\nconst RightArrow = () => {\n\treturn (\n\t\t<ArrowContainer className=\"right\">\n\t\t\t<ChevronRight width={16} height={16} color=\"#fff\" />\n\t\t</ArrowContainer>\n\t);\n};\n\nexport const Carousel = (props: CarouselProps) => {\n\treturn (\n\t\t<>\n\t\t\t<ReactCarousel\n\t\t\t\tleftArrow={<LeftArrow />}\n\t\t\t\trightArrow={<RightArrow />}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{props.children}\n\t\t\t</ReactCarousel>\n\t\t</>\n\t);\n};\n\nconst ArrowContainer = styled.div`\n\tcursor: pointer;\n\tmargin: 0 8px;\n\twidth: 50px;\n\theight: 50px;\n\tborder-radius: 25px;\n\tdisplay: flex;\n\talign-items: center;\n\tbackground-color: rgba(0, 0, 0, 0.4);\n\tjustify-content: center;\n\tposition: absolute;\n\tz-index: 2;\n\ttop: 50%;\n\t&.left {\n\t\ttransform: translate(0%, -50%);\n\t\tleft: 0;\n\t}\n\t&.right {\n\t\ttransform: translate(0%, -50%);\n\t\tright: 0;\n\t}\n`;\n"],"names":["LeftArrow","jsx","ArrowContainer","ChevronLeft","RightArrow","ChevronRight","Carousel","props","Fragment","ReactCarousel","styled"],"mappings":";;;;;AAMA,MAAMA,IAAY,MAEhB,gBAAAC,EAACC,GAAA,EAAe,WAAU,~~QACzB~~,UAAA,gBAAAD,EAACE,GAAA,EAAY,OAAO,IAAI,QAAQ,IAAI,OAAM,~~OAAA~~,~~CAAO,~~GAClD,GAIIC,IAAa,MAEjB,gBAAAH,EAACC,GAAA,EAAe,WAAU,~~SACzB~~,UAAA,gBAAAD,EAACI,GAAA,EAAa,OAAO,IAAI,QAAQ,IAAI,OAAM,~~OAAA~~,~~CAAO,~~GACnD,GAIWC,IAAW,CAACC,MAEvB,gBAAAN,EAAAO,GAAA,EACC,UAAA,gBAAAP;AAAA,EAACQ;AAAAA,EAAA;AAAA,IACA,6BAAYT,GAAA,EAAU;AAAA,IACtB,8BAAaI,GAAA,EAAW;AAAA,IACvB,GAAGG;AAAA,IAEH,UAAAA,EAAM;AAAA,EAAA;AAAA,GAET,GAIIL,IAAiBQ,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;"}
1	+ {"version":3,"file":"carousel.js","sources":["../../../../src/components/carousel/carousel.tsx"],"sourcesContent":["import ChevronLeft from '@src/assets/icons/chevronLeft.svg';\nimport ChevronRight from '@src/assets/icons/chevronRight.svg';\nimport { Carousel as ReactCarousel } from '@trendyol-js/react-carousel';\nimport { CarouselProps } from '@trendyol-js/react-carousel/dist/types/components/carousel';\nimport styled from 'styled-components';\n\nconst LeftArrow = () => {\n\treturn (\n\t\t<ArrowContainer className=\"left\" data-testid=\"carousel-left-arrow\">\n\t\t\t<ChevronLeft width={16} height={16} color=\"#fff\" />\n\t\t</ArrowContainer>\n\t);\n};\n\nconst RightArrow = () => {\n\treturn (\n\t\t<ArrowContainer className=\"right\" data-testid=\"carousel-right-arrow\">\n\t\t\t<ChevronRight width={16} height={16} color=\"#fff\" />\n\t\t</ArrowContainer>\n\t);\n};\n\nexport const Carousel = (props: CarouselProps) => {\n\treturn (\n\t\t<>\n\t\t\t<ReactCarousel\n\t\t\t\tleftArrow={<LeftArrow />}\n\t\t\t\trightArrow={<RightArrow />}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{props.children}\n\t\t\t</ReactCarousel>\n\t\t</>\n\t);\n};\n\nconst ArrowContainer = styled.div`\n\tcursor: pointer;\n\tmargin: 0 8px;\n\twidth: 50px;\n\theight: 50px;\n\tborder-radius: 25px;\n\tdisplay: flex;\n\talign-items: center;\n\tbackground-color: rgba(0, 0, 0, 0.4);\n\tjustify-content: center;\n\tposition: absolute;\n\tz-index: 2;\n\ttop: 50%;\n\t&.left {\n\t\ttransform: translate(0%, -50%);\n\t\tleft: 0;\n\t}\n\t&.right {\n\t\ttransform: translate(0%, -50%);\n\t\tright: 0;\n\t}\n`;\n"],"names":["LeftArrow","jsx","ArrowContainer","ChevronLeft","RightArrow","ChevronRight","Carousel","props","Fragment","ReactCarousel","styled"],"mappings":";;;;;AAMA,MAAMA,IAAY,MAEhB,gBAAAC,EAACC,GAAA,EAAe,WAAU,QAAO,eAAY,uBAC5C,UAAA,gBAAAD,EAACE,GAAA,EAAY,OAAO,IAAI,QAAQ,IAAI,OAAM,QAAO,GAClD,GAIIC,IAAa,MAEjB,gBAAAH,EAACC,GAAA,EAAe,WAAU,SAAQ,eAAY,wBAC7C,UAAA,gBAAAD,EAACI,GAAA,EAAa,OAAO,IAAI,QAAQ,IAAI,OAAM,QAAO,GACnD,GAIWC,IAAW,CAACC,MAEvB,gBAAAN,EAAAO,GAAA,EACC,UAAA,gBAAAP;AAAA,EAACQ;AAAAA,EAAA;AAAA,IACA,6BAAYT,GAAA,EAAU;AAAA,IACtB,8BAAaI,GAAA,EAAW;AAAA,IACvB,GAAGG;AAAA,IAEH,UAAAA,EAAM;AAAA,EAAA;AAAA,GAET,GAIIL,IAAiBQ,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;"}

package/dist/esm/components/checkBox/CheckBox.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { jsxs as w, jsx as a, Fragment as M } from "react/jsx-runtime";
 import { useState as r, useEffect as o, useMemo as P } from "react";
 import { CheckboxContainer as B, CheckboxIcon as I } from "./CheckBox.styled.js";
-import { TitleSmall as k, BodyPrimary as f, BodySecondary as h, BodyCaption as m, TitleRegular as H } from "../TypographyStyle.js";
+import { TitleSmall as C, BodyPrimary as f, BodySecondary as h, BodyCaption as m, TitleRegular as H } from "../TypographyStyle.js";
 import { COLORS as i } from "../../constants/Theme.js";
 const T = (e) => {
   const c = P(
@@ -23,6 +23,7 @@ const T = (e) => {
   return /* @__PURE__ */ w(
     "svg",
     {
+      "data-testid": "checkbox-mark",
       width: l.box,
       height: l.box,
       viewBox: `0 0 ${l.box} ${l.box}`,
@@ -43,6 +44,7 @@ const T = (e) => {
         !e.isPartial && /* @__PURE__ */ a(
           "svg",
           {
+            "data-testid": "checkmark-icon",
             width: l.check.w,
             height: l.check.h,
             x: l.check.x,
@@ -64,6 +66,7 @@ const T = (e) => {
         e.isPartial && /* @__PURE__ */ a(
           "rect",
           {
+            "data-testid": "partial-mark",
             x: l.partial.x,
             y: l.partial.y,
             width: l.partial.w,
@@ -80,8 +83,8 @@ const T = (e) => {
     e.isPartiallyChecked || !1
   ), [d, u] = r(e.isDisabled || !1), [v, b] = r(!1), [g, x] = r(!1), y = (t) => {
     if (!e.isDisabled) {
-      const C = !c;
-      n ? s(!n) : l(C), e.onValueChange?.(C, e.value, t);
+      const k = !c;
+      n ? s(!n) : l(k), e.onValueChange?.(k, e.value, t);
     }
   }, D = (t) => {
     y(t);
@@ -103,7 +106,7 @@ const T = (e) => {
         bodyCaption: m,
         bodySecondary: h,
         bodyPrimary: f,
-        titleSmall: k
+        titleSmall: C
       }[e.labelTypography];
       return /* @__PURE__ */ a(
         t,
@@ -126,7 +129,7 @@ const T = (e) => {
         children: e.label
       }
     ) : /* @__PURE__ */ a(
-      k,
+      C,
       {
         color: e.isDisabled ? i.text.disabled : i.text.primary,
         children: e.label