feat: sponsor cart view

.env.example

@@ -12,7 +12,7 @@ PRINT_APP_URL=https://badge-print-app.dev.fnopen.com
 PUB_API_BASE_URL=
 OS_BASE_URL=
 SCOPES_BASE_REALM=${API_BASE_URL}
-PURCHASES_API_SCOPES=purchases-show-medata/read purchases-show-medata/write show-form/read show-form/write
+PURCHASES_API_SCOPES=purchases-show-medata/read purchases-show-medata/write show-form/read show-form/write customized-form/write customized-form/read carts/read carts/write
 SPONSOR_USERS_API_SCOPES="show-medata/read show-medata/write access-requests/read access-requests/write sponsor-users/read sponsor-users/write groups/read groups/write"
 EMAIL_SCOPES="clients/read templates/read templates/write emails/read"
 FILE_UPLOAD_SCOPES="files/upload"

src/actions/sponsor-cart-actions.js

@@ -0,0 +1,116 @@
+/**
+ * Copyright 2018 OpenStack Foundation
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * */
+
+import {
+  authErrorHandler,
+  createAction,
+  getRequest,
+  deleteRequest,
+  startLoading,
+  stopLoading
+} from "openstack-uicore-foundation/lib/utils/actions";
+
+import T from "i18n-react";
+import { escapeFilterValue, getAccessTokenSafely } from "../utils/methods";
+import { snackbarErrorHandler, snackbarSuccessHandler } from "./base-actions";
+import { ERROR_CODE_404 } from "../utils/constants";
+
+export const REQUEST_SPONSOR_CART = "REQUEST_SPONSOR_CART";
+export const RECEIVE_SPONSOR_CART = "RECEIVE_SPONSOR_CART";
+export const SPONSOR_CART_FORM_DELETED = "SPONSOR_CART_FORM_DELETED";
+
+const customErrorHandler = (err, res) => (dispatch, state) => {
+  const code = err.status;
+  dispatch(stopLoading());
+  switch (code) {
+    case ERROR_CODE_404:
+      break;
+    default:
+      authErrorHandler(err, res)(dispatch, state);
+  }
+};
+
+export const getSponsorCart =
+  (term = "") =>
+  async (dispatch, getState) => {
+    const { currentSummitState, currentSponsorState } = getState();
+    const { currentSummit } = currentSummitState;
+    const {
+      entity: { id: sponsorId }
+    } = currentSponsorState;
+    const accessToken = await getAccessTokenSafely();
+    const summitTZ = currentSummit.time_zone.name;
+    const filter = [];
+
+    dispatch(startLoading());
+
+    if (term) {
+      const escapedTerm = escapeFilterValue(term);
+      filter.push(`name=@${escapedTerm},code=@${escapedTerm}`);
+    }
+
+    const params = {
+      access_token: accessToken
+    };
+
+    if (filter.length > 0) {
+      params["filter[]"] = filter;
+    }
+
+    return getRequest(
+      createAction(REQUEST_SPONSOR_CART),
+      createAction(RECEIVE_SPONSOR_CART),
+      `${window.PURCHASES_API_URL}/api/v1/summits/${currentSummit.id}/sponsors/${sponsorId}/carts/current`,
+      customErrorHandler,
+      { term, summitTZ }
+    )(params)(dispatch)
+      .catch((err) => {
+        console.error(err);
+      })
+      .finally(() => {
+        dispatch(stopLoading());
+      });
+  };
+
+
+export const deleteSponsorCartForm =
+  (formId) => async (dispatch, getState) => {
+    const { currentSummitState, currentSponsorState } = getState();
+    const { currentSummit } = currentSummitState;
+    const {
+      entity: { id: sponsorId }
+    } = currentSponsorState;
+    const accessToken = await getAccessTokenSafely();
+    const params = { access_token: accessToken };
+
+    dispatch(startLoading());
+
+    return deleteRequest(
+      null,
+      createAction(SPONSOR_CART_FORM_DELETED)({ formId }),
+      `${window.PURCHASES_API_URL}/api/v1/summits/${currentSummit.id}/sponsors/${sponsorId}/sponsor-forms/${formId}`,
+      null,
+      snackbarErrorHandler
+    )(params)(dispatch)
+      .then(() => {
+        dispatch(
+          snackbarSuccessHandler({
+            title: T.translate("general.success"),
+            html: T.translate("sponsor_forms.form_delete_success")
+          })
+        );
+      })
+      .finally(() => {
+        dispatch(stopLoading());
+      });
+  };

src/components/mui/table/extra-rows/NotesRow.jsx

@@ -0,0 +1,16 @@
+import TableCell from "@mui/material/TableCell";
+import TableRow from "@mui/material/TableRow";
+import * as React from "react";
+import { Typography } from "@mui/material";
+
+const NotesRow = ({ colCount, note }) => (
+    <TableRow>
+      <TableCell sx={{ fontWeight: 800 }} colSpan={colCount}>
+        <Typography variant="body2" sx={{ color: "text.secondary" }}>
+          {note}
+        </Typography>
+      </TableCell>
+    </TableRow>
+  );
+
+export default NotesRow;

src/components/mui/table/extra-rows/TotalRow.jsx

@@ -0,0 +1,32 @@
+import TableCell from "@mui/material/TableCell";
+import TableRow from "@mui/material/TableRow";
+import * as React from "react";
+import T from "i18n-react/dist/i18n-react";
+
+const TotalRow = ({ columns, targetCol, total, trailing = 0 }) => {
+  return (
+    <TableRow>
+      {columns.map((col, i) => {
+        if (i === 0)
+          return (
+            <TableCell key={col.columnKey} sx={{ fontWeight: 800, textTransform: "uppercase" }}>
+              {T.translate("mui_table.total")}
+            </TableCell>
+          );
+        if (col.columnKey === targetCol)
+          return (
+            <TableCell key={col.columnKey} sx={{ fontWeight: 800 }}>
+              {total}
+            </TableCell>
+          );
+        return <TableCell key={col.columnKey} />;
+      })}
+      {[...Array(trailing)].map((_, i) => (
+        // eslint-disable-next-line react/no-array-index-key
+        <TableCell key={`extra-row-total-${i}`} sx={{ width: 40 }} />
+      ))}
+    </TableRow>
+  );
+};
+
+export default TotalRow;

