@bikdotai/bik-component-library 0.0.865-beta.4 → 0.0.865-beta.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/components/agent-builder/AgentBuilder.js +1 -1
- package/dist/cjs/components/agent-builder/AgentBuilder.js.map +1 -1
- package/dist/cjs/components/agent-builder/AgentBuilder.styled.js +29 -151
- package/dist/cjs/components/agent-builder/AgentBuilder.styled.js.map +1 -1
- package/dist/cjs/components/agent-builder/components/CreateSubAgentPanel.js +5 -5
- package/dist/cjs/components/agent-builder/components/CreateSubAgentPanel.js.map +1 -1
- package/dist/cjs/components/agent-builder/components/MentionEditor.js +2 -2
- package/dist/cjs/components/agent-builder/components/MentionEditor.js.map +1 -1
- package/dist/cjs/components/agent-builder/components/MentionField.js +1 -1
- package/dist/cjs/components/agent-builder/components/MentionField.js.map +1 -1
- package/dist/cjs/components/agent-builder/components/MentionPicker.js +13 -13
- package/dist/cjs/components/agent-builder/components/MentionPicker.js.map +1 -1
- package/dist/cjs/components/agent-builder/components/SelectableListSection.js +3 -3
- package/dist/cjs/components/agent-builder/components/SelectableListSection.js.map +1 -1
- package/dist/cjs/components/agent-builder/constants/steps.js +1 -1
- package/dist/cjs/components/agent-builder/constants/steps.js.map +1 -1
- package/dist/cjs/components/agent-builder/context/AgentBuilderContext.js +1 -1
- package/dist/cjs/components/agent-builder/context/AgentBuilderContext.js.map +1 -1
- package/dist/cjs/components/agent-builder/steps/Step1About.js +1 -1
- package/dist/cjs/components/agent-builder/steps/Step1About.js.map +1 -1
- package/dist/cjs/components/agent-builder/steps/Step2WhenItStepsIn.js +2 -2
- package/dist/cjs/components/agent-builder/steps/Step2WhenItStepsIn.js.map +1 -1
- package/dist/cjs/components/agent-builder/steps/Step3HowItResponds.js +1 -1
- package/dist/cjs/components/agent-builder/steps/Step3HowItResponds.js.map +1 -1
- package/dist/cjs/components/agent-builder/steps/Step4HandoverRules.js +1 -1
- package/dist/cjs/components/agent-builder/steps/Step4HandoverRules.js.map +1 -1
- package/dist/cjs/components/agent-builder/utils/mentionSerialization.js +4 -4
- package/dist/cjs/components/agent-builder/utils/mentionSerialization.js.map +1 -1
- package/dist/cjs/components/button/Button.js +1 -1
- package/dist/cjs/components/button/Button.js.map +1 -1
- package/dist/cjs/components/button/Button.styled.js +2 -2
- package/dist/cjs/components/button/Button.styled.js.map +1 -1
- package/dist/cjs/components/dropdown-button/DropdownButton.js +1 -1
- package/dist/cjs/components/dropdown-button/DropdownButton.js.map +1 -1
- package/dist/cjs/components/tag/Tag.js +1 -1
- package/dist/cjs/components/tag/Tag.js.map +1 -1
- package/dist/cjs/components/tag/Tag.styled.js +4 -4
- package/dist/cjs/components/tag/Tag.styled.js.map +1 -1
- package/dist/cjs/components/tag/model.js.map +1 -1
- package/dist/cjs/icons/BIK AI specific/WandSparkles.js +1 -1
- package/dist/cjs/icons/BIK AI specific/WandSparkles.js.map +1 -1
- package/dist/cjs/icons/Informational/General/MessageSource.js +2 -0
- package/dist/cjs/icons/Informational/General/MessageSource.js.map +1 -0
- package/dist/cjs/icons/index.js +1 -1
- package/dist/cjs/index.js +1 -1
- package/dist/esm/components/agent-builder/AgentBuilder.js +97 -103
- package/dist/esm/components/agent-builder/AgentBuilder.js.map +1 -1
- package/dist/esm/components/agent-builder/AgentBuilder.model.d.ts +0 -76
- package/dist/esm/components/agent-builder/AgentBuilder.styled.d.ts +0 -68
- package/dist/esm/components/agent-builder/AgentBuilder.styled.js +59 -224
- package/dist/esm/components/agent-builder/AgentBuilder.styled.js.map +1 -1
- package/dist/esm/components/agent-builder/components/CreateSubAgentPanel.js +132 -135
- package/dist/esm/components/agent-builder/components/CreateSubAgentPanel.js.map +1 -1
- package/dist/esm/components/agent-builder/components/MentionEditor.d.ts +0 -2
- package/dist/esm/components/agent-builder/components/MentionEditor.js +45 -47
- package/dist/esm/components/agent-builder/components/MentionEditor.js.map +1 -1
- package/dist/esm/components/agent-builder/components/MentionField.js +51 -52
- package/dist/esm/components/agent-builder/components/MentionField.js.map +1 -1
- package/dist/esm/components/agent-builder/components/MentionPicker.d.ts +0 -5
- package/dist/esm/components/agent-builder/components/MentionPicker.js +132 -134
- package/dist/esm/components/agent-builder/components/MentionPicker.js.map +1 -1
- package/dist/esm/components/agent-builder/components/SelectableListSection.d.ts +0 -2
- package/dist/esm/components/agent-builder/components/SelectableListSection.js +46 -48
- package/dist/esm/components/agent-builder/components/SelectableListSection.js.map +1 -1
- package/dist/esm/components/agent-builder/constants/steps.d.ts +1 -31
- package/dist/esm/components/agent-builder/constants/steps.js +6 -15
- package/dist/esm/components/agent-builder/constants/steps.js.map +1 -1
- package/dist/esm/components/agent-builder/context/AgentBuilderContext.d.ts +1 -13
- package/dist/esm/components/agent-builder/context/AgentBuilderContext.js +148 -157
- package/dist/esm/components/agent-builder/context/AgentBuilderContext.js.map +1 -1
- package/dist/esm/components/agent-builder/index.d.ts +2 -5
- package/dist/esm/components/agent-builder/steps/Step1About.js +13 -15
- package/dist/esm/components/agent-builder/steps/Step1About.js.map +1 -1
- package/dist/esm/components/agent-builder/steps/Step2WhenItStepsIn.js +48 -55
- package/dist/esm/components/agent-builder/steps/Step2WhenItStepsIn.js.map +1 -1
- package/dist/esm/components/agent-builder/steps/Step3HowItResponds.js +157 -158
- package/dist/esm/components/agent-builder/steps/Step3HowItResponds.js.map +1 -1
- package/dist/esm/components/agent-builder/steps/Step4HandoverRules.d.ts +0 -11
- package/dist/esm/components/agent-builder/steps/Step4HandoverRules.js +23 -127
- package/dist/esm/components/agent-builder/steps/Step4HandoverRules.js.map +1 -1
- package/dist/esm/components/agent-builder/utils/mentionSerialization.d.ts +2 -7
- package/dist/esm/components/agent-builder/utils/mentionSerialization.js +2 -2
- package/dist/esm/components/agent-builder/utils/mentionSerialization.js.map +1 -1
- package/dist/esm/components/button/Button.js +21 -19
- package/dist/esm/components/button/Button.js.map +1 -1
- package/dist/esm/components/button/Button.styled.d.ts +1 -0
- package/dist/esm/components/button/Button.styled.js +5 -5
- package/dist/esm/components/button/Button.styled.js.map +1 -1
- package/dist/esm/components/button/model.d.ts +5 -0
- package/dist/esm/components/dropdown-button/DropdownButton.d.ts +5 -0
- package/dist/esm/components/dropdown-button/DropdownButton.js +4 -3
- package/dist/esm/components/dropdown-button/DropdownButton.js.map +1 -1
- package/dist/esm/components/tag/Tag.d.ts +1 -1
- package/dist/esm/components/tag/Tag.js +48 -41
- package/dist/esm/components/tag/Tag.js.map +1 -1
- package/dist/esm/components/tag/Tag.styled.d.ts +3 -0
- package/dist/esm/components/tag/Tag.styled.js +6 -9
- package/dist/esm/components/tag/Tag.styled.js.map +1 -1
- package/dist/esm/components/tag/model.d.ts +11 -0
- package/dist/esm/components/tag/model.js.map +1 -1
- package/dist/esm/icons/BIK AI specific/WandSparkles.js +1 -1
- package/dist/esm/icons/BIK AI specific/WandSparkles.js.map +1 -1
- package/dist/esm/icons/Informational/General/MessageSource.d.ts +7 -0
- package/dist/esm/icons/Informational/General/MessageSource.js +46 -0
- package/dist/esm/icons/Informational/General/MessageSource.js.map +1 -0
- package/dist/esm/icons/Informational/General/index.d.ts +1 -0
- package/dist/esm/icons/index.d.ts +25 -25
- package/dist/esm/icons/index.js +294 -292
- package/dist/esm/icons/index.js.map +1 -1
- package/dist/esm/index.js +636 -644
- package/dist/esm/index.js.map +1 -1
- package/package.json +1 -1
- package/dist/cjs/components/agent-builder/components/ChannelSelectModal.js +0 -2
- package/dist/cjs/components/agent-builder/components/ChannelSelectModal.js.map +0 -1
- package/dist/cjs/components/agent-builder/components/ChannelsSection.js +0 -2
- package/dist/cjs/components/agent-builder/components/ChannelsSection.js.map +0 -1
- package/dist/cjs/components/agent-builder/constants/channels.js +0 -2
- package/dist/cjs/components/agent-builder/constants/channels.js.map +0 -1
- package/dist/esm/components/agent-builder/components/ChannelSelectModal.d.ts +0 -26
- package/dist/esm/components/agent-builder/components/ChannelSelectModal.js +0 -121
- package/dist/esm/components/agent-builder/components/ChannelSelectModal.js.map +0 -1
- package/dist/esm/components/agent-builder/components/ChannelsSection.d.ts +0 -10
- package/dist/esm/components/agent-builder/components/ChannelsSection.js +0 -183
- package/dist/esm/components/agent-builder/components/ChannelsSection.js.map +0 -1
- package/dist/esm/components/agent-builder/constants/channels.d.ts +0 -56
- package/dist/esm/components/agent-builder/constants/channels.js +0 -41
- package/dist/esm/components/agent-builder/constants/channels.js.map +0 -1
package/dist/esm/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
package/package.json
CHANGED
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),j=require("../../../assets/icons/RedirectToNew.svg.js"),x=require("react"),i=require("../../TypographyStyle.js"),r=require("../../../constants/Theme.js"),a=require("../AgentBuilder.styled.js"),g=require("../constants/channels.js"),f=require("../../modals/styledModal.js"),T=require("../../checkBox/CheckBox.js"),k=require("../../tag/Tag.js"),p=({channel:n,selectedIds:c,onClose:s,onApply:S,onManageChannels:d})=>{const[h,u]=x.useState(c);if(x.useEffect(()=>{n&&u(c)},[n]),!n)return null;const{Icon:y,tint:m,accountsNoun:o}=g.channelPresentation(n.type,n.label),C=t=>u(l=>l.includes(t)?l.filter(b=>b!==t):[...l,t]);return e.jsx(f.StyledModal,{"data-test":"agent-channel-select-modal",open:!0,onClose:s,width:"640px",headingTitle:"Select channels to activate",headingSubtitle:`Select the ${o} on which you need this agent enabled on.`,modalHeaderStyles:{padding:"24px",boxSizing:"border-box"},modalBodyStyles:{boxSizing:"border-box"},footerContainerStyle:{padding:"20px 24px",boxSizing:"border-box"},footerLeftCustomElement:d?e.jsxs(a.ChannelsLink,{"data-test":"agent-channel-management-link",type:"button",onClick:d,style:{fontSize:14,lineHeight:"20px",fontWeight:600},children:["Channel management",e.jsx(j.default,{width:16,height:16})]}):void 0,secondaryButton:{"data-test":"agent-channel-cancel",buttonType:"tertiaryGray",size:"small",buttonText:"Cancel",onClick:s},primaryButton:{"data-test":"agent-channel-apply",buttonType:"primary",size:"small",buttonText:"Apply",onClick:()=>S(h)},children:e.jsxs(a.ChannelPickerBody,{children:[e.jsx(i.BodySecondary,{color:r.COLORS.content.secondary,children:`Select from available ${o}`}),e.jsxs(a.ChannelPickerList,{children:[n.accounts.map(t=>{const l=g.isAccountDisconnected(t);return e.jsxs(a.ChannelPickerRow,{"data-test":`agent-channel-account-${t.channelId}`,children:[e.jsx(T.CheckBox,{isChecked:h.includes(t.channelId),ariaLabel:t.channelName,value:t.channelId,onValueChange:()=>C(t.channelId),style:a.CHECKBOX_SLOT}),e.jsxs(a.ChannelPickerAccount,{children:[e.jsx(a.ChannelGlyph,{tint:m,children:y&&e.jsx(y,{size:16})}),e.jsx(i.TitleSmall,{color:r.COLORS.content.primary,children:t.channelName}),l&&e.jsx(k.Tag,{tagText:"Disconnected",type:"negative",variant:"regular",height:20,padding:"2px 8px"})]})]},t.channelId)}),n.accounts.length===0&&e.jsx(i.BodySecondary,{color:r.COLORS.content.placeholder,children:`No ${o} are connected to this store yet.`})]})]})})};p.displayName="ChannelSelectModal";exports.ChannelSelectModal=p;
|
|
2
|
-
//# sourceMappingURL=ChannelSelectModal.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"ChannelSelectModal.js","sources":["../../../../../src/components/agent-builder/components/ChannelSelectModal.tsx"],"sourcesContent":["import RedirectIcon from '@src/assets/icons/RedirectToNew.svg';\nimport React, { useEffect, useState } from 'react';\nimport { CheckBox } from '@src/components/checkBox';\nimport { StyledModal } from '@src/components/modals';\nimport { Tag } from '@src/components/tag';\nimport { BodySecondary, TitleSmall } from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport type { AgentChannel } from '../AgentBuilder.model';\nimport {\n\tChannelGlyph,\n\tChannelPickerAccount,\n\tChannelPickerBody,\n\tChannelPickerList,\n\tChannelPickerRow,\n\tChannelsLink,\n\tCHECKBOX_SLOT,\n} from '../AgentBuilder.styled';\nimport {\n\tchannelPresentation,\n\tisAccountDisconnected,\n} from '../constants/channels';\n\ninterface ChannelSelectModalProps {\n\t/** The channel being edited. `null` closes the modal. */\n\tchannel: AgentChannel | null;\n\t/** Currently activated backend channel ids for this channel. */\n\tselectedIds: string[];\n\tonClose: () => void;\n\t/** Apply — commits the draft selection as backend channel ids. */\n\tonApply: (channelIds: string[]) => void;\n\t/** Footer \"Channel management\" link. Omit to hide it. */\n\tonManageChannels?: () => void;\n}\n\n/**\n * Per-channel account picker, opened from a channel row's edit button.\n *\n * The selection is a LOCAL draft until Apply — the design gives the merchant a\n * Cancel, so toggling here must not reach the agent value until they commit.\n *\n * A disconnected account stays selectable and stays selected: the merchant may\n * be mid-reconnect, and quietly removing it from their agent would hide the\n * problem rather than surface it. It's labelled instead, and the row it came\n * from carries the alert.\n */\nexport const ChannelSelectModal: React.FC<ChannelSelectModalProps> = ({\n\tchannel,\n\tselectedIds,\n\tonClose,\n\tonApply,\n\tonManageChannels,\n}) => {\n\tconst [draft, setDraft] = useState<string[]>(selectedIds);\n\n\t// Re-seed whenever the modal opens (or reopens for a different channel), so a\n\t// cancelled edit doesn't leak into the next one.\n\tuseEffect(() => {\n\t\tif (channel) {\n\t\t\tsetDraft(selectedIds);\n\t\t}\n\t\t// `selectedIds` is intentionally read only at open time — the draft owns it\n\t\t// from then until Apply.\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [channel]);\n\n\tif (!channel) {\n\t\treturn null;\n\t}\n\n\tconst { Icon, tint, accountsNoun } = channelPresentation(\n\t\tchannel.type,\n\t\tchannel.label,\n\t);\n\n\tconst toggle = (channelId: string) =>\n\t\tsetDraft((prev) =>\n\t\t\tprev.includes(channelId)\n\t\t\t\t? prev.filter((id) => id !== channelId)\n\t\t\t\t: [...prev, channelId],\n\t\t);\n\n\treturn (\n\t\t<StyledModal\n\t\t\tdata-test=\"agent-channel-select-modal\"\n\t\t\topen\n\t\t\tonClose={onClose}\n\t\t\twidth=\"640px\"\n\t\t\theadingTitle=\"Select channels to activate\"\n\t\t\theadingSubtitle={`Select the ${accountsNoun} on which you need this agent enabled on.`}\n\t\t\t// This repo has no global `box-sizing: border-box`, so StyledModal's\n\t\t\t// `width: 100%` + 24px side padding resolves to 688px inside its 640px\n\t\t\t// `overflow: hidden` wrapper — clipping the right 48px, and with it the\n\t\t\t// primary button. Border-box on each section is the fix that doesn't\n\t\t\t// touch the shared modal.\n\t\t\tmodalHeaderStyles={{ padding: '24px', boxSizing: 'border-box' }}\n\t\t\tmodalBodyStyles={{ boxSizing: 'border-box' }}\n\t\t\tfooterContainerStyle={{ padding: '20px 24px', boxSizing: 'border-box' }}\n\t\t\tfooterLeftCustomElement={\n\t\t\t\tonManageChannels ? (\n\t\t\t\t\t<ChannelsLink\n\t\t\t\t\t\tdata-test=\"agent-channel-management-link\"\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\tonClick={onManageChannels}\n\t\t\t\t\t\tstyle={{ fontSize: 14, lineHeight: '20px', fontWeight: 600 }}\n\t\t\t\t\t>\n\t\t\t\t\t\tChannel management\n\t\t\t\t\t\t<RedirectIcon width={16} height={16} />\n\t\t\t\t\t</ChannelsLink>\n\t\t\t\t) : undefined\n\t\t\t}\n\t\t\tsecondaryButton={{\n\t\t\t\t'data-test': 'agent-channel-cancel',\n\t\t\t\tbuttonType: 'tertiaryGray',\n\t\t\t\tsize: 'small',\n\t\t\t\tbuttonText: 'Cancel',\n\t\t\t\tonClick: onClose,\n\t\t\t}}\n\t\t\tprimaryButton={{\n\t\t\t\t'data-test': 'agent-channel-apply',\n\t\t\t\tbuttonType: 'primary',\n\t\t\t\tsize: 'small',\n\t\t\t\tbuttonText: 'Apply',\n\t\t\t\tonClick: () => onApply(draft),\n\t\t\t}}\n\t\t>\n\t\t\t<ChannelPickerBody>\n\t\t\t\t<BodySecondary color={COLORS.content.secondary}>\n\t\t\t\t\t{`Select from available ${accountsNoun}`}\n\t\t\t\t</BodySecondary>\n\n\t\t\t\t<ChannelPickerList>\n\t\t\t\t\t{channel.accounts.map((account) => {\n\t\t\t\t\t\tconst disconnected = isAccountDisconnected(account);\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<ChannelPickerRow\n\t\t\t\t\t\t\t\tkey={account.channelId}\n\t\t\t\t\t\t\t\tdata-test={`agent-channel-account-${account.channelId}`}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<CheckBox\n\t\t\t\t\t\t\t\t\tisChecked={draft.includes(account.channelId)}\n\t\t\t\t\t\t\t\t\tariaLabel={account.channelName}\n\t\t\t\t\t\t\t\t\tvalue={account.channelId}\n\t\t\t\t\t\t\t\t\tonValueChange={() => toggle(account.channelId)}\n\t\t\t\t\t\t\t\t\tstyle={CHECKBOX_SLOT}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t<ChannelPickerAccount>\n\t\t\t\t\t\t\t\t\t<ChannelGlyph tint={tint}>\n\t\t\t\t\t\t\t\t\t\t{Icon && <Icon size={16} />}\n\t\t\t\t\t\t\t\t\t</ChannelGlyph>\n\t\t\t\t\t\t\t\t\t<TitleSmall color={COLORS.content.primary}>\n\t\t\t\t\t\t\t\t\t\t{account.channelName}\n\t\t\t\t\t\t\t\t\t</TitleSmall>\n\t\t\t\t\t\t\t\t\t{disconnected && (\n\t\t\t\t\t\t\t\t\t\t// NOT `size=\"small\"`: that renders through BodyTiny, which\n\t\t\t\t\t\t\t\t\t\t// is 10px AND has no font-family, so it falls back to the\n\t\t\t\t\t\t\t\t\t\t// browser serif. The default reads as 12px Inter — Figma's\n\t\t\t\t\t\t\t\t\t\t// body-caption, same as every other chip.\n\t\t\t\t\t\t\t\t\t\t<Tag\n\t\t\t\t\t\t\t\t\t\t\ttagText=\"Disconnected\"\n\t\t\t\t\t\t\t\t\t\t\ttype=\"negative\"\n\t\t\t\t\t\t\t\t\t\t\tvariant=\"regular\"\n\t\t\t\t\t\t\t\t\t\t\theight={20}\n\t\t\t\t\t\t\t\t\t\t\tpadding=\"2px 8px\"\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</ChannelPickerAccount>\n\t\t\t\t\t\t\t</ChannelPickerRow>\n\t\t\t\t\t\t);\n\t\t\t\t\t})}\n\n\t\t\t\t\t{channel.accounts.length === 0 && (\n\t\t\t\t\t\t<BodySecondary color={COLORS.content.placeholder}>\n\t\t\t\t\t\t\t{`No ${accountsNoun} are connected to this store yet.`}\n\t\t\t\t\t\t</BodySecondary>\n\t\t\t\t\t)}\n\t\t\t\t</ChannelPickerList>\n\t\t\t</ChannelPickerBody>\n\t\t</StyledModal>\n\t);\n};\n\nChannelSelectModal.displayName = 'ChannelSelectModal';\n\nexport type { ChannelSelectModalProps };\n"],"names":["ChannelSelectModal","channel","selectedIds","onClose","onApply","onManageChannels","draft","setDraft","useState","useEffect","Icon","tint","accountsNoun","channelPresentation","toggle","channelId","prev","id","jsx","StyledModal","jsxs","ChannelsLink","RedirectIcon","ChannelPickerBody","BodySecondary","COLORS","ChannelPickerList","account","disconnected","isAccountDisconnected","ChannelPickerRow","CheckBox","CHECKBOX_SLOT","ChannelPickerAccount","ChannelGlyph","TitleSmall","Tag"],"mappings":"2cA6CaA,EAAwD,CAAC,CACrE,QAAAC,EACA,YAAAC,EACA,QAAAC,EACA,QAAAC,EACA,iBAAAC,CACD,IAAM,CACL,KAAM,CAACC,EAAOC,CAAQ,EAAIC,EAAAA,SAAmBN,CAAW,EAaxD,GATAO,EAAAA,UAAU,IAAM,CACXR,GACHM,EAASL,CAAW,CAKtB,EAAG,CAACD,CAAO,CAAC,EAER,CAACA,EACJ,OAAO,KAGR,KAAM,CAAE,KAAAS,EAAM,KAAAC,EAAM,aAAAC,CAAA,EAAiBC,EAAAA,oBACpCZ,EAAQ,KACRA,EAAQ,KAAA,EAGHa,EAAUC,GACfR,EAAUS,GACTA,EAAK,SAASD,CAAS,EACpBC,EAAK,OAAQC,GAAOA,IAAOF,CAAS,EACpC,CAAC,GAAGC,EAAMD,CAAS,CAAA,EAGxB,OACCG,EAAAA,IAACC,EAAAA,YAAA,CACA,YAAU,6BACV,KAAI,GACJ,QAAAhB,EACA,MAAM,QACN,aAAa,8BACb,gBAAiB,cAAcS,CAAY,4CAM3C,kBAAmB,CAAE,QAAS,OAAQ,UAAW,YAAA,EACjD,gBAAiB,CAAE,UAAW,YAAA,EAC9B,qBAAsB,CAAE,QAAS,YAAa,UAAW,YAAA,EACzD,wBACCP,EACCe,EAAAA,KAACC,EAAAA,aAAA,CACA,YAAU,gCACV,KAAK,SACL,QAAShB,EACT,MAAO,CAAE,SAAU,GAAI,WAAY,OAAQ,WAAY,GAAA,EACvD,SAAA,CAAA,qBAEAa,EAAAA,IAACI,EAAAA,QAAA,CAAa,MAAO,GAAI,OAAQ,EAAA,CAAI,CAAA,CAAA,CAAA,EAEnC,OAEL,gBAAiB,CAChB,YAAa,uBACb,WAAY,eACZ,KAAM,QACN,WAAY,SACZ,QAASnB,CAAA,EAEV,cAAe,CACd,YAAa,sBACb,WAAY,UACZ,KAAM,QACN,WAAY,QACZ,QAAS,IAAMC,EAAQE,CAAK,CAAA,EAG7B,gBAACiB,oBAAA,CACA,SAAA,CAAAL,EAAAA,IAACM,EAAAA,eAAc,MAAOC,EAAAA,OAAO,QAAQ,UACnC,SAAA,yBAAyBb,CAAY,EAAA,CACvC,SAECc,EAAAA,kBAAA,CACC,SAAA,CAAAzB,EAAQ,SAAS,IAAK0B,GAAY,CAClC,MAAMC,EAAeC,EAAAA,sBAAsBF,CAAO,EAClD,OACCP,EAAAA,KAACU,EAAAA,iBAAA,CAEA,YAAW,yBAAyBH,EAAQ,SAAS,GAErD,SAAA,CAAAT,EAAAA,IAACa,EAAAA,SAAA,CACA,UAAWzB,EAAM,SAASqB,EAAQ,SAAS,EAC3C,UAAWA,EAAQ,YACnB,MAAOA,EAAQ,UACf,cAAe,IAAMb,EAAOa,EAAQ,SAAS,EAC7C,MAAOK,EAAAA,aAAA,CAAA,SAEPC,EAAAA,qBAAA,CACA,SAAA,CAAAf,EAAAA,IAACgB,EAAAA,cAAa,KAAAvB,EACZ,SAAAD,SAASA,EAAA,CAAK,KAAM,GAAI,CAAA,CAC1B,QACCyB,EAAAA,WAAA,CAAW,MAAOV,EAAAA,OAAO,QAAQ,QAChC,WAAQ,YACV,EACCG,GAKAV,EAAAA,IAACkB,EAAAA,IAAA,CACA,QAAQ,eACR,KAAK,WACL,QAAQ,UACR,OAAQ,GACR,QAAQ,SAAA,CAAA,CACT,CAAA,CAEF,CAAA,CAAA,EA9BKT,EAAQ,SAAA,CAiChB,CAAC,EAEA1B,EAAQ,SAAS,SAAW,GAC5BiB,EAAAA,IAACM,EAAAA,cAAA,CAAc,MAAOC,EAAAA,OAAO,QAAQ,YACnC,SAAA,MAAMb,CAAY,mCAAA,CACpB,CAAA,CAAA,CAEF,CAAA,CAAA,CACD,CAAA,CAAA,CAGH,EAEAZ,EAAmB,YAAc"}
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),A=require("../../../assets/icons/edit.svg.js"),B=require("../../../assets/icons/errorInfo.svg.js"),T=require("react"),f=require("../../TypographyStyle.js"),b=require("../../../constants/Theme.js"),a=require("../AgentBuilder.styled.js"),u=require("../constants/channels.js"),M=require("../context/AgentBuilderContext.js"),$=require("./ChannelSelectModal.js"),O=require("../../checkBox/CheckBox.js"),m=require("../../tooltips/Tooltip.js"),x=require("../../tag/Tag.js"),R=require("../../icon-button/IconButton.js"),S=3,w=n=>[...n.filter(u.isAccountDisconnected),...n.filter(i=>!u.isAccountDisconnected(i))],I=()=>{const{value:n,updateField:i,availableChannels:c,onManageChannels:g}=M.useAgentBuilderContext(),[s,r]=T.useState(null),p=T.useMemo(()=>{const t=new Map;return(n.channels??[]).forEach(o=>t.set(o.type,o.channelIds)),t},[n.channels]);if(!c||c.length===0)return null;const C=(t,o)=>{const d=(n.channels??[]).filter(y=>y.type!==t);i("channels",o.length>0?[...d,{type:t,channelIds:o}]:d)},l=c.find(t=>t.type===s)??null;return e.jsxs(a.ChannelsSectionRoot,{children:[e.jsx(f.TitleSmall,{color:b.COLORS.content.primary,children:"Channels to activate it on"}),c.map(t=>e.jsx(L,{channel:t,selectedIds:p.get(t.type)??[],onSelectionChange:o=>C(t.type,o),onEdit:()=>r(t.type)},String(t.type))),e.jsx($.ChannelSelectModal,{channel:l,selectedIds:l?p.get(l.type)??[]:[],onClose:()=>r(null),onApply:t=>{l&&C(l.type,t),r(null)},onManageChannels:g&&l?()=>g(l.type):void 0})]})};I.displayName="ChannelsSection";const L=({channel:n,selectedIds:i,onSelectionChange:c,onEdit:g})=>{const{label:s,Icon:r,tint:p,accountsNoun:C}=u.channelPresentation(n.type,n.label),l=n.accounts.length===0,t=u.selectedAccounts(n,i),o=!l&&t.length===n.accounts.length,d=t.length>0&&!o,y=w(t.length>0?t:n.accounts),q=y.slice(0,S),j=y.slice(S),v=()=>c(o?[]:n.accounts.map(h=>h.channelId));return e.jsx(a.ChannelCard,{"data-test":`agent-channel-${n.type}`,role:"group","aria-label":s,children:e.jsxs(a.ChannelRow,{children:[e.jsxs(a.ChannelRowMain,{children:[e.jsx(O.CheckBox,{isChecked:o||d,isPartiallyChecked:d,isDisabled:l,ariaLabel:s,onValueChange:v,style:a.CHECKBOX_SLOT}),e.jsxs(a.ChannelIdentity,{children:[e.jsx(a.ChannelGlyph,{tint:p,children:r&&e.jsx(r,{size:16})}),e.jsx(f.TitleSmall,{color:b.COLORS.content.primary,children:s})]}),e.jsx(a.ChannelChips,{children:l?e.jsx(m.Tooltip,{body:`No ${C} are connected to this store yet. Connect one from channel management to activate this agent on ${s}.`,placement:"top",children:e.jsx(a.ChipTooltipTarget,{children:e.jsx(x.Tag,{tagText:"Disabled",type:"neutral",variant:"regular",height:24,cursor:"default"})})}):e.jsxs(e.Fragment,{children:[q.map(h=>e.jsx(N,{account:h,channelLabel:s},h.channelId)),j.length>0&&e.jsx(m.Tooltip,{body:j.map(h=>h.channelName).join(", "),placement:"top",children:e.jsx(a.ChipTooltipTarget,{children:e.jsx(x.Tag,{tagText:`+${j.length}`,type:"purple",variant:"regular",height:24,cursor:"default"})})})]})})]}),e.jsx(R.IconButton,{"data-test":`agent-channel-${n.type}-edit`,"aria-label":`Edit ${s} channels`,Icon:A.default,size:"xs",iconPadding:4,disabled:l,onClick:g})]})})},N=({account:n,channelLabel:i})=>u.isAccountDisconnected(n)?e.jsx(m.Tooltip,{body:`${n.channelName} is disconnected. This agent won't run on it until you reconnect it from ${i} channel management.`,placement:"top",children:e.jsx(a.ChipTooltipTarget,{children:e.jsx(x.Tag,{tagText:n.channelName,type:"negative",variant:"regular",height:24,LeadingIcon:B.default,leadingIconId:`channel-error-${n.channelId}`,cursor:"default"})})}):e.jsx(x.Tag,{tagText:n.channelName,type:"purple",variant:"regular",height:24});exports.ChannelsSection=I;
|
|
2
|
-
//# sourceMappingURL=ChannelsSection.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"ChannelsSection.js","sources":["../../../../../src/components/agent-builder/components/ChannelsSection.tsx"],"sourcesContent":["import EditIcon from '@src/assets/icons/edit.svg';\nimport ErrorInfoIcon from '@src/assets/icons/errorInfo.svg';\nimport React, { useMemo, useState } from 'react';\nimport { CheckBox } from '@src/components/checkBox';\nimport { IconButton } from '@src/components/icon-button';\nimport { Tag } from '@src/components/tag';\nimport { Tooltip } from '@src/components/tooltips';\nimport { TitleSmall } from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport type {\n\tAgentChannel,\n\tAgentChannelAccount,\n\tAgentChannelType,\n} from '../AgentBuilder.model';\nimport {\n\tChannelCard,\n\tChannelChips,\n\tChannelGlyph,\n\tChannelIdentity,\n\tChannelRow,\n\tChannelRowMain,\n\tChannelsSectionRoot,\n\tCHECKBOX_SLOT,\n\tChipTooltipTarget,\n} from '../AgentBuilder.styled';\nimport {\n\tchannelPresentation,\n\tisAccountDisconnected,\n\tselectedAccounts,\n} from '../constants/channels';\nimport { useAgentBuilderContext } from '../context/AgentBuilderContext';\nimport { ChannelSelectModal } from './ChannelSelectModal';\n\n/**\n * How many account chips a row shows before collapsing the rest into \"+N\". The\n * design draws three; without a cap a store with a dozen numbers pushes the row\n * well past its 48px height.\n */\nconst MAX_VISIBLE_CHIPS = 3;\n\n/**\n * Chips for a row: disconnected accounts first so a cap can never hide the very\n * thing the merchant needs to act on, then the rest in their original order.\n */\nconst chipOrder = (accounts: AgentChannelAccount[]): AgentChannelAccount[] => [\n\t...accounts.filter(isAccountDisconnected),\n\t...accounts.filter((a) => !isAccountDisconnected(a)),\n];\n\n/**\n * Step 1's \"Channels to activate it on\" — one card per connected channel, each\n * with a select-all checkbox, the accounts it covers as chips, and an edit\n * button that opens the per-account picker.\n *\n * Renders nothing when the consumer passes no `availableChannels`, so a host\n * that hasn't wired channels up yet sees the step exactly as it was.\n */\nexport const ChannelsSection: React.FC = () => {\n\tconst { value, updateField, availableChannels, onManageChannels } =\n\t\tuseAgentBuilderContext();\n\n\t// Which channel's picker is open (by type); null = closed.\n\tconst [editingType, setEditingType] = useState<AgentChannelType | null>(null);\n\n\t// Selection is stored as a list; index it once so each row is a lookup.\n\tconst selectionByType = useMemo(() => {\n\t\tconst map = new Map<AgentChannelType, string[]>();\n\t\t(value.channels ?? []).forEach((c) => map.set(c.type, c.channelIds));\n\t\treturn map;\n\t}, [value.channels]);\n\n\tif (!availableChannels || availableChannels.length === 0) {\n\t\treturn null;\n\t}\n\n\tconst setSelection = (type: AgentChannelType, channelIds: string[]) => {\n\t\tconst rest = (value.channels ?? []).filter((c) => c.type !== type);\n\t\t// An empty selection drops the channel entirely rather than persisting a\n\t\t// `{ type, channelIds: [] }` no-op the backend would have to filter out.\n\t\tupdateField(\n\t\t\t'channels',\n\t\t\tchannelIds.length > 0 ? [...rest, { type, channelIds }] : rest,\n\t\t);\n\t};\n\n\tconst editingChannel =\n\t\tavailableChannels.find((c) => c.type === editingType) ?? null;\n\n\treturn (\n\t\t<ChannelsSectionRoot>\n\t\t\t<TitleSmall color={COLORS.content.primary}>\n\t\t\t\tChannels to activate it on\n\t\t\t</TitleSmall>\n\n\t\t\t{availableChannels.map((channel) => (\n\t\t\t\t<ChannelCardRow\n\t\t\t\t\tkey={String(channel.type)}\n\t\t\t\t\tchannel={channel}\n\t\t\t\t\tselectedIds={selectionByType.get(channel.type) ?? []}\n\t\t\t\t\tonSelectionChange={(ids) => setSelection(channel.type, ids)}\n\t\t\t\t\tonEdit={() => setEditingType(channel.type)}\n\t\t\t\t/>\n\t\t\t))}\n\n\t\t\t<ChannelSelectModal\n\t\t\t\tchannel={editingChannel}\n\t\t\t\tselectedIds={\n\t\t\t\t\teditingChannel ? selectionByType.get(editingChannel.type) ?? [] : []\n\t\t\t\t}\n\t\t\t\tonClose={() => setEditingType(null)}\n\t\t\t\tonApply={(ids) => {\n\t\t\t\t\tif (editingChannel) {\n\t\t\t\t\t\tsetSelection(editingChannel.type, ids);\n\t\t\t\t\t}\n\t\t\t\t\tsetEditingType(null);\n\t\t\t\t}}\n\t\t\t\tonManageChannels={\n\t\t\t\t\tonManageChannels && editingChannel\n\t\t\t\t\t\t? () => onManageChannels(editingChannel.type)\n\t\t\t\t\t\t: undefined\n\t\t\t\t}\n\t\t\t/>\n\t\t</ChannelsSectionRoot>\n\t);\n};\n\nChannelsSection.displayName = 'ChannelsSection';\n\ninterface ChannelCardRowProps {\n\tchannel: AgentChannel;\n\tselectedIds: string[];\n\tonSelectionChange: (channelIds: string[]) => void;\n\tonEdit: () => void;\n}\n\nconst ChannelCardRow: React.FC<ChannelCardRowProps> = ({\n\tchannel,\n\tselectedIds,\n\tonSelectionChange,\n\tonEdit,\n}) => {\n\tconst { label, Icon, tint, accountsNoun } = channelPresentation(\n\t\tchannel.type,\n\t\tchannel.label,\n\t);\n\n\t/**\n\t * Zero state — the store supports this channel but has nothing connected\n\t * under it. Nothing on the row is actionable, so the checkbox and the edit\n\t * button are both inert and a \"Disabled\" chip stands in for the accounts.\n\t */\n\tconst isUnavailable = channel.accounts.length === 0;\n\n\tconst selected = selectedAccounts(channel, selectedIds);\n\tconst allSelected =\n\t\t!isUnavailable && selected.length === channel.accounts.length;\n\tconst someSelected = selected.length > 0 && !allSelected;\n\n\t// With nothing picked yet the row shows the store's inventory — that's the\n\t// state the design draws, and it tells the merchant what's on offer. Once\n\t// they've picked, the chips narrow to what the agent actually runs on.\n\tconst shown = chipOrder(selected.length > 0 ? selected : channel.accounts);\n\tconst visible = shown.slice(0, MAX_VISIBLE_CHIPS);\n\tconst overflow = shown.slice(MAX_VISIBLE_CHIPS);\n\n\tconst toggleAll = () =>\n\t\tonSelectionChange(\n\t\t\tallSelected ? [] : channel.accounts.map((a) => a.channelId),\n\t\t);\n\n\treturn (\n\t\t<ChannelCard\n\t\t\tdata-test={`agent-channel-${channel.type}`}\n\t\t\t// A card groups a channel's checkbox, chips and edit button; naming the\n\t\t\t// group lets assistive tech (and tests) address one channel at a time.\n\t\t\trole=\"group\"\n\t\t\taria-label={label}\n\t\t>\n\t\t\t<ChannelRow>\n\t\t\t\t<ChannelRowMain>\n\t\t\t\t\t<CheckBox\n\t\t\t\t\t\tisChecked={allSelected || someSelected}\n\t\t\t\t\t\tisPartiallyChecked={someSelected}\n\t\t\t\t\t\tisDisabled={isUnavailable}\n\t\t\t\t\t\tariaLabel={label}\n\t\t\t\t\t\tonValueChange={toggleAll}\n\t\t\t\t\t\tstyle={CHECKBOX_SLOT}\n\t\t\t\t\t/>\n\t\t\t\t\t<ChannelIdentity>\n\t\t\t\t\t\t<ChannelGlyph tint={tint}>\n\t\t\t\t\t\t\t{Icon && <Icon size={16} />}\n\t\t\t\t\t\t</ChannelGlyph>\n\t\t\t\t\t\t<TitleSmall color={COLORS.content.primary}>{label}</TitleSmall>\n\t\t\t\t\t</ChannelIdentity>\n\n\t\t\t\t\t<ChannelChips>\n\t\t\t\t\t\t{isUnavailable ? (\n\t\t\t\t\t\t\t<Tooltip\n\t\t\t\t\t\t\t\tbody={`No ${accountsNoun} are connected to this store yet. Connect one from channel management to activate this agent on ${label}.`}\n\t\t\t\t\t\t\t\tplacement=\"top\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<ChipTooltipTarget>\n\t\t\t\t\t\t\t\t\t<Tag\n\t\t\t\t\t\t\t\t\t\ttagText=\"Disabled\"\n\t\t\t\t\t\t\t\t\t\ttype=\"neutral\"\n\t\t\t\t\t\t\t\t\t\tvariant=\"regular\"\n\t\t\t\t\t\t\t\t\t\theight={24}\n\t\t\t\t\t\t\t\t\t\tcursor=\"default\"\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</ChipTooltipTarget>\n\t\t\t\t\t\t\t</Tooltip>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t{visible.map((account) => (\n\t\t\t\t\t\t\t\t\t<AccountChip\n\t\t\t\t\t\t\t\t\t\tkey={account.channelId}\n\t\t\t\t\t\t\t\t\t\taccount={account}\n\t\t\t\t\t\t\t\t\t\tchannelLabel={label}\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\t{overflow.length > 0 && (\n\t\t\t\t\t\t\t\t\t<Tooltip\n\t\t\t\t\t\t\t\t\t\tbody={overflow.map((a) => a.channelName).join(', ')}\n\t\t\t\t\t\t\t\t\t\tplacement=\"top\"\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<ChipTooltipTarget>\n\t\t\t\t\t\t\t\t\t\t\t<Tag\n\t\t\t\t\t\t\t\t\t\t\t\ttagText={`+${overflow.length}`}\n\t\t\t\t\t\t\t\t\t\t\t\ttype=\"purple\"\n\t\t\t\t\t\t\t\t\t\t\t\tvariant=\"regular\"\n\t\t\t\t\t\t\t\t\t\t\t\theight={24}\n\t\t\t\t\t\t\t\t\t\t\t\tcursor=\"default\"\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t</ChipTooltipTarget>\n\t\t\t\t\t\t\t\t\t</Tooltip>\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</ChannelChips>\n\t\t\t\t</ChannelRowMain>\n\n\t\t\t\t<IconButton\n\t\t\t\t\tdata-test={`agent-channel-${channel.type}-edit`}\n\t\t\t\t\taria-label={`Edit ${label} channels`}\n\t\t\t\t\tIcon={EditIcon}\n\t\t\t\t\tsize=\"xs\"\n\t\t\t\t\ticonPadding={4}\n\t\t\t\t\tdisabled={isUnavailable}\n\t\t\t\t\tonClick={onEdit}\n\t\t\t\t/>\n\t\t\t</ChannelRow>\n\t\t</ChannelCard>\n\t);\n};\n\n/**\n * One account chip. A healthy account reads as a brand chip; a disconnected one\n * turns negative and gains the error glyph.\n *\n * The tooltip is NOT in the design — but a bare red chip tells the merchant\n * something is broken and nothing about what to do, so it names the account and\n * the fix.\n */\nconst AccountChip: React.FC<{\n\taccount: AgentChannelAccount;\n\tchannelLabel: string;\n}> = ({ account, channelLabel }) => {\n\tif (!isAccountDisconnected(account)) {\n\t\treturn (\n\t\t\t<Tag\n\t\t\t\ttagText={account.channelName}\n\t\t\t\ttype=\"purple\"\n\t\t\t\tvariant=\"regular\"\n\t\t\t\theight={24}\n\t\t\t/>\n\t\t);\n\t}\n\n\treturn (\n\t\t<Tooltip\n\t\t\tbody={`${account.channelName} is disconnected. This agent won't run on it until you reconnect it from ${channelLabel} channel management.`}\n\t\t\tplacement=\"top\"\n\t\t>\n\t\t\t<ChipTooltipTarget>\n\t\t\t\t<Tag\n\t\t\t\t\ttagText={account.channelName}\n\t\t\t\t\ttype=\"negative\"\n\t\t\t\t\tvariant=\"regular\"\n\t\t\t\t\theight={24}\n\t\t\t\t\tLeadingIcon={ErrorInfoIcon}\n\t\t\t\t\t// Tag doesn't spread rest props, so `data-test` would be dropped —\n\t\t\t\t\t// `leadingIconId` is the one hook it does put on the DOM, which gives\n\t\t\t\t\t// the error glyph a stable handle for tests and e2e.\n\t\t\t\t\tleadingIconId={`channel-error-${account.channelId}`}\n\t\t\t\t\tcursor=\"default\"\n\t\t\t\t/>\n\t\t\t</ChipTooltipTarget>\n\t\t</Tooltip>\n\t);\n};\n"],"names":["MAX_VISIBLE_CHIPS","chipOrder","accounts","isAccountDisconnected","a","ChannelsSection","value","updateField","availableChannels","onManageChannels","useAgentBuilderContext","editingType","setEditingType","useState","selectionByType","useMemo","map","c","setSelection","type","channelIds","rest","editingChannel","ChannelsSectionRoot","jsx","TitleSmall","COLORS","channel","ChannelCardRow","ids","ChannelSelectModal","selectedIds","onSelectionChange","onEdit","label","Icon","tint","accountsNoun","channelPresentation","isUnavailable","selected","selectedAccounts","allSelected","someSelected","shown","visible","overflow","toggleAll","ChannelCard","ChannelRow","jsxs","ChannelRowMain","CheckBox","CHECKBOX_SLOT","ChannelIdentity","ChannelGlyph","ChannelChips","Tooltip","ChipTooltipTarget","Tag","Fragment","account","AccountChip","IconButton","EditIcon","channelLabel","ErrorInfoIcon"],"mappings":"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"}
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("@bikdotai/bik-models/campaigns/models/Channel"),s=require("../../../constants/Theme.js"),u=require("../../../icons/Social/Channels/InstagramV2.js"),i=require("../../../icons/Social/Channels/EmailV2.js"),l=require("../../../icons/Social/Channels/WhatsAppV2.js"),r="#FFEAF7",N=s.COLORS.surface.subdued,o={[c.Channels.WHATSAPP]:{label:"WhatsApp",Icon:l.default,tint:s.COLORS.background.positive.light,accountsNoun:"WhatsApp numbers"},[c.Channels.EMAIL]:{label:"Email",Icon:i.default,tint:s.COLORS.background.negative.light,accountsNoun:"email addresses"},[c.Channels.INSTAGRAM]:{label:"Instagram",Icon:u.default,tint:r,accountsNoun:"Instagram accounts"}},A=Object.keys(o),d=(n,t)=>{const e=o[String(n).toLowerCase()];if(e)return t?{...e,label:t}:e;const a=t||String(n);return{label:a,tint:N,accountsNoun:`${a} channels`}},T=n=>n.status==="disconnected",E=(n,t)=>n.accounts.filter(e=>t.includes(e.channelId));exports.AGENT_CHANNEL_TYPES=A;exports.CHANNEL_PRESENTATION=o;exports.channelPresentation=d;exports.isAccountDisconnected=T;exports.selectedAccounts=E;
|
|
2
|
-
//# sourceMappingURL=channels.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"channels.js","sources":["../../../../../src/components/agent-builder/constants/channels.ts"],"sourcesContent":["import { Channels } from '@bikdotai/bik-models/campaigns/models/Channel';\nimport { EmailV2, InstagramV2, WhatsAppV2 } from '@src/icons/Social/Channels';\nimport type React from 'react';\nimport { COLORS } from '@src/constants/Theme';\nimport type {\n\tAgentChannel,\n\tAgentChannelAccount,\n\tAgentChannelType,\n} from '../AgentBuilder.model';\n\n/** How one channel type renders: its label, brand glyph, tint and copy noun. */\nexport interface ChannelPresentation {\n\t/** Row label (\"WhatsApp\", \"Email\", …). */\n\tlabel: string;\n\t/** Brand glyph. Undefined for an unknown type — the row renders label-only. */\n\tIcon?: React.FC<React.SVGProps<SVGSVGElement> & { size?: number | string }>;\n\t/** Tint behind the glyph. */\n\ttint: string;\n\t/**\n\t * What an account IS on this channel, plural — drives the picker's copy\n\t * (\"Select from available WhatsApp numbers\"). Kept per-channel because the\n\t * design's WhatsApp-only wording has to generalise once the same picker opens\n\t * for Email and Instagram.\n\t */\n\taccountsNoun: string;\n}\n\n/**\n * Instagram's tint has no theme token (Figma ships it as a one-off pink under\n * \"Intent Colors\"); the other two map onto the standard positive / negative\n * light backgrounds.\n */\nconst INSTAGRAM_TINT = '#FFEAF7';\n\n/** Tint used for an unknown channel type, whose glyph we don't have. */\nconst UNKNOWN_TINT = COLORS.surface.subdued;\n\n/**\n * Keyed by the shared `Channels` enum, so a channel key can never drift from the\n * platform's spelling.\n *\n * Typed `Record<AgentChannelType, …>` rather than `Record<string, …>`: that makes\n * the map EXHAUSTIVE, so widening {@link AgentChannelType} without adding the\n * matching presentation here is a compile error rather than a channel that\n * silently renders with no glyph.\n */\nexport const CHANNEL_PRESENTATION: Record<\n\tAgentChannelType,\n\tChannelPresentation\n> = {\n\t[Channels.WHATSAPP]: {\n\t\tlabel: 'WhatsApp',\n\t\tIcon: WhatsAppV2,\n\t\ttint: COLORS.background.positive.light,\n\t\taccountsNoun: 'WhatsApp numbers',\n\t},\n\t[Channels.EMAIL]: {\n\t\tlabel: 'Email',\n\t\tIcon: EmailV2,\n\t\ttint: COLORS.background.negative.light,\n\t\taccountsNoun: 'email addresses',\n\t},\n\t[Channels.INSTAGRAM]: {\n\t\tlabel: 'Instagram',\n\t\tIcon: InstagramV2,\n\t\ttint: INSTAGRAM_TINT,\n\t\taccountsNoun: 'Instagram accounts',\n\t},\n};\n\n/** The channel types the builder supports, in display order. */\nexport const AGENT_CHANNEL_TYPES = Object.keys(\n\tCHANNEL_PRESENTATION,\n) as AgentChannelType[];\n\n/**\n * Presentation for a channel.\n *\n * `AgentChannelType` makes the registry hit total at compile time, but the\n * `availableChannels` a consumer passes come off a backend response — so an\n * unrecognised `type` is still handled defensively (the consumer's `label`, then\n * the raw value, with no glyph) rather than rendering `undefined`.\n */\nexport const channelPresentation = (\n\ttype: AgentChannelType,\n\tlabelOverride?: string,\n): ChannelPresentation => {\n\tconst known = CHANNEL_PRESENTATION[\n\t\tString(type).toLowerCase() as AgentChannelType\n\t] as ChannelPresentation | undefined;\n\tif (known) {\n\t\treturn labelOverride ? { ...known, label: labelOverride } : known;\n\t}\n\tconst label = labelOverride || String(type);\n\treturn { label, tint: UNKNOWN_TINT, accountsNoun: `${label} channels` };\n};\n\n/** True when the store hasn't got a healthy connection to this account. */\nexport const isAccountDisconnected = (account: AgentChannelAccount): boolean =>\n\taccount.status === 'disconnected';\n\n/**\n * The accounts the agent is actually activated on, in the channel's own order.\n * Selection is stored as backend ids, so an id that no longer exists on the\n * store (channel removed since the agent was saved) simply drops out here.\n */\nexport const selectedAccounts = (\n\tchannel: AgentChannel,\n\tselectedIds: string[],\n): AgentChannelAccount[] =>\n\tchannel.accounts.filter((a) => selectedIds.includes(a.channelId));\n\n/**\n * Selected accounts the store can no longer reach. Drives the row alert and the\n * chips' negative styling. A disconnected account is deliberately NOT dropped\n * from the selection — silently editing a merchant's saved config would hide the\n * very problem they need to go fix.\n */\nexport const disconnectedSelectedAccounts = (\n\tchannel: AgentChannel,\n\tselectedIds: string[],\n): AgentChannelAccount[] =>\n\tselectedAccounts(channel, selectedIds).filter(isAccountDisconnected);\n"],"names":["INSTAGRAM_TINT","UNKNOWN_TINT","COLORS","CHANNEL_PRESENTATION","Channels","WhatsAppV2","EmailV2","InstagramV2","AGENT_CHANNEL_TYPES","channelPresentation","type","labelOverride","known","label","isAccountDisconnected","account","selectedAccounts","channel","selectedIds","a"],"mappings":"sWAgCMA,EAAiB,UAGjBC,EAAeC,EAAAA,OAAO,QAAQ,QAWvBC,EAGT,CACH,CAACC,EAAAA,SAAS,QAAQ,EAAG,CACpB,MAAO,WACP,KAAMC,EAAAA,QACN,KAAMH,EAAAA,OAAO,WAAW,SAAS,MACjC,aAAc,kBAAA,EAEf,CAACE,EAAAA,SAAS,KAAK,EAAG,CACjB,MAAO,QACP,KAAME,EAAAA,QACN,KAAMJ,EAAAA,OAAO,WAAW,SAAS,MACjC,aAAc,iBAAA,EAEf,CAACE,EAAAA,SAAS,SAAS,EAAG,CACrB,MAAO,YACP,KAAMG,EAAAA,QACN,KAAMP,EACN,aAAc,oBAAA,CAEhB,EAGaQ,EAAsB,OAAO,KACzCL,CACD,EAUaM,EAAsB,CAClCC,EACAC,IACyB,CACzB,MAAMC,EAAQT,EACb,OAAOO,CAAI,EAAE,aACd,EACA,GAAIE,EACH,OAAOD,EAAgB,CAAE,GAAGC,EAAO,MAAOD,GAAkBC,EAE7D,MAAMC,EAAQF,GAAiB,OAAOD,CAAI,EAC1C,MAAO,CAAE,MAAAG,EAAO,KAAMZ,EAAc,aAAc,GAAGY,CAAK,WAAA,CAC3D,EAGaC,EAAyBC,GACrCA,EAAQ,SAAW,eAOPC,EAAmB,CAC/BC,EACAC,IAEAD,EAAQ,SAAS,OAAQE,GAAMD,EAAY,SAASC,EAAE,SAAS,CAAC"}
|
|
@@ -1,26 +0,0 @@
|
|
|
1
|
-
import { default as React } from 'react';
|
|
2
|
-
import { AgentChannel } from '../AgentBuilder.model';
|
|
3
|
-
interface ChannelSelectModalProps {
|
|
4
|
-
/** The channel being edited. `null` closes the modal. */
|
|
5
|
-
channel: AgentChannel | null;
|
|
6
|
-
/** Currently activated backend channel ids for this channel. */
|
|
7
|
-
selectedIds: string[];
|
|
8
|
-
onClose: () => void;
|
|
9
|
-
/** Apply — commits the draft selection as backend channel ids. */
|
|
10
|
-
onApply: (channelIds: string[]) => void;
|
|
11
|
-
/** Footer "Channel management" link. Omit to hide it. */
|
|
12
|
-
onManageChannels?: () => void;
|
|
13
|
-
}
|
|
14
|
-
/**
|
|
15
|
-
* Per-channel account picker, opened from a channel row's edit button.
|
|
16
|
-
*
|
|
17
|
-
* The selection is a LOCAL draft until Apply — the design gives the merchant a
|
|
18
|
-
* Cancel, so toggling here must not reach the agent value until they commit.
|
|
19
|
-
*
|
|
20
|
-
* A disconnected account stays selectable and stays selected: the merchant may
|
|
21
|
-
* be mid-reconnect, and quietly removing it from their agent would hide the
|
|
22
|
-
* problem rather than surface it. It's labelled instead, and the row it came
|
|
23
|
-
* from carries the alert.
|
|
24
|
-
*/
|
|
25
|
-
export declare const ChannelSelectModal: React.FC<ChannelSelectModalProps>;
|
|
26
|
-
export type { ChannelSelectModalProps };
|
|
@@ -1,121 +0,0 @@
|
|
|
1
|
-
import { jsx as t, jsxs as a } from "react/jsx-runtime";
|
|
2
|
-
import x from "../../../assets/icons/RedirectToNew.svg.js";
|
|
3
|
-
import { useState as S, useEffect as b } from "react";
|
|
4
|
-
import { BodySecondary as p, TitleSmall as C } from "../../TypographyStyle.js";
|
|
5
|
-
import { COLORS as l } from "../../../constants/Theme.js";
|
|
6
|
-
import { ChannelPickerBody as k, ChannelPickerList as T, ChannelPickerRow as z, CHECKBOX_SLOT as B, ChannelPickerAccount as L, ChannelGlyph as N, ChannelsLink as v } from "../AgentBuilder.styled.js";
|
|
7
|
-
import { channelPresentation as w, isAccountDisconnected as P } from "../constants/channels.js";
|
|
8
|
-
import { StyledModal as O } from "../../modals/styledModal.js";
|
|
9
|
-
import { CheckBox as $ } from "../../checkBox/CheckBox.js";
|
|
10
|
-
import { Tag as A } from "../../tag/Tag.js";
|
|
11
|
-
const D = ({
|
|
12
|
-
channel: n,
|
|
13
|
-
selectedIds: r,
|
|
14
|
-
onClose: c,
|
|
15
|
-
onApply: g,
|
|
16
|
-
onManageChannels: d
|
|
17
|
-
}) => {
|
|
18
|
-
const [h, s] = S(r);
|
|
19
|
-
if (b(() => {
|
|
20
|
-
n && s(r);
|
|
21
|
-
}, [n]), !n)
|
|
22
|
-
return null;
|
|
23
|
-
const { Icon: m, tint: y, accountsNoun: i } = w(
|
|
24
|
-
n.type,
|
|
25
|
-
n.label
|
|
26
|
-
), f = (e) => s(
|
|
27
|
-
(o) => o.includes(e) ? o.filter((u) => u !== e) : [...o, e]
|
|
28
|
-
);
|
|
29
|
-
return /* @__PURE__ */ t(
|
|
30
|
-
O,
|
|
31
|
-
{
|
|
32
|
-
"data-test": "agent-channel-select-modal",
|
|
33
|
-
open: !0,
|
|
34
|
-
onClose: c,
|
|
35
|
-
width: "640px",
|
|
36
|
-
headingTitle: "Select channels to activate",
|
|
37
|
-
headingSubtitle: `Select the ${i} on which you need this agent enabled on.`,
|
|
38
|
-
modalHeaderStyles: { padding: "24px", boxSizing: "border-box" },
|
|
39
|
-
modalBodyStyles: { boxSizing: "border-box" },
|
|
40
|
-
footerContainerStyle: { padding: "20px 24px", boxSizing: "border-box" },
|
|
41
|
-
footerLeftCustomElement: d ? /* @__PURE__ */ a(
|
|
42
|
-
v,
|
|
43
|
-
{
|
|
44
|
-
"data-test": "agent-channel-management-link",
|
|
45
|
-
type: "button",
|
|
46
|
-
onClick: d,
|
|
47
|
-
style: { fontSize: 14, lineHeight: "20px", fontWeight: 600 },
|
|
48
|
-
children: [
|
|
49
|
-
"Channel management",
|
|
50
|
-
/* @__PURE__ */ t(x, { width: 16, height: 16 })
|
|
51
|
-
]
|
|
52
|
-
}
|
|
53
|
-
) : void 0,
|
|
54
|
-
secondaryButton: {
|
|
55
|
-
"data-test": "agent-channel-cancel",
|
|
56
|
-
buttonType: "tertiaryGray",
|
|
57
|
-
size: "small",
|
|
58
|
-
buttonText: "Cancel",
|
|
59
|
-
onClick: c
|
|
60
|
-
},
|
|
61
|
-
primaryButton: {
|
|
62
|
-
"data-test": "agent-channel-apply",
|
|
63
|
-
buttonType: "primary",
|
|
64
|
-
size: "small",
|
|
65
|
-
buttonText: "Apply",
|
|
66
|
-
onClick: () => g(h)
|
|
67
|
-
},
|
|
68
|
-
children: /* @__PURE__ */ a(k, { children: [
|
|
69
|
-
/* @__PURE__ */ t(p, { color: l.content.secondary, children: `Select from available ${i}` }),
|
|
70
|
-
/* @__PURE__ */ a(T, { children: [
|
|
71
|
-
n.accounts.map((e) => {
|
|
72
|
-
const o = P(e);
|
|
73
|
-
return /* @__PURE__ */ a(
|
|
74
|
-
z,
|
|
75
|
-
{
|
|
76
|
-
"data-test": `agent-channel-account-${e.channelId}`,
|
|
77
|
-
children: [
|
|
78
|
-
/* @__PURE__ */ t(
|
|
79
|
-
$,
|
|
80
|
-
{
|
|
81
|
-
isChecked: h.includes(e.channelId),
|
|
82
|
-
ariaLabel: e.channelName,
|
|
83
|
-
value: e.channelId,
|
|
84
|
-
onValueChange: () => f(e.channelId),
|
|
85
|
-
style: B
|
|
86
|
-
}
|
|
87
|
-
),
|
|
88
|
-
/* @__PURE__ */ a(L, { children: [
|
|
89
|
-
/* @__PURE__ */ t(N, { tint: y, children: m && /* @__PURE__ */ t(m, { size: 16 }) }),
|
|
90
|
-
/* @__PURE__ */ t(C, { color: l.content.primary, children: e.channelName }),
|
|
91
|
-
o && // NOT `size="small"`: that renders through BodyTiny, which
|
|
92
|
-
// is 10px AND has no font-family, so it falls back to the
|
|
93
|
-
// browser serif. The default reads as 12px Inter — Figma's
|
|
94
|
-
// body-caption, same as every other chip.
|
|
95
|
-
/* @__PURE__ */ t(
|
|
96
|
-
A,
|
|
97
|
-
{
|
|
98
|
-
tagText: "Disconnected",
|
|
99
|
-
type: "negative",
|
|
100
|
-
variant: "regular",
|
|
101
|
-
height: 20,
|
|
102
|
-
padding: "2px 8px"
|
|
103
|
-
}
|
|
104
|
-
)
|
|
105
|
-
] })
|
|
106
|
-
]
|
|
107
|
-
},
|
|
108
|
-
e.channelId
|
|
109
|
-
);
|
|
110
|
-
}),
|
|
111
|
-
n.accounts.length === 0 && /* @__PURE__ */ t(p, { color: l.content.placeholder, children: `No ${i} are connected to this store yet.` })
|
|
112
|
-
] })
|
|
113
|
-
] })
|
|
114
|
-
}
|
|
115
|
-
);
|
|
116
|
-
};
|
|
117
|
-
D.displayName = "ChannelSelectModal";
|
|
118
|
-
export {
|
|
119
|
-
D as ChannelSelectModal
|
|
120
|
-
};
|
|
121
|
-
//# sourceMappingURL=ChannelSelectModal.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"ChannelSelectModal.js","sources":["../../../../../src/components/agent-builder/components/ChannelSelectModal.tsx"],"sourcesContent":["import RedirectIcon from '@src/assets/icons/RedirectToNew.svg';\nimport React, { useEffect, useState } from 'react';\nimport { CheckBox } from '@src/components/checkBox';\nimport { StyledModal } from '@src/components/modals';\nimport { Tag } from '@src/components/tag';\nimport { BodySecondary, TitleSmall } from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport type { AgentChannel } from '../AgentBuilder.model';\nimport {\n\tChannelGlyph,\n\tChannelPickerAccount,\n\tChannelPickerBody,\n\tChannelPickerList,\n\tChannelPickerRow,\n\tChannelsLink,\n\tCHECKBOX_SLOT,\n} from '../AgentBuilder.styled';\nimport {\n\tchannelPresentation,\n\tisAccountDisconnected,\n} from '../constants/channels';\n\ninterface ChannelSelectModalProps {\n\t/** The channel being edited. `null` closes the modal. */\n\tchannel: AgentChannel | null;\n\t/** Currently activated backend channel ids for this channel. */\n\tselectedIds: string[];\n\tonClose: () => void;\n\t/** Apply — commits the draft selection as backend channel ids. */\n\tonApply: (channelIds: string[]) => void;\n\t/** Footer \"Channel management\" link. Omit to hide it. */\n\tonManageChannels?: () => void;\n}\n\n/**\n * Per-channel account picker, opened from a channel row's edit button.\n *\n * The selection is a LOCAL draft until Apply — the design gives the merchant a\n * Cancel, so toggling here must not reach the agent value until they commit.\n *\n * A disconnected account stays selectable and stays selected: the merchant may\n * be mid-reconnect, and quietly removing it from their agent would hide the\n * problem rather than surface it. It's labelled instead, and the row it came\n * from carries the alert.\n */\nexport const ChannelSelectModal: React.FC<ChannelSelectModalProps> = ({\n\tchannel,\n\tselectedIds,\n\tonClose,\n\tonApply,\n\tonManageChannels,\n}) => {\n\tconst [draft, setDraft] = useState<string[]>(selectedIds);\n\n\t// Re-seed whenever the modal opens (or reopens for a different channel), so a\n\t// cancelled edit doesn't leak into the next one.\n\tuseEffect(() => {\n\t\tif (channel) {\n\t\t\tsetDraft(selectedIds);\n\t\t}\n\t\t// `selectedIds` is intentionally read only at open time — the draft owns it\n\t\t// from then until Apply.\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [channel]);\n\n\tif (!channel) {\n\t\treturn null;\n\t}\n\n\tconst { Icon, tint, accountsNoun } = channelPresentation(\n\t\tchannel.type,\n\t\tchannel.label,\n\t);\n\n\tconst toggle = (channelId: string) =>\n\t\tsetDraft((prev) =>\n\t\t\tprev.includes(channelId)\n\t\t\t\t? prev.filter((id) => id !== channelId)\n\t\t\t\t: [...prev, channelId],\n\t\t);\n\n\treturn (\n\t\t<StyledModal\n\t\t\tdata-test=\"agent-channel-select-modal\"\n\t\t\topen\n\t\t\tonClose={onClose}\n\t\t\twidth=\"640px\"\n\t\t\theadingTitle=\"Select channels to activate\"\n\t\t\theadingSubtitle={`Select the ${accountsNoun} on which you need this agent enabled on.`}\n\t\t\t// This repo has no global `box-sizing: border-box`, so StyledModal's\n\t\t\t// `width: 100%` + 24px side padding resolves to 688px inside its 640px\n\t\t\t// `overflow: hidden` wrapper — clipping the right 48px, and with it the\n\t\t\t// primary button. Border-box on each section is the fix that doesn't\n\t\t\t// touch the shared modal.\n\t\t\tmodalHeaderStyles={{ padding: '24px', boxSizing: 'border-box' }}\n\t\t\tmodalBodyStyles={{ boxSizing: 'border-box' }}\n\t\t\tfooterContainerStyle={{ padding: '20px 24px', boxSizing: 'border-box' }}\n\t\t\tfooterLeftCustomElement={\n\t\t\t\tonManageChannels ? (\n\t\t\t\t\t<ChannelsLink\n\t\t\t\t\t\tdata-test=\"agent-channel-management-link\"\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\tonClick={onManageChannels}\n\t\t\t\t\t\tstyle={{ fontSize: 14, lineHeight: '20px', fontWeight: 600 }}\n\t\t\t\t\t>\n\t\t\t\t\t\tChannel management\n\t\t\t\t\t\t<RedirectIcon width={16} height={16} />\n\t\t\t\t\t</ChannelsLink>\n\t\t\t\t) : undefined\n\t\t\t}\n\t\t\tsecondaryButton={{\n\t\t\t\t'data-test': 'agent-channel-cancel',\n\t\t\t\tbuttonType: 'tertiaryGray',\n\t\t\t\tsize: 'small',\n\t\t\t\tbuttonText: 'Cancel',\n\t\t\t\tonClick: onClose,\n\t\t\t}}\n\t\t\tprimaryButton={{\n\t\t\t\t'data-test': 'agent-channel-apply',\n\t\t\t\tbuttonType: 'primary',\n\t\t\t\tsize: 'small',\n\t\t\t\tbuttonText: 'Apply',\n\t\t\t\tonClick: () => onApply(draft),\n\t\t\t}}\n\t\t>\n\t\t\t<ChannelPickerBody>\n\t\t\t\t<BodySecondary color={COLORS.content.secondary}>\n\t\t\t\t\t{`Select from available ${accountsNoun}`}\n\t\t\t\t</BodySecondary>\n\n\t\t\t\t<ChannelPickerList>\n\t\t\t\t\t{channel.accounts.map((account) => {\n\t\t\t\t\t\tconst disconnected = isAccountDisconnected(account);\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<ChannelPickerRow\n\t\t\t\t\t\t\t\tkey={account.channelId}\n\t\t\t\t\t\t\t\tdata-test={`agent-channel-account-${account.channelId}`}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<CheckBox\n\t\t\t\t\t\t\t\t\tisChecked={draft.includes(account.channelId)}\n\t\t\t\t\t\t\t\t\tariaLabel={account.channelName}\n\t\t\t\t\t\t\t\t\tvalue={account.channelId}\n\t\t\t\t\t\t\t\t\tonValueChange={() => toggle(account.channelId)}\n\t\t\t\t\t\t\t\t\tstyle={CHECKBOX_SLOT}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t<ChannelPickerAccount>\n\t\t\t\t\t\t\t\t\t<ChannelGlyph tint={tint}>\n\t\t\t\t\t\t\t\t\t\t{Icon && <Icon size={16} />}\n\t\t\t\t\t\t\t\t\t</ChannelGlyph>\n\t\t\t\t\t\t\t\t\t<TitleSmall color={COLORS.content.primary}>\n\t\t\t\t\t\t\t\t\t\t{account.channelName}\n\t\t\t\t\t\t\t\t\t</TitleSmall>\n\t\t\t\t\t\t\t\t\t{disconnected && (\n\t\t\t\t\t\t\t\t\t\t// NOT `size=\"small\"`: that renders through BodyTiny, which\n\t\t\t\t\t\t\t\t\t\t// is 10px AND has no font-family, so it falls back to the\n\t\t\t\t\t\t\t\t\t\t// browser serif. The default reads as 12px Inter — Figma's\n\t\t\t\t\t\t\t\t\t\t// body-caption, same as every other chip.\n\t\t\t\t\t\t\t\t\t\t<Tag\n\t\t\t\t\t\t\t\t\t\t\ttagText=\"Disconnected\"\n\t\t\t\t\t\t\t\t\t\t\ttype=\"negative\"\n\t\t\t\t\t\t\t\t\t\t\tvariant=\"regular\"\n\t\t\t\t\t\t\t\t\t\t\theight={20}\n\t\t\t\t\t\t\t\t\t\t\tpadding=\"2px 8px\"\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</ChannelPickerAccount>\n\t\t\t\t\t\t\t</ChannelPickerRow>\n\t\t\t\t\t\t);\n\t\t\t\t\t})}\n\n\t\t\t\t\t{channel.accounts.length === 0 && (\n\t\t\t\t\t\t<BodySecondary color={COLORS.content.placeholder}>\n\t\t\t\t\t\t\t{`No ${accountsNoun} are connected to this store yet.`}\n\t\t\t\t\t\t</BodySecondary>\n\t\t\t\t\t)}\n\t\t\t\t</ChannelPickerList>\n\t\t\t</ChannelPickerBody>\n\t\t</StyledModal>\n\t);\n};\n\nChannelSelectModal.displayName = 'ChannelSelectModal';\n\nexport type { ChannelSelectModalProps };\n"],"names":["ChannelSelectModal","channel","selectedIds","onClose","onApply","onManageChannels","draft","setDraft","useState","useEffect","Icon","tint","accountsNoun","channelPresentation","toggle","channelId","prev","id","jsx","StyledModal","jsxs","ChannelsLink","RedirectIcon","ChannelPickerBody","BodySecondary","COLORS","ChannelPickerList","account","disconnected","isAccountDisconnected","ChannelPickerRow","CheckBox","CHECKBOX_SLOT","ChannelPickerAccount","ChannelGlyph","TitleSmall","Tag"],"mappings":"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"}
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
import { default as React } from 'react';
|
|
2
|
-
/**
|
|
3
|
-
* Step 1's "Channels to activate it on" — one card per connected channel, each
|
|
4
|
-
* with a select-all checkbox, the accounts it covers as chips, and an edit
|
|
5
|
-
* button that opens the per-account picker.
|
|
6
|
-
*
|
|
7
|
-
* Renders nothing when the consumer passes no `availableChannels`, so a host
|
|
8
|
-
* that hasn't wired channels up yet sees the step exactly as it was.
|
|
9
|
-
*/
|
|
10
|
-
export declare const ChannelsSection: React.FC;
|
|
@@ -1,183 +0,0 @@
|
|
|
1
|
-
import { jsxs as d, jsx as n, Fragment as E } from "react/jsx-runtime";
|
|
2
|
-
import w from "../../../assets/icons/edit.svg.js";
|
|
3
|
-
import A from "../../../assets/icons/errorInfo.svg.js";
|
|
4
|
-
import { useState as M, useMemo as N } from "react";
|
|
5
|
-
import { TitleSmall as v } from "../../TypographyStyle.js";
|
|
6
|
-
import { COLORS as T } from "../../../constants/Theme.js";
|
|
7
|
-
import { ChannelsSectionRoot as B, ChannelCard as L, ChannelRow as O, ChannelRowMain as R, CHECKBOX_SLOT as k, ChannelIdentity as P, ChannelGlyph as j, ChannelChips as D, ChipTooltipTarget as f } from "../AgentBuilder.styled.js";
|
|
8
|
-
import { channelPresentation as _, selectedAccounts as z, isAccountDisconnected as S } from "../constants/channels.js";
|
|
9
|
-
import { useAgentBuilderContext as F } from "../context/AgentBuilderContext.js";
|
|
10
|
-
import { ChannelSelectModal as H } from "./ChannelSelectModal.js";
|
|
11
|
-
import { CheckBox as V } from "../../checkBox/CheckBox.js";
|
|
12
|
-
import { Tooltip as I } from "../../tooltips/Tooltip.js";
|
|
13
|
-
import { Tag as C } from "../../tag/Tag.js";
|
|
14
|
-
import { IconButton as X } from "../../icon-button/IconButton.js";
|
|
15
|
-
const b = 3, G = (e) => [
|
|
16
|
-
...e.filter(S),
|
|
17
|
-
...e.filter((i) => !S(i))
|
|
18
|
-
], K = () => {
|
|
19
|
-
const { value: e, updateField: i, availableChannels: r, onManageChannels: p } = F(), [a, c] = M(null), m = N(() => {
|
|
20
|
-
const t = /* @__PURE__ */ new Map();
|
|
21
|
-
return (e.channels ?? []).forEach((l) => t.set(l.type, l.channelIds)), t;
|
|
22
|
-
}, [e.channels]);
|
|
23
|
-
if (!r || r.length === 0)
|
|
24
|
-
return null;
|
|
25
|
-
const g = (t, l) => {
|
|
26
|
-
const h = (e.channels ?? []).filter((u) => u.type !== t);
|
|
27
|
-
i(
|
|
28
|
-
"channels",
|
|
29
|
-
l.length > 0 ? [...h, { type: t, channelIds: l }] : h
|
|
30
|
-
);
|
|
31
|
-
}, o = r.find((t) => t.type === a) ?? null;
|
|
32
|
-
return /* @__PURE__ */ d(B, { children: [
|
|
33
|
-
/* @__PURE__ */ n(v, { color: T.content.primary, children: "Channels to activate it on" }),
|
|
34
|
-
r.map((t) => /* @__PURE__ */ n(
|
|
35
|
-
U,
|
|
36
|
-
{
|
|
37
|
-
channel: t,
|
|
38
|
-
selectedIds: m.get(t.type) ?? [],
|
|
39
|
-
onSelectionChange: (l) => g(t.type, l),
|
|
40
|
-
onEdit: () => c(t.type)
|
|
41
|
-
},
|
|
42
|
-
String(t.type)
|
|
43
|
-
)),
|
|
44
|
-
/* @__PURE__ */ n(
|
|
45
|
-
H,
|
|
46
|
-
{
|
|
47
|
-
channel: o,
|
|
48
|
-
selectedIds: o ? m.get(o.type) ?? [] : [],
|
|
49
|
-
onClose: () => c(null),
|
|
50
|
-
onApply: (t) => {
|
|
51
|
-
o && g(o.type, t), c(null);
|
|
52
|
-
},
|
|
53
|
-
onManageChannels: p && o ? () => p(o.type) : void 0
|
|
54
|
-
}
|
|
55
|
-
)
|
|
56
|
-
] });
|
|
57
|
-
};
|
|
58
|
-
K.displayName = "ChannelsSection";
|
|
59
|
-
const U = ({
|
|
60
|
-
channel: e,
|
|
61
|
-
selectedIds: i,
|
|
62
|
-
onSelectionChange: r,
|
|
63
|
-
onEdit: p
|
|
64
|
-
}) => {
|
|
65
|
-
const { label: a, Icon: c, tint: m, accountsNoun: g } = _(
|
|
66
|
-
e.type,
|
|
67
|
-
e.label
|
|
68
|
-
), o = e.accounts.length === 0, t = z(e, i), l = !o && t.length === e.accounts.length, h = t.length > 0 && !l, u = G(t.length > 0 ? t : e.accounts), x = u.slice(0, b), y = u.slice(b), $ = () => r(
|
|
69
|
-
l ? [] : e.accounts.map((s) => s.channelId)
|
|
70
|
-
);
|
|
71
|
-
return /* @__PURE__ */ n(
|
|
72
|
-
L,
|
|
73
|
-
{
|
|
74
|
-
"data-test": `agent-channel-${e.type}`,
|
|
75
|
-
role: "group",
|
|
76
|
-
"aria-label": a,
|
|
77
|
-
children: /* @__PURE__ */ d(O, { children: [
|
|
78
|
-
/* @__PURE__ */ d(R, { children: [
|
|
79
|
-
/* @__PURE__ */ n(
|
|
80
|
-
V,
|
|
81
|
-
{
|
|
82
|
-
isChecked: l || h,
|
|
83
|
-
isPartiallyChecked: h,
|
|
84
|
-
isDisabled: o,
|
|
85
|
-
ariaLabel: a,
|
|
86
|
-
onValueChange: $,
|
|
87
|
-
style: k
|
|
88
|
-
}
|
|
89
|
-
),
|
|
90
|
-
/* @__PURE__ */ d(P, { children: [
|
|
91
|
-
/* @__PURE__ */ n(j, { tint: m, children: c && /* @__PURE__ */ n(c, { size: 16 }) }),
|
|
92
|
-
/* @__PURE__ */ n(v, { color: T.content.primary, children: a })
|
|
93
|
-
] }),
|
|
94
|
-
/* @__PURE__ */ n(D, { children: o ? /* @__PURE__ */ n(
|
|
95
|
-
I,
|
|
96
|
-
{
|
|
97
|
-
body: `No ${g} are connected to this store yet. Connect one from channel management to activate this agent on ${a}.`,
|
|
98
|
-
placement: "top",
|
|
99
|
-
children: /* @__PURE__ */ n(f, { children: /* @__PURE__ */ n(
|
|
100
|
-
C,
|
|
101
|
-
{
|
|
102
|
-
tagText: "Disabled",
|
|
103
|
-
type: "neutral",
|
|
104
|
-
variant: "regular",
|
|
105
|
-
height: 24,
|
|
106
|
-
cursor: "default"
|
|
107
|
-
}
|
|
108
|
-
) })
|
|
109
|
-
}
|
|
110
|
-
) : /* @__PURE__ */ d(E, { children: [
|
|
111
|
-
x.map((s) => /* @__PURE__ */ n(
|
|
112
|
-
q,
|
|
113
|
-
{
|
|
114
|
-
account: s,
|
|
115
|
-
channelLabel: a
|
|
116
|
-
},
|
|
117
|
-
s.channelId
|
|
118
|
-
)),
|
|
119
|
-
y.length > 0 && /* @__PURE__ */ n(
|
|
120
|
-
I,
|
|
121
|
-
{
|
|
122
|
-
body: y.map((s) => s.channelName).join(", "),
|
|
123
|
-
placement: "top",
|
|
124
|
-
children: /* @__PURE__ */ n(f, { children: /* @__PURE__ */ n(
|
|
125
|
-
C,
|
|
126
|
-
{
|
|
127
|
-
tagText: `+${y.length}`,
|
|
128
|
-
type: "purple",
|
|
129
|
-
variant: "regular",
|
|
130
|
-
height: 24,
|
|
131
|
-
cursor: "default"
|
|
132
|
-
}
|
|
133
|
-
) })
|
|
134
|
-
}
|
|
135
|
-
)
|
|
136
|
-
] }) })
|
|
137
|
-
] }),
|
|
138
|
-
/* @__PURE__ */ n(
|
|
139
|
-
X,
|
|
140
|
-
{
|
|
141
|
-
"data-test": `agent-channel-${e.type}-edit`,
|
|
142
|
-
"aria-label": `Edit ${a} channels`,
|
|
143
|
-
Icon: w,
|
|
144
|
-
size: "xs",
|
|
145
|
-
iconPadding: 4,
|
|
146
|
-
disabled: o,
|
|
147
|
-
onClick: p
|
|
148
|
-
}
|
|
149
|
-
)
|
|
150
|
-
] })
|
|
151
|
-
}
|
|
152
|
-
);
|
|
153
|
-
}, q = ({ account: e, channelLabel: i }) => S(e) ? /* @__PURE__ */ n(
|
|
154
|
-
I,
|
|
155
|
-
{
|
|
156
|
-
body: `${e.channelName} is disconnected. This agent won't run on it until you reconnect it from ${i} channel management.`,
|
|
157
|
-
placement: "top",
|
|
158
|
-
children: /* @__PURE__ */ n(f, { children: /* @__PURE__ */ n(
|
|
159
|
-
C,
|
|
160
|
-
{
|
|
161
|
-
tagText: e.channelName,
|
|
162
|
-
type: "negative",
|
|
163
|
-
variant: "regular",
|
|
164
|
-
height: 24,
|
|
165
|
-
LeadingIcon: A,
|
|
166
|
-
leadingIconId: `channel-error-${e.channelId}`,
|
|
167
|
-
cursor: "default"
|
|
168
|
-
}
|
|
169
|
-
) })
|
|
170
|
-
}
|
|
171
|
-
) : /* @__PURE__ */ n(
|
|
172
|
-
C,
|
|
173
|
-
{
|
|
174
|
-
tagText: e.channelName,
|
|
175
|
-
type: "purple",
|
|
176
|
-
variant: "regular",
|
|
177
|
-
height: 24
|
|
178
|
-
}
|
|
179
|
-
);
|
|
180
|
-
export {
|
|
181
|
-
K as ChannelsSection
|
|
182
|
-
};
|
|
183
|
-
//# sourceMappingURL=ChannelsSection.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"ChannelsSection.js","sources":["../../../../../src/components/agent-builder/components/ChannelsSection.tsx"],"sourcesContent":["import EditIcon from '@src/assets/icons/edit.svg';\nimport ErrorInfoIcon from '@src/assets/icons/errorInfo.svg';\nimport React, { useMemo, useState } from 'react';\nimport { CheckBox } from '@src/components/checkBox';\nimport { IconButton } from '@src/components/icon-button';\nimport { Tag } from '@src/components/tag';\nimport { Tooltip } from '@src/components/tooltips';\nimport { TitleSmall } from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport type {\n\tAgentChannel,\n\tAgentChannelAccount,\n\tAgentChannelType,\n} from '../AgentBuilder.model';\nimport {\n\tChannelCard,\n\tChannelChips,\n\tChannelGlyph,\n\tChannelIdentity,\n\tChannelRow,\n\tChannelRowMain,\n\tChannelsSectionRoot,\n\tCHECKBOX_SLOT,\n\tChipTooltipTarget,\n} from '../AgentBuilder.styled';\nimport {\n\tchannelPresentation,\n\tisAccountDisconnected,\n\tselectedAccounts,\n} from '../constants/channels';\nimport { useAgentBuilderContext } from '../context/AgentBuilderContext';\nimport { ChannelSelectModal } from './ChannelSelectModal';\n\n/**\n * How many account chips a row shows before collapsing the rest into \"+N\". The\n * design draws three; without a cap a store with a dozen numbers pushes the row\n * well past its 48px height.\n */\nconst MAX_VISIBLE_CHIPS = 3;\n\n/**\n * Chips for a row: disconnected accounts first so a cap can never hide the very\n * thing the merchant needs to act on, then the rest in their original order.\n */\nconst chipOrder = (accounts: AgentChannelAccount[]): AgentChannelAccount[] => [\n\t...accounts.filter(isAccountDisconnected),\n\t...accounts.filter((a) => !isAccountDisconnected(a)),\n];\n\n/**\n * Step 1's \"Channels to activate it on\" — one card per connected channel, each\n * with a select-all checkbox, the accounts it covers as chips, and an edit\n * button that opens the per-account picker.\n *\n * Renders nothing when the consumer passes no `availableChannels`, so a host\n * that hasn't wired channels up yet sees the step exactly as it was.\n */\nexport const ChannelsSection: React.FC = () => {\n\tconst { value, updateField, availableChannels, onManageChannels } =\n\t\tuseAgentBuilderContext();\n\n\t// Which channel's picker is open (by type); null = closed.\n\tconst [editingType, setEditingType] = useState<AgentChannelType | null>(null);\n\n\t// Selection is stored as a list; index it once so each row is a lookup.\n\tconst selectionByType = useMemo(() => {\n\t\tconst map = new Map<AgentChannelType, string[]>();\n\t\t(value.channels ?? []).forEach((c) => map.set(c.type, c.channelIds));\n\t\treturn map;\n\t}, [value.channels]);\n\n\tif (!availableChannels || availableChannels.length === 0) {\n\t\treturn null;\n\t}\n\n\tconst setSelection = (type: AgentChannelType, channelIds: string[]) => {\n\t\tconst rest = (value.channels ?? []).filter((c) => c.type !== type);\n\t\t// An empty selection drops the channel entirely rather than persisting a\n\t\t// `{ type, channelIds: [] }` no-op the backend would have to filter out.\n\t\tupdateField(\n\t\t\t'channels',\n\t\t\tchannelIds.length > 0 ? [...rest, { type, channelIds }] : rest,\n\t\t);\n\t};\n\n\tconst editingChannel =\n\t\tavailableChannels.find((c) => c.type === editingType) ?? null;\n\n\treturn (\n\t\t<ChannelsSectionRoot>\n\t\t\t<TitleSmall color={COLORS.content.primary}>\n\t\t\t\tChannels to activate it on\n\t\t\t</TitleSmall>\n\n\t\t\t{availableChannels.map((channel) => (\n\t\t\t\t<ChannelCardRow\n\t\t\t\t\tkey={String(channel.type)}\n\t\t\t\t\tchannel={channel}\n\t\t\t\t\tselectedIds={selectionByType.get(channel.type) ?? []}\n\t\t\t\t\tonSelectionChange={(ids) => setSelection(channel.type, ids)}\n\t\t\t\t\tonEdit={() => setEditingType(channel.type)}\n\t\t\t\t/>\n\t\t\t))}\n\n\t\t\t<ChannelSelectModal\n\t\t\t\tchannel={editingChannel}\n\t\t\t\tselectedIds={\n\t\t\t\t\teditingChannel ? selectionByType.get(editingChannel.type) ?? [] : []\n\t\t\t\t}\n\t\t\t\tonClose={() => setEditingType(null)}\n\t\t\t\tonApply={(ids) => {\n\t\t\t\t\tif (editingChannel) {\n\t\t\t\t\t\tsetSelection(editingChannel.type, ids);\n\t\t\t\t\t}\n\t\t\t\t\tsetEditingType(null);\n\t\t\t\t}}\n\t\t\t\tonManageChannels={\n\t\t\t\t\tonManageChannels && editingChannel\n\t\t\t\t\t\t? () => onManageChannels(editingChannel.type)\n\t\t\t\t\t\t: undefined\n\t\t\t\t}\n\t\t\t/>\n\t\t</ChannelsSectionRoot>\n\t);\n};\n\nChannelsSection.displayName = 'ChannelsSection';\n\ninterface ChannelCardRowProps {\n\tchannel: AgentChannel;\n\tselectedIds: string[];\n\tonSelectionChange: (channelIds: string[]) => void;\n\tonEdit: () => void;\n}\n\nconst ChannelCardRow: React.FC<ChannelCardRowProps> = ({\n\tchannel,\n\tselectedIds,\n\tonSelectionChange,\n\tonEdit,\n}) => {\n\tconst { label, Icon, tint, accountsNoun } = channelPresentation(\n\t\tchannel.type,\n\t\tchannel.label,\n\t);\n\n\t/**\n\t * Zero state — the store supports this channel but has nothing connected\n\t * under it. Nothing on the row is actionable, so the checkbox and the edit\n\t * button are both inert and a \"Disabled\" chip stands in for the accounts.\n\t */\n\tconst isUnavailable = channel.accounts.length === 0;\n\n\tconst selected = selectedAccounts(channel, selectedIds);\n\tconst allSelected =\n\t\t!isUnavailable && selected.length === channel.accounts.length;\n\tconst someSelected = selected.length > 0 && !allSelected;\n\n\t// With nothing picked yet the row shows the store's inventory — that's the\n\t// state the design draws, and it tells the merchant what's on offer. Once\n\t// they've picked, the chips narrow to what the agent actually runs on.\n\tconst shown = chipOrder(selected.length > 0 ? selected : channel.accounts);\n\tconst visible = shown.slice(0, MAX_VISIBLE_CHIPS);\n\tconst overflow = shown.slice(MAX_VISIBLE_CHIPS);\n\n\tconst toggleAll = () =>\n\t\tonSelectionChange(\n\t\t\tallSelected ? [] : channel.accounts.map((a) => a.channelId),\n\t\t);\n\n\treturn (\n\t\t<ChannelCard\n\t\t\tdata-test={`agent-channel-${channel.type}`}\n\t\t\t// A card groups a channel's checkbox, chips and edit button; naming the\n\t\t\t// group lets assistive tech (and tests) address one channel at a time.\n\t\t\trole=\"group\"\n\t\t\taria-label={label}\n\t\t>\n\t\t\t<ChannelRow>\n\t\t\t\t<ChannelRowMain>\n\t\t\t\t\t<CheckBox\n\t\t\t\t\t\tisChecked={allSelected || someSelected}\n\t\t\t\t\t\tisPartiallyChecked={someSelected}\n\t\t\t\t\t\tisDisabled={isUnavailable}\n\t\t\t\t\t\tariaLabel={label}\n\t\t\t\t\t\tonValueChange={toggleAll}\n\t\t\t\t\t\tstyle={CHECKBOX_SLOT}\n\t\t\t\t\t/>\n\t\t\t\t\t<ChannelIdentity>\n\t\t\t\t\t\t<ChannelGlyph tint={tint}>\n\t\t\t\t\t\t\t{Icon && <Icon size={16} />}\n\t\t\t\t\t\t</ChannelGlyph>\n\t\t\t\t\t\t<TitleSmall color={COLORS.content.primary}>{label}</TitleSmall>\n\t\t\t\t\t</ChannelIdentity>\n\n\t\t\t\t\t<ChannelChips>\n\t\t\t\t\t\t{isUnavailable ? (\n\t\t\t\t\t\t\t<Tooltip\n\t\t\t\t\t\t\t\tbody={`No ${accountsNoun} are connected to this store yet. Connect one from channel management to activate this agent on ${label}.`}\n\t\t\t\t\t\t\t\tplacement=\"top\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<ChipTooltipTarget>\n\t\t\t\t\t\t\t\t\t<Tag\n\t\t\t\t\t\t\t\t\t\ttagText=\"Disabled\"\n\t\t\t\t\t\t\t\t\t\ttype=\"neutral\"\n\t\t\t\t\t\t\t\t\t\tvariant=\"regular\"\n\t\t\t\t\t\t\t\t\t\theight={24}\n\t\t\t\t\t\t\t\t\t\tcursor=\"default\"\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</ChipTooltipTarget>\n\t\t\t\t\t\t\t</Tooltip>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t{visible.map((account) => (\n\t\t\t\t\t\t\t\t\t<AccountChip\n\t\t\t\t\t\t\t\t\t\tkey={account.channelId}\n\t\t\t\t\t\t\t\t\t\taccount={account}\n\t\t\t\t\t\t\t\t\t\tchannelLabel={label}\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\t{overflow.length > 0 && (\n\t\t\t\t\t\t\t\t\t<Tooltip\n\t\t\t\t\t\t\t\t\t\tbody={overflow.map((a) => a.channelName).join(', ')}\n\t\t\t\t\t\t\t\t\t\tplacement=\"top\"\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<ChipTooltipTarget>\n\t\t\t\t\t\t\t\t\t\t\t<Tag\n\t\t\t\t\t\t\t\t\t\t\t\ttagText={`+${overflow.length}`}\n\t\t\t\t\t\t\t\t\t\t\t\ttype=\"purple\"\n\t\t\t\t\t\t\t\t\t\t\t\tvariant=\"regular\"\n\t\t\t\t\t\t\t\t\t\t\t\theight={24}\n\t\t\t\t\t\t\t\t\t\t\t\tcursor=\"default\"\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t</ChipTooltipTarget>\n\t\t\t\t\t\t\t\t\t</Tooltip>\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</ChannelChips>\n\t\t\t\t</ChannelRowMain>\n\n\t\t\t\t<IconButton\n\t\t\t\t\tdata-test={`agent-channel-${channel.type}-edit`}\n\t\t\t\t\taria-label={`Edit ${label} channels`}\n\t\t\t\t\tIcon={EditIcon}\n\t\t\t\t\tsize=\"xs\"\n\t\t\t\t\ticonPadding={4}\n\t\t\t\t\tdisabled={isUnavailable}\n\t\t\t\t\tonClick={onEdit}\n\t\t\t\t/>\n\t\t\t</ChannelRow>\n\t\t</ChannelCard>\n\t);\n};\n\n/**\n * One account chip. A healthy account reads as a brand chip; a disconnected one\n * turns negative and gains the error glyph.\n *\n * The tooltip is NOT in the design — but a bare red chip tells the merchant\n * something is broken and nothing about what to do, so it names the account and\n * the fix.\n */\nconst AccountChip: React.FC<{\n\taccount: AgentChannelAccount;\n\tchannelLabel: string;\n}> = ({ account, channelLabel }) => {\n\tif (!isAccountDisconnected(account)) {\n\t\treturn (\n\t\t\t<Tag\n\t\t\t\ttagText={account.channelName}\n\t\t\t\ttype=\"purple\"\n\t\t\t\tvariant=\"regular\"\n\t\t\t\theight={24}\n\t\t\t/>\n\t\t);\n\t}\n\n\treturn (\n\t\t<Tooltip\n\t\t\tbody={`${account.channelName} is disconnected. This agent won't run on it until you reconnect it from ${channelLabel} channel management.`}\n\t\t\tplacement=\"top\"\n\t\t>\n\t\t\t<ChipTooltipTarget>\n\t\t\t\t<Tag\n\t\t\t\t\ttagText={account.channelName}\n\t\t\t\t\ttype=\"negative\"\n\t\t\t\t\tvariant=\"regular\"\n\t\t\t\t\theight={24}\n\t\t\t\t\tLeadingIcon={ErrorInfoIcon}\n\t\t\t\t\t// Tag doesn't spread rest props, so `data-test` would be dropped —\n\t\t\t\t\t// `leadingIconId` is the one hook it does put on the DOM, which gives\n\t\t\t\t\t// the error glyph a stable handle for tests and e2e.\n\t\t\t\t\tleadingIconId={`channel-error-${account.channelId}`}\n\t\t\t\t\tcursor=\"default\"\n\t\t\t\t/>\n\t\t\t</ChipTooltipTarget>\n\t\t</Tooltip>\n\t);\n};\n"],"names":["MAX_VISIBLE_CHIPS","chipOrder","accounts","isAccountDisconnected","a","ChannelsSection","value","updateField","availableChannels","onManageChannels","useAgentBuilderContext","editingType","setEditingType","useState","selectionByType","useMemo","map","c","setSelection","type","channelIds","rest","editingChannel","ChannelsSectionRoot","jsx","TitleSmall","COLORS","channel","ChannelCardRow","ids","ChannelSelectModal","selectedIds","onSelectionChange","onEdit","label","Icon","tint","accountsNoun","channelPresentation","isUnavailable","selected","selectedAccounts","allSelected","someSelected","shown","visible","overflow","toggleAll","ChannelCard","ChannelRow","jsxs","ChannelRowMain","CheckBox","CHECKBOX_SLOT","ChannelIdentity","ChannelGlyph","ChannelChips","Tooltip","ChipTooltipTarget","Tag","Fragment","account","AccountChip","IconButton","EditIcon","channelLabel","ErrorInfoIcon"],"mappings":"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"}
|
|
@@ -1,56 +0,0 @@
|
|
|
1
|
-
import { default as React } from 'react';
|
|
2
|
-
import { AgentChannel, AgentChannelAccount, AgentChannelType } from '../AgentBuilder.model';
|
|
3
|
-
/** How one channel type renders: its label, brand glyph, tint and copy noun. */
|
|
4
|
-
export interface ChannelPresentation {
|
|
5
|
-
/** Row label ("WhatsApp", "Email", …). */
|
|
6
|
-
label: string;
|
|
7
|
-
/** Brand glyph. Undefined for an unknown type — the row renders label-only. */
|
|
8
|
-
Icon?: React.FC<React.SVGProps<SVGSVGElement> & {
|
|
9
|
-
size?: number | string;
|
|
10
|
-
}>;
|
|
11
|
-
/** Tint behind the glyph. */
|
|
12
|
-
tint: string;
|
|
13
|
-
/**
|
|
14
|
-
* What an account IS on this channel, plural — drives the picker's copy
|
|
15
|
-
* ("Select from available WhatsApp numbers"). Kept per-channel because the
|
|
16
|
-
* design's WhatsApp-only wording has to generalise once the same picker opens
|
|
17
|
-
* for Email and Instagram.
|
|
18
|
-
*/
|
|
19
|
-
accountsNoun: string;
|
|
20
|
-
}
|
|
21
|
-
/**
|
|
22
|
-
* Keyed by the shared `Channels` enum, so a channel key can never drift from the
|
|
23
|
-
* platform's spelling.
|
|
24
|
-
*
|
|
25
|
-
* Typed `Record<AgentChannelType, …>` rather than `Record<string, …>`: that makes
|
|
26
|
-
* the map EXHAUSTIVE, so widening {@link AgentChannelType} without adding the
|
|
27
|
-
* matching presentation here is a compile error rather than a channel that
|
|
28
|
-
* silently renders with no glyph.
|
|
29
|
-
*/
|
|
30
|
-
export declare const CHANNEL_PRESENTATION: Record<AgentChannelType, ChannelPresentation>;
|
|
31
|
-
/** The channel types the builder supports, in display order. */
|
|
32
|
-
export declare const AGENT_CHANNEL_TYPES: AgentChannelType[];
|
|
33
|
-
/**
|
|
34
|
-
* Presentation for a channel.
|
|
35
|
-
*
|
|
36
|
-
* `AgentChannelType` makes the registry hit total at compile time, but the
|
|
37
|
-
* `availableChannels` a consumer passes come off a backend response — so an
|
|
38
|
-
* unrecognised `type` is still handled defensively (the consumer's `label`, then
|
|
39
|
-
* the raw value, with no glyph) rather than rendering `undefined`.
|
|
40
|
-
*/
|
|
41
|
-
export declare const channelPresentation: (type: AgentChannelType, labelOverride?: string) => ChannelPresentation;
|
|
42
|
-
/** True when the store hasn't got a healthy connection to this account. */
|
|
43
|
-
export declare const isAccountDisconnected: (account: AgentChannelAccount) => boolean;
|
|
44
|
-
/**
|
|
45
|
-
* The accounts the agent is actually activated on, in the channel's own order.
|
|
46
|
-
* Selection is stored as backend ids, so an id that no longer exists on the
|
|
47
|
-
* store (channel removed since the agent was saved) simply drops out here.
|
|
48
|
-
*/
|
|
49
|
-
export declare const selectedAccounts: (channel: AgentChannel, selectedIds: string[]) => AgentChannelAccount[];
|
|
50
|
-
/**
|
|
51
|
-
* Selected accounts the store can no longer reach. Drives the row alert and the
|
|
52
|
-
* chips' negative styling. A disconnected account is deliberately NOT dropped
|
|
53
|
-
* from the selection — silently editing a merchant's saved config would hide the
|
|
54
|
-
* very problem they need to go fix.
|
|
55
|
-
*/
|
|
56
|
-
export declare const disconnectedSelectedAccounts: (channel: AgentChannel, selectedIds: string[]) => AgentChannelAccount[];
|
|
@@ -1,41 +0,0 @@
|
|
|
1
|
-
import { Channels as c } from "@bikdotai/bik-models/campaigns/models/Channel";
|
|
2
|
-
import { COLORS as s } from "../../../constants/Theme.js";
|
|
3
|
-
import i from "../../../icons/Social/Channels/InstagramV2.js";
|
|
4
|
-
import r from "../../../icons/Social/Channels/EmailV2.js";
|
|
5
|
-
import u from "../../../icons/Social/Channels/WhatsAppV2.js";
|
|
6
|
-
const l = "#FFEAF7", N = s.surface.subdued, e = {
|
|
7
|
-
[c.WHATSAPP]: {
|
|
8
|
-
label: "WhatsApp",
|
|
9
|
-
Icon: u,
|
|
10
|
-
tint: s.background.positive.light,
|
|
11
|
-
accountsNoun: "WhatsApp numbers"
|
|
12
|
-
},
|
|
13
|
-
[c.EMAIL]: {
|
|
14
|
-
label: "Email",
|
|
15
|
-
Icon: r,
|
|
16
|
-
tint: s.background.negative.light,
|
|
17
|
-
accountsNoun: "email addresses"
|
|
18
|
-
},
|
|
19
|
-
[c.INSTAGRAM]: {
|
|
20
|
-
label: "Instagram",
|
|
21
|
-
Icon: i,
|
|
22
|
-
tint: l,
|
|
23
|
-
accountsNoun: "Instagram accounts"
|
|
24
|
-
}
|
|
25
|
-
}, S = Object.keys(
|
|
26
|
-
e
|
|
27
|
-
), T = (n, t) => {
|
|
28
|
-
const o = e[String(n).toLowerCase()];
|
|
29
|
-
if (o)
|
|
30
|
-
return t ? { ...o, label: t } : o;
|
|
31
|
-
const a = t || String(n);
|
|
32
|
-
return { label: a, tint: N, accountsNoun: `${a} channels` };
|
|
33
|
-
}, d = (n) => n.status === "disconnected", E = (n, t) => n.accounts.filter((o) => t.includes(o.channelId));
|
|
34
|
-
export {
|
|
35
|
-
S as AGENT_CHANNEL_TYPES,
|
|
36
|
-
e as CHANNEL_PRESENTATION,
|
|
37
|
-
T as channelPresentation,
|
|
38
|
-
d as isAccountDisconnected,
|
|
39
|
-
E as selectedAccounts
|
|
40
|
-
};
|
|
41
|
-
//# sourceMappingURL=channels.js.map
|