From 42ca0a5b163f8de657e9180ef0e3837a2ba5f2d8 Mon Sep 17 00:00:00 2001
From: Anton Sylka <antonsylka1004@gmail.com>
Date: Thu, 21 May 2026 15:14:41 +0800
Subject: [PATCH 1/6] Refs #36608: Production Time - add localization phrases

---
 resource/i18n/en-US.csv | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/resource/i18n/en-US.csv b/resource/i18n/en-US.csv
index b79be7fa2..e5cfb1415 100644
--- a/resource/i18n/en-US.csv
+++ b/resource/i18n/en-US.csv
@@ -1,5 +1,6 @@
 " is out of stock!"," is out of stock!"
 "'Size'","'Size'"
+"1 rush slot left","1 rush slot left"
 "10% discount on 10+ Petsies","10% discount on 10+ Petsies"
 "20% discount on 20+ Petsies","20% discount on 20+ Petsies"
 "404 Page Not Found","404 Page Not Found"
@@ -989,3 +990,4 @@
 "{filesCount} images were not uploaded because the maximum number of images reached","{filesCount} images were not uploaded because the maximum number of images reached"
 "{name} Homepage","{name} Homepage"
 "{name} gift card template","{name} gift card template"
+"{slotsLeft} rush slots left","{slotsLeft} rush slots left"

From 9e580d59dabf3ecf2f87f90ede7e81de68cff79d Mon Sep 17 00:00:00 2001
From: Anton Sylka <antonsylka1004@gmail.com>
Date: Mon, 6 Jul 2026 16:23:31 +0800
Subject: [PATCH 2/6] Refs #36797: Production Time Customization - redesign
 widget

---
 assets/rush-upgrades/rush.svg                 |   4 +
 assets/rush-upgrades/standard.svg             |   4 +
 assets/rush-upgrades/super-rush.svg           |   4 +
 .../customization-option.vue                  |   5 +-
 .../production-time-option-card.vue           | 374 +++++++++++++++
 ...duction-time-option-card-data.interface.ts |   8 +
 .../widgets/timeline-list-widget.vue          | 437 ++++++++++++++++++
 helpers/use-alteration-products-loader.ts     |  17 -
 ...se-order-item-alteration-product-loader.ts |   5 -
 resource/i18n/en-US.csv                       |   8 +
 10 files changed, 843 insertions(+), 23 deletions(-)
 create mode 100644 assets/rush-upgrades/rush.svg
 create mode 100644 assets/rush-upgrades/standard.svg
 create mode 100644 assets/rush-upgrades/super-rush.svg
 create mode 100644 components/customization-system/production-time-option-card.vue
 create mode 100644 components/customization-system/types/production-time-option-card-data.interface.ts
 create mode 100644 components/customization-system/widgets/timeline-list-widget.vue

diff --git a/assets/rush-upgrades/rush.svg b/assets/rush-upgrades/rush.svg
new file mode 100644
index 000000000..e5ac2ce2e
--- /dev/null
+++ b/assets/rush-upgrades/rush.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4 12C4 7.58172 7.58172 4 12 4C16.4183 4 20 7.58172 20 12C20 16.4183 16.4183 20 12 20C7.58172 20 4 16.4183 4 12ZM12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2ZM13 6C13 5.44772 12.5523 5 12 5C11.4477 5 11 5.44772 11 6V12C11 12.2652 11.1054 12.5196 11.2929 12.7071L14.2929 15.7071C14.6834 16.0976 15.3166 16.0976 15.7071 15.7071C16.0976 15.3166 16.0976 14.6834 15.7071 14.2929L13 11.5858V6Z" fill="#000000"/>
+</svg>
\ No newline at end of file
diff --git a/assets/rush-upgrades/standard.svg b/assets/rush-upgrades/standard.svg
new file mode 100644
index 000000000..3cf818fa0
--- /dev/null
+++ b/assets/rush-upgrades/standard.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5 4C5 3.44772 4.55228 3 4 3C3.44772 3 3 3.44772 3 4V6V18C3 19.6569 4.34315 21 6 21H18C19.6569 21 21 19.6569 21 18V6V4C21 3.44772 20.5523 3 20 3C19.4477 3 19 3.44772 19 4V5H17V4C17 3.44772 16.5523 3 16 3C15.4477 3 15 3.44772 15 4V5H13V4C13 3.44772 12.5523 3 12 3C11.4477 3 11 3.44772 11 4V5H9V4C9 3.44772 8.55228 3 8 3C7.44772 3 7 3.44772 7 4V5H5V4ZM16 7H19V18C19 18.5523 18.5523 19 18 19H6C5.44772 19 5 18.5523 5 18V7H8H12H16ZM13 11C11.8954 11 11 11.8954 11 13V15C11 16.1046 11.8954 17 13 17H15C16.1046 17 17 16.1046 17 15V13C17 11.8954 16.1046 11 15 11H13ZM13 13H15V15H13V13Z" fill="#000000"/>
+</svg>
\ No newline at end of file
diff --git a/assets/rush-upgrades/super-rush.svg b/assets/rush-upgrades/super-rush.svg
new file mode 100644
index 000000000..12bc52789
--- /dev/null
+++ b/assets/rush-upgrades/super-rush.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.8202 1.17444L12.7809 2.37532C13.9186 3.7975 14.3379 5.20075 14.299 6.54704C14.2612 7.85605 13.7915 9.02304 13.3225 9.98619C13.1649 10.3098 12.9946 10.6349 12.8386 10.9327C12.7663 11.0708 12.697 11.203 12.6335 11.3265C12.4214 11.739 12.2593 12.0804 12.1563 12.3799C12.0528 12.6806 12.0336 12.8708 12.0468 12.991C12.0567 13.0817 12.0872 13.173 12.2071 13.2929C12.4054 13.4912 12.5517 13.5469 12.6404 13.5639C12.731 13.5814 12.8515 13.5757 13.0239 13.5049C13.4095 13.3463 13.8803 12.9334 14.3743 12.314C14.8488 11.719 15.2631 11.0384 15.5634 10.4938C15.712 10.2242 15.8295 9.99387 15.9091 9.83234C15.9488 9.75168 15.979 9.6885 15.9988 9.64651L16.0205 9.59999L16.0252 9.58959L16.0259 9.58824L16.026 9.5879L16.0261 9.58776L16.0261 9.58771L16.6117 8.29169L17.6332 9.28206C19.946 11.5244 20.6617 14.7623 19.1415 17.7019C17.8195 20.2583 15.1123 22 12 22C7.60499 22 4 18.5172 4 14.1697C4 11.8793 5.26687 10.2404 6.64671 8.62914C6.82673 8.41894 7.0107 8.20711 7.19757 7.99194C8.47882 6.5167 9.89649 4.88437 11.1122 2.5397L11.8202 1.17444ZM17.1269 11.7924C16.8148 12.3321 16.4089 12.9705 15.9379 13.561C15.3851 14.2542 14.6528 14.9975 13.7846 15.3546C13.33 15.5415 12.8109 15.6335 12.2624 15.5279C11.7119 15.4219 11.2196 15.1338 10.7929 14.7071C10.3617 14.2759 10.1196 13.7664 10.0586 13.2082C10.0008 12.6794 10.1126 12.1723 10.2651 11.729C10.4181 11.2846 10.6372 10.8353 10.8549 10.412C10.9327 10.2606 11.0095 10.114 11.0856 9.96886C11.2338 9.68618 11.3792 9.40866 11.5243 9.11064C11.9559 8.22433 12.2745 7.36712 12.2998 6.48929C12.3134 6.01847 12.2432 5.51449 12.0273 4.9728C10.9109 6.77097 9.71215 8.14915 8.69763 9.31555C8.51377 9.52693 8.33596 9.73135 8.16579 9.93006C6.7748 11.5543 6 12.6877 6 14.1697C6 17.3667 8.66302 20 12 20C14.3543 20 16.3818 18.6846 17.365 16.7832C18.2267 15.1169 18.1049 13.3127 17.1269 11.7924Z" fill="#000000"/>
+</svg>
\ No newline at end of file
diff --git a/components/customization-system/customization-option.vue b/components/customization-system/customization-option.vue
index 5e19ce525..5435aafc5 100644
--- a/components/customization-system/customization-option.vue
+++ b/components/customization-system/customization-option.vue
@@ -85,6 +85,7 @@ import SearchFieldWidget from './widgets/search-field-widget.vue';
 import TextAreaWidget from './widgets/textarea-widget.vue';
 import TextInputWidget from './widgets/text-input-widget.vue';
 import ThumbnailsListWidget from './widgets/thumbnails-list-widget.vue';
