Add cat toys books & size maternity

app/public/locales/en/translation.json

@@ -7,6 +7,8 @@
   "setLoopTheme": "Set Loop theme",
   "rules": "Rules",
   "addresses": "Addresses",
+  "toys": "Toys",
+  "books": "Books",
   "bag": "Bag",
   "bags": "Bags",
   "whereIsTheBag": "Where is the bag?",

app/src/components/AddressList/TinyBagSvg.tsx

@@ -91,5 +91,16 @@ export default function TinyBagSvg({ bag }: Props) {
     );
   }
 
+  if (bag.number.includes("📖")) {
+    return (
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -2 24 26">
+        <path
+          fill={bag.color}
+          d="M13 17.05q1.1-.525 2.213-.788T17.5 16q.9 0 1.763.15T21 16.6V6.7q-.825-.35-1.713-.525T17.5 6q-1.175 0-2.325.3T13 7.2zM12 20q-1.2-.95-2.6-1.475T6.5 18q-1.325 0-2.775.5T1 20.05V5.55Q2.1 4.8 3.588 4.4T6.5 4q1.45 0 2.838.375T12 5.5q1.275-.75 2.663-1.125T17.5 4q1.425 0 2.913.4T23 5.55v14.5Q21.75 19 20.287 18.5T17.5 18q-1.5 0-2.9.525T12 20m2-10.1V8.2q.825-.35 1.688-.525T17.5 7.5q.65 0 1.275.1T20 7.85v1.6q-.6-.225-1.213-.337T17.5 9q-.95 0-1.825.238T14 9.9m0 5.5v-1.7q.825-.35 1.688-.525T17.5 13q.65 0 1.275.1t1.225.25v1.6q-.6-.225-1.213-.338T17.5 14.5q-.95 0-1.825.225T14 15.4m0-2.75v-1.7q.825-.35 1.688-.525t1.812-.175q.65 0 1.275.1T20 10.6v1.6q-.6-.225-1.213-.338T17.5 11.75q-.95 0-1.825.238T14 12.65"
+        />
+      </svg>
+    );
+  }
+
   return <BagSVG bag={{ number: "", color: bag.color }} isList />;
 }

app/src/components/CreateUpdateBag.tsx

