feat: add template popup on sponsor tab

src/actions/sponsor-pages-actions.js

@@ -23,12 +23,17 @@ import {
 import T from "i18n-react/dist/i18n-react";
 import { getAccessTokenSafely } from "../utils/methods";
 import { snackbarErrorHandler, snackbarSuccessHandler } from "./base-actions";
-import { DEFAULT_CURRENT_PAGE, DEFAULT_ORDER_DIR, DEFAULT_PER_PAGE } from "../utils/constants";
+import {
+  DEFAULT_CURRENT_PAGE,
+  DEFAULT_ORDER_DIR,
+  DEFAULT_PER_PAGE
+} from "../utils/constants";
 
 export const GLOBAL_PAGE_CLONED = "GLOBAL_PAGE_CLONED";
 
 export const REQUEST_SPONSOR_MANAGED_PAGES = "REQUEST_SPONSOR_MANAGED_PAGES";
 export const RECEIVE_SPONSOR_MANAGED_PAGES = "RECEIVE_SPONSOR_MANAGED_PAGES";
+export const SPONSOR_MANAGED_PAGE_ADDED = "SPONSOR_MANAGED_PAGE_ADDED";
 
 export const REQUEST_SPONSOR_CUSTOMIZED_PAGES =
   "REQUEST_SPONSOR_CUSTOMIZED_PAGES";
@@ -135,6 +140,49 @@ export const getSponsorManagedPages =
     });
   };
 
+export const saveSponsorManagedPage =
+  (entity) => async (dispatch, getState) => {
+    const { currentSummitState, currentSponsorState } = getState();
+    const { currentSummit } = currentSummitState;
+    const {
+      entity: { id: sponsorId }
+    } = currentSponsorState;
+    const accessToken = await getAccessTokenSafely();
+
+    dispatch(startLoading());
+
+    const normalizedEntity = normalizeSponsorManagedPage(entity);
+
+    const params = {
+      access_token: accessToken,
+      fields: "id,code,name,kind,modules_count,allowed_add_ons"
+    };
+
+    return postRequest(
+      null,
+      createAction(SPONSOR_MANAGED_PAGE_ADDED),
+      `${window.SPONSOR_PAGES_API_URL}/api/v1/summits/${currentSummit.id}/sponsors/${sponsorId}/managed-pages`,
+      normalizedEntity,
+      snackbarErrorHandler
+    )(params)(dispatch).finally(() => {
+      dispatch(stopLoading());
+    });
+  };
+
+const normalizeSponsorManagedPage = (entity) => {
+  const normalizedEntity = {
+    show_page_ids: entity.pages,
+    allowed_add_ons: entity.add_ons.map((a) => a.id),
+    apply_to_all_add_ons: false
+  };
+
+  if (entity.add_ons.includes("all")) {
+    normalizedEntity.apply_to_all_add_ons = true;
+    normalizedEntity.allowed_add_ons = [];
+  }
+
+  return normalizedEntity;
+};
 /* ************************************************************************ */
 /*         CUSTOMIZED PAGES       */
 /* ************************************************************************ */

src/components/mui/formik-inputs/mui-formik-select-group.js