+import TimelineListWidget from './widgets/timeline-list-widget.vue';
 
 type WidgetComponent = InstanceType<typeof CardsListWidget> |
 InstanceType<typeof CheckboxWidget> |
@@ -94,7 +95,8 @@ InstanceType<typeof ImageUploadWidget> |
 InstanceType<typeof SearchFieldWidget> |
 InstanceType<typeof TextAreaWidget> |
 InstanceType<typeof TextInputWidget> |
-InstanceType<typeof ThumbnailsListWidget>;
+InstanceType<typeof ThumbnailsListWidget> |
+InstanceType<typeof TimelineListWidget>;
 
 const customizationWidgetBusyStateChangedEventName =
   'customization-option-busy-state-changed';
@@ -111,6 +113,7 @@ export default defineComponent({
     TextAreaWidget,
     TextInputWidget,
     ThumbnailsListWidget,
+    TimelineListWidget,
     ValidationProvider
   },
   props: {
diff --git a/components/customization-system/production-time-option-card.vue b/components/customization-system/production-time-option-card.vue
new file mode 100644
index 000000000..7719761dd
--- /dev/null
+++ b/components/customization-system/production-time-option-card.vue
@@ -0,0 +1,374 @@
+<template>
+  <div
+    class="production-time-option-card"
+    :class="{
+      '-selected': isSelected,
+      '-disabled': isDisabled
+    }"
+  >
+    <span class="_checkmark" aria-hidden="true">
+      <SfIcon icon="check" size="12px" color="white" />
+    </span>
+
+    <div class="_icon-wrapper" aria-hidden="true">
+      <span
+        class="_icon"
+        :style="iconStyle"
+      />
+    </div>
+
+    <div class="_content">
+      <span class="_title">
+        {{ shipTitle }}
+      </span>
+
+      <p class="_subtitle">
+        {{ optionWeeksTitle }}
+      </p>
+
+      <span
+        class="_slots-left -mobile"
+        :class="slotsLeftClasses"
+      >
+        {{ slotsLeftTitle }}
+      </span>
+    </div>
+
+    <div class="_meta">
+      <div class="_price">
+        {{ priceTitle }}
+      </div>
+
+      <span
+        class="_slots-left -desktop"
+        :class="slotsLeftClasses"
+      >
+        {{ slotsLeftTitle }}
+      </span>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import {
+  computed,
+  ComputedRef,
+  defineComponent,
+  PropType
+} from '@vue/composition-api';
+import { SfIcon } from '@storefront-ui/vue';
+import { PriceHelper } from '@vue-storefront/core/helpers';
+
+import { Currency, GET_ACTIVE_CURRENCY } from 'src/modules/currency';
+
+import rushIcon from '../../assets/rush-upgrades/rush.svg';
+import standardIcon from '../../assets/rush-upgrades/standard.svg';
+import superRushIcon from '../../assets/rush-upgrades/super-rush.svg';
+
+const oneWeekInDays = 7;
+
+function addDays (date: Date, days: number): Date {
+  const newDate = new Date(date.getTime());
+
+  newDate.setDate(newDate.getDate() + days);
+
+  return newDate;
+}
+
+function formatShortDate (date: Date): string {
+  const month = date.toLocaleString('en-US', { month: 'short' });
+
+  return `${month} ${date.getDate()}`;
+}
+
+export default defineComponent({
+  name: 'ProductionTimeOptionCard',
+  components: {
+    SfIcon
+  },
+  props: {
+    optionName: {
+      type: String,
+      required: true
+    },
+    price: {
+      type: Object as PropType<PriceHelper.ProductPrice>,
+      required: true
+    },
+    isDisabled: {
+      type: Boolean,
+      default: false
+    },
+    isSelected: {
+      type: Boolean,
+      default: false
+    },
+    slotsLeft: {
+      type: Number,
+      required: true
+    },
+    turnaroundTime: {
+      type: Number,
+      required: true
+    }
+  },
+  setup (props, { root }) {
+    const selectedCurrency = computed<Currency>(() => {
+      return root.$store.getters[GET_ACTIVE_CURRENCY];
+    });
+
+    const weeks = computed<number>(() => {
+      return Math.ceil(props.turnaroundTime / oneWeekInDays);
+    });
+
+    const shipDate: ComputedRef<Date> = computed(() => {
+      return addDays(new Date(), props.turnaroundTime);
+    });
+
+    const shipTitle = computed<string>(() => {
+      return root.$t('Ships {date}', { date: formatShortDate(shipDate.value) }).toString();
+    });
+
+    const optionWeeksTitle = computed<string>(() => {
+      const title = weeks.value === 1
+        ? root.$t('{optionName} - 1 week', { optionName: props.optionName })
+        : root.$t('{optionName} - {weeks} weeks', { optionName: props.optionName, weeks: weeks.value });
+
+      return title.toString();
+    });
+
+    const iconSrc = computed<string>(() => {
+      const optionName = props.optionName.toLowerCase();
+
+      if (optionName.includes('standard')) {
+        return standardIcon;
+      }
+
+      if (optionName.includes('super')) {
+        return superRushIcon;
+      }
+
+      return rushIcon;
+    });
+
+    const iconStyle = computed<Record<string, string>>(() => {
+      const iconMask = `url(${iconSrc.value}) center / contain no-repeat`;
+
+      return {
+        mask: iconMask,
+        '-webkit-mask': iconMask
+      };
+    });
+
+    const priceTitle = computed<string>(() => {
+      const finalPrice = PriceHelper.getFinalPrice(props.price);
+
+      if (finalPrice === 0) {
+        return root.$t('Free').toString();
+      }
+
+      return `+ ${PriceHelper.formatPrice(finalPrice, selectedCurrency.value.symbol)}`;
+    });
+
+    const hasInfiniteSlots = computed<boolean>(() => {
+      return !Number.isFinite(props.slotsLeft);
+    });
+
+    const isSoldOut = computed<boolean>(() => {
+      return props.slotsLeft === 0;
+    });
+
+    const slotsLeftTitle = computed<string>(() => {
+      if (hasInfiniteSlots.value) {
+        return root.$t('Always Available').toString();
+      }
+
+      if (props.slotsLeft === 0) {
+        return root.$t('Sold out').toString();
+      }
+
+      if (props.slotsLeft === 1) {
+        return root.$t('Only 1 slot left').toString();
+      }
+
+      return root.$t('Only {slotsLeft} slots left', { slotsLeft: props.slotsLeft }).toString();
+    });
+
+    const slotsLeftClasses = computed<Record<string, boolean>>(() => {
+      return {
+        '-always-available': hasInfiniteSlots.value,
+        '-sold-out': isSoldOut.value
+      };
+    });
+
+    return {
+      hasInfiniteSlots,
+      iconStyle,
+      isSoldOut,
+      optionWeeksTitle,
+      priceTitle,
+      shipTitle,
+      slotsLeftClasses,
+      slotsLeftTitle
+    };
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+@import "~@storefront-ui/shared/styles/helpers/breakpoints";
+
+.production-time-option-card {
+  $section-gap: var(--spacer-xs);
+  $item-gap: var(--spacer-2xs);
+
+  position: relative;
+  display: grid;
+  grid-template-columns: 23px minmax(0, 1fr) auto;
+  column-gap: var(--spacer-sm);
+  align-items: center;
+  padding: var(--spacer-sm);
+  box-sizing: border-box;
+  background: var(--c-white);
+  color: var(--c-text);
+  font-family: var(--font-family-secondary);
+  border: 1.5px solid #D2D2D2;
+
+  &.-selected {
+    background: var(--c-secondary);
+
+    ._checkmark {
+      visibility: visible;
+    }
+  }
+
+  &.-disabled {
+    ._icon {
+      background: var(--c-text-muted);
+    }
+  }
+
+  ._checkmark {
+    display: flex;
+    visibility: hidden;
+    align-items: center;
+    justify-content: center;
+    width: 23px;
+    height: 23px;
+    background: var(--c-primary);
+  }
+
+  ._icon-wrapper {
+    display: none;
+    align-items: center;
+    justify-content: center;
+  }
+
+  ._icon {
+    display: block;
+    width: 36px;
+    height: 36px;
+    background: var(--c-primary);
+  }
+
+  ._content {
+    display: flex;
+    flex-direction: column;
+    row-gap: $item-gap;
+    text-align: left;
+  }
+
+  ._title {
+    margin: 0;
+    font-size: var(--font-lg);
+    font-weight: var(--font-bold);
+  }
+
+  ._subtitle {
+    margin: 0;
+    color: var(--c-text-muted);
+    font-size: var(--font-base);
+  }
+
+  ._meta {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    row-gap: $item-gap;
+  }
+
+  ._price {
+    color: var(--c-accent);
+    font-size: var(--font-base);
+    font-weight: var(--font-bold);
+    white-space: nowrap;
+  }
+
+  ._slots-left {
+    display: inline-block;
+    color: var(--c-warning);
+    font-size: var(--font-sm);
+    font-weight: var(--font-bold);
+    text-align: center;
+    white-space: normal;
+
+    &.-always-available,
+    &.-sold-out {
+      color: var(--c-text-muted);
+    }
+
+    &.-desktop {
+      display: none;
+    }
+
+    &.-mobile {
+      text-align: left;
+    }
+  }
+
+  @include for-desktop {
+    grid-template-columns: 1fr;
+    justify-items: center;
+    row-gap: $section-gap;
+    width: 100%;
+    min-height: 253px;
+    padding: var(--spacer-lg) var(--spacer-sm) var(--spacer-sm);
+
+    &.-selected {
+      ._checkmark {
+        display: flex;
+      }
+    }
+
+    ._checkmark {
+      position: absolute;
+      top: var(--spacer-xs);
+      left: var(--spacer-xs);
+      display: none;
+      visibility: visible;
+    }
+
+    ._icon-wrapper {
+      display: flex;
+    }
+
+    ._content {
+      text-align: center;
+    }
+
+    ._meta {
+      align-items: center;
+    }
+
+    ._slots-left {
+      &.-desktop {
+        display: inline-block;
+      }
+
+      &.-mobile {
+        display: none;
+      }
+    }
+  }
+}
+</style>
diff --git a/components/customization-system/types/production-time-option-card-data.interface.ts b/components/customization-system/types/production-time-option-card-data.interface.ts
new file mode 100644
index 000000000..0375dedbe
--- /dev/null
+++ b/components/customization-system/types/production-time-option-card-data.interface.ts
@@ -0,0 +1,8 @@
+import { PriceHelper } from '@vue-storefront/core/helpers';
+
+export interface ProductionTimeOptionCardData {
+  optionName: string,
+  price: PriceHelper.ProductPrice,
+  slotsLeft: number,
+  turnaroundTime: number
+}
diff --git a/components/customization-system/widgets/timeline-list-widget.vue b/components/customization-system/widgets/timeline-list-widget.vue
new file mode 100644
index 000000000..5e065ff69
--- /dev/null
+++ b/components/customization-system/widgets/timeline-list-widget.vue
@@ -0,0 +1,437 @@
+<template>
+  <div
+    class="timeline-list-widget"
+    :role="groupRole"
+    :aria-labelledby="ariaLabelledby"
+  >
+    <ul class="_options-list">
+      <li
+        v-for="optionValue in sortedValues"
+        :key="optionValue.id"
+        class="_option"
+        :class="{
+          '-selected': isSelected(optionValue),
+          '-disabled': isOptionValueDisabled(optionValue)
+        }"
+      >
+        <span
+          class="_mobile-timeline"
+          :class="{
+            '-selected': isSelected(optionValue),
+            '-disabled': isOptionValueDisabled(optionValue)
+          }"
+          aria-hidden="true"
+        >
+          <span class="_timeline-mark" />
+        </span>
+
+        <label class="_label">
+          <input
+            class="_input"
+            :type="inputType"
+            :name="radioInputName"
+            :value="optionValue.id"
+            :aria-describedby="ariaDescribedby"
+            :aria-invalid="ariaInvalid"
+            :disabled="isOptionValueDisabled(optionValue)"
+            v-model="selectedOption"
+          >
+
+          <production-time-option-card
+            v-if="productionTimeOptionCardDataByOptionValueId[optionValue.id]"
+            class="_card"
+            :is-disabled="isOptionValueDisabled(optionValue)"
+            :is-selected="isSelected(optionValue)"
+            v-bind="productionTimeOptionCardDataByOptionValueId[optionValue.id]"
+          />
+        </label>
+      </li>
+    </ul>
+
+    <div
+      :id="errorMessageId"
+      class="_error-message"
+      aria-live="polite"
+    >
+      {{ error }}
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import {
+  computed,
+  defineComponent,
+  PropType,
+  toRefs
+} from '@vue/composition-api';
+
+import { RushAddon } from 'src/modules/budsies';
+import {
+  ListWidgetInputType,
+  OptionValue,
+  useListWidget,
+  useOptionValuesPrice
+} from 'src/modules/customization-system';
+import { PRODUCTION_TIME_SELECTOR_STANDARD_OPTION_VALUE_ID } from 'src/modules/customization-system/types/production-time-selector-standard-option-value-id';
+import { useErrorAccessibility } from 'theme/helpers/use-error-accessibility';
+
+import ProductionTimeOptionCard from '../production-time-option-card.vue';
+import { ProductionTimeOptionCardData } from '../types/production-time-option-card-data.interface';
+
+function getRushAddonForOptionValue (
+  optionValue: OptionValue,
+  standardAddon: RushAddon | undefined,
+  addonBySku: Record<string, RushAddon>
+): RushAddon | undefined {
+  if (optionValue.id === PRODUCTION_TIME_SELECTOR_STANDARD_OPTION_VALUE_ID) {
+    return standardAddon;
+  }
+
+  if (!optionValue.sku) {
+    return;
+  }
+
+  return addonBySku[optionValue.sku];
+}
+
+export default defineComponent({
+  name: 'TimelineListWidget',
+  components: {
+    ProductionTimeOptionCard
+  },
+  props: {
+    ariaLabelledby: {
+      type: String as PropType<string | undefined>,
+      default: undefined
+    },
+    error: {
+      type: String,
+      default: undefined
+    },
+    isDisabled: {
+      type: Boolean,
+      default: false
+    },
+    maxValuesCount: {
+      type: Number as PropType<number | undefined>,
+      default: undefined
+    },
+    productId: {
+      type: Number,
+      required: true
+    },
+    radioGroupName: {
+      type: String as PropType<string | undefined>,
+      default: undefined
+    },
+    value: {
+      type: [String, Array] as PropType<string | string[] | undefined>,
+      default: undefined
+    },
+    values: {
+      type: Array as PropType<OptionValue[]>,
+      default: () => []
+    }
+  },
+  setup (props, context) {
+    const { maxValuesCount, radioGroupName, value, values } = toRefs(props);
+    const hasError = computed<boolean>(() => !!props.error);
+    const listWidgetFields = useListWidget(value, maxValuesCount, context);
+    const { optionValuePriceDictionary } = useOptionValuesPrice(values, context);
+
+    const groupRole = computed<string>(() => {
+      return listWidgetFields.inputType.value === ListWidgetInputType.RADIO
+        ? 'radiogroup'
+        : 'group';
+    });
+
+    const radioInputName = computed<string | undefined>(() => {
+      return listWidgetFields.inputType.value === ListWidgetInputType.RADIO
+        ? radioGroupName.value
+        : undefined;
+    });
+
+    const productRushAddons = computed<RushAddon[]>(() => {
+      return context.root.$store.getters['budsies/getProductRushAddons'](props.productId);
+    });
+
+    const productionTimeOptionCardDataByOptionValueId = computed<Record<string, ProductionTimeOptionCardData>>(() => {
+      const dictionary: Record<string, ProductionTimeOptionCardData> = {};
+      const standardAddon = productRushAddons.value.find((addon) => !addon.id);
+      const addonBySku: Record<string, RushAddon> = {};
+
+      for (const addon of productRushAddons.value) {
+        if (addon.id) {
+          addonBySku[addon.id] = addon;
+        }
+      }
+
+      for (const optionValue of values.value) {
+        const addon = getRushAddonForOptionValue(
+          optionValue,
+          standardAddon,
+          addonBySku
+        );
+        const price = optionValuePriceDictionary.value[optionValue.id];
+
+        if (!addon || !price) {
+          continue;
+        }
+
+        dictionary[optionValue.id] = {
+          optionName: optionValue.name || addon.text,
+          price,
+          slotsLeft: typeof addon.slotsLeft === 'number' ? addon.slotsLeft : Infinity,
+          turnaroundTime: addon.turnaroundTime
+        };
+      }
+
+      return dictionary;
+    });
+
+    const sortedValues = computed<OptionValue[]>(() => {
+      const cardDataByOptionValueId = productionTimeOptionCardDataByOptionValueId.value;
+
+      return [...values.value].sort((a, b) => {
+        const firstCardData = cardDataByOptionValueId[a.id];
+        const secondCardData = cardDataByOptionValueId[b.id];
+        const firstTurnaroundTime = firstCardData && firstCardData.turnaroundTime;
+        const secondTurnaroundTime = secondCardData && secondCardData.turnaroundTime;
+
+        if (firstTurnaroundTime !== undefined && secondTurnaroundTime !== undefined) {
+          return firstTurnaroundTime - secondTurnaroundTime;
+        }
+
+        if (firstTurnaroundTime !== undefined) {
+          return -1;
+        }
+
+        if (secondTurnaroundTime !== undefined) {
+          return 1;
+        }
+
+        if (a.sn !== b.sn) {
+          return a.sn - b.sn;
+        }
+
+        return a.id.localeCompare(b.id);
+      });
+    });
+
+    function isOptionValueSoldOut (optionValue: OptionValue): boolean {
+      const cardData = productionTimeOptionCardDataByOptionValueId.value[optionValue.id];
+
+      return !!cardData && cardData.slotsLeft === 0;
+    }
+
+    function isOptionValueDisabled (optionValue: OptionValue): boolean {
+      return props.isDisabled || isOptionValueSoldOut(optionValue);
+    }
+
+    const { ariaDescribedby, ariaInvalid, errorMessageId } = useErrorAccessibility(
+      'timeline-list-widget',
+      hasError
+    );
+
+    return {
+      ariaDescribedby,
+      ariaInvalid,
+      errorMessageId,
+      groupRole,
+      isOptionValueDisabled,
+      productionTimeOptionCardDataByOptionValueId,
+      radioInputName,
+      sortedValues,
+      ...listWidgetFields
+    };
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+@import "~@storefront-ui/shared/styles/helpers/breakpoints";
+
+.timeline-list-widget {
+  $timeline-mark-size: 14px;
+  $timeline-mark-border-width: 3px;
+  $timeline-line-width: 2px;
+  $timeline-color-incomplete: var(--c-divider);
+  $timeline-color-selected: var(--c-primary);
+  $desktop-option-max-width: 15rem;
+
+  width: 100%;
+
+  ._options-list {
+    display: grid;
+    grid-template-columns: 1fr;
+    row-gap: var(--spacer-sm);
+    padding: 0;
+    margin: 0;
+    list-style: none;
+  }
+
+  ._option {
+    position: relative;
+    width: 100%;
+    display: grid;
+    grid-template-columns: $timeline-mark-size 1fr;
+    column-gap: var(--spacer-sm);
+
+    &.-disabled {
+      ._label {
+        cursor: default;
+      }
+    }
+
+    &:has(._input:focus-visible) {
+      outline: var(--c-black) auto 1px;
+      outline: -webkit-focus-ring-color auto 1px;
+      outline: AccentColor auto 1px;
+      outline-offset: 2px;
+    }
+  }
+
+  ._mobile-timeline {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 100%;
+
+    &::before,
+    &::after {
+      content: "";
+      position: absolute;
+      left: calc(#{$timeline-mark-size} / 2 - #{$timeline-line-width} / 2);
+      width: $timeline-line-width;
+      background: $timeline-color-incomplete;
+    }
+
+    &::before {
+      top: 0;
+      bottom: calc(50% + #{$timeline-mark-size} / 2);
+    }
+
+    &::after {
+      top: calc(50% + #{$timeline-mark-size} / 2);
+      bottom: calc(0px - var(--spacer-sm));
+    }
+
+    &.-selected {
+      ._timeline-mark {
+        border-color: $timeline-color-selected;
+        background: $timeline-color-selected;
+      }
+    }
+
+    &.-disabled {
+      opacity: 0.65;
+    }
+  }
+
+  ._option:first-child {
+    ._mobile-timeline::before {
+      display: none;
+    }
+  }
+
+  ._option:last-child {
+    ._mobile-timeline::after {
+      display: none;
+    }
+  }
+
+  ._timeline-mark {
+    position: relative;
+    z-index: 1;
+    width: $timeline-mark-size;
+    height: $timeline-mark-size;
+    border: $timeline-mark-border-width solid $timeline-color-incomplete;
+    border-radius: 50%;
+    box-sizing: border-box;
+    background: var(--c-white);
+  }
+
+  ._label {
+    display: block;
+    cursor: pointer;
+  }
+
+  ._input {
+    position: absolute;
+    z-index: 1;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    opacity: 0;
+    cursor: pointer;
+
+    &:disabled {
+      cursor: default;
+
+      + ._card {
+        opacity: 0.6;
+      }
+    }
+  }
+
+  ._card {
+    pointer-events: none;
+  }
+
+  ._error-message {
+    margin-top: var(--spacer-xs);
+    color: var(--c-danger);
+    font-size: var(--font-xs);
+  }
+
+  @include for-desktop {
+    ._options-list {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: center;
+      gap: var(--spacer-sm);
+      margin: 0 auto;
+    }
+
+    ._option {
+      display: flex;
+      flex: 1;
+      flex-direction: column;
+      max-width: $desktop-option-max-width;
+    }
+
+    ._label {
+      display: flex;
+      justify-content: center;
+    }
+
+    ._mobile-timeline {
+      align-items: center;
+      min-height: auto;
+      margin-bottom: var(--spacer-sm);
+
+      &::before,
+      &::after {
+        top: calc(#{$timeline-mark-size} / 2 - #{$timeline-line-width} / 2);
+        bottom: auto;
+        width: calc(50% + var(--spacer-sm));
+        height: $timeline-line-width;
+      }
+
+      &::before {
+        right: 50%;
+        left: auto;
+      }
+
+      &::after {
+        right: auto;
+        left: 50%;
+      }
+    }
+  }
+}
+</style>
diff --git a/helpers/use-alteration-products-loader.ts b/helpers/use-alteration-products-loader.ts
index 9ac0eb345..a5e3cc2a6 100644
--- a/helpers/use-alteration-products-loader.ts
+++ b/helpers/use-alteration-products-loader.ts
@@ -32,20 +32,6 @@ export function useAlterationProductsLoader (
     return items;
   });
 
-  const orderItemIdToShippingCountryId = computed<Record<number, string | undefined>>(() => {
-    const mapping: Record<number, string | undefined> = {};
-
-    for (const order of orders.value) {
-      const shippingCountryId = order.shipping_address?.country_id;
-
-      for (const item of order.items) {
-        mapping[item.item_id] = shippingCountryId;
-      }
-    }
-
-    return mapping;
-  });
-
   const alterationProductSkus = computed<string[]>(() => {
     const skus = new Set<string>();
 
@@ -85,13 +71,10 @@ export function useAlterationProductsLoader (
         continue;
       }
 
-      const shippingCountryId = orderItemIdToShippingCountryId.value[orderItem.item_id];
-
       const updatedProduct = updateProductProductionTimeCustomizationData(
         product,
         root.$store,
         {
-          shippingCountryId,
           makeProductionTimeRequired: false
         }
       );
diff --git a/helpers/use-order-item-alteration-product-loader.ts b/helpers/use-order-item-alteration-product-loader.ts
index 667a41634..55b0ec9de 100644
--- a/helpers/use-order-item-alteration-product-loader.ts
+++ b/helpers/use-order-item-alteration-product-loader.ts
@@ -33,10 +33,6 @@ export function useOrderItemAlterationProductLoader (
     return orderItem.value.extension_attributes?.alteration_product?.sku;
   });
 
-  const shippingCountryId = computed<string | undefined>(() => {
-    return order.value?.shipping_address?.country_id;
-  });
-
   const productBySkuDictionary = computed<Record<string, Product>>(() => {
     return root.$store.getters['product/getProductBySkuDictionary'] || {};
   });
@@ -58,7 +54,6 @@ export function useOrderItemAlterationProductLoader (
       product,
       root.$store,
       {
-        shippingCountryId: shippingCountryId.value,
         makeProductionTimeRequired: false
       }
     );
diff --git a/resource/i18n/en-US.csv b/resource/i18n/en-US.csv
index b81c34f28..dd5dc9afd 100644
--- a/resource/i18n/en-US.csv
+++ b/resource/i18n/en-US.csv
@@ -43,6 +43,7 @@
 "All quantity discounts applied automatically at checkout:","All quantity discounts applied automatically at checkout:"
 "Allow notification about the order","Allow notification about the order"
 "Allow order notifications","Allow order notifications"
+"Always Available","Always Available"
 "Amount","Amount"
 "An error occured while loading the component.","An error occured while loading the component."
 "Another coupon is already applied.","Another coupon is already applied."
@@ -283,6 +284,7 @@
 "Forgot the password?","Forgot the password?"
 "Forgotten password?","Forgotten password?"
 "Form components","Form components"
+"Free","Free"
 "Full rewards program benefits","Full rewards program benefits"
 "Fur Color","Fur Color"
 "General agreement","General agreement"
@@ -450,6 +452,8 @@
 "Notify Customer Support","Notify Customer Support"
 "Now you can get a custom plush lookalike of your pet from @PetsiesOfficial. Check it out! https://t.co/YxtXW7CYJQ","Now you can get a custom plush lookalike of your pet from @PetsiesOfficial. Check it out! https://t.co/YxtXW7CYJQ"
 "OK","OK"
+"Only 1 slot left","Only 1 slot left"
+"Only {slotsLeft} slots left","Only {slotsLeft} slots left"
 "Open Cart","Open Cart"
 "Open menu","Open menu"
 "Open microcart","Open microcart"
@@ -691,6 +695,7 @@
 "Shipping method","Shipping method"
 "Shipping","Shipping"
 "Ships in approx. {weeks} weeks","Ships in approx. {weeks} weeks"
+"Ships {date}","Ships {date}"
 "Shopping Cart","Shopping Cart"
 "Shopping cart is empty. Please add some products before entering Checkout","Shopping cart is empty. Please add some products before entering Checkout"
 "Shopping cart","Shopping cart"
@@ -710,6 +715,7 @@
 "Skip to download","Skip to download"
 "Social","Social"
 "Socks","Socks"
+"Sold out","Sold out"
 "Some fields are invalid","Some fields are invalid"
 "Some of the ordered products are not available!","Some of the ordered products are not available!"
 "Some products you've ordered are out of stock. Your order has been canceled.","Some products you've ordered are out of stock. Your order has been canceled."
@@ -1011,4 +1017,6 @@
 "{filesCount} images were not uploaded because the maximum number of images reached","{filesCount} images were not uploaded because the maximum number of images reached"
 "{name} Homepage","{name} Homepage"
 "{name} gift card template","{name} gift card template"
+"{optionName} - 1 week","{optionName} - 1 week"
+"{optionName} - {weeks} weeks","{optionName} - {weeks} weeks"
 "{slotsLeft} rush slots left","{slotsLeft} rush slots left"

From 11a10a2f96ba1923ced6ddeb31bdd33c8495e423 Mon Sep 17 00:00:00 2001
From: Anton Sylka <antonsylka1004@gmail.com>
Date: Mon, 6 Jul 2026 16:41:40 +0800
Subject: [PATCH 3/6] Refs #36797: Production Time Customization - add 'fastest
 available' badge

---
 .../production-time-option-card.vue           | 34 +++++++++++++++++++
 .../widgets/timeline-list-widget.vue          | 31 ++++++++++++++---
 resource/i18n/en-US.csv                       |  1 +
 3 files changed, 61 insertions(+), 5 deletions(-)

diff --git a/components/customization-system/production-time-option-card.vue b/components/customization-system/production-time-option-card.vue
index 7719761dd..8503ba898 100644
--- a/components/customization-system/production-time-option-card.vue
+++ b/components/customization-system/production-time-option-card.vue
@@ -10,6 +10,10 @@
       <SfIcon icon="check" size="12px" color="white" />
     </span>
 
+    <span v-if="isFastestAvailable" class="_fastest-available-badge">
+      {{ fastestAvailableTitle }}
+    </span>
+
     <div class="_icon-wrapper" aria-hidden="true">
       <span
         class="_icon"
@@ -99,6 +103,10 @@ export default defineComponent({
       type: Boolean,
       default: false
     },
+    isFastestAvailable: {
+      type: Boolean,
+      default: false
+    },
     isSelected: {
       type: Boolean,
       default: false
@@ -170,6 +178,10 @@ export default defineComponent({
       return `+ ${PriceHelper.formatPrice(finalPrice, selectedCurrency.value.symbol)}`;
     });
 
+    const fastestAvailableTitle = computed<string>(() => {
+      return root.$t('Fastest available').toString();
+    });
+
     const hasInfiniteSlots = computed<boolean>(() => {
       return !Number.isFinite(props.slotsLeft);
     });
@@ -202,6 +214,7 @@ export default defineComponent({
     });
 
     return {
+      fastestAvailableTitle,
       hasInfiniteSlots,
       iconStyle,
       isSoldOut,
@@ -258,6 +271,21 @@ export default defineComponent({
     background: var(--c-primary);
   }
 
+  ._fastest-available-badge {
+    position: absolute;
+    top: 0;
+    right: var(--spacer-sm);
+    z-index: 1;
+    padding: 2px var(--spacer-xs);
+    background: var(--c-primary);
+    color: var(--c-white);
+    font-size: var(--font-sm);
+    font-weight: var(--font-bold);
+    line-height: 1.2;
+    transform: translateY(-50%);
+    white-space: nowrap;
+  }
+
   ._icon-wrapper {
     display: none;
     align-items: center;
@@ -348,6 +376,12 @@ export default defineComponent({
       visibility: visible;
     }
 
+    ._fastest-available-badge {
+      right: auto;
+      left: 50%;
+      transform: translate(-50%, -50%);
+    }
+
     ._icon-wrapper {
       display: flex;
     }
diff --git a/components/customization-system/widgets/timeline-list-widget.vue b/components/customization-system/widgets/timeline-list-widget.vue
index 5e065ff69..7cabb0bb4 100644
--- a/components/customization-system/widgets/timeline-list-widget.vue
+++ b/components/customization-system/widgets/timeline-list-widget.vue
@@ -15,7 +15,7 @@
         }"
       >
         <span
-          class="_mobile-timeline"
+          class="_timeline"
           :class="{
             '-selected': isSelected(optionValue),
             '-disabled': isOptionValueDisabled(optionValue)
@@ -41,6 +41,7 @@
             v-if="productionTimeOptionCardDataByOptionValueId[optionValue.id]"
             class="_card"
             :is-disabled="isOptionValueDisabled(optionValue)"
+            :is-fastest-available="isFastestAvailable(optionValue)"
             :is-selected="isSelected(optionValue)"
             v-bind="productionTimeOptionCardDataByOptionValueId[optionValue.id]"
           />
@@ -219,6 +220,21 @@ export default defineComponent({
       });
     });
 
+    const fastestAvailableOptionValueId = computed<string | undefined>(() => {
+      if (props.isDisabled) {
+        return;
+      }
+
+      const cardDataByOptionValueId = productionTimeOptionCardDataByOptionValueId.value;
+      const optionValue = sortedValues.value.find((value) => {
+        const cardData = cardDataByOptionValueId[value.id];
+
+        return !!cardData && cardData.slotsLeft !== 0;
+      });
+
+      return optionValue && optionValue.id;
+    });
+
     function isOptionValueSoldOut (optionValue: OptionValue): boolean {
       const cardData = productionTimeOptionCardDataByOptionValueId.value[optionValue.id];
 
@@ -229,6 +245,10 @@ export default defineComponent({
       return props.isDisabled || isOptionValueSoldOut(optionValue);
     }
 
+    function isFastestAvailable (optionValue: OptionValue): boolean {
+      return optionValue.id === fastestAvailableOptionValueId.value;
+    }
+
     const { ariaDescribedby, ariaInvalid, errorMessageId } = useErrorAccessibility(
       'timeline-list-widget',
       hasError
@@ -239,6 +259,7 @@ export default defineComponent({
       ariaInvalid,
       errorMessageId,
       groupRole,
+      isFastestAvailable,
       isOptionValueDisabled,
       productionTimeOptionCardDataByOptionValueId,
       radioInputName,
@@ -292,7 +313,7 @@ export default defineComponent({
     }
   }
 
-  ._mobile-timeline {
+  ._timeline {
     position: relative;
     display: flex;
     align-items: center;
@@ -331,13 +352,13 @@ export default defineComponent({
   }
 
   ._option:first-child {
-    ._mobile-timeline::before {
+    ._timeline::before {
       display: none;
     }
   }
 
   ._option:last-child {
-    ._mobile-timeline::after {
+    ._timeline::after {
       display: none;
     }
   }
@@ -409,7 +430,7 @@ export default defineComponent({
       justify-content: center;
     }
 
-    ._mobile-timeline {
+    ._timeline {
       align-items: center;
       min-height: auto;
       margin-bottom: var(--spacer-sm);
diff --git a/resource/i18n/en-US.csv b/resource/i18n/en-US.csv
index dd5dc9afd..881edd80a 100644
--- a/resource/i18n/en-US.csv
+++ b/resource/i18n/en-US.csv
@@ -265,6 +265,7 @@
 "Failed to load draft order item data.","Failed to load draft order item data."
 "Failed to submit Tax ID","Failed to submit Tax ID"
 "Faster checkout","Faster checkout"
+"Fastest available","Fastest available"
 "Feel free to edit any of your details below so your account is always up to date","Feel free to edit any of your details below so your account is always up to date"
 "Field is not valid","Field is not valid"
 "Field is required","Field is required"

From a7d66085537850163d155d452c5db19438bc6b3c Mon Sep 17 00:00:00 2001
From: Anton Sylka <antonsylka1004@gmail.com>
Date: Mon, 6 Jul 2026 16:51:43 +0800
Subject: [PATCH 4/6] Refs #36797: Timeline List Widget - add ability to
 uncheck option

---
 .../widgets/timeline-list-widget.vue               | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/components/customization-system/widgets/timeline-list-widget.vue b/components/customization-system/widgets/timeline-list-widget.vue
index 7cabb0bb4..a83447270 100644
--- a/components/customization-system/widgets/timeline-list-widget.vue
+++ b/components/customization-system/widgets/timeline-list-widget.vue
@@ -34,6 +34,7 @@
             :aria-describedby="ariaDescribedby"
             :aria-invalid="ariaInvalid"
             :disabled="isOptionValueDisabled(optionValue)"
+            @click="onInputClick(optionValue)"
             v-model="selectedOption"
           >
 
@@ -249,6 +250,18 @@ export default defineComponent({
       return optionValue.id === fastestAvailableOptionValueId.value;
     }
 
+    function onInputClick (optionValue: OptionValue): void {
+      if (listWidgetFields.inputType.value !== ListWidgetInputType.RADIO) {
+        return;
+      }
+
+      if (!listWidgetFields.isSelected(optionValue)) {
+        return;
+      }
+
+      context.emit('input', undefined);
+    }
+
     const { ariaDescribedby, ariaInvalid, errorMessageId } = useErrorAccessibility(
       'timeline-list-widget',
       hasError
@@ -261,6 +274,7 @@ export default defineComponent({
       groupRole,
       isFastestAvailable,
       isOptionValueDisabled,
+      onInputClick,
       productionTimeOptionCardDataByOptionValueId,
       radioInputName,
       sortedValues,

From 109205312769b386f70fa8098a3a10f2a9e32e6d Mon Sep 17 00:00:00 2001
From: Anton Sylka <antonsylka1004@gmail.com>
Date: Mon, 6 Jul 2026 17:03:45 +0800
Subject: [PATCH 5/6] Refs #36797: Timeline List Widget - rename widget

---
 components/customization-system/customization-option.vue  | 6 +++---
 ...ist-widget.vue => production-time-timeline-widget.vue} | 8 ++++----
 2 files changed, 7 insertions(+), 7 deletions(-)
 rename components/customization-system/widgets/{timeline-list-widget.vue => production-time-timeline-widget.vue} (98%)

diff --git a/components/customization-system/customization-option.vue b/components/customization-system/customization-option.vue
index 5435aafc5..190897531 100644
--- a/components/customization-system/customization-option.vue
+++ b/components/customization-system/customization-option.vue
@@ -85,7 +85,7 @@ import SearchFieldWidget from './widgets/search-field-widget.vue';
 import TextAreaWidget from './widgets/textarea-widget.vue';
 import TextInputWidget from './widgets/text-input-widget.vue';
 import ThumbnailsListWidget from './widgets/thumbnails-list-widget.vue';
-import TimelineListWidget from './widgets/timeline-list-widget.vue';
+import ProductionTimeTimelineWidget from './widgets/production-time-timeline-widget.vue';
 
 type WidgetComponent = InstanceType<typeof CardsListWidget> |
 InstanceType<typeof CheckboxWidget> |
@@ -96,7 +96,7 @@ InstanceType<typeof SearchFieldWidget> |
 InstanceType<typeof TextAreaWidget> |
 InstanceType<typeof TextInputWidget> |
 InstanceType<typeof ThumbnailsListWidget> |
-InstanceType<typeof TimelineListWidget>;
+InstanceType<typeof ProductionTimeTimelineWidget>;
 
 const customizationWidgetBusyStateChangedEventName =
   'customization-option-busy-state-changed';
@@ -113,7 +113,7 @@ export default defineComponent({
     TextAreaWidget,
     TextInputWidget,
     ThumbnailsListWidget,
-    TimelineListWidget,
+    ProductionTimeTimelineWidget,
     ValidationProvider
   },
   props: {
diff --git a/components/customization-system/widgets/timeline-list-widget.vue b/components/customization-system/widgets/production-time-timeline-widget.vue
similarity index 98%
rename from components/customization-system/widgets/timeline-list-widget.vue
rename to components/customization-system/widgets/production-time-timeline-widget.vue
index a83447270..ee83d073a 100644
--- a/components/customization-system/widgets/timeline-list-widget.vue
+++ b/components/customization-system/widgets/production-time-timeline-widget.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="timeline-list-widget"
+    class="production-time-timeline-widget"
     :role="groupRole"
     :aria-labelledby="ariaLabelledby"
   >
@@ -98,7 +98,7 @@ function getRushAddonForOptionValue (
 }
 
 export default defineComponent({
-  name: 'TimelineListWidget',
+  name: 'ProductionTimeTimelineWidget',
   components: {
     ProductionTimeOptionCard
   },
@@ -263,7 +263,7 @@ export default defineComponent({
     }
 
     const { ariaDescribedby, ariaInvalid, errorMessageId } = useErrorAccessibility(
-      'timeline-list-widget',
+      'production-time-timeline-widget',
       hasError
     );
 
@@ -287,7 +287,7 @@ export default defineComponent({
 <style lang="scss" scoped>
 @import "~@storefront-ui/shared/styles/helpers/breakpoints";
 
-.timeline-list-widget {
+.production-time-timeline-widget {
   $timeline-mark-size: 14px;
   $timeline-mark-border-width: 3px;
   $timeline-line-width: 2px;

From 39dfd7e51a8fd4c03379041eecf9a9792fbc1568 Mon Sep 17 00:00:00 2001
From: Anton Sylka <antonsylka1004@gmail.com>
Date: Mon, 6 Jul 2026 17:49:57 +0800
Subject: [PATCH 6/6] Refs #36797: Timeline List Widget - fix rush type
 detection

---
 .../production-time-option-card.vue              | 16 ++++++++++------
 ...production-time-option-card-data.interface.ts |  1 +
 .../widgets/production-time-timeline-widget.vue  |  4 ++--
 3 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/components/customization-system/production-time-option-card.vue b/components/customization-system/production-time-option-card.vue
index 8503ba898..f5d812660 100644
--- a/components/customization-system/production-time-option-card.vue
+++ b/components/customization-system/production-time-option-card.vue
@@ -95,6 +95,10 @@ export default defineComponent({
       type: String,
       required: true
     },
+    optionValueSku: {
+      type: String,
+      required: true
+    },
     price: {
       type: Object as PropType<PriceHelper.ProductPrice>,
       required: true
@@ -146,17 +150,17 @@ export default defineComponent({
     });
 
     const iconSrc = computed<string>(() => {
-      const optionName = props.optionName.toLowerCase();
+      const optionValueSku = props.optionValueSku.toLowerCase();
 
-      if (optionName.includes('standard')) {
-        return standardIcon;
+      if (optionValueSku.includes('super_rush')) {
+        return superRushIcon;
       }
 
-      if (optionName.includes('super')) {
-        return superRushIcon;
+      if (optionValueSku.includes('rush')) {
+        return rushIcon;
       }
 
-      return rushIcon;
+      return standardIcon;
     });
 
     const iconStyle = computed<Record<string, string>>(() => {
diff --git a/components/customization-system/types/production-time-option-card-data.interface.ts b/components/customization-system/types/production-time-option-card-data.interface.ts
index 0375dedbe..f53f8cc31 100644
--- a/components/customization-system/types/production-time-option-card-data.interface.ts
+++ b/components/customization-system/types/production-time-option-card-data.interface.ts
@@ -2,6 +2,7 @@ import { PriceHelper } from '@vue-storefront/core/helpers';
 
 export interface ProductionTimeOptionCardData {
   optionName: string,
+  optionValueSku: string,
   price: PriceHelper.ProductPrice,
   slotsLeft: number,
   turnaroundTime: number
diff --git a/components/customization-system/widgets/production-time-timeline-widget.vue b/components/customization-system/widgets/production-time-timeline-widget.vue
index ee83d073a..caf882dd7 100644
--- a/components/customization-system/widgets/production-time-timeline-widget.vue
+++ b/components/customization-system/widgets/production-time-timeline-widget.vue
@@ -39,7 +39,6 @@
           >
 
           <production-time-option-card
-            v-if="productionTimeOptionCardDataByOptionValueId[optionValue.id]"
             class="_card"
             :is-disabled="isOptionValueDisabled(optionValue)"
             :is-fastest-available="isFastestAvailable(optionValue)"
@@ -72,10 +71,10 @@ import { RushAddon } from 'src/modules/budsies';
 import {
   ListWidgetInputType,
   OptionValue,
+  PRODUCTION_TIME_SELECTOR_STANDARD_OPTION_VALUE_ID,
   useListWidget,
   useOptionValuesPrice
 } from 'src/modules/customization-system';
-import { PRODUCTION_TIME_SELECTOR_STANDARD_OPTION_VALUE_ID } from 'src/modules/customization-system/types/production-time-selector-standard-option-value-id';
 import { useErrorAccessibility } from 'theme/helpers/use-error-accessibility';
 
 import ProductionTimeOptionCard from '../production-time-option-card.vue';
@@ -183,6 +182,7 @@ export default defineComponent({
 
         dictionary[optionValue.id] = {
           optionName: optionValue.name || addon.text,
+          optionValueSku: optionValue.sku || '',
           price,
           slotsLeft: typeof addon.slotsLeft === 'number' ? addon.slotsLeft : Infinity,
           turnaroundTime: addon.turnaroundTime