Trade-in flow v2

src/lib/components/ButtonGroup.svelte

@@ -0,0 +1,162 @@
+<script>
+  export let options = []; // Array of two options: [{value: 'option1', label: 'Label 1'}, {value: 'option2', label: 'Label 2'}]
+  export let value = null; // Currently selected value
+  export let onSelect; // callback function when selection changes
+
+  const handleSelect = (selectedValue) => {
+    if (value === selectedValue) {
+      value = null;
+    } else {
+      value = selectedValue;
+    }
+    console.log("Selected value:", value);
+    onSelect && onSelect(value);
+  };
+
+  $: option1 = options[0] || {};
+  $: option2 = options[1] || {};
+</script>
+
+<div class="button-group">
+  <button class="button" class:checked={value === option1.value} on:click={() => handleSelect(option1.value)}>
+    <div class="card">
+      <hgroup>
+        <span class="title-row">
+          <span class="title">{option1.label || ''}</span>
+          {#if option1.subheader}
+            <span class="subheader">{option1.subheader}</span>
+          {/if}
+        </span>
+        <div>
+          <slot name="option1-content"></slot>
+        </div>
+      </hgroup>
+    </div>
+  </button>
+
+  <button class="button" class:checked={value === option2.value} on:click={() => handleSelect(option2.value)}>
+    <div class="card">
+      <hgroup>
+        <span class="title-row">
+          <span class="title">{option2.label || ''}</span>
+          {#if option2.subheader}
+            <span class="subheader">{option2.subheader}</span>
+          {/if}
+        </span>
+        <div>
+          <slot name="option2-content"></slot>
+        </div>
+      </hgroup>
+    </div>
+  </button>
+</div>
+
+<style>
+  .button-group {
+    display: flex;
+    align-items: stretch;
+    gap: 1rem;
+    margin: 1rem 0 0;
+
+    @media screen and (max-width: 1300px) {
+      flex-direction: column;
+    }
+  }
+
+  .button {
+    cursor: pointer;
+    display: flex;
+    flex: 1;
+    color: green;
+    border: none;
+    background: none;
+    padding: 0;
+    font: inherit;
+    text-align: inherit;
+  }
+
+  .button:first-child {
+    flex: 3;
+  }
+
+  .button:last-child {
+    flex: 2;
+  }
+
+  .button .card {
+    flex: 1;
+    display: flex;
+    margin: 0;
+    padding: 1.5rem 1rem;
+    align-items: center;
+    color: black;
+    border: 1px solid #616161;
+    width: 100%;
+  }
+
+  .button .card hgroup {
+    margin-left: 0;
+    display: block !important;
+    width: 100%;
+  }
+
+  .button .card hgroup .title-row {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+    gap: 0.5rem;
+  }
+
+  .button:last-child .card hgroup .title-row {
+    justify-content: center;
+  }
+
+  .button .card hgroup .title-row .title {
+    /*font-family: JetBrains Mono, monospace;*/
+    /*font-size: 0.875rem;*/
+    font-size: 1rem;
+    font-weight: 400;
+    /*text-transform: uppercase;*/
+    line-height: 1.1;
+    color: black;
+  }
+
+  .button .card hgroup .title-row .subheader {
+    font-family: 'Inter', sans-serif;
+    font-size: 0.875rem;
+    font-weight: 400;
+    text-transform: none;
+    text-align: right;
+    line-height: 1.1;
+  }
+
+  .button .card hgroup div {
+    display: block;
+    color: #000000A6;
+    font-size: 0.875rem;
+    line-height: 1.25;
+  }
+
+  .button:nth-child(1).checked .card {
+    /*background-color: var(--color-accent);*/
+    /*cool #51ff00 green gradient bottom left to top right*/
+    /*background: linear-gradient(135deg, #51ff00 0%, #00c800 100%);*/
+    background: linear-gradient(to bottom left, #51ff00 0%, #6CDA3A 100%);
+    /*border-color: var(--color-accent);*/
+    /*border: 4px solid var(--color-accent);*/
+  }
+
+  .button:nth-child(2).checked .card {
+    background-color: black;
+    color: white;
+  }
+
+  .button:nth-child(1).checked .card hgroup span {
+    color: black;
+  }
+
+  .button:nth-child(2).checked .card hgroup span {
+    color: white;
+  }
+</style>

src/lib/components/HarnessSelector/HarnessSelector.svelte

@@ -69,7 +69,7 @@
   let inputValue = "";
   let inputRef;
 
-  $: filteredItems = $harnesses.filter(item => 
+  $: filteredItems = $harnesses.filter(item =>
     normalizeDiacritics(item.car.toLowerCase()).match(normalizeDiacritics(inputValue.toLowerCase()))
   );
 

src/lib/components/ProductDescriptions/CommaFour.svelte

@@ -2,6 +2,7 @@
   import Product from "$lib/components/Product.svelte";
   import NoteCard from "$lib/components/NoteCard.svelte";
   import CheckboxCard from "$lib/components/CheckboxCard.svelte";
+  import ButtonGroup from "$lib/components/ButtonGroup.svelte";
   import Accordion from "$lib/components/Accordion.svelte";
   import Badge from "$lib/components/Badge.svelte";
   import HarnessSelector from "$lib/components/HarnessSelector/HarnessSelector.svelte";
@@ -19,6 +20,7 @@
   import { onMount } from 'svelte';
   import { getProduct } from '$lib/utils/shopify';
   import { products as productsData } from '$lib/data/products.js';
+  import Button from "$lib/components/Button.svelte";
 
   export let product;
   let additionalProductIds = [];
@@ -48,6 +50,7 @@
   let selectedHarness = null;
   let tradeInVariantId = null;
   let tradeInChecked = false;
+  let tradeInValue = null;
   let backordered = null;
 
   const updateAdditionalProductIds = () => {
@@ -60,31 +63,44 @@
     }
   }
 
+  const updateDisableBuyButtonText = () => {
+    if (!selectedHarness) {
+      disableBuyButtonText = "SELECT YOUR CAR";
+    } else if (tradeInValue === null) {
+      disableBuyButtonText = "SELECT TRADE IN";
+    } else if (selectedHarness === NO_HARNESS_OPTION) {
+      disableBuyButtonText = null;
+    } else {
+      disableBuyButtonText = null;
+    }
+  }
+
   const handleHarnessSelection = (value) => {
     selectedHarness = value;
     updateAdditionalProductIds();
     if (value === NO_HARNESS_OPTION) {
       backordered = null;
-      disableBuyButtonText = null;
     } else if (value) {
       backordered = value.currentlyNotInStock ? `ships in ${(value.backordered || '1-12 weeks')}` : null;
-      disableBuyButtonText = null;
     } else {
       backordered = null;
-      disableBuyButtonText = "SELECT YOUR CAR";
     }
     backordered = '1-12 weeks';
+    updateDisableBuyButtonText();
   }
 
-  const handleTradeInToggle = () => {
-    tradeInChecked = !tradeInChecked;
+  const handleTradeInSelection = (value) => {
+    tradeInValue = value;
+    tradeInChecked = value === 'trade-in';
     updateAdditionalProductIds();
+    updateDisableBuyButtonText();
   }
 
   onMount(async () => {
     // Autofill trade-in checkbox
     const urlParams = new URLSearchParams(window.location.search);
     if (urlParams.get('trade-in') === '1') {
+      tradeInValue = 'trade-in';
       tradeInChecked = true;
     }
 
@@ -124,10 +140,28 @@
       showNoHarnessOption={true}
     >
     </HarnessSelector>
-    <CheckboxCard title="$250 credit with trade-in" checked={tradeInChecked} onToggle={handleTradeInToggle}>
-      Get $250 credit when you trade in your old comma device. Any comma device, in any condition.
-      <a href="/shop/comma-four-trade-in">Instructions and Terms</a>
-    </CheckboxCard>
+<!--    <hr/>-->
+    <div class="trade-in">
+      <div class="title">
+      Trade-in
+      </div>
+      <div class="description">
+        Get $250 credit when you trade in your old comma device. Any comma device, in any condition.
+        <a href="/shop/comma-four-trade-in">Instructions and Terms.</a>
+      </div>
+    </div>
+
+    <ButtonGroup options={[
+      {"label": "Add trade‑in", "value": "trade-in", "subheader": "$250 credit"},
+      {"label": "No trade‑in", "value": "no-trade-in"},
+      ]} value={tradeInValue} onSelect={handleTradeInSelection}>
+    </ButtonGroup>
+<!--    <hr/>-->
+
+<!--    <CheckboxCard title="$250 credit with trade-in" checked={tradeInChecked} onToggle={handleTradeInToggle}>-->
+<!--      Get $250 credit when you trade in your old comma device. Any comma device, in any condition.-->
+<!--      <a href="/shop/comma-four-trade-in">Instructions and Terms</a>-->
+<!--    </CheckboxCard>-->
   </span>
 
   <div slot="notes">
@@ -214,6 +248,19 @@
     margin: 1rem 0;
   }
 
+  .trade-in {
+    & .title {
+      margin-top: 1rem;
+      font-size: 1.5rem;
+      font-weight: 600;
+    }
+
+    & .description {
+      font-size: 1rem;
+      color: #000000A6;
+    }
+  }
+
   .harness-price {
     display: flex;
   }