Production Release 2023-11-27

.eslintignore

@@ -1,2 +1,3 @@
 **/*.generated.tsx
 codegen.ts
+vite.config.mts

.github/workflows/maintain-prod-release-pr.yaml

@@ -26,7 +26,7 @@ jobs:
     name: Maintain Prod PR
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/github-script@d7906e4ad0b1822421a7e6a35d5ca353c962f410 # v6
+      - uses: actions/github-script@60a0d83039c74a4aee543508d2ffcb1c3799cdea # v7
         with:
           script: |
             const owner = context.repo.owner;

package.json

@@ -76,7 +76,7 @@
     "husky": "8.0.3",
     "prettier": "3.1.0",
     "typescript": "5.2.2",
-    "vite": "4.5.0",
+    "vite": "5.0.0",
     "vite-plugin-checker": "0.6.2",
     "vite-tsconfig-paths": "4.2.1",
     "vitest": "0.34.6"

src/components/Assets/AdvertiserAssets.tsx

@@ -10,42 +10,48 @@ import MiniSideBar from "components/Drawer/MiniSideBar";
 import { ImagePreview } from "components/Assets/ImagePreview";
 import { CampaignFormat } from "graphql/types";
 import moment from "moment/moment";
+import { RouteSelectionButton } from "components/Route/RouteSelectionButton";
+import Box from "@mui/material/Box";
 
 export function AdvertiserAssets() {
   const { advertiser } = useAdvertiser();
   const { data, loading, error } = useAdvertiserImagesQuery({
     variables: { id: advertiser.id },
+    initialFetchPolicy: "cache-and-network",
+    nextFetchPolicy: "cache-only",
   });
 
-  if (loading) {
-    return (
-      <MiniSideBar>
-        <LinearProgress sx={{ mt: 1, flexGrow: 1 }} />
-      </MiniSideBar>
-    );
-  }
-
   return (
     <MiniSideBar>
-      {error && (
-        <ErrorDetail
-          error={error}
-          additionalDetails="Unable to retrieve images"
+      <Box display="flex" flexDirection="column" flexGrow={1}>
+        <RouteSelectionButton
+          routes={[
+            { label: "Ads", value: "ads" },
+            { label: "Images", value: "ads/assets" },
+          ]}
         />
-      )}
-      {!loading && !error && (
-        <Grid container spacing={2}>
-          {[...(data?.advertiser?.images ?? [])]
-            .sort(
-              (a, b) => moment(b.createdAt).date() - moment(a.createdAt).date(),
-            )
-            .map((i, idx) => (
-              <Grid item xs="auto" key={idx}>
-                <GalleryItem image={i} />
-              </Grid>
-            ))}
-        </Grid>
-      )}
+        {loading && <LinearProgress sx={{ mt: 1, flexGrow: 1 }} />}
+        {error && (
+          <ErrorDetail
+            error={error}
+            additionalDetails="Unable to retrieve images"
+          />
+        )}
+        {!loading && !error && (
+          <Grid container spacing={2}>
+            {[...(data?.advertiser?.images ?? [])]
+              .sort(
+                (a, b) =>
+                  moment(b.createdAt).date() - moment(a.createdAt).date(),
+              )
+              .map((i, idx) => (
+                <Grid item xs="auto" key={idx}>
+                  <GalleryItem image={i} />
+                </Grid>
+              ))}
+          </Grid>
+        )}
+      </Box>
     </MiniSideBar>
   );
 }

src/components/Card/CardContainer.tsx

@@ -20,10 +20,10 @@ export function CardContainer(
           alignItems="center"
           mb={1}
         >
-          {props.header && props.useTypography && (
+          {props.header && props.useTypography !== false && (
             <Typography variant="h2">{props.header}</Typography>
           )}
-          {!props.useTypography && <>{props.header}</>}
+          {props.useTypography === false && <>{props.header}</>}
           {props.additionalAction && <Box>{props.additionalAction}</Box>}
         </Stack>
       )}

src/components/Creatives/CreativeList.tsx

@@ -13,6 +13,7 @@ import { Link as RouterLink } from "react-router-dom";
 import { DataGrid, GridColDef } from "@mui/x-data-grid";
 import { CreativeStatusSwitch } from "components/Creatives/CreativeStatusSwitch";
 import { CustomToolbar } from "components/Datagrid/CustomToolbar";
+import { RouteSelectionButton } from "components/Route/RouteSelectionButton";
 
 const ALLOWED_TYPES = ["notification_all_v1", "inline_content_all_v1"];
 export function CreativeList() {
@@ -87,11 +88,20 @@ export function CreativeList() {
         />
       )}
       <CardContainer
-        header="Ads"
+        header={
+          <RouteSelectionButton
+            routes={[
+              { label: "Ads", value: "ads" },
+              { label: "Images", value: "assets" },
+            ]}
+          />
+        }
+        useTypography={false}
         sx={{
           flexGrow: 1,
           overflowX: "auto",
           mr: 1,
+          mt: 0,
         }}
       >
         <Box>

src/components/Drawer/MiniSideBar.tsx

@@ -18,7 +18,6 @@ import CampaignOutlinedIcon from "@mui/icons-material/CampaignOutlined";
 import AccountBalanceOutlinedIcon from "@mui/icons-material/AccountBalanceOutlined";
 import AccountBoxOutlinedIcon from "@mui/icons-material/AccountBoxOutlined";
 import HeadsetMicOutlinedIcon from "@mui/icons-material/HeadsetMicOutlined";
-import InsertPhotoOutlinedIcon from "@mui/icons-material/InsertPhotoOutlined";
 import LightbulbOutlinedIcon from "@mui/icons-material/LightbulbOutlined";
 import PeopleOutlineOutlinedIcon from "@mui/icons-material/PeopleOutlineOutlined";
 import { useAdvertiser } from "auth/hooks/queries/useAdvertiser";
@@ -45,17 +44,6 @@ export default function MiniSideBar({ children }: PropsWithChildren) {
         />
       ),
     },
-    {
-      label: "Images",
-      href: "/user/main/assets",
-      icon: (
-        <InsertPhotoOutlinedIcon
-          fontSize="large"
-          sx={{ color: "text.secondary" }}
-        />
-      ),
-      disabled: !advertiser.selfServiceManageCampaign,
-    },
     {
       label: "Ads",
       href: "/user/main/ads",

src/components/Navigation/Navbar.tsx

@@ -20,7 +20,7 @@ export function Navbar() {
       component: <NewCampaignButton />,
     },
     {
-      route: "user/main/assets",
+      route: "user/main/ads/assets",
       component: <UploadImage />,
     },
     {

src/components/Route/ProtectedRoute.tsx

@@ -0,0 +1,35 @@
+import { ComponentType } from "react";
+import { IAdvertiser } from "auth/context/auth.interface";
+import { useAdvertiser } from "auth/hooks/queries/useAdvertiser";
+import { Redirect, Route } from "react-router-dom";
+
+interface ProtectedProps {
+  authedComponent?: ComponentType;
+  unauthedComponent?: ComponentType;
+  path?: string;
+  validateAdvertiserProperty?: (a: IAdvertiser) => boolean;
+}
+
+export function ProtectedRoute({
+  authedComponent,
+  unauthedComponent,
+  path,
+  validateAdvertiserProperty = () => true,
+}: ProtectedProps) {
+  const { advertiser } = useAdvertiser();
+
+  if (!advertiser.agreed && unauthedComponent === undefined) {
+    return <Redirect to="/user/main" />;
+  }
+
+  if (!validateAdvertiserProperty(advertiser)) {
+    return <Redirect to="/user/main" />;
+  }
+
+  return (
+    <Route
+      path={path}
+      component={advertiser.agreed ? authedComponent : unauthedComponent}
+    />
+  );
+}

src/components/Route/RouteSelectionButton.tsx

@@ -0,0 +1,39 @@
+import { BottomNavigation, BottomNavigationAction } from "@mui/material";
+import { Link as RouterLink, useHistory } from "react-router-dom";
+
+interface Params {
+  routes: { label: string; value: string }[];
+}
+
+export function RouteSelectionButton({ routes }: Params) {
+  const history = useHistory();
+  console.log(history.location.pathname);
+
+  return (
+    <BottomNavigation
+      showLabels
+      value={history.location.pathname}
+      sx={{
+        backgroundColor: "inherit",
+        height: "50px",
+        justifyContent: "left",
+      }}
+    >
+      {routes.map((r) => (
+        <BottomNavigationAction
+          key={`navigation_tab_${r.value}`}
+          label={r.label}
+          sx={{
+            textAlign: "left",
+            p: 0,
+            minWidth: "60px",
+            maxWidth: "60px",
+          }}
+          value={`/user/main/${r.value}`}
+          component={RouterLink}
+          to={`/user/main/${r.value}`}
+        />
+      ))}
+    </BottomNavigation>
+  );
+}

src/form/FormikHelpers.tsx

@@ -29,6 +29,7 @@ type FormikTextFieldProps = TextFieldProps & {
   type?: HTMLInputTypeAttribute;
   disabled?: boolean;
   useTopLabel?: boolean;
+  growInput?: boolean;
 };
 
 export const FormikTextField = (props: FormikTextFieldProps) => {
@@ -45,7 +46,7 @@ export const FormikTextField = (props: FormikTextFieldProps) => {
 
   const extraOmit = props.useTopLabel ? ["label"] : [];
   return (
-    <Box flexGrow={1}>
+    <Box flexGrow={props.growInput !== false ? 1 : 0}>
       {props.useTopLabel && (
         <FormLabel sx={{ color: "text.primary" }}> {props.label} </FormLabel>
       )}
@@ -144,9 +145,9 @@ export const FormikRadioControl = (props: FormikRadioControlProps) => {
         {props.label}
       </FormLabel>
       <FormikRadioGroup row name={props.name} onChange={props.onChange}>
-        {props.options.map((opt) => (
+        {props.options.map((opt, idx) => (
           <FormControlLabel
-            key={opt.value}
+            key={`${props.name}_radio_${idx}`}
             value={opt.value}
             label={opt.label}
             control={<Radio />}