@vtex/faststore-plugin-buyer-portal 1.1.80 → 1.1.81

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 (7) hide show
  1. package/package.json +1 -1
  2. package/src/features/collections/components/AddCollectionsDrawer/add-collections-drawer.scss +10 -0
  3. package/src/features/collections/components/CollectionsTable/CollectionsTable.tsx +26 -23
  4. package/src/features/collections/components/CollectionsTable/collections-table.scss +45 -26
  5. package/src/features/collections/components/table/add-collections-drawer-table.scss +5 -1
  6. package/src/features/collections/layouts/CollectionsLayout/CollectionsLayout.tsx +50 -52
  7. package/src/features/collections/layouts/CollectionsLayout/collections-layout.scss +14 -22
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vtex/faststore-plugin-buyer-portal",
3
- "version": "1.1.80",
3
+ "version": "1.1.81",
4
4
  "description": "A plugin for faststore with buyer portal",
5
5
  "main": "index.js",
6
6
  "scripts": {
package/src/features/collections/components/AddCollectionsDrawer/add-collections-drawer.scss CHANGED
@@ -24,6 +24,16 @@
24
24
  align-items: center;
25
25
  justify-content: space-between;
26
26
  height: 2.5rem;
27
+
28
+ @include media("<=tablet") {
29
+ [data-fs-buyer-portal-internal-search] {
30
+ width: 100%;
31
+ }
32
+
33
+ [data-fs-bp-paginator-counter] {
34
+ display: none;
35
+ }
36
+ }
27
37
  }
28
38
 
