beem-component 2.1.17 → 2.1.18

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 (8) hide show
  1. package/dist/components/Card_v2/Card.js +1 -1
  2. package/dist/components/HorizontalCard/HorizontalCard.js +13 -5
  3. package/dist/components/HorizontalCard/HorizontalCard.stories.js +1 -3
  4. package/package.json +1 -1
  5. package/src/App.js +58 -58
  6. package/src/lib/components/Card_v2/Card.js +1 -1
  7. package/src/lib/components/HorizontalCard/HorizontalCard.js +17 -8
  8. package/src/lib/components/HorizontalCard/HorizontalCard.stories.jsx +1 -1
package/dist/components/Card_v2/Card.js CHANGED
@@ -51,7 +51,7 @@ const Description = _styledComponents.default.p.withConfig({
51
51
  })(["color:var(--muted-foreground,#666);margin:0;"]);
52
52
  const Content = _styledComponents.default.div.withConfig({
53
53
  displayName: "Card__Content"
54
- })(["min-height:180px;padding:0 1.5rem;max-height:calc(100vh - 28.5714rem);overflow-y:auto;scrollbar-width:thin;scrollbar-color:", " transparent;&::-webkit-scrollbar-thumb{background:", ";border-radius:0.6429rem;transition:background 0.2s ease;}&::-webkit-scrollbar-thumb:hover{background:", ";}&:last-child{padding-bottom:1.5rem;}@media (max-width:54.8571rem){max-height:calc(100vh - 17.8572rem);}"], () => hexToRgba('#33b1ba', 0.2), () => hexToRgba('#33b1ba', 0.3), () => hexToRgba('#33b1ba', 0.3));
54
+ })(["min-height:200px;padding:0 1.5rem;max-height:calc(100vh - 28.5714rem);overflow-y:auto;scrollbar-width:thin;scrollbar-color:", " transparent;&::-webkit-scrollbar-thumb{background:", ";border-radius:0.6429rem;transition:background 0.2s ease;}&::-webkit-scrollbar-thumb:hover{background:", ";}&:last-child{padding-bottom:1.5rem;}@media (max-width:54.8571rem){max-height:calc(100vh - 17.8572rem);}"], () => hexToRgba('#33b1ba', 0.2), () => hexToRgba('#33b1ba', 0.3), () => hexToRgba('#33b1ba', 0.3));
55
55
  const Footer = _styledComponents.default.div.withConfig({
56
56
  displayName: "Card__Footer"
57
57
  })(["display:flex;justify-content:space-between;align-items:center;padding:0 1.5rem 1.5rem 1.5rem;gap:1rem;@media (max-width:42.8571rem){flex-direction:column;align-items:stretch;& > *{width:100%;}}"]);
package/dist/components/HorizontalCard/HorizontalCard.js CHANGED
@@ -65,6 +65,14 @@ const IconButton = _styledComponents.default.button.withConfig({
65
65
  } = _ref3;
66
66
  return iconColor || '#111827';
67
67
  });