@@ -44,6 +44,7 @@ const MuiFormikSelectGroup = ({
   selectAllLabel = "Select All",
   getOptionLabel = (item) => item.name,
   getOptionValue = (item) => item.id,
+  noOptionsLabel = "No items",
   getGroupId = null,
   getGroupLabel = null,
   disabled = false
@@ -213,6 +214,79 @@ const MuiFormikSelectGroup = ({
       .flat()
       .filter(Boolean);
 
+  const renderMenuContent = () => {
+    if (loading) {
+      return (
+        <MenuItem disabled>
+          <CircularProgress size={20} />
+        </MenuItem>
+      );
+    }
+
+    if (options.length === 0) {
+      return (
+        <MenuItem disabled>
+          <ListItemText
+            primary={noOptionsLabel}
+            slotProps={{
+              primary: {
+                sx: {
+                  fontSize: "16px",
+                  color: "#00000061"
+                }
+              }
+            }}
+          />
+        </MenuItem>
+      );
+    }
+
+    return (
+      <>
+        {showSelectAll && (
+          <>
+            <MenuItem
+              value="selectAll"
+              sx={{
+                backgroundColor: "#fafafa",
+                "&:hover": {
+                  backgroundColor: "#f0f0f0"
+                }
+              }}
+              onClick={() => {
+                // custom event value to select all
+                handleChange({ target: { value: ["selectAll"] } });
+              }}
+            >
+              <Checkbox
+                checked={isAllSelected}
+                indeterminate={selectedValues.length > 0 && !isAllSelected}
+                sx={{
+                  p: 1,
+                  "& svg": {
+                    fontSize: 24
+                  }
+                }}
+              />
+              <ListItemText
+                primary={selectAllLabel}
+                slotProps={{
+                  primary: {
+                    sx: {
+                      fontSize: "16px"
+                    }
+                  }
+                }}
+              />
+            </MenuItem>
+            <Divider />
+          </>
+        )}
+        {renderGroupedOptions()}
+      </>
+    );
+  };
+
   const IconWithLoading = useMemo(() => getCustomIcon(loading), [loading]);
 
   return (
@@ -243,54 +317,7 @@ const MuiFormikSelectGroup = ({
         error={Boolean(error)}
         IconComponent={IconWithLoading}
       >
-        {loading ? (
-          <MenuItem disabled>
-            <CircularProgress size={20} />
-          </MenuItem>
-        ) : (
-          <>
-            {showSelectAll && options.length > 0 && (
-              <>
-                <MenuItem
-                  value="selectAll"
-                  sx={{
-                    backgroundColor: "#fafafa",
-                    "&:hover": {
-                      backgroundColor: "#f0f0f0"
-                    }
-                  }}
-                  onClick={() => {
-                    // custom event value to select all
-                    handleChange({ target: { value: ["selectAll"] } });
-                  }}
-                >
-                  <Checkbox
-                    checked={isAllSelected}
-                    indeterminate={selectedValues.length > 0 && !isAllSelected}
-                    sx={{
-                      p: 1,
-                      "& svg": {
-                        fontSize: 24
-                      }
-                    }}
-                  />
-                  <ListItemText
-                    primary={selectAllLabel}
-                    slotProps={{
-                      primary: {
-                        sx: {
-                          fontSize: "16px"
-                        }
-                      }
-                    }}
-                  />
-                </MenuItem>
-                <Divider />
-              </>
-            )}
-            {renderGroupedOptions()}
-          </>
-        )}
+        {renderMenuContent()}
       </Select>
       {error && (
         <div
@@ -318,6 +345,7 @@ MuiFormikSelectGroup.propTypes = {
   getOptionValue: PropTypes.func,
   getGroupId: PropTypes.func,
   getGroupLabel: PropTypes.func,
+  noOptionsLabel: PropTypes.string,
   disabled: PropTypes.bool
 };
 

src/i18n/en.json

@@ -3,7 +3,7 @@
     "user_not_authz": "Hold on. Your user is not authorized!.",
     "user_not_set": "Hold on. Can not get any valid user.",
     "session_expired": "Hold on. Your session expired!.",
-    "empty_list": "there not are any item that match your criteria.",
+    "empty_list": "There are no {item} that match your criteria.",
     "server_error": "There was a problem with our server, please contact admin.",
     "empty_list_schedule_events": "Please select a Day and a Location ...",
     "not_allowed": "You are not allowed here, please login with another user to access this page.",
@@ -75,6 +75,9 @@
     "error": "Error!",
     "unarchive": "Unarchive",
     "archive": "Archive",
+    "sort_by": "Sort By",
+    "sort_asc_label": "A-Z",
+    "sort_desc_label": "Z-A",
     "placeholders": {
       "search_speakers": "Search Speakers by Name, Email, Speaker Id or Member Id",
       "select_acceptance_criteria": "Select acceptance criteria",
@@ -95,7 +98,8 @@
     "date": "Wrong date format.",
     "after": "'{field1}' must be after '{field2}'.",
     "boolean": "Must be a boolean.",
-    "mib_aligned": "Must be a MiB aligned value"
+    "mib_aligned": "Must be a MiB aligned value",
+    "add_on_required": "Select at least one add-on"
   },
   "landing": {
     "os_summit_admin": "Show Admin",
@@ -2476,7 +2480,12 @@
       "upload_mod": "Upload Mod",
       "download_mod": "Download Mod",
       "archive": "Archive",
-      "unarchive": "Unarchive"
+      "unarchive": "Unarchive",
+      "items_selected": "items selected",
+      "no_add_ons": "No Add-ons Available",
+      "no_pages": "There are no pages that match the criteria",
+      "add_page_using_template": "Add Page Template",
+      "add_selected_page_template": "Add Selected Page Template"
     },
     "cart_tab": {
       "new_form": "New Form",

src/pages/sponsors-global/form-templates/add-form-template-item-popup.js

@@ -206,11 +206,18 @@ const AddFormTemplateItemDialog = ({
                   //   onClick: () => handleSort("date", "+")
                   // },
                   // { label: "Newest", onClick: () => handleSort("date", "+") },
-                  { label: "A-Z", onClick: () => handleSort("name", 1) },
-                  { label: "Z-A", onClick: () => handleSort("name", 0) }
+                  {
+                    label: T.translate("general.sort_asc_label"),
+                    onClick: () => handleSort("name", 1)
+                  },
+                  {
+                    label: T.translate("general.sort_desc_label"),
+                    onClick: () => handleSort("name", 0)
+                  }
                 ]}
               >
-                <SwapVertIcon fontSize="large" sx={{ mr: 1 }} /> sort by
+                <SwapVertIcon fontSize="large" sx={{ mr: 1 }} />{" "}
+                {T.translate("general.sort_by")}
               </MenuButton>
             </Grid2>
             <Grid2 size={8}>

src/pages/sponsors-global/form-templates/form-template-from-duplicate-popup.js

@@ -119,11 +119,18 @@ const FormTemplateFromDuplicateDialog = ({
                 buttonSx={{ color: "#000" }}
                 menuItems={[
                   // { label: "Newest", onClick: () => handleSort("+date") },
-                  { label: "A-Z", onClick: () => handleSort("name", 1) },
-                  { label: "Z-A", onClick: () => handleSort("name", 0) }
+                  {
+                    label: T.translate("general.sort_asc_label"),
+                    onClick: () => handleSort("name", 1)
+                  },
+                  {
+                    label: T.translate("general.sort_desc_label"),
+                    onClick: () => handleSort("name", 0)
+                  }
                 ]}
               >
-                <SwapVertIcon fontSize="large" sx={{ mr: 1 }} /> sort by
+                <SwapVertIcon fontSize="large" sx={{ mr: 1 }} />{" "}
+                {T.translate("general.sort_by")}
               </MenuButton>
             </Grid2>
             <Grid2 size={8}>

src/pages/sponsors/sponsor-forms-tab/components/add-sponsor-form-template-popup/index.js

@@ -227,11 +227,18 @@ const AddSponsorFormTemplatePopup = ({
                     buttonId="sort-button"
                     menuId="sort-menu"
                     menuItems={[
-                      { label: "A-Z", onClick: () => handleSort("name", 1) },
-                      { label: "Z-A", onClick: () => handleSort("name", 0) }
+                      {
+                        label: T.translate("general.sort_asc_label"),
+                        onClick: () => handleSort("name", 1)
+                      },
+                      {
+                        label: T.translate("general.sort_desc_label"),
+                        onClick: () => handleSort("name", 0)
+                      }
                     ]}
                   >
-                    <SwapVertIcon fontSize="large" sx={{ mr: 1 }} /> sort by
+                    <SwapVertIcon fontSize="large" sx={{ mr: 1 }} />{" "}
+                    {T.translate("general.sort_by")}
                   </MenuButton>
                 </Grid2>
                 <Grid2 size={8}>

src/pages/sponsors/sponsor-forms-tab/components/manage-items/sponsor-form-item-from-inventory.js

@@ -220,7 +220,8 @@ const SponsorFormItemFromInventoryPopup = ({
                   }
                 ]}
               >
-                <SwapVertIcon fontSize="large" sx={{ mr: 1 }} /> sort by
+                <SwapVertIcon fontSize="large" sx={{ mr: 1 }} />{" "}
+                {T.translate("general.sort_by")}
               </MenuButton>
             </Grid2>
             <Grid2 size={9}>