src/components/mui/table/extra-rows/index.js

@@ -0,0 +1,2 @@
+export { default as TotalRow } from "./TotalRow";
+export { default as NotesRow } from "./NotesRow";

src/components/mui/table/mui-table.js

@@ -3,9 +3,9 @@ import T from "i18n-react/dist/i18n-react";
 import { isBoolean } from "lodash";
 import {
   Box,
+  Button,
   IconButton,
   Paper,
-  Button,
   Table,
   TableBody,
   TableCell,
@@ -31,6 +31,7 @@ import styles from "./mui-table.module.less";
 const MuiTable = ({
   columns = [],
   data = [],
+  children,
   totalRows,
   perPage,
   currentPage,
@@ -253,6 +254,8 @@ const MuiTable = ({
                   )}
                 </TableRow>
               ))}
+              {/* Here we inject extra rows passed as children */}
+              {children}
               {data.length === 0 && (
                 <TableRow>
                   <TableCell colSpan={columns.length} align="center">
@@ -265,28 +268,30 @@ const MuiTable = ({
         </TableContainer>
 
         {/* PAGINATION */}
-        <TablePagination
-          component="div"
-          count={totalRows}
-          rowsPerPageOptions={customPerPageOptions}
-          rowsPerPage={perPage}
-          page={currentPage - 1}
-          onPageChange={handleChangePage}
-          onRowsPerPageChange={handleChangeRowsPerPage}
-          labelRowsPerPage={T.translate("mui_table.rows_per_page")}
-          sx={{
-            ".MuiTablePagination-toolbar": {
-              alignItems: "baseline",
-              marginTop: "1.6rem"
-            },
-            ".MuiTablePagination-spacer": {
-              display: "none"
-            },
-            ".MuiTablePagination-displayedRows": {
-              marginLeft: "auto"
-            }
-          }}
-        />
+        {perPage && currentPage && (
+          <TablePagination
+            component="div"
+            count={totalRows}
+            rowsPerPageOptions={customPerPageOptions}
+            rowsPerPage={perPage}
+            page={currentPage - 1}
+            onPageChange={handleChangePage}
+            onRowsPerPageChange={handleChangeRowsPerPage}
+            labelRowsPerPage={T.translate("mui_table.rows_per_page")}
+            sx={{
+              ".MuiTablePagination-toolbar": {
+                alignItems: "baseline",
+                marginTop: "1.6rem"
+              },
+              ".MuiTablePagination-spacer": {
+                display: "none"
+              },
+              ".MuiTablePagination-displayedRows": {
+                marginLeft: "auto"
+              }
+            }}
+          />
+        )}
       </Paper>
     </Box>
   );

src/i18n/en.json

@@ -2434,6 +2434,20 @@
         "unarchived": "Form successfully unarchived."
       }
     },
+    "cart_tab": {
+      "new_form": "New Form",
+      "forms": "forms",
+      "code": "Code",
+      "name": "Name",
+      "add_ons": "Add-ons",
+      "discount": "Discount",
+      "amount": "Amount",
+      "manage_items": "Manage Items",
+      "add_form": "Add Form",
+      "no_cart": "No cart found.",
+      "pay_cc": "pay with credit card or ach",
+      "pay_invoice": "pay with invoice"
+    },
     "placeholders": {
       "select_sponsorship": "Select a Sponsorship",
       "sponsorship_type": "Start typing to choose a Tier...",
@@ -3762,7 +3776,8 @@
     "no_items": "No items found.",
     "rows_per_page": "Rows per page",
     "sorted_desc": "sorted descending",
-    "sorted_asc": "sorted ascending"
+    "sorted_asc": "sorted ascending",
+    "total": "Total"
   },
   "event_rsvp_list": {
     "name": "Name",

src/pages/sponsors/edit-sponsor-page.js

@@ -42,6 +42,7 @@ import SponsorGeneralForm from "../../components/forms/sponsor-general-form/inde
 import SponsorUsersListPerSponsorPage from "./sponsor-users-list-per-sponsor";
 import SponsorFormsTab from "./sponsor-forms-tab";
 import SponsorBadgeScans from "./sponsor-badge-scans";
+import SponsorCartTab from "./sponsor-cart-tab";
 
 const CustomTabPanel = (props) => {
   const { children, value, index, ...other } = props;
@@ -127,7 +128,7 @@ const EditSponsorPage = (props) => {
 
   return (
     <Box>
-      <Container maxWidth="lg" sx={{position: "relative"}}>
+      <Container maxWidth="lg" sx={{ position: "relative" }}>
         <Typography fontSize="3.4rem" variant="h4">
           {entity.company?.name}
         </Typography>
@@ -185,6 +186,9 @@ const EditSponsorPage = (props) => {
         <CustomTabPanel value={selectedTab} index={4}>
           <SponsorFormsTab sponsor={entity} summitId={currentSummit.id} />
         </CustomTabPanel>
+        <CustomTabPanel value={selectedTab} index={5}>
+          <SponsorCartTab sponsor={entity} summitId={currentSummit.id} />
+        </CustomTabPanel>
         <CustomTabPanel value={selectedTab} index={7}>
           <SponsorBadgeScans sponsor={entity} />
         </CustomTabPanel>