Merge pull request #232 from datagrove/addServiceCategories

Add service categories

package.json

@@ -52,6 +52,7 @@
     "prettier-plugin-astro": "^0.11.0",
     "prettier-plugin-tailwindcss": "^0.5.3",
     "supabase": "^1.110.1",
+    "tailwind-scrollbar": "^3.0.5",
     "vite-plugin-pwa": "^0.16.5",
     "workbox-cli": "^7.0.0",
     "workbox-routing": "^7.0.0",

src/components/services/CategoryCarousel.tsx

@@ -26,8 +26,13 @@ import leftArrow from "../../assets/categoryIcons/circled-left-arrow.svg";
 import beauty from "../../assets/categoryIcons/beauty-salon.svg";
 import finance from "../../assets/categoryIcons/banking-bank.svg";
 import financeDM from "../../assets/categoryIcons/banking-bank-DM.svg";
+import education from "../../assets/categoryIcons/education.svg";
+import food from "../../assets/categoryIcons/plate.svg";
+import virtual from "../../assets/categoryIcons/virtual.svg";
+import home from "../../assets/categoryIcons/home.svg";
 import { currentLanguage } from "../../lib/languageSelectionStore";
 import { doc } from "prettier";
+import { each } from "jquery";
 
 let categories: Array<any> = [];
 
@@ -69,6 +74,12 @@ categories.map((category) => {
     category.icon = worker;
   } else if (category.id === 13) {
     category.icon = travel;
+  } else if (category.id === 14) {
+    category.icon = education;
+  } else if (category.id === 15) {
+    category.icon = food;
+  } else if (category.id === 16) {
+    category.icon = home;
   }
 });
 
@@ -95,15 +106,19 @@ let light = window.matchMedia(
   "(prefers-color-scheme: light)" || "(prefers-color-scheme: no-preference"
 ).matches;
 
