Feat: Added the similar brands component

assets/next.svg

-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M16 8v-4l8 8-8 8v-4h-16l8-8h8z"/></svg>
\ No newline at end of file
+<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd"><path d="M4 .755l14.374 11.245-14.374 11.219.619.781 15.381-12-15.391-12-.609.755z"/></svg>
\ No newline at end of file

background/messages/ping.ts

@@ -6,6 +6,7 @@ import type { PlasmoMessaging } from "@plasmohq/messaging"
 // import initialized db instance
 import { db } from "~background"
 
+// Export it!
 interface data_small {
   brand: string
   COUNTRY: string

components/advancedData.svelte

@@ -9,7 +9,7 @@
   export let data
 </script>
 
-<section class="pl-2 py-2 text-gray-700 bg-gray-50 rounded-lg">
+<section class="pl-2 py-2 text-gray-700 bg-gray-50 rounded-lg mb-2">
   <p class="font-bold mb-2">Advanced metrics:</p>
   {#key current}
     <div transition:slide={{ duration: 500 }}>

components/category.svelte

 <script lang="ts">
   import info from "data-base64:~assets/info.svg"
-  import { onMount } from "svelte"
   import { createFloatingActions } from "svelte-floating-ui"
-  import { flip, offset, shift } from "svelte-floating-ui/dom"
+  import { offset, shift } from "svelte-floating-ui/dom"
   import { scale } from "svelte/transition"
 
   const [floatingRef, floatingContent] = createFloatingActions({

components/environmentalData.svelte

 <script>
-  import { slide } from "svelte/transition"
-
   import Category from "~components/category.svelte"
   import Score from "~components/score.svelte"
 

components/footer.svelte

-<p class="mt-1 text-[0.75rem] text-gray-400 font-light">
+<p class="text-[0.75rem] text-gray-400 font-light">
     Source: <a
       class="font-bold"
       href="https://www.fashionrevolution.org/about/transparency/"

components/ping.svelte

 <script>
   import { scale } from "svelte/transition"
+  //set this to only display once per session
 </script>
 
 <span class="relative flex h-2 w-2 left-1 bottom-2" transition:scale>

components/rating.svelte

-<script>
+<script lang="ts">
+  export let type
   export let score
+  // Setting default to 3xl
+  export let font: string = "text-3xl"
+
+  const envTotal: number = 1.75
+  const supTotal: number = 6
+  const socTotal: number = 3.25
+  let total
+
+  function setValues(data: number, totalRating: number): number {
+    return Math.round((data / totalRating) * 100)
+  }
+  function setScore(data: number): number {
+    if (type.toLowerCase() === "environmental") {
+      data = envTotal
+    } else if (type.toLowerCase() === "supply chain") {
+      data = supTotal
+    } else if (type.toLowerCase() === "social") {
+      data = socTotal
+    }
+    return setValues(score, data)
+  }
+  $: finalScore = setScore(score)
 </script>
 
-<div class="text-3xl">
-  {#if score <= 20}
-    <p class="text-red-700">{score}</p>
-  {:else if score <= 30}
-    <p class="text-red-500">{score}</p>
-  {:else if score <= 40}
-    <p class="text-red-300">{score}</p>
-  {:else if score <= 50}
-    <p class="text-orange-500">{score}</p>
-  {:else if score <= 60}
-    <p class="text-orange-300">{score}</p>
-  {:else if score <= 70}
-    <p class="text-yellow-500">{score}</p>
-  {:else if score <= 80}
-    <p class="text-yellow-300">{score}</p>
-  {:else if score <= 90}
-    <p class="text-green-300">{score}</p>
+<div class="{font}">
+  {#if finalScore <= 20}
+    <p class="text-red-700">{finalScore}</p>
+  {:else if finalScore <= 30}
+    <p class="text-red-500">{finalScore}</p>
+  {:else if finalScore <= 40}
+    <p class="text-red-300">{finalScore}</p>
+  {:else if finalScore <= 50}
+    <p class="text-orange-500">{finalScore}</p>
+  {:else if finalScore <= 60}
+    <p class="text-orange-300">{finalScore}</p>
+  {:else if finalScore <= 70}
+    <p class="text-yellow-500">{finalScore}</p>
+  {:else if finalScore <= 80}
+    <p class="text-yellow-300">{finalScore}</p>
+  {:else if finalScore <= 90}
+    <p class="text-green-300">{finalScore}</p>
   {:else}
-    <p class="text-green-700">{score}</p>
+    <p class="text-green-700">{finalScore}</p>
   {/if}
 </div>

components/ratingButton.svelte

@@ -19,6 +19,6 @@
 <button on:click={toggleAdvanced}>
   <div class="grid grid-cols-1 justify-items-center">
     <p>{header}</p>
-    <Rating {score}></Rating>
+    <Rating type={header} score={score}/>
   </div>
 </button>

components/socialData.svelte

 <script>
-  import { slide } from "svelte/transition"
-
   import Category from "~components/category.svelte"
   import Score from "~components/score.svelte"
 

components/suggestions.svelte

 <script lang="ts">
+  import next from "data-base64:~assets/next.svg"
+
   import dataset from "~assets/dataset_small.json"
   import { brandSuggestions } from "~functions/suggestions"
 
+  import Rating from "./rating.svelte"
+
   interface data_small {
     brand: string
     COUNTRY: string
@@ -9,18 +13,19 @@
     supplychain_total: number
     social_total: number
   }
+  let font: string = "text-sm"
   export let currentBrand: string
   export let fieldName: string
   let suggestedBrands: data_small[] = []
-  // Recompute the value whenever fieldName changes
-  $: text = getField(fieldName)
+  // Recompute the value whenever fieldName or currentBrand changes
+  $: text = getField(fieldName, currentBrand)
 
-  function getField(fieldName: string): string {
+  function getField(fieldName: string, brand: string): string {
     let answer: string
     brandSuggestions.forEach((field) => {
       if (field.category === fieldName.toLowerCase()) {
         answer = fieldName
-        getMetrics(field.items, currentBrand)
+        getMetrics(field.items, brand)
       }
     })
     return answer
@@ -40,8 +45,35 @@
   }
 </script>
 
-<section>
-  {#each suggestedBrands as brand}
-    {brand.brand}
-  {/each}
+<section class="p-2 text-gray-700 bg-gray-50 rounded-lg mb-2">
+  <h2 class="text-sm font-bold mb-2">
+    Similar <span class="text-green-700">{text}</span> brands:
+  </h2>
+  <div class="">
+    <div class="w-full flex flex-wrap gap-y-2">
+      {#each suggestedBrands as brand}
+        <div class="grid grid-cols-4 text-xl w-full items-center">
+          <h3 class={font}>{brand.brand}</h3>
+          <div class="grid grid-cols-3 col-span-2 justify-items-center">
+            <Rating
+              type={"environmental"}
+              score={brand.environmental_total}
+              {font} />
+            <Rating
+              type={"supply chain"}
+              score={brand.supplychain_total}
+              {font} />
+            <Rating type={"social"} score={brand.social_total} {font} />
+          </div>
+          <div class="text-xs font-bold bg-gray-100 text-center rounded-lg p-1 ml-2">
+            <button>Advanced</button>
+          </div>
+        </div>
+      {/each}
+    </div>
+  </div>
+  <button class="{font} flex items-center gap-1 mt-2 font-bold"
+    >See more <div class="bg-gray-100 p-1 rounded-full h-4 w-4">
+      <img src={next} alt="See more button" />
+    </div></button>
 </section>

content.svelte

@@ -27,7 +27,7 @@
 <script lang="ts">
   import { countryToAlpha2 } from "country-to-iso"
   import type BrandData from "interfaces/data_advanced"
-  import { scale, slide } from "svelte/transition"
+  import { slide } from "svelte/transition"
 
   import { Storage } from "@plasmohq/storage"
 
@@ -73,10 +73,6 @@
     chrome.storage.sync.set({ visible: false })
   }
 
-  function setValues(data: number, totalRating: number) {
-    return Math.round((data / totalRating) * 100).toString()
-  }
-
   async function addUrl() {
     const resp = await sendToBackground({
       name: "sendUrl"
@@ -86,23 +82,25 @@
   // todo: encapsulate and take out the logic to take in an answer object and set
   // brand, supply, social and enviromental to the newly provided values
   // (will also be useful for the initial setting of those values)
+
+  // REFACTOR THIS PLS
   function changeBrand() {
     checked = true
     if (current === "Brand") {
       advancedDataDisplay = advancedDataSecond
       brand = answer.secondAnswer.brand
       country = answer.secondAnswer.COUNTRY
-      environmental = setValues(answer.secondAnswer.environmental_total, 1.75)
-      supply = setValues(answer.secondAnswer.supplychain_total, 6)
-      social = setValues(answer.secondAnswer.social_total, 3.25)
+      environmental = answer.secondAnswer.environmental_total
+      supply = answer.secondAnswer.supplychain_total
+      social = answer.secondAnswer.social_total
       current = "Store"
     } else {
       advancedDataDisplay = advancedData
       brand = answer.mainAnswer.brand
       country = answer.mainAnswer.COUNTRY
-      environmental = setValues(answer.mainAnswer.environmental_total, 1.75)
-      supply = setValues(answer.mainAnswer.supplychain_total, 6)
-      social = setValues(answer.mainAnswer.social_total, 3.25)
+      environmental = answer.mainAnswer.environmental_total
+      supply = answer.mainAnswer.supplychain_total
+      social = answer.mainAnswer.social_total
       current = "Brand"
     }
   }
@@ -129,12 +127,9 @@
       brand = resp.answer.mainAnswer.brand
       country = resp.answer.mainAnswer.COUNTRY
       secondBrand = resp.answer.secondAnswer.brand
-      environmental = setValues(
-        resp.answer.mainAnswer.environmental_total,
-        1.75
-      )
-      supply = setValues(resp.answer.mainAnswer.supplychain_total, 6)
-      social = setValues(resp.answer.mainAnswer.social_total, 3.25)
+      environmental = answer.mainAnswer.environmental_total
+      supply = resp.answer.mainAnswer.supplychain_total
+      social = resp.answer.mainAnswer.social_total
       if (resp.validUrl != undefined) {
         visible = true
         chrome.storage.sync.set({ visible: true })
@@ -202,8 +197,7 @@
         </div>
         {#if advancedValue.length > 0}
           <div class="mt-1" transition:slide={{ duration: 300 }}>
-            <AdvancedData current={advancedValue} data={advancedDataDisplay}
-            ></AdvancedData>
+            <AdvancedData current={advancedValue} data={advancedDataDisplay} />
           </div>
         {/if}
         {#if advancedDataDisplay != undefined}

functions/suggestions.ts

@@ -8,7 +8,7 @@ export const brandSuggestions = [
   { category: "menswear", items: ["ven heusen", "dressmann"] },
   { category: "outdoor", items: ["the north face", "patagonia"] },
   { category: "retailer", items: ["zalando", "amazon", "asos"] },
-  { category: "sportswear", items: ["nike", "adidas"] },
+  { category: "sportswear", items: ["nike", "adidas", "puma"] },
   { category: "supermarket", items: ["costco", "lidl"] },
   { category: "wholesale", items: ["gildan", "fruit of the loom"] },
   { category: "womenswear", items: ["prettylittlething", "pimkie"] }