Merge pull request #601 from Stackla/feat/enable-storyline-and-shortvideos-to-use-new-expanded-view

feat: enable storyline and shortvideos to use new expanded view

Author: olivernosto

.prettierrc

@@ -15,7 +15,9 @@
     {
       "files": "*.scss",
       "options": {
-        "parser": "scss"
+        "parser": "scss",
+        "tabWidth": 2,
+        "useTabs": false
       }
     }
   ]

tests/e2e/assertions/expanded-tile.assert.ts

@@ -58,18 +58,26 @@ export async function shouldHaveTimestamps(page: Page, widgetType: string): Prom
 
 export async function shouldHaveProductButtonWithValidURL(page: Page, widgetType: string): Promise<void> {
   await clickFirstWidgetTile(page, widgetType)
-  const button = page.getByRole("link", { name: "Buy product: Kathmandu 1" }).first()
 
-  await expect(button).toHaveAttribute(
-    "href",
-    "/development/products/asus-tuf-f15-15-6-fhd-144hz-gaming-laptop-1tbgeforce-rtx-3050"
-  )
-
-  // Listen for new tab
-  const [newPage] = await Promise.all([page.context().waitForEvent("page"), button.click()])
-
-  // Wait for the new page to load
-  await newPage.waitForLoadState()
+  //data-testid="ugc-add-to-cart-button"
+  const button = page.getByTestId("ugc-add-to-cart-button").first()
+
+  await page.pause()
+
+  // Wait for the POST request after clicking the button
+  const [request] = await Promise.all([
+    page.waitForRequest(
+      req =>
+        req.url().includes("/cart/add.js") &&
+        req.method() === "POST" &&
+        req.postData() === JSON.stringify({ items: [{ id: 39531616370889, quantity: 1 }] })
+    ),
+    button.click()
+  ])
+
+  expect(request.url()).toContain("/cart/add.js")
+  expect(request.method()).toBe("POST")
+  expect(request.postData()).toBe(JSON.stringify({ items: [{ id: 39531616370889, quantity: 1 }] }))
 }
 
 export async function shouldHaveAvatars(page: Page, widgetType: string): Promise<void> {

widgets/carousel/widget.tsx

@@ -7,6 +7,7 @@ import { initializeInlineSwiperListeners } from "./inline-carousel-swiper.loader
 
 loadWidget(sdk, {
   features: {
+    addNewTilesAutomatically: false,
     handleLoadMore: false,
     cssVariables: {
       "--navigation-arrow-display": sdk.isPaginationEnabled() && !sdk.isScrollWidget() ? "flex" : "none"

widgets/libs/vertical-expanded-tiles/_variables.scss

@@ -0,0 +1,38 @@
+:host {
+    --color-primary: #000;
+    --color-secondary: rgb(50 45 45 / 80%);
+    --color-white: #fff;
+    --color-grey: #8D8D8D;
+    --title-font-size: 16px;
+    --paragraph-font-size: 15px;
+    --paragraph-font-weight-small: 300;
+    --paragraph-font-weight-normal: 400;
+    --paragraph-font-weight-medium: 500;
+    --paragraph-font-weight-bold: 700;
+    --font-default: helveticaneueltpro, sans-serif;
+    --product-title-font-size: clamp(0.875rem, 1vw, 1rem);
+    --quick-add-font-size: clamp(1.2rem, 1vw, 1.5rem);
+    --quick-add-variant-button-font-size: calc(var(--quick-add-font-size) * 0.8);
+    --color-atc-button-border: #D9D9D9;
+    --atc-variant-font-size: calc(var(--paragraph-font-size) * 0.8);
+    --inline-user-handle: 14px;
+    --lookup-icon-size: 36px;
+    --title-line-height: 1.1;
+    --title-margin-bottom: 5px;
+    --description-size: 14px;
+    --description-line-height: 1.4286;
+    --description-margin-bottom: 10px;
+    --username-font-weight: 700;
+    --username-font-size: clamp(1.5rem, 1vw, 3rem);
+    --user-handle-font-size: clamp(0.875rem, 1vw, 1.25rem);
+    --user-handle-font-weight: 300;
+    --title-size: 20px;
+
+    @media (min-width: 1370px) {
+        --title-size: 28px;
+    }
+
+    .font-grey {
+        color: var(--color-grey) !important;
+    }
+}

widgets/libs/vertical-expanded-tiles/base.template.tsx

@@ -0,0 +1,41 @@
+import type { ISdk } from "@stackla/widget-utils"
+import { StoryExpandedTile } from "./tile.template"
+import { createElement } from "@stackla/widget-utils"
+
+export function StoryExpandedTiles(sdk: ISdk) {
+  const tiles = sdk.getTiles()
+  const { show_nav } = sdk.getExpandedTileConfig()
+  const navigationArrowsEnabled = show_nav
+
+  return (
+    <div class="expanded-tile-wrapper" variation="story">
+      <div class="swiper swiper-expanded story-expanded">
+        <div class="align-center">
+          <div class="swiper-expanded-button-wrapper">
+            <div
+              class="swiper-expanded-button-prev swiper-button-prev btn-lg"
+              style={{ display: navigationArrowsEnabled ? "flex" : "none" }}>
+              <span class="chevron-left" alt="Previous arrow" />
+            </div>
+            <div
+              class="swiper-expanded-button-next swiper-button-next btn-lg"
+              style={{ display: navigationArrowsEnabled ? "flex" : "none" }}>
+              <span class="chevron-right" alt="Next arrow" />
+            </div>
+          </div>
+        </div>
+        <div class="swiper-wrapper ugc-tiles">
+          {tiles.map(tile => (
+            <div
+              class="ugc-tile swiper-slide"
+              data-id={tile.id}
+              data-yt-id={tile.youtube_id || ""}
+              data-tiktok-id={tile.tiktok_id || ""}>
+              <StoryExpandedTile sdk={sdk} tile={tile} />
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}

widgets/libs/vertical-expanded-tiles/config.ts

@@ -0,0 +1,115 @@
+import type { Sdk, UserConfig } from "@stackla/widget-utils"
+
+declare const sdk: Sdk
+
+const tilesLength = sdk.querySelectorAll(".ugc-tile")?.length ?? 0
+
+export const config: UserConfig = {
+  components: {
+    inline_products: {
+      swiper_options: {
+        allowTouchMove: true
+      }
+    }
+  },
+  style: {
+    cta_btn_background: "#000000",
+    cta_btn_font_color: "#ffffff",
+    cta_btn_font_size: "14",
+    // The background color of the widget, uses var(--widget-background) in css-variables.ts
+    widget_background: "#ffffff",
+    // The background color of the tile, uses var(--text-tile-background) in css-variables.ts
+    text_tile_background: "#ffffff",
+    // The font color of the tiles, uses var(--text-tile-font-color) in css-variables.ts
+    text_tile_font_color: "#000000",
+    // The font color of the user handle, uses var(--text-tile-user-handle-font-color) in css-variables.ts
+    text_tile_user_handle_font_color: "#636062",
+    // The font color of the user name, uses var(--text-tile-user-name-font-color) in css-variables.ts
+    text_tile_user_name_font_color: "#ffffff",
+    // The font size of the tile contents, uses var(--text-tile-font-size) in css-variables.ts
+    text_tile_font_size: "10",
+    // The font size of the user handle, uses var(--text-tile-user-handle-font-size) in css-variables.ts
+    text_tile_user_handle_font_size: "14",
+    // The font size of the user name, uses var(--text-tile-user-name-font-size) in css-variables.ts
+    text_tile_user_name_font_size: "14",
+    // The margin of the widget, and gap between tiles, uses var(--margin) in css-variables.ts
+    margin: "10",
+    // The mode of what happens when a tile is clicked, options: [EXPAND], [ORIGINAL_URL] or [CUSTOM]
+    // [EXPAND] will expand the tile, [ORIGINAL_URL] will open the original URL associated with a social media image, [CUSTOM] will open a custom URL (not implemented)
+    click_through_url: "[EXPAND]",
+    // The background image of the icon, uses var(--shopspot-icon) in css-variables.ts, defaults to #000
+    shopspot_icon: "",
+    // Whether the tile should automatically pull new tiles or not
+    auto_refresh: "true",
+    // Whether the widget should only load x amount of tiles per page
+    tiles_per_page: "",
+    enable_custom_tiles_per_page: true,
+    // Whether the widget should load more tiles on scroll, button or static
+    load_more_type: "static",
+    // The name of the widget
+    name: "Blank Canvas",
+    // The link color of the tile, uses var(--text-tile-link-color) in css-variables.ts
+    text_tile_link_color: "",
+    // The minimum amount of tiles required to show the widget
+    minimal_tiles: "6",
+    // Tile size: small, medium, large
+    inline_tile_size: "medium",
+    // The border radius of the inline tile, uses var(--inline-tile-border-radius) in css-variables.ts
+    inline_tile_border_radius: "5",
+    // The border radius of the expanded tile, uses var(--expanded-tile-border-radius) in css-variables.ts
+    expanded_tile_border_radius: "5"
+  },
+  expandedTile: {
+    swiper_options: {
+      slidesPerView: 1,
+      direction: "vertical",
+      loop: tilesLength > 4
+    },
+    // Whether to show the caption of the tile
+    show_caption: true,
+    // Whether to show the timestamp of the tile
+    show_timestamp: true,
+    // Whether to show the navigation options of the tile
+    show_nav: true,
+    // Whether to show the sharing options of the tile
+    show_sharing: true,
+    // Whether to show the shopspots of the tile
+    show_shopspots: true,
+    // Whether to show the products of the tile
+    show_products: true,
+    // Whether to show the tags of the tile
+    show_tags: true,
+    // Whether to show the votes of the tile
+    show_votes: true,
+    // Whether to show the cross sellers of the tile
+    show_cross_sellers: false,
+    // Whether to show the add to cart
+    show_add_to_cart: true,
+    // Whether to show the carousel grouping
+    show_carousel_grouping: true
+  },
+  inlineTile: {
+    // Whether to show the navigation options of the tile
+    show_nav: true,
+    // Whether to show the sharing options of the tile
+    show_sharing: true,
+    // Whether to show the shopspots
+    show_shopspots: true,
+    // Whether to show the tags of the tile
+    show_tags: true,
+    // Whether to show the timestamp of the tile
+    show_timestamp: true,
+    // Whether to show the caption of the tile
+    show_caption: true,
+    // Whether to show the products of the tile
+    show_products: true,
+    // Whether to show the add to cart functionality
+    show_add_to_cart: true,
+    // Whether to auto play the video
+    auto_play_video: false,
+    // Whether to show the inline tiles
+    show_inline_tiles: true,
+    // Whether to show the carousel
+    show_carousel: false
+  }
+}

widgets/libs/vertical-expanded-tiles/inline-products.template.spec.tsx

@@ -0,0 +1,26 @@
+import { stripMetaCurrencySymbols } from "./inline-products.template"
+
+describe("should test stripMetaCurrencySymbols", () => {
+  test("should return empty string for empty string input", () => {
+    expect(stripMetaCurrencySymbols("")).toBe("")
+  })
+  test("should keep currency symbols and numbers", () => {
+    expect(stripMetaCurrencySymbols("$100")).toBe("$100")
+    expect(stripMetaCurrencySymbols("€200.50")).toBe("€200.50")
+    expect(stripMetaCurrencySymbols("£300,00")).toBe("£300,00")
+    expect(stripMetaCurrencySymbols("¥400")).toBe("¥400")
+  })
+  test("should remove non-currency characters", () => {
+    expect(stripMetaCurrencySymbols("Price: $100")).toBe("$100")
+    expect(stripMetaCurrencySymbols("Total: €200.50")).toBe("€200.50")
+    expect(stripMetaCurrencySymbols("Cost: £300,00")).toBe("£300,00")
+    expect(stripMetaCurrencySymbols("Amount: ¥400")).toBe("¥400")
+  })
+  test("should handle multiple currency symbols", () => {
+    expect(stripMetaCurrencySymbols("$100€200")).toBe("$100€200")
+    expect(stripMetaCurrencySymbols("£300,00¥400")).toBe("£300,00¥400")
+  })
+  test("should remove GBP symbol but keep the number", () => {
+    expect(stripMetaCurrencySymbols("GBP£300,00")).toBe("£300,00")
+  })
+})