From f325c5f552fcfd4484b6fcdcfe6c71325bcacdf9 Mon Sep 17 00:00:00 2001
From: Bozo Jovicic <bozo@hitthecode.com>
Date: Thu, 27 Jun 2024 13:09:15 +0200
Subject: [PATCH 1/2] MWPW-149125 [TwP & Buy Modals][Milo] Suppress Stock
 Checkbox on all modals for mobile users only

---
 web-components/src/merch-stock.js              | 5 -----
 web-components/src/merch-subscription-panel.js | 6 ++++--
 2 files changed, 4 insertions(+), 7 deletions(-)

diff --git a/web-components/src/merch-stock.js b/web-components/src/merch-stock.js
index 26b24987..edade659 100644
--- a/web-components/src/merch-stock.js
+++ b/web-components/src/merch-stock.js
@@ -1,7 +1,5 @@
 import { LitElement, css, html } from 'lit';
 import { EVENT_MERCH_STOCK_CHANGE } from './constants.js';
-import { MatchMediaController } from '@spectrum-web-components/reactive-controllers/src/MatchMedia.js';
-import { MOBILE_LANDSCAPE } from './media.js';
 
 export class MerchStock extends LitElement {
     static styles = [
@@ -35,8 +33,6 @@ export class MerchStock extends LitElement {
 
     checked = false;
 
-    #mobile = new MatchMediaController(this, MOBILE_LANDSCAPE);
-
     constructor() {
         super();
     }
@@ -71,7 +67,6 @@ export class MerchStock extends LitElement {
 
     render() {
         if (!this.planType) return;
-        if (this.#mobile.matches) return;
         return html`
             <sp-checkbox
                 size="s"
diff --git a/web-components/src/merch-subscription-panel.js b/web-components/src/merch-subscription-panel.js
index 43d87747..5ba24f42 100644
--- a/web-components/src/merch-subscription-panel.js
+++ b/web-components/src/merch-subscription-panel.js
@@ -7,7 +7,7 @@ import {
     EVENT_MERCH_STOCK_CHANGE,
     EVENT_OFFER_SELECTED,
 } from './constants.js';
-import { TABLET_DOWN } from './media.js';
+import { TABLET_DOWN, MOBILE_LANDSCAPE } from './media.js';
 
 class MerchSubscriptionPanel extends LitElement {
     static styles = [styles];
@@ -21,6 +21,7 @@ class MerchSubscriptionPanel extends LitElement {
     continueText = 'Continue';
 
     #mobileAndTablet = new MatchMediaController(this, TABLET_DOWN);
+    #mobile = new MatchMediaController(this, MOBILE_LANDSCAPE);
 
     constructor() {
         super();
@@ -125,7 +126,7 @@ class MerchSubscriptionPanel extends LitElement {
     }
 
     handleOfferSelect(event) {
-        if (this.offerSelect?.stock) {
+        if (this.stock && this.offerSelect?.stock) {
             this.stock.planType = event.detail.planType;
         }
         this.requestUpdate();
@@ -181,6 +182,7 @@ class MerchSubscriptionPanel extends LitElement {
     }
 
     get stock() {
+        if (this.#mobile.matches) return null;
         return this.querySelector('merch-stock');
     }
 

From 2e9f1a627e722c1b31ed623a2ce49e77a1cc87a6 Mon Sep 17 00:00:00 2001
From: Bozo Jovicic <bozo@hitthecode.com>
Date: Thu, 27 Jun 2024 13:10:01 +0200
Subject: [PATCH 2/2] MWPW-147035 [Milo TwP Modal (Buy)] Ability to deeplink
 into a card or tab within the modal

---
 web-components/src/merch-twp-d2p.js            | 12 +++++++++---
 web-components/test/merch-twp-d2p.test.html.js |  2 +-
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/web-components/src/merch-twp-d2p.js b/web-components/src/merch-twp-d2p.js
index 3e65c604..0bce4c69 100644
--- a/web-components/src/merch-twp-d2p.js
+++ b/web-components/src/merch-twp-d2p.js
@@ -216,7 +216,7 @@ export class MerchTwpD2P extends LitElement {
         this.singleCard = card;
     }
 
-    unSelectSingleCard() {
+    async unSelectSingleCard() {
         if (!this.singleCard) return;
         this.singleCard.setAttribute(
             'slot',
@@ -224,7 +224,11 @@ export class MerchTwpD2P extends LitElement {
         );
         this.singleCard.removeAttribute('data-slot');
         this.step = 1;
+        const cardToBeSelected = this.singleCard;
         this.singleCard = undefined;
+        await this.tabElement?.updateComplete;
+        this.selectedTabPanel.card = cardToBeSelected;
+        this.selectCard(cardToBeSelected, true);
     }
 
     handleContinue() {
@@ -370,7 +374,9 @@ export class MerchTwpD2P extends LitElement {
     }
 
     get preselectedCardId() {
-        const preselectedCardIds = parseState()['select-cards']?.split(',').reduce((res, item) => {
+        const params = new URLSearchParams(window.location.search);
+        const selectCards = params.get('select-cards');
+        const preselectedCardIds = selectCards?.split(',').reduce((res, item) => {
             const formattedItem = decodeURIComponent(item.trim().toLowerCase());
             formattedItem && res.push(formattedItem);
             return res;
@@ -405,7 +411,7 @@ export class MerchTwpD2P extends LitElement {
             if (selectedCard) {
                 selectedCard.selected = undefined;
             }
-            selectedCard = this.cardToBePreselected || card;
+            selectedCard = !selectedCard && this.cardToBePreselected ? this.cardToBePreselected : card;
             selectedCard.selected = true;
             if (tabPanel) {
                 tabPanel.card = selectedCard;
diff --git a/web-components/test/merch-twp-d2p.test.html.js b/web-components/test/merch-twp-d2p.test.html.js
index ce4c8523..ff01ee7a 100644
--- a/web-components/test/merch-twp-d2p.test.html.js
+++ b/web-components/test/merch-twp-d2p.test.html.js
@@ -161,7 +161,7 @@ runTests(async () => {
         });
 
         it('preselects the card from hash', async () => {
-            document.location.hash = 'select-cards=photoshop&creat&creati';
+            document.location.search = 'select-cards=photoshop&creat&creati';
             await applyTemplate('cci-footer,preselect-card', false);
             const merchCard = document.querySelector(
                 'merch-card[aria-selected]'