68
+ const formatDuration = duration => {
69
+ if (duration > 60) {
70
+ const hours = Math.floor(duration / 60);
71
+ const mins = duration % 60;
72
+ return "".concat(hours, "h ").concat(mins > 0 ? "".concat(mins, "m") : '');
73
+ }
74
+ return "".concat(duration, "m");
75
+ };
68
76
  const BmHorizontalCard = _ref4 => {
69
77
  let {
70
78
  onView,
@@ -76,7 +84,7 @@ const BmHorizontalCard = _ref4 => {
76
84
  color,
77
85
  isActive,
78
86
  location,
79
- paymentSettings,
87
+ paymentRequired,
80
88
  selectedResources,
81
89
  address,
82
90
  duration,
@@ -91,13 +99,13 @@ const BmHorizontalCard = _ref4 => {
91
99
  color: color
92
100
  }), /*#__PURE__*/_react.default.createElement(InfoContainer, null, /*#__PURE__*/_react.default.createElement(TitleRow, null, /*#__PURE__*/_react.default.createElement(Name, null, name), !isActive && /*#__PURE__*/_react.default.createElement(Badge, {
93
101
  variant: "outline"
94
- }, "Inactive"), (paymentSettings === null || paymentSettings === void 0 ? void 0 : paymentSettings.requirePayment) && /*#__PURE__*/_react.default.createElement(Badge, null, /*#__PURE__*/_react.default.createElement(_AttachMoney.default, {
102
+ }, "Inactive"), paymentRequired && /*#__PURE__*/_react.default.createElement(Badge, null, /*#__PURE__*/_react.default.createElement(_AttachMoney.default, {
95
103
  fontSize: "small"
96
- }), "Payment Required")), /*#__PURE__*/_react.default.createElement(Description, null, description), /*#__PURE__*/_react.default.createElement(MetaRow, null, /*#__PURE__*/_react.default.createElement(MetaItem, null, /*#__PURE__*/_react.default.createElement(_AccessTime.default, {
104
+ }), "Payment Required")), /*#__PURE__*/_react.default.createElement(Description, null, description), /*#__PURE__*/_react.default.createElement(MetaRow, null, duration && /*#__PURE__*/_react.default.createElement(MetaItem, null, /*#__PURE__*/_react.default.createElement(_AccessTime.default, {
97
105
  fontSize: "small"
98
- }), /*#__PURE__*/_react.default.createElement("span", null, duration, " mins")), /*#__PURE__*/_react.default.createElement(MetaItem, null, /*#__PURE__*/_react.default.createElement(_AttachMoney.default, {
106
+ }), /*#__PURE__*/_react.default.createElement("span", null, formatDuration(duration))), /*#__PURE__*/_react.default.createElement(MetaItem, null, /*#__PURE__*/_react.default.createElement(_AttachMoney.default, {
99
107
  fontSize: "small"
100
- }), /*#__PURE__*/_react.default.createElement("span", null, price === 0 ? 'Free' : "$".concat(price))), /*#__PURE__*/_react.default.createElement(MetaItem, null, /*#__PURE__*/_react.default.createElement(_LocationOnOutlined.default, {
108
+ }), /*#__PURE__*/_react.default.createElement("span", null, price === 0 ? 'Free' : "".concat(price))), /*#__PURE__*/_react.default.createElement(MetaItem, null, /*#__PURE__*/_react.default.createElement(_LocationOnOutlined.default, {
101
109
  fontSize: "small"
102
110
  }), /*#__PURE__*/_react.default.createElement("span", null, location, (0, _lodash.lowerCase)(location) === 'physical' && address ? " (".concat(address.split(',')[0], "...)") : '')), guest_limit && /*#__PURE__*/_react.default.createElement(MetaItem, null, /*#__PURE__*/_react.default.createElement(_Groups2Outlined.default, {
103
111
  fontSize: "small"
package/dist/components/HorizontalCard/HorizontalCard.stories.js CHANGED
@@ -28,9 +28,7 @@ const Example = () => /*#__PURE__*/_react.default.createElement(_HorizontalCard.
28
28
  color: "#10b981",
29
29
  isActive: true,
30
30
  location: "physical",
31
- paymentSettings: {
32
- requirePayment: true
33
- },
31
+ paymentRequired: "true",
34
32
  selectedResources: sampleResources,
35
33
  address: "456 Innovation Avenue, Tech City",
36
34
  duration: 60,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "beem-component",
3
- "version": "2.1.17",
3
+ "version": "2.1.18",
4
4
  "private": false,
5
5
  "main": "dist/components/index.js",
6
6
  "scripts": {
package/src/App.js CHANGED
@@ -6,7 +6,7 @@ import React, { useState } from 'react';
6
6
  // import LocalOfferOutlinedIcon from '@mui/icons-material/LocalOfferOutlined';
7
7
  import CalendarTodayIcon from '@mui/icons-material/CalendarToday';
8
8
  import AccessTimeIcon from '@mui/icons-material/AccessTime';
9
- import PersonIcon from '@mui/icons-material/Person';
9
+ // import PersonIcon from '@mui/icons-material/Person';
10
10
  import CalendarTodayOutlinedIcon from '@mui/icons-material/CalendarTodayOutlined';
11
11
 
12
12
  import GroupIcon from '@mui/icons-material/Group';
@@ -966,56 +966,56 @@ const Chat = () => {
966
966
  label: '10:00 AM - 10:30 AM',
967
967
  value: { startDate: '10:00 AM', endDate: '10:30 AM' },
968
968
  },
969
- {
970
- id: 'slot-2',
971
- label: '10:30 AM - 11:10 AM',
972
- value: { startDate: '10:30 AM', endDate: '11:10 AM' },
973
- },
974
- {
975
- id: 'slot-3',
976
- label: '11:10 AM - 11:50 AM',
977
- value: { startDate: '11:10 AM', endDate: '11:50 AM' },
978
- },
979
- {
980
- id: 'slot-4',
981
- label: '11:50 AM - 12:30 PM',
982
- value: { startDate: '11:50 AM', endDate: '12:30 PM' },
983
- },
984
- {
985
- id: 'slot-5',
986
- label: '12:30 PM - 1:10 PM',
987
- value: { startDate: '12:30 PM', endDate: '1:10 PM' },
988
- },
989
- {
990
- id: 'slot-6',
991
- label: '1:10 PM - 1:50 PM',
992
- value: { startDate: '1:10 PM', endDate: '1:50 PM' },
993
- },
994
- {
995
- id: 'slot-7',
996
- label: '1:50 PM - 2:30 PM',
997
- value: { startDate: '1:50 PM', endDate: '2:30 PM' },
998
- },
999
- {
1000
- id: 'slot-8',
1001
- label: '2:30 PM - 3:10 PM',
1002
- value: { startDate: '2:30 PM', endDate: '3:10 PM' },
1003
- },
1004
- {
1005
- id: 'slot-9',
1006
- label: '3:10 PM - 3:50 PM',
1007
- value: { startDate: '3:10 PM', endDate: '3:50 PM' },
1008
- },
1009
- {
1010
- id: 'slot-10',
1011
- label: '3:50 PM - 4:30 PM',
1012
- value: { startDate: '3:50 PM', endDate: '4:30 PM' },
1013
- },
1014
- {
1015
- id: 'slot-11',
1016
- label: '4:30 PM - 5:10 PM',
1017
- value: { startDate: '4:30 PM', endDate: '5:10 PM' },
1018
- },
969
+ // {
970
+ // id: 'slot-2',
971
+ // label: '10:30 AM - 11:10 AM',
972
+ // value: { startDate: '10:30 AM', endDate: '11:10 AM' },
973
+ // },
974
+ // {
975
+ // id: 'slot-3',
976
+ // label: '11:10 AM - 11:50 AM',
977
+ // value: { startDate: '11:10 AM', endDate: '11:50 AM' },
978
+ // },
979
+ // {
980
+ // id: 'slot-4',
981
+ // label: '11:50 AM - 12:30 PM',
982
+ // value: { startDate: '11:50 AM', endDate: '12:30 PM' },
983
+ // },
984
+ // {
985
+ // id: 'slot-5',
986
+ // label: '12:30 PM - 1:10 PM',
987
+ // value: { startDate: '12:30 PM', endDate: '1:10 PM' },
988
+ // },
989
+ // {
990
+ // id: 'slot-6',
991
+ // label: '1:10 PM - 1:50 PM',
992
+ // value: { startDate: '1:10 PM', endDate: '1:50 PM' },
993
+ // },
994
+ // {
995
+ // id: 'slot-7',
996
+ // label: '1:50 PM - 2:30 PM',
997
+ // value: { startDate: '1:50 PM', endDate: '2:30 PM' },
998
+ // },
999
+ // {
1000
+ // id: 'slot-8',
1001
+ // label: '2:30 PM - 3:10 PM',
1002
+ // value: { startDate: '2:30 PM', endDate: '3:10 PM' },
1003
+ // },
1004
+ // {
1005
+ // id: 'slot-9',
1006
+ // label: '3:10 PM - 3:50 PM',
1007
+ // value: { startDate: '3:10 PM', endDate: '3:50 PM' },
1008
+ // },
1009
+ // {
1010
+ // id: 'slot-10',
1011
+ // label: '3:50 PM - 4:30 PM',
1012
+ // value: { startDate: '3:50 PM', endDate: '4:30 PM' },
1013
+ // },
1014
+ // {
1015
+ // id: 'slot-11',
1016
+ // label: '4:30 PM - 5:10 PM',
1017
+ // value: { startDate: '4:30 PM', endDate: '5:10 PM' },
1018
+ // },
1019
1019
  {
1020
1020
  id: 'slot-12',
1021
1021
  label: '5:10 PM - 5:50 PM',
@@ -1031,7 +1031,7 @@ const Chat = () => {
1031
1031
  color: '#3b82f6', // blue
1032
1032
  isActive: true,
1033
1033
  location: 'Virtual',
1034
- paymentSettings: { requirePayment: false },
1034
+ paymentRequired: 'true',
1035
1035
  selectedResources: [],
1036
1036
  address: '',
1037
1037
  duration: '60', // in minutes
@@ -1045,10 +1045,10 @@ const Chat = () => {
1045
1045
  color: '#10b981', // green
1046
1046
  isActive: true,
1047
1047
  location: 'Physical',
1048
- paymentSettings: { requirePayment: true },
1048
+ paymentRequired: 'true',
1049
1049
  selectedResources: [{ id: 1 }],
1050
1050
  address: '456 Innovation Avenue, Tech City',
1051
- duration: '90', // in minutes
1051
+ duration: '187', // in minutes
1052
1052
  guest_limit: '5', // max number of guests allowed
1053
1053
  },
1054
1054
  {
@@ -1059,7 +1059,7 @@ const Chat = () => {
1059
1059
  color: '#f59e0b', // amber
1060
1060
  isActive: false,
1061
1061
  location: 'Virtual',
1062
- paymentSettings: { requirePayment: true },
1062
+ paymentRequired: 'true',
1063
1063
  selectedResources: [{ id: 1 }, { id: 2 }],
1064
1064
  address: '',
1065
1065
  duration: '30', // in minutes
@@ -1113,7 +1113,7 @@ const Chat = () => {
1113
1113
  color={type.color}
1114
1114
  isActive={type.isActive}
1115
1115
  location={type.location}
1116
- paymentSettings={type.paymentSettings}
1116
+ paymentRequired={type.paymentRequired}
1117
1117
  selectedResources={type.selectedResources}
1118
1118
  address={type.address}
1119
1119
  duration={type.duration}
@@ -1285,7 +1285,7 @@ const Chat = () => {
1285
1285
  />
1286
1286
  </BmInfoPanel.Section>
1287
1287
  </BmInfoPanel> */}
1288
- <BmInfoPanel.Section
1288
+ {/* <BmInfoPanel.Section
1289
1289
  title="Personal Information"
1290
1290
  icon={PersonIcon}
1291
1291
  showDivider
@@ -1297,7 +1297,7 @@ const Chat = () => {
1297
1297
  <BmInfoPanel.Row label="Name" value={formData.name} />
1298
1298
  <BmInfoPanel.Row label="Phone" value={formData.phone} />
1299
1299
  <BmInfoPanel.Row label="Email" value={formData.email} />
1300
- </BmInfoPanel.Section>
1300
+ </BmInfoPanel.Section> */}
1301
1301
  </BmCardv2.Content>
1302
1302
  <BmCardv2.Footer>
1303
1303
  <BmButton
package/src/lib/components/Card_v2/Card.js CHANGED
@@ -54,7 +54,7 @@ const Description = styled.p`
54
54
  `;
55
55
 
56
56
  const Content = styled.div`
57
- min-height: 180px;
57
+ min-height: 200px;
58
58
  padding: 0 1.5rem;
59
59
  max-height: calc(100vh - 28.5714rem);
60
60
  overflow-y: auto;
package/src/lib/components/HorizontalCard/HorizontalCard.js CHANGED
@@ -149,7 +149,14 @@ const IconButton = styled.button`
149
149
  padding: 2px;
150
150
  }
151
151
  `;
152
-
152
+ const formatDuration = (duration) => {
153
+ if (duration > 60) {
154
+ const hours = Math.floor(duration / 60);
155
+ const mins = duration % 60;
156
+ return `${hours}h ${mins > 0 ? `${mins}m` : ''}`;
157
+ }
158
+ return `${duration}m`;
159
+ };
153
160
  const BmHorizontalCard = ({
154
161
  onView,
155
162
  onDelete,
@@ -160,7 +167,7 @@ const BmHorizontalCard = ({
160
167
  color,
161
168
  isActive,
162
169
  location,
163
- paymentSettings,
170
+ paymentRequired,
164
171
  selectedResources,
165
172
  address,
166
173
  duration,
@@ -179,7 +186,7 @@ const BmHorizontalCard = ({
179
186
 
180
187
  {!isActive && <Badge variant="outline">Inactive</Badge>}
181
188
 
182
- {paymentSettings?.requirePayment && (
189
+ {paymentRequired && (
183
190
  <Badge>
184
191
  <AttachMoneyIcon fontSize="small" />
185
192
  Payment Required
@@ -190,13 +197,15 @@ const BmHorizontalCard = ({
190
197
  <Description>{description}</Description>
191
198
 
192
199
  <MetaRow>
193
- <MetaItem>
194
- <AccessTimeIcon fontSize="small" />
195
- <span>{duration} mins</span>
196
- </MetaItem>
200
+ {duration && (
201
+ <MetaItem>
202
+ <AccessTimeIcon fontSize="small" />
203
+ <span>{formatDuration(duration)}</span>
204
+ </MetaItem>
205
+ )}
197
206
  <MetaItem>
198
207
  <AttachMoneyIcon fontSize="small" />
199
- <span>{price === 0 ? 'Free' : `$${price}`}</span>
208
+ <span>{price === 0 ? 'Free' : `${price}`}</span>
200
209
  </MetaItem>
201
210
  <MetaItem>
202
211
  <LocationOnOutlinedIcon fontSize="small" />
package/src/lib/components/HorizontalCard/HorizontalCard.stories.jsx CHANGED
@@ -21,7 +21,7 @@ export const Example = () => (
21
21
  color="#10b981"
22
22
  isActive
23
23
  location="physical"
24
- paymentSettings={{ requirePayment: true }}
24
+ paymentRequired="true"
25
25
  selectedResources={sampleResources}
26
26
  address="456 Innovation Avenue, Tech City"
27
27
  duration={60}