+allCategoryInfo.forEach((element) => {
+  console.log(element);
+});
+
 export const CategoryCarousel: Component<Props> = (props) => {
   return (
-    <div class="product-carousel my-2">
-      <div class="flex flex-start justify-between">
+    <div class="product-carousel my-2 rounded-lg p-1 ">
+      <div class="flex flex-start justify-between scrollbar-thin overflow-x-auto drop-shadow-md dark:drop-shadow-[0_4px_3px_rgba(97,97,97,1)] scrollbar-track-rounded-full scrollbar-thumb-rounded-full scrollbar-thumb-shadow-LM scrollbar-track-background1 dark:scrollbar-thumb-shadow-DM dark:scrollbar-track-background1-DM">
         <button class="w-12 hidden">
           <img src={leftArrow.src} alt="Left Arrow" />
         </button>
 
-        <div class="flex justify-between items-start w-full overflow-auto pt-2 h-[7.5rem]">
+        <div class="flex justify-between items-start w-full  pt-2 h-[7.5rem]">
           {allCategoryInfo?.map((item) => (
             <button
               id={item.id}
@@ -121,12 +136,14 @@ export const CategoryCarousel: Component<Props> = (props) => {
               }}
             >
               <div class="bg-iconbg1 dark:bg-iconbg1-DM rounded-full">
-                <img
-                  src={item.icon.src}
-                  alt={item.ariaLabel + " Icon"}
-                  title={item.description}
-                  class="w-12 h-12 p-1 m-2"
-                />
+                {item.icon && item.icon.src ? (
+                  <img
+                    src={item.icon.src}
+                    alt={item.ariaLabel + " Icon"}
+                    title={item.description}
+                    class="w-12 h-12 p-1 m-2"
+                  />
+                ) : null}
               </div>
 
               <div class="flex flex-row justify-center items-center h-44">

src/components/services/ServicesMain.tsx

@@ -349,7 +349,7 @@ export const ServicesView: Component = () => {
         </button>
       </div>
 
-      <div class="">
+      <div class="h-fit">
         <CategoryCarousel filterPosts={setCategoryFilter} />
       </div>
 

src/components/users/ProviderProfileView.tsx

@@ -226,12 +226,14 @@ export const ProviderProfileView: Component = () => {
           console.log(data);
           data.forEach((item) => {
             item.checked = false;
-            provider()?.language_spoken.forEach((language) => {
-              console.log(language);
-              if (language === item.id.toString()) {
-                item.checked = true;
-              }
-            });
+            if (provider()?.language_spoken && provider()?.language_spoken.length > 0){
+              provider()?.language_spoken.forEach((language) => {
+                console.log(language);
+                if (language === item.id.toString()) {
+                  item.checked = true;
+                }
+              });
+            }
           });
           console.log(data);
           setLanguages(data);

src/i18n/UI/English.ts

@@ -312,19 +312,22 @@ export const English = {
 
 productCategoryInfo:{
     categories: [
-      { name: 'Gardening', description: 'Get help with your garden and landscaping.', ariaLabel: "Gardening", id: "1" },
+      // { name: 'Gardening', description: 'Get help with your garden and landscaping.', ariaLabel: "Gardening", id: "1" },
       { name: 'Construction', description: 'New Construction, Additions, or Repair Services', ariaLabel: "Construction", id: "3" },
       { name: 'Beauty', description: 'Salons, Barbers, and other personal care.', ariaLabel: "Beauty", id: "2" },
       { name: 'Automotive', description: 'Automotive Services', ariaLabel: "Automotive", id: "5" },
       { name: 'Computer', description: 'Computer Repair and Services', ariaLabel: "Computer", id: "4" },
       { name: 'Creative', description: 'Creative Services', ariaLabel: "Creative", id: "6" },
       { name: 'Financial', description: 'Financial Services', ariaLabel: "Financial", id: "7" },
-      { name: 'Cleaning', description: 'Cleaning Services', ariaLabel: "Cleaning", id: "8" },
+      // { name: 'Cleaning', description: 'Cleaning Services', ariaLabel: "Cleaning", id: "8" },
       { name: 'Pets', description: 'Pet Services', ariaLabel: "Pets", id: "9" },
       { name: 'Legal', description: 'Legal Services', ariaLabel: "Legal", id: "10" },
       { name: 'Health', description: 'Health Services', ariaLabel: "Health", id: "11" },
       { name: 'Labor', description: 'Labor Services', ariaLabel: "Labor", id: "12" },
       { name: 'Travel', description: 'Travel Services', ariaLabel: "Travel", id: "13" },
+      { name: 'Education', description: 'Teaching, Tutoring, Training, and Other Education Services', ariaLabel: "Education", id: "14" },
+      { name: 'Food & Drink', description: 'Food Services', ariaLabel: "Food & Drink", id: "15" },
+      { name: 'Home & Office', description: 'Services for the Home and Office - Cleaning, Gardening, Pest Control, and more', ariaLabel: "Home & Office", id: "16" },
       // Add more products as needed
     ]
   },

src/i18n/UI/French.ts

@@ -312,19 +312,22 @@ export const French = {
 
 productCategoryInfo:{
     categories: [
-      { name: "Jardinage", description: "Obtenez de l'aide pour votre jardin et votre aménagement paysager.", ariaLabel: "Jardinage", id: "1" },
+      // { name: "Jardinage", description: "Obtenez de l'aide pour votre jardin et votre aménagement paysager.", ariaLabel: "Jardinage", id: "1" },
       { name: "Construction", description: "Nouvelles constructions, ajouts ou services de réparation", ariaLabel: "Construction", id: "3" },
       { name: "Beauté", description: "Salons, barbiers et autres soins personnels.", ariaLabel: "Beauté", id: "2" },
       { name: "Automobile", description: "Services automobiles", ariaLabel: "Automobile", id: "5" },
       { name: "Ordinateur", description: "Réparation et services informatiques", ariaLabel: "Ordinateur", id: "4" },
       { name: "Créative", description: "Services créatifs", ariaLabel: "Créative", id: "6" },
       { name: "Financière", description: "Services financiers", ariaLabel: "Financière", id: "7" },
-      { name: "Nettoyage", description: "Services de nettoyage", ariaLabel: "Nettoyage", id: "8" },
+      // { name: "Nettoyage", description: "Services de nettoyage", ariaLabel: "Nettoyage", id: "8" },
       { name: "Animaux domestiques", description: "Services pour animaux de compagnie", ariaLabel: "Animaux domestiques", id: "9" },
       { name: "Juridique", description: "Services juridiques", ariaLabel: "Juridique", id: "10" },
       { name: "Santé", description: "Services de santé", ariaLabel: "Santé", id: "11" },
       { name: "Travail", description: "Services du travail", ariaLabel: "Travail", id: "12" },
       { name: "Voyage", description: "Services de voyage", ariaLabel: "Voyage", id: "13" },
+      { name: 'Éducation', description: 'Enseignement, Tutorat, Formation et Autres Services Éducatifs', ariaLabel: "Éducation", id: "14" },
+      { name: 'Nourriture & Boisson', description: 'Les Services Alimentaires', ariaLabel: "Alimentaires", id: "15" },
+      { name: 'Bureau & domicile', description: 'Services pour la maison et le bureau : nettoyage, jardinage, lutte antiparasitaire, etc.', ariaLabel: "Bureau & domicile", id: "16" },
       // Add more products as needed
     ]
   },

src/i18n/UI/Spanish.ts

@@ -309,19 +309,22 @@ export const Spanish = {
 
   productCategoryInfo: {
     categories: [
-      { name: 'Jardinería', description: 'Obtenga ayuda con su jardín y sus áreas verdes.', ariaLabel: "Jardinería", id: "1" },
+      // { name: 'Jardinería', description: 'Obtenga ayuda con su jardín y sus áreas verdes.', ariaLabel: "Jardinería", id: "1" },
       { name: 'Construcción', description: 'Nueva construcción, adiciones o servicios de reparación', ariaLabel: "Construcción", id: "3" },
       { name: 'Belleza', description: 'Salones, Barberias, y otros cuidados personales.', ariaLabel: "Belleza", id: "2" },
       { name: 'Automotriz', description: 'Servicios Automotrices', ariaLabel: "Automotriz", id: "5" },
       { name: 'Computación', description: 'Reparación y servicios de computadoras', ariaLabel: "Computación", id: "4" },
       { name: 'Artes', description: 'Servicios Creativos', ariaLabel: "Artes", id: "6" },
       { name: 'Finanzas', description: 'Servicios Financieros', ariaLabel: "Finanzas", id: "7" },
-      { name: 'Limpieza', description: 'Servicios de Limpieza', ariaLabel: "Limpieza", id: "8" },
+      // { name: 'Limpieza', description: 'Servicios de Limpieza', ariaLabel: "Limpieza", id: "8" },
       { name: 'Mascotas', description: 'Servicios para Mascotas', ariaLabel: "Mascotas", id: "9" },
       { name: 'Legal', description: 'Servicios Legales', ariaLabel: "Servicios Legales", id: "10" },
       { name: 'Salud', description: 'Servicios de Salud', ariaLabel: "Salud", id: "11" },
       { name: 'Servicios Laborales', description: 'Servicios Laborales', ariaLabel: "Servicios Laborales", id: "12" },
       { name: 'Viajes', description: 'Servicios de Viaje', ariaLabel: "Viajes", id: "13" },
+      { name: 'Educación', description: 'Enseñanza, Tutoría, Capacitación y Otros Servicios Educativos', ariaLabel: "Educación", id: "14" },
+      { name: 'Comida & Bebida', description: 'Servicios de Comida', ariaLabel: "Comida & Bebida", id: "15" },
+      { name: 'Oficina & casa', description: 'Servicios para el hogar y la oficina: limpieza, jardinería, control de plagas y más', ariaLabel: "Oficina & casa", id: "16" },
       // Add more products as needed
     ],
   },

src/i18n/uiType.ts

@@ -309,19 +309,22 @@ export interface uiObject {
 
 productCategoryInfo:{
     categories: [
-      { name: string, description: string, ariaLabel: string, id: "1" },
+      // { name: string, description: string, ariaLabel: string, id: "1" },
       { name: string, description: string, ariaLabel: string, id: "3" },
       { name: string, description: string, ariaLabel: string, id: "2" },
       { name: string, description: string, ariaLabel: string, id: "5" },
       { name: string, description: string, ariaLabel: string, id: "4" },
       { name: string, description: string, ariaLabel: string, id: "6" },
       { name: string, description: string, ariaLabel: string, id: "7" },
-      { name: string, description: string, ariaLabel: string, id: "8" },
+      // { name: string, description: string, ariaLabel: string, id: "8" },
       { name: string, description: string, ariaLabel: string, id: "9" },
       { name: string, description: string, ariaLabel: string, id: "10" },
       { name: string, description: string, ariaLabel: string, id: "11" },
       { name: string, description: string, ariaLabel: string, id: "12" },
       { name: string, description: string, ariaLabel: string, id: "13" },
+      { name: string, description: string, ariaLabel: string, id: "14" },
+      { name: string, description: string, ariaLabel: string, id: "15" },
+      { name: string, description: string, ariaLabel: string, id: "16" },
       // Add more products as needed
     ]
   },

supabase/migrations/20231218204405_update_categories.sql

@@ -0,0 +1,8 @@
+INSERT INTO "public"."post_category" ("id", "category", "language") VALUES
+	(14, 'Education', 1),
+    (15, 'Food & Drink', 1),
+    (16, 'Home & Office', 1);
+
+UPDATE "public"."provider_post" 
+SET "service_category" = 16 
+WHERE "service_category" IN (1, 8);

supabase/seed.sql

@@ -459,6 +459,9 @@ Post with multiples images. Succesful.', 178, '2cf81880-3206-4bb1-9734-ddcacd822
 	(102, '2023-09-20 20:18:31.545462+00', 'Test TinyMCE as independent component', 10, '<h2>This is a <em>test</em></h2>', 191, 'b8a30290-79ac-49bb-9a76-223532e62ae4', NULL, false, NULL, NULL),
 	(103, '2023-09-20 21:35:46.409722+00', 'test2', 7, '<p>test 2</p>', 192, '0517efc0-1beb-4239-a522-748616a0d83f', NULL, false, NULL, NULL);
 
+UPDATE "public"."provider_post" 
+SET "service_category" = 16 
+WHERE "service_category" IN (1, 8);
 
 INSERT INTO "public"."language" ("id", "language") VALUES
 	(4, 'Chinese'),

tailwind.config.cjs

@@ -9,7 +9,7 @@ module.exports = {
 				'background1-DM': '#000000',
 				'htext1-DM': '#1DD762',
 				'ptext1-DM': '#F0F0F0',
-				'btn1-DM':	'#1DD762',
+				'btn1-DM': '#1DD762',
 				'btn1Text-DM': '#000000',
 				'link1-DM': '#1DD762',
 				'link1Hov-DM': '#17a84d',
@@ -72,5 +72,8 @@ module.exports = {
 			},
 		},
 	},
-	plugins: [require('@tailwindcss/typography'),],
+	plugins: [
+		require('@tailwindcss/typography'),
+		require('tailwind-scrollbar')({ nocompatible: true }),
+	]
 }