Andy/store item page

.vscode/settings.json

@@ -16,4 +16,4 @@
     "*.env.development": "env",
     "*.env.production": "env"
   }
-}
+}

src/components/home/Hero/index.tsx

@@ -74,7 +74,7 @@ const Hero = ({ firstName, points, checkin }: HeroProps) => {
               </button>
             </div>
           </form>
-          <Link href={config.storeRoute} className={styles.link}>
+          <Link href={config.store.homeRoute} className={styles.link}>
             <ShopIcon />
             <Typography variant="h4/regular" className={styles.subheading}>
               Spend points on merch

src/components/layout/Navbar/index.tsx

@@ -122,7 +122,7 @@ const Navbar = ({ accessType }: NavbarProps) => {
           <ProfileIcon className={styles.iconLink} />
           Profile
         </Link>
-        <Link className={styles.mobileNavItem} href={config.storeRoute}>
+        <Link className={styles.mobileNavItem} href={config.store.homeRoute}>
           <ShopIcon className={styles.iconLink} />
           Store
         </Link>

src/components/store/CartOptionsGroup/index.tsx

@@ -0,0 +1,100 @@
+import { Dropdown, Typography } from '@/components/common';
+import { useId } from 'react';
+import styles from './style.module.scss';
+
+interface CartOptionGroupProps {
+  currOption: string | undefined;
+  inStock: boolean;
+  inCart: boolean;
+  lifetimeRemaining: number;
+  monthlyRemaining: number;
+  amountToBuy: number;
+  optionsKey: string;
+  onCartChange: (inCart: boolean) => void;
+  onAmountChange: (amountToBuy: number) => void;
+}
+
+const CartOptionsGroup = ({
+  currOption,
+  inStock,
+  inCart,
+  onCartChange,
+  lifetimeRemaining,
+  monthlyRemaining,
+  amountToBuy,
+  optionsKey,
+  onAmountChange,
+}: CartOptionGroupProps) => {
+  const myID = useId();
+
+  // 20 is a number decided upon to prevent large maximum purchase limits from crashing the webpage
+  const maxCanBuy = Math.min(20, Math.min(lifetimeRemaining, monthlyRemaining));
+
+  const isPurchasable = inStock && maxCanBuy > 0;
+  const noOptionSelected = currOption === undefined && optionsKey != null;
+
+  let buyButtonText = 'Add to Cart';
+
+  if (maxCanBuy === 0) {
+    buyButtonText = 'Limit Reached';
+  } else if (currOption === undefined && optionsKey !== undefined) {
+    buyButtonText = `Select a ${optionsKey}`;
+  } else if (inStock) {
+    buyButtonText = 'Add to Cart';
+  } else {
+    buyButtonText = 'Out of Stock';
+  }
+
+  // Fills values of the Dropdown to be increasing sequential numbers
+  const optionArr: Array<{ value: string; label: string }> = Array(maxCanBuy)
+    .fill({ value: `${1}`, label: `${1}` })
+    .map((_, index) => {
+      return { value: `${index + 1}`, label: `${index + 1}` };
+    });
+
+  return (
+    <div className={styles.addCartGroup}>
+      <p>{`In cart: ${inCart}`}</p>
+
+      {maxCanBuy > 0 ? (
+        <Typography variant="h5/regular">You can buy up to {maxCanBuy} of this item.</Typography>
+      ) : (
+        <Typography variant="h5/regular">You can&apos;t buy any more of this item!.</Typography>
+      )}
+      {noOptionSelected ? (
+        <Typography variant="h5/regular" className={styles.error}>
+          {`Please select a ${optionsKey?.toLocaleLowerCase() ?? 'option'}`}.
+        </Typography>
+      ) : null}
+
+      {noOptionSelected ? null : (
+        <div className={styles.buttonRow}>
+          {!isPurchasable ? null : (
+            <div className={styles.quantityColumn}>
+              <Typography variant="h4/bold">Quantity</Typography>
+              <Dropdown
+                name={`options${currOption}_${optionsKey}${myID}`}
+                ariaLabel={`Dropdown to select the number of items to purchase for ${myID}`}
+                options={optionArr}
+                value={`${amountToBuy}`}
+                onChange={val => onAmountChange(Number(val))}
+              />
+            </div>
+          )}
+
+          <button
+            className={`${isPurchasable ? styles.buttonInStock : styles.buttonNoStock} ${
+              styles.button
+            }`}
+            type="button"
+            onClick={() => onCartChange(!inCart)}
+            disabled={!isPurchasable}
+          >
+            {buyButtonText}
+          </button>
+        </div>
+      )}
+    </div>
+  );
+};
+export default CartOptionsGroup;

src/components/store/CartOptionsGroup/style.module.scss

@@ -0,0 +1,60 @@
+@use 'src/styles/vars.scss' as vars;
+
+.addCartGroup {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+
+  .buttonRow {
+    align-items: flex-end;
+    display: flex;
+    flex-direction: row;
+    gap: 2rem;
+  }
+
+  .quantityColumn {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    @media (max-width: vars.$breakpoint-md) {
+      gap: 0.75rem;
+    }
+
+    div > select {
+      font-size: 1.25rem;
+      font-style: normal;
+      font-weight: 700;
+      line-height: 2.5rem;
+
+      text-align: center;
+    }
+  }
+
+  .error {
+    color: vars.$danger-1;
+  }
+
+  .valid {
+    color: vars.$success-1;
+  }
+
+  .button {
+    border-radius: 10px;
+    font-size: vars.$input-text-medium;
+    font-weight: bold;
+    margin: 0.2rem 0;
+    padding: 0.3rem 1rem;
+    word-break: break-word;
+  }
+
+  .buttonInStock {
+    background-color: var(--theme-primary-2);
+    color: vars.$dark-text-on-background-1;
+  }
+
+  .buttonNoStock {
+    background-color: var(--theme-background);
+    border: 1px solid var(--theme-accent-line-2);
+    color: vars.$disabled;
+  }
+}

src/components/store/CartOptionsGroup/style.module.scss.d.ts

@@ -0,0 +1,16 @@
+export type Styles = {
+  addCartGroup: string;
+  button: string;
+  buttonInStock: string;
+  buttonNoStock: string;
+  buttonRow: string;
+  error: string;
+  quantityColumn: string;
+  valid: string;
+};
+
+export type ClassNames = keyof Styles;
+
+declare const styles: Styles;
+
+export default styles;

src/components/store/CollectionSlider/index.tsx

@@ -22,7 +22,7 @@ const CollectionSlider = ({ title, description, items }: CollectionSliderProps)
             className={styles.card}
             image={getDefaultMerchItemPhoto(item)}
             title={item.itemName}
-            href={`${config.itemRoute}${item.uuid}`}
+            href={`${config.store.itemRoute}${item.uuid}`}
             cost={item.options[0]?.price ?? 0}
             key={item.uuid}
           />

src/components/store/ItemHeader/index.tsx

@@ -0,0 +1,25 @@
+import { Typography } from '@/components/common';
+import Diamonds from '@/components/store/Diamonds';
+import styles from './style.module.scss';
+
+interface ItemHeaderProps {
+  itemName: string;
+  cost: number | undefined;
+  discountPercentage: number;
+}
+
+const ItemHeader = ({ itemName, cost, discountPercentage }: ItemHeaderProps) => {
+  return (
+    <div className={styles.itemHeaderGroup}>
+      <Typography variant="h1/bold" style={{ whiteSpace: 'pre-wrap', wordBreak: 'break-word' }}>
+        {itemName}
+      </Typography>
+      {cost === undefined ? null : (
+        <div className={styles.price}>
+          <Diamonds count={cost} discount={cost - (cost * discountPercentage) / 100} />
+        </div>
+      )}
+    </div>
+  );
+};
+export default ItemHeader;

src/components/store/ItemHeader/style.module.scss

@@ -0,0 +1,24 @@
+@use 'src/styles/vars.scss' as vars;
+
+.price {
+  align-items: center;
+  align-self: stretch;
+  display: flex;
+  flex-direction: row;
+  gap: 0.5rem;
+}
+
+.itemHeaderGroup {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+  gap: 1rem;
+
+  .error {
+    color: vars.$danger-1;
+  }
+
+  .valid {
+    color: vars.$success-1;
+  }
+}

src/components/store/ItemHeader/style.module.scss.d.ts

@@ -0,0 +1,12 @@
+export type Styles = {
+  error: string;
+  itemHeaderGroup: string;
+  price: string;
+  valid: string;
+};
+
+export type ClassNames = keyof Styles;
+
+declare const styles: Styles;
+
+export default styles;

src/components/store/SizeSelector/index.tsx

@@ -0,0 +1,43 @@
+import { Typography } from '@/components/common';
+import styles from '@/components/store/SizeSelector/style.module.scss';
+import { MerchItemOptionMetadata } from '@/lib/types/apiRequests';
+import { PublicMerchItemOption } from '@/lib/types/apiResponses';
+import { toTitleCase } from '@/lib/utils';
+import { Fragment, useId } from 'react';
+
+interface SizeSelectorProps {
+  currOption: MerchItemOptionMetadata | undefined;
+  options: PublicMerchItemOption[];
+  onOptionChange: (currSize: PublicMerchItemOption) => void;
+}
+
+const SizeSelector = ({ currOption, options, onOptionChange }: SizeSelectorProps) => {
+  const myID = useId();
+  const myOptions = options.map(val => {
+    const tempId = val.metadata.value ? `${val.metadata.value}${myID}` : `${val.uuid}${myID}`;
+    return (
+      <Fragment key={tempId}>
+        <input
+          id={tempId}
+          name="state-d"
+          type="radio"
+          defaultChecked={currOption?.value === val.metadata?.value}
+          onClick={() => onOptionChange(val)}
+        />
+        <label htmlFor={tempId}>{val.metadata?.value}</label>
+      </Fragment>
+    );
+  });
+
+  return options.length > 1 && options ? (
+    <div className={styles.sizeSelector}>
+      {options[0]?.metadata.type === undefined ? (
+        <Typography variant="h4/bold">Options</Typography>
+      ) : (
+        <Typography variant="h4/bold">{toTitleCase(options[0]?.metadata.type)}</Typography>
+      )}
+      <form className={styles.switch}>{myOptions}</form>
+    </div>
+  ) : null;
+};
+export default SizeSelector;

src/components/store/SizeSelector/style.module.scss

@@ -0,0 +1,56 @@
+@use 'src/styles/vars.scss' as vars;
+$indicator-size: 30px;
+$component-roundness: 10px;
+
+.sizeSelector {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  overflow: auto;
+
+  .switch {
+    align-items: center;
+    border-color: #9f9f9f;
+    border-radius: $component-roundness;
+    display: flex;
+    flex-wrap: wrap;
+    float: left;
+    gap: 0.75rem;
+    position: relative;
+
+    label {
+      align-items: center;
+      background-color: var(--theme-surface-2);
+      border-radius: $component-roundness;
+      border-style: solid;
+      border-width: 1px;
+      color: var(--theme-text-on-background-1);
+      cursor: pointer;
+      display: flex;
+      flex-direction: row;
+      float: left;
+      height: $indicator-size;
+      justify-content: center;
+      min-width: #{$indicator-size * 2};
+      padding: 0 1rem;
+    }
+
+    input {
+      opacity: 0;
+      pointer-events: none;
+      position: absolute;
+    }
+
+    input:hover + label {
+      border-color: var(--theme-size-selector-border);
+    }
+
+    input:checked + label {
+      border-color: var(--theme-size-selector-border);
+      color: var(--theme-size-selector-border);
+    }
+  }
+}
+
+// INFO LINKS
+// https://markheath.net/post/customize-radio-button-css

src/components/store/SizeSelector/style.module.scss.d.ts

@@ -0,0 +1,10 @@
+export type Styles = {
+  sizeSelector: string;
+  switch: string;
+};
+
+export type ClassNames = keyof Styles;
+
+declare const styles: Styles;
+
+export default styles;