29
39
  [data-fs-bp-add-collections-drawer-empty-state] {
package/src/features/collections/components/CollectionsTable/CollectionsTable.tsx CHANGED
@@ -2,9 +2,10 @@ import { useState } from "react";
2
2
 
3
3
  import { useSearchParams } from "next/navigation";
4
4
 
5
- import { IconButton, Tooltip } from "@faststore/ui";
5
+ import { Tooltip } from "@faststore/ui";
6
6
 
7
7
  import { Icon, Table } from "../../../shared/components";
8
+ import { getTableColumns } from "../../../shared/components/Table/utils/tableColumns";
8
9
  import { useDrawerProps } from "../../../shared/hooks";
9
10
  import { CollectionSelectedProps } from "../../layouts/CollectionsLayout/CollectionsLayout";
10
11
  import { ScopeCollection } from "../../types";
@@ -47,39 +48,41 @@ export function CollectionsTable({
47
48
  return (
48
49
  <div data-fs-bp-collection-table>
49
50
  <Table>
50
- <Table.Head columns={[{ key: "name", label: "Name" }]}></Table.Head>
51
+ <Table.Head columns={getTableColumns()} />
51
52
  <Table.Body>
52
53
  {collections.map((item) => (
53
54
  <Table.Row
54
55
  iconName="Shapes"
55
56
  title={item.name}
56
57
  key={item.id}
58
+ iconSize={24}
57
59
  searchTerm={searchTerm ?? undefined}
58
60
  >
59
61
  <Table.Cell data-fs-bp-table-row-options align="right">
60
- <div data-fs-removeBtn-wrapper>
61
- <Tooltip
62
- content={removeTooltipContent}
63
- placement={removeDisabled ? "left-center" : "top-center"}
62
+ <Tooltip
63
+ content={removeTooltipContent}
64
+ placement={"left-center"}
65
+ >
66
+ <button
67
+ data-fs-collections-row-action-button
68
+ disabled={removeDisabled}
69
+ aria-label="Remove collections"
70
+ type="button"
71
+ onClick={() =>
72
+ handleRemoveSelectedCollection({
73
+ id: item.id,
74
+ name: item.name,
75
+ })
76
+ }
64
77
  >
65
- <IconButton
66
- disabled={removeDisabled}
67
- aria-label="Remove collections"
68
- variant="tertiary"
69
- iconPosition="left"
70
- size="regular"
71
- icon={
72
- <Icon color="black" height={20} name="DoNotDisturb" />
73
- }
74
- onClick={() =>
75
- handleRemoveSelectedCollection({
76
- id: item.id,
77
- name: item.name,
78
- })
79
- }
78
+ <Icon
79
+ data-fs-icon
80
+ name={"MinusCircle"}
81
+ width={20}
82
+ height={20}
80
83
  />
81
- </Tooltip>
82
- </div>
84
+ </button>
85
+ </Tooltip>
83
86
  </Table.Cell>
84
87
  </Table.Row>
85
88
  ))}
package/src/features/collections/components/CollectionsTable/collections-table.scss CHANGED
@@ -43,6 +43,51 @@
43
43
  }
44
44
  }
45
45
 
46
+ [data-fs-bp-table-row-options] {
47
+ [data-fs-collections-row-action-button] {
48
+ margin: 0 var(--fs-spacing-1);
49
+ border-radius: var(--fs-border-radius-pill);
50
+ width: var(--fs-spacing-5);
51
+ aspect-ratio: 1;
52
+ display: flex;
53
+ justify-content: center;
54
+ align-items: center;
55
+ cursor: pointer;
56
+
57
+ &:disabled {
58
+ cursor: not-allowed;
59
+
60
+ [data-fs-icon] {
61
+ color: #adadad;
62
+
63
+ &[data-fs-icon-loading="true"] {
64
+ @keyframes rotate {
65
+ from {
66
+ transform: rotate(0deg);
67
+ }
68
+ to {
69
+ transform: rotate(360deg);
70
+ }
71
+ }
72
+ animation: rotate 2s linear infinite;
73
+ }
74
+ }
75
+ }
76
+
77
+ &:hover {
78
+ background-color: #e0e0e0;
79
+ }
80
+
81
+ &:active {
82
+ opacity: 0.8;
83
+ }
84
+
85
+ [data-fs-icon] {
86
+ color: #000;
87
+ }
88
+ }
89
+ }
90
+
46
91
  [data-fs-table-row] {
47
92
  height: var(--fs-spacing-8);
48
93
 
@@ -62,32 +107,6 @@
62
107
 
63
108
  [data-fs-table-cell="data"] {
64
109
  padding: var(--fs-spacing-0);
65
-
66
- [data-fs-remove-btn-wrapper] {
67
- display: flex;
68
- justify-content: center;
69
- align-items: center;
70
- padding: 0rem;
71
- height: 2.5rem;
72
- width: 2.5rem;
73
- border-radius: var(--fs-border-radius-circle);
74
- &:hover {
75
- background-color: #ebebeb;
76
- }
77
- [data-fs-icon] {
78
- margin: 0;
79
- }
80
-
81
- [data-fs-button] {
82
- padding: 0.2rem;
83
- width: 100%;
84
-
85
- [data-fs-button-wrapper] {
86
- padding: O;
87
- background-color: transparent;
88
- }
89
- }
90
- }
91
110
  }
92
111
  }
93
112
 
package/src/features/collections/components/table/add-collections-drawer-table.scss CHANGED
@@ -1,10 +1,14 @@
1
+ @import "@faststore/ui/src/components/molecules/Table/styles.scss";
2
+
1
3
  [data-fs-bp-add-collections-drawer-table] {
2
- @import "@faststore/ui/src/components/molecules/Table/styles.scss";
3
4
  @import "@faststore/ui/src/components/atoms/Checkbox/styles.scss";
4
5
  @import "@faststore/ui/src/components/atoms/Skeleton/styles.scss";
5
6
  @import "@faststore/ui/src/components/atoms/Button/styles.scss";
6
7
 
7
8
  margin-top: 1.25rem;
9
+ [data-fs-table-content] {
10
+ table-layout: initial;
11
+ }
8
12
 
9
13
  [data-fs-table-head="true"] {
10
14
  [data-fs-table-row="true"] {
package/src/features/collections/layouts/CollectionsLayout/CollectionsLayout.tsx CHANGED
@@ -1,8 +1,7 @@
1
- import { IconButton, Tooltip } from "@faststore/ui";
1
+ import { Tooltip } from "@faststore/ui";
2
2
 
3
3
  import {
4
4
  HeaderInside,
5
- Icon,
6
5
  InternalSearch,
7
6
  Paginator,
8
7
  } from "../../../shared/components";
@@ -52,8 +51,11 @@ export const CollectionsLayout = ({
52
51
  page,
53
52
  });
54
53
 
55
- const { open: openAddCollectionDrawer, ...AddCollectionDrawerProps } =
56
- useDrawerProps();
54
+ const {
55
+ open: openAddCollectionDrawer,
56
+ isOpen: isOpenAddCollectionDrawer,
57
+ ...AddCollectionDrawerProps
58
+ } = useDrawerProps();
57
59
 
58
60
  const enabledCollections = collections.filter((c) => c.isEnabled);
59
61
  const hasAllCollections = drawerCollections.length === 0;
@@ -72,53 +74,46 @@ export const CollectionsLayout = ({
72
74
  role: user?.role ?? "",
73
75
  }}
74
76
  >
75
- <>
76
- <section data-fs-bp-collections-layout>
77
- <HeaderInside title="Collections">
78
- {!isContractEmpty &&
79
- (hasAllCollections ? (
80
- <Tooltip
81
- content={
82
- "All available collections have already been added to this organizational unit"
83
- }
84
- placement={"left-center"}
85
- >
86
- <IconButton
87
- aria-label="Add collection"
88
- variant="primary"
89
- disabled
90
- icon={<Icon name="Add" />}
91
- />
92
- </Tooltip>
93
- ) : (
94
- <IconButton
95
- aria-label="Add collection"
96
- variant="primary"
97
- icon={<Icon name="Add" />}
98
- onClick={openAddCollectionDrawer}
99
- />
100
- ))}
101
- </HeaderInside>
77
+ <section data-fs-bp-collections-container>
78
+ <HeaderInside title="Collections">
79
+ {!isContractEmpty &&
80
+ (hasAllCollections ? (
81
+ <Tooltip
82
+ content={
83
+ "All available collections have already been added to this organizational unit"
84
+ }
85
+ placement={"left-center"}
86
+ >
87
+ <HeaderInside.Button aria-label="Add collection" disabled />
88
+ </Tooltip>
89
+ ) : (
90
+ <HeaderInside.Button
91
+ aria-label="Add collection"
92
+ onClick={openAddCollectionDrawer}
93
+ />
94
+ ))}
95
+ </HeaderInside>
102
96
 
103
- {isContractEmpty ? (
104
- <EmptyState
105
- iconName="Shapes"
106
- title="This contract has no assigned collections."
107
- description="This means it has access to the entire product catalog of the store."
108
- />
109
- ) : (
110
- <section data-fs-bp-collection-content>
111
- <div data-fs-collection-filter>
112
- <InternalSearch
113
- defaultValue={searchTerm}
114
- textSearch={setSearchTerm}
115
- />
116
- <Paginator.Counter
117
- total={enabledCollections.length}
118
- itemsLength={enabledCollections.length}
119
- />
120
- </div>
97
+ {isContractEmpty ? (
98
+ <EmptyState
99
+ iconName="Shapes"
100
+ title="This contract has no assigned collections."
101
+ description="This means it has access to the entire product catalog of the store."
102
+ />
103
+ ) : (
104
+ <div data-fs-bp-collection-layout>
105
+ <div data-fs-collection-filter>
106
+ <InternalSearch
107
+ defaultValue={searchTerm}
108
+ textSearch={setSearchTerm}
109
+ />
110
+ <Paginator.Counter
111
+ total={enabledCollections.length}
112
+ itemsLength={enabledCollections.length}
113
+ />
114
+ </div>
121
115
 
116
+ <section>
122
117
  <CollectionsTable collections={collections} />
123
118
 
124
119
  <div data-fs-bp-collections-paginator>
@@ -139,14 +134,17 @@ export const CollectionsLayout = ({
139
134
  />
140
135
  </div>
141
136
  </section>
142
- )}
143
- </section>
137
+ </div>
138
+ )}
139
+ </section>
144
140
 
141
+ {isOpenAddCollectionDrawer && (
145
142
  <AddCollectionsDrawer
146
143
  collections={drawerCollections}
144
+ isOpen={isOpenAddCollectionDrawer}
147
145
  {...AddCollectionDrawerProps}
148
146
  />
149
- </>
147
+ )}
150
148
  </ContractTabsLayout>
151
149
  </GlobalLayout>
152
150
  );
package/src/features/collections/layouts/CollectionsLayout/collections-layout.scss CHANGED
@@ -1,10 +1,9 @@
1
1
  @import "../../components/RemoveCollectionDrawer/remove-collection-drawer.scss";
2
2
  @import "../../components/AddCollectionsDrawer/add-collections-drawer.scss";
3
3
 
4
- [data-fs-bp-collections-layout] {
4
+ [data-fs-bp-collections-container] {
5
5
  @import "@faststore/ui/src/components/molecules/Tooltip/styles.scss";
6
6
  @import "@faststore/ui/src/components/molecules/Table/styles.scss";
7
- @import "@faststore/ui/src/components/atoms/Button/styles.scss";
8
7
 
9
8
  @import "../../components/CollectionsTable/collections-table.scss";
10
9
 
@@ -15,23 +14,6 @@
15
14
 
16
15
  width: 100%;
17
16
 
18
- [data-fs-button] {
19
- border-radius: var(--fs-border-radius-circle);
20
- padding: 0;
21
- min-height: 3rem;
22
- width: 3rem;
23
-
24
- [data-fs-button-wrapper] {
25
- border-radius: var(--fs-border-radius-circle);
26
- }
27
-
28
- &[data-fs-button-variant="tertiary"] {
29
- [data-fs-button-wrapper] {
30
- color: var(--fs-color-neutral-7);
31
- }
32
- }
33
- }
34
-
35
17
  [data-fs-bp-header] {
36
18
  display: flex;
37
19
  width: 100%;
@@ -59,10 +41,10 @@
59
41
  }
60
42
  }
61
43
 
62
- [data-fs-bp-collection-content] {
44
+ [data-fs-bp-collection-layout] {
63
45
  display: flex;
64
- width: 100%;
65
46
  flex-direction: column;
47
+ gap: calc(var(--fs-spacing-3) + var(--fs-spacing-0));
66
48
 
67
49
  [data-fs-bp-text-regular] {
68
50
  font-family: Inter;
@@ -78,7 +60,17 @@
78
60
  display: flex;
79
61
  justify-content: space-between;
80
62
  align-items: center;
81
- padding: 0 0 var(--fs-spacing-4);
63
+ height: 2.5rem;
64
+
65
+ @include media("<=tablet") {
66
+ [data-fs-buyer-portal-internal-search] {
67
+ width: 100%;
68
+ }
69
+
70
+ [data-fs-bp-paginator-counter] {
71
+ display: none;
72
+ }
73
+ }
82
74
  }
83
75
 
84
76
  [data-fs-bp-collections-paginator] {