Merge pull request #1186 from jboolean/custom-bag-front

Custom bag front

Author: jboolean

backend/src/business/merch/renderToteBag.ts

@@ -8,7 +8,7 @@ const FRONTEND_BASE_URL = process.env.FRONTEND_BASE_URL as string;
 
 // Install using `npx @puppeteer/browsers install chromium` locally
 const LOCAL_CHROMIUM_EXECUTABLE_PATH =
-  './chromium/mac_arm-1420837/chrome-mac/Chromium.app/Contents/MacOS/Chromium';
+  './chromium/mac_arm-1447349/chrome-mac/Chromium.app/Contents/MacOS/Chromium';
 
 // Move center to account for tote bag bottom
 const LAT_OFFSET = -0.0007;
@@ -17,9 +17,15 @@ const ZOOM = 17;
 export default async function renderToteBag({
   lat,
   lng,
+  style,
+  foregroundColor,
+  backgroundColor,
 }: {
   lat: number;
   lng: number;
+  style?: string;
+  foregroundColor?: string;
+  backgroundColor?: string;
 }): Promise<Buffer> {
   const browser = await puppeteer.launch({
     args: IS_LOCAL ? puppeteer.defaultArgs() : chromium.args,
@@ -33,14 +39,28 @@ export default async function renderToteBag({
   const page = await browser.newPage();
   await page.setViewport({ width: 17 * 150, height: 33 * 150 });
 
-  await page.goto(
-    `${FRONTEND_BASE_URL}/render-merch/tote-bag?noWelcome&noTipJar#${ZOOM}/${(
-      lat + LAT_OFFSET
-    ).toFixed(6)}/${lng.toFixed(6)}`,
-    {
-      waitUntil: 'networkidle2',
-    }
-  );
+  const urlParams = new URLSearchParams();
+  urlParams.append('noWelcome', 'true');
+  urlParams.append('noTipJar', 'true');
+  if (style) {
+    urlParams.append('style', style);
+  }
+  if (foregroundColor) {
+    urlParams.append('foregroundColor', foregroundColor);
+  }
+  if (backgroundColor) {
+    urlParams.append('backgroundColor', backgroundColor);
+  }
+
+  const hash = `${ZOOM}/${(lat + LAT_OFFSET).toFixed(6)}/${lng.toFixed(6)}`;
+
+  const url = new URL('/render-merch/tote-bag', FRONTEND_BASE_URL);
+  url.search = urlParams.toString();
+  url.hash = hash;
+
+  await page.goto(url.toString(), {
+    waitUntil: 'networkidle2',
+  });
 
   await page.waitForSelector('#render-content');
 

backend/src/cron/renderMerchPrintfiles.ts

@@ -31,14 +31,21 @@ export default async function renderMerch(): Promise<void> {
       continue;
     }
 
-    const { lat, lng } = customizationOptions;
+    const { lat, lng, style, foregroundColor, backgroundColor } =
+      customizationOptions;
 
     const variant = item.internalVariant;
 
     let buffer: Buffer;
     switch (variant) {
       case MerchInternalVariant.TOTE_BAG_SMALL:
-        buffer = await renderToteBag({ lat, lng });
+        buffer = await renderToteBag({
+          lat,
+          lng,
+          style,
+          foregroundColor,
+          backgroundColor,
+        });
         break;
       default:
         absurd(variant);

backend/src/entities/MerchCustomizationOptions.ts

@@ -1,9 +1,14 @@
 import MerchInternalVariant from '../enum/MerchInternalVariant';
 
+type Color = 'red' | 'green' | 'creme' | 'dark';
+
 interface ToteBagCustomizationOptions {
   variant: MerchInternalVariant.TOTE_BAG_SMALL;
   lat: number;
   lng: number;
+  style?: 'outline' | 'solid';
+  foregroundColor?: Color;
+  backgroundColor?: Color;
 }
 
 type MerchCustomizationOptions = ToteBagCustomizationOptions;

frontend/src/screens/App/screens/Merch/screens/Orders/components/CustomizeModal.less

@@ -1,3 +1,6 @@
+@import '../../../../../../../shared/styles/utils.less';
+@import '../../../../../../../shared/styles/colors.less';
+@import '../../../../../../../shared/styles/viewport.less';
 :local {
   .content {
     display: flex;
@@ -9,4 +12,46 @@
     flex-grow: 1;
     margin: 0 -1rem;
   }
+
+  .frontStylePresets {
+    flex-grow: 1;
+    overflow-y: auto;
+
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 1rem;
+
+    @media screen and (max-width: @modal-width-max) {
+      grid-template-columns: repeat(1, 1fr);
+    }
+
+    .frontStylePresetInput {
+      .visuallyhidden();
+
+      & + label {
+        position: relative;
+        border: 3px solid transparent;
+        & > img {
+          width: 100%;
+          height: 100%;
+          object-fit: cover;
+        }
+        border-radius: 3px;
+        cursor: pointer;
+      }
+
+      &:checked + label {
+        &::after {
+          content: '';
+          position: absolute;
+          top: 0;
+          left: 0;
+          right: 0;
+          bottom: 0;
+          box-shadow: inset 0 0 5px 1px fade(@font-color-dark, 40%);
+        }
+        border-color: @red;
+      }
+    }
+  }
 }