@@ -190,7 +190,7 @@ export default function CreateUpdateBag({
             />
           </IonItem>
           <IonItem lines="none" className="-tw-mt-5">
-            {["👻", "🐰", "👟"].map((emoji, i) => (
+            {["👻", "🐰", "👟", "📖"].map((emoji, i) => (
               <IonFabButton
                 key={i}
                 size="small"

app/src/components/SizeBadge.tsx

@@ -1,12 +1,14 @@
-import { IonBadge, IonIcon, IonImg } from "@ionic/react";
-import { Chain } from "../api/types";
+import { IonBadge, IonImg } from "@ionic/react";
+import { useTranslation } from "react-i18next";
 
-type ICategories = Record<Genders, Sizes[]>;
+type ICategories = Record<Categories, Sizes[]>;
 
-export enum Genders {
+export enum Categories {
   children = "1",
   women = "2",
   men = "3",
+  toys = "4",
+  books = "5",
 }
 export enum Sizes {
   baby = "1",
@@ -20,25 +22,29 @@ export enum Sizes {
   menMedium = "9",
   menLarge = "A",
   menPlusSize = "B",
+  womenMaternity = "C",
 }
 const categories: ICategories = {
-  [Genders.children]: [
+  [Categories.children]: [
     Sizes["baby"],
     Sizes["1To4YearsOld"],
     Sizes["5To12YearsOld"],
   ],
-  [Genders.women]: [
+  [Categories.women]: [
     Sizes["womenSmall"],
     Sizes["womenMedium"],
     Sizes["womenLarge"],
     Sizes["womenPlusSize"],
+    Sizes["womenMaternity"],
   ],
-  [Genders.men]: [
+  [Categories.men]: [
     Sizes["menSmall"],
     Sizes["menMedium"],
     Sizes["menLarge"],
     Sizes["menPlusSize"],
   ],
+  [Categories.toys]: [],
+  [Categories.books]: [],
 };
 export const SizeLetters: Record<Sizes | string, string> = {
   "1": "Baby",
@@ -52,15 +58,33 @@ export const SizeLetters: Record<Sizes | string, string> = {
   "9": "M",
   A: "(X)L",
   B: "XL≤",
+  C: "Maternity",
 };
 function BadgeItem({ sizes, icon }: { sizes: string[]; icon: string }) {
   return (
     <IonBadge color="light" className="tw-flex-row tw-flex">
-      {sizes.map((s) => (
-        <span className="tw-m-0.5" key={s}>
-          {SizeLetters[s]}
+      <div className="tw-flex tw-flex-row tw-flex-wrap tw-justify-end tw-max-w-[120px]">
+        {sizes.map((s) => (
+          <span className="tw-m-0.5" key={s}>
+            {SizeLetters[s]}
+          </span>
+        ))}
+      </div>
+      <IonImg
+        src={`/categories/${icon}-50.png`}
+        className="dark:tw-invert-1 tw-w-4 tw-h-4"
+      />
+    </IonBadge>
+  );
+}
+function BadgeItemSingle({ icon, text }: { icon: string; text: string }) {
+  return (
+    <IonBadge color="light" className="tw-flex-row tw-flex">
+      {text ? (
+        <span className="tw-m-0.5 tw-me-1" key="text">
+          {text}
         </span>
-      ))}
+      ) : null}
       <IonImg
         src={`/categories/${icon}-50.png`}
         className="dark:tw-invert-1 tw-w-4 tw-h-4"
@@ -71,32 +95,39 @@ function BadgeItem({ sizes, icon }: { sizes: string[]; icon: string }) {
 
 export default function Badges(props: {
   sizes: string[] | null;
-  genders: string[] | null;
+  categories: string[] | null;
 }) {
+  const { t } = useTranslation();
   const children =
     props.sizes
-      ?.filter((a) => categories[Genders.children].includes(a as Sizes))
+      ?.filter((a) => categories[Categories.children].includes(a as Sizes))
       .sort((a, z) => a.localeCompare(z)) || [];
   const women =
     props.sizes
-      ?.filter((a) => categories[Genders.women].includes(a as Sizes))
+      ?.filter((a) => categories[Categories.women].includes(a as Sizes))
       .sort((a, z) => a.localeCompare(z)) || [];
   const men =
     props.sizes
-      ?.filter((a) => categories[Genders.men].includes(a as Sizes))
+      ?.filter((a) => categories[Categories.men].includes(a as Sizes))
       .sort((a, z) => a.localeCompare(z)) || [];
 
   return (
     <div className="tw-flex tw-flex-col tw-items-end tw-gap-1">
-      {women?.length || props.genders?.includes(Genders.women) ? (
+      {women?.length || props.categories?.includes(Categories.women) ? (
         <BadgeItem sizes={women} icon="woman" key="women" />
       ) : null}
-      {men?.length || props.genders?.includes(Genders.men) ? (
+      {men?.length || props.categories?.includes(Categories.men) ? (
         <BadgeItem sizes={men} icon="man" key="men" />
       ) : null}
-      {children?.length || props.genders?.includes(Genders.children) ? (
+      {children?.length || props.categories?.includes(Categories.children) ? (
         <BadgeItem sizes={children} icon="baby" key="children" />
       ) : null}
+      {props.categories?.includes(Categories.toys) ? (
+        <BadgeItemSingle text={t("toys")} icon="toys" key="toys" />
+      ) : null}
+      {props.categories?.includes(Categories.books) ? (
+        <BadgeItemSingle text={t("books")} icon="books" key="books" />
+      ) : null}
     </div>
   );
 }

app/src/pages/AddressItem.tsx

@@ -78,7 +78,7 @@ export default function AddressItem({
               {t("interestedSizes")}
             </IonLabel>
             <div className="ion-margin-top ion-margin-bottom" slot="end">
-              {user ? <Badges genders={[]} sizes={user.sizes} /> : null}
+              {user ? <Badges categories={[]} sizes={user.sizes} /> : null}
             </div>
           </IonItem>
         ) : null}

app/src/pages/Settings.tsx

@@ -469,7 +469,10 @@ export default function Settings() {
                       slot="end"
                     >
                       {chain ? (
-                        <Badges genders={chain.genders} sizes={chain.sizes} />
+                        <Badges
+                          categories={chain.genders}
+                          sizes={chain.sizes}
+                        />
                       ) : null}
                     </div>
                   </IonItem>

frontend/public/locales/en/translation.json

@@ -92,22 +92,25 @@
   "searchLocation": "Search Location",
   "noMatchesFound": "No matches found",
   "categories": "Categories",
-  "women": "Women's",
-  "men": "Men's",
-  "children": "Children's",
+  "women": "Women",
+  "men": "Men",
+  "children": "Children",
+  "toys": "Toys",
+  "books": "Books",
   "clothing": " clothing",
   "sizes": "Sizes",
   "baby": "Baby",
   "1To4YearsOld": "1-4 years old",
   "5To12YearsOld": "5-12 years old",
-  "womenPlusSize": "Women's plus size",
-  "menPlusSize": "Men's plus size",
+  "womenPlusSize": "Plus size",
+  "menPlusSize": "Plus size",
   "menSmall": "(Extra) Small",
   "menMedium": "Medium",
   "menLarge": "(Extra) Large",
   "womenSmall": "(Extra) Small",
   "womenMedium": "Medium",
   "womenLarge": "(Extra) Large",
+  "womenMaternity": "Maternity",
   "join": "Join",
   "joined": "Joined",
   "new": "New",

frontend/src/api/enums.ts

@@ -10,6 +10,7 @@ export enum Sizes {
   menMedium = "9",
   menLarge = "A",
   menPlusSize = "B",
+  womenMaternity = "C",
 }
 
 export const SizeI18nKeys: Record<Sizes | string, string> = {
@@ -24,16 +25,21 @@ export const SizeI18nKeys: Record<Sizes | string, string> = {
   "9": "menMedium",
   A: "menLarge",
   B: "menPlusSize",
+  C: "womenMaternity",
 };
 
-export enum Genders {
+export enum Categories {
   children = "1",
   women = "2",
   men = "3",
+  toys = "4",
+  books = "5",
 }
 
-export const GenderI18nKeys: Record<Genders | string, string> = {
+export const CatI18nKeys: Record<Categories | string, string> = {
   "1": "children",
   "2": "women",
   "3": "men",
+  "4": "toys",
+  "5": "books",
 };

frontend/src/components/react/components/AddressForm.tsx

@@ -372,7 +372,7 @@ export default function AddressForm(props: {
             message={t("weWouldLikeToKnowThisEquallyRepresented")}
           />
           <SizesDropdown
-            filteredGenders={Object.keys(categories)}
+            filteredCategory={Object.keys(categories)}
             selectedSizes={values.sizes || []}
             className="w-full"
             handleChange={(v) => setValue("sizes", v)}

frontend/src/components/react/components/Badges.tsx

@@ -1,8 +1,8 @@
 import type { TFunction } from "i18next";
 
 import {
-  GenderI18nKeys,
-  Genders,
+  CatI18nKeys,
+  Categories,
   SizeI18nKeys,
   Sizes,
 } from "../../../api/enums";
@@ -28,55 +28,75 @@ export function SizeBadges({
   g,
 }: {
   s?: Array<string | Sizes> | null;
-  g?: Array<string | Genders> | null;
+  g?: Array<string | Categories> | null;
 }) {
   const { t } = useTranslation();
 
   const children =
     s
-      ?.filter((a) => categories[Genders.children].includes(a as Sizes))
+      ?.filter((a) => categories[Categories.children].includes(a as Sizes))
       .sort((a, z) => a.localeCompare(z)) || [];
   const women =
     s
-      ?.filter((a) => categories[Genders.women].includes(a as Sizes))
+      ?.filter((a) => categories[Categories.women].includes(a as Sizes))
       .sort((a, z) => a.localeCompare(z)) || [];
   const men =
     s
-      ?.filter((a) => categories[Genders.men].includes(a as Sizes))
+      ?.filter((a) => categories[Categories.men].includes(a as Sizes))
       .sort((a, z) => a.localeCompare(z)) || [];
 
   return (
     <ul className={`flex ${!!s ? "flex-col" : "flex-row"} items-start`}>
-      {women.length || g?.includes(Genders.women) ? (
+      {women.length || g?.includes(Categories.women) ? (
         <SizeCatBadges
           t={t}
           key="women"
-          gender={Genders.women}
+          category={Categories.women}
           sizes={women as Sizes[]}
           icon="/images/categories/woman-50.png"
           color="bg-orange-light"
         />
       ) : null}
-      {men.length || g?.includes(Genders.men) ? (
+      {men.length || g?.includes(Categories.men) ? (
         <SizeCatBadges
           t={t}
           key="men"
-          gender={Genders.men}
+          category={Categories.men}
           sizes={men as Sizes[]}
           icon="/images/categories/man-50.png"
           color="bg-purple-lighter"
         />
       ) : null}
-      {children.length || g?.includes(Genders.children) ? (
+      {children.length || g?.includes(Categories.children) ? (
         <SizeCatBadges
           t={t}
           key="children"
-          gender={Genders.children}
+          category={Categories.children}
           sizes={children as Sizes[]}
           icon="/images/categories/baby-50.png"
           color="bg-leafGreen-light"
         />
       ) : null}
+      {g?.indexOf(Categories.toys) ? (
+        <SizeCatBadges
+          t={t}
+          key="toys"
+          category={Categories.toys}
+          sizes={[]}
+          icon="/images/categories/toys-50.png"
+          color="bg-skyBlue-light"
+        />
+      ) : null}
+      {g?.indexOf(Categories.books) ? (
+        <SizeCatBadges
+          t={t}
+          key="books"
+          category={Categories.books}
+          sizes={[]}
+          icon="/images/categories/books-50.png"
+          color="bg-pink-light"
+        />
+      ) : null}
     </ul>
   );
 }
@@ -92,7 +112,7 @@ function SizeCatBadges({
   ...props
 }: {
   t: TFunction;
-  gender: Genders;
+  category: Categories;
   sizes: Sizes[];
   icon: string;
   color: string;
@@ -103,7 +123,7 @@ function SizeCatBadges({
     >
       <div
         className="tooltip tooltip-top before:text-xs font-semibold"
-        data-tip={t(GenderI18nKeys[props.gender as string])}
+        data-tip={t(CatI18nKeys[props.category as string])}
       >
         <img src={props.icon} className="h-5 my-1" />
       </div>