@liquidcommercedev/rmn-sdk 1.5.0-beta.14 → 1.5.0-beta.16

package/dist/index.esm.js

@@ -78,574 +78,6 @@ var RMN_ENV;
     RMN_ENV["PRODUCTION"] = "production";
 })(RMN_ENV || (RMN_ENV = {}));
 
-const SPOT_EVENTS_EXAMPLE = [
-    {
-        event: RMN_SPOT_EVENT.CLICK,
-        url: 'https://dev.rmn.liquidcommerce.cloud/api/spots/event?e=eyJ2IjoiMS4xMiIsImF2IjozMDY1NzgzLCJhdCI6MTYzLCJidCI6MCwiY20iOjQ0MDE5MjQxOCwiY2giOjYzMTg0LCJjayI6e30sImNyIjo0ODE4NTUzNzUsImRpIjoiOWMxNGFhMGI3NWY4NDMxNTllMTAwYWQzNzA1NzQyYzMiLCJkaiI6MCwiaWkiOiIxZjU0MGM5NmQ1N2M0YmZjODFlZjRkNjhkMzFjNDVkOSIsImRtIjozLCJmYyI6NjU2NjgyNTQ5LCJmbCI6NjQzOTMxODIxLCJpcCI6IjM1LjIyMy4xOTguOTUiLCJudyI6MTE1MDAsInBjIjo1MDAwLCJvcCI6NTAwMCwibXAiOjUwMDAsImVjIjowLCJnbSI6MCwiZXAiOm51bGwsInByIjoyNDkzMTYsInJ0IjoxLCJycyI6NTAwLCJzYSI6IjU1Iiwic2IiOiJpLTA0MDI0ODg4ZDlkMWRjZWQ3Iiwic3AiOjI3MjI3Miwic3QiOjEyODcyOTYsInRyIjp0cnVlLCJ1ayI6IjNhZWRhMWMxLTZhYjItNDUwNy04Mzg5LTEwZTJmNDMxYjM5MSIsInRzIjoxNzI5MzU5MDU0OTI3LCJiZiI6dHJ1ZSwicG4iOiJyYlByb2R1Y3RVcGNzIiwiZ2MiOnRydWUsImdDIjp0cnVlLCJncyI6Im5vbmUiLCJkYyI6MSwidHoiOiJBbWVyaWNhL05ld19Zb3JrIiwidXIiOm51bGx9&s=hWz37kbxi_u95EVNn2aoQhc5Aas',
-    },
-    {
-        event: RMN_SPOT_EVENT.IMPRESSION,
-        url: 'https://dev.rmn.liquidcommerce.cloud/api/spots/event?e=eyJ2IjoiMS4xMiIsImF2IjozMDY1NzgzLCJhdCI6MTYzLCJidCI6MCwiY20iOjQ0MDE5MjQxOCwiY2giOjYzMTg0LCJjayI6e30sImNyIjo0ODE4NTUzNzUsImRpIjoiOWMxNGFhMGI3NWY4NDMxNTllMTAwYWQzNzA1NzQyYzMiLCJkaiI6MCwiaWkiOiIxZjU0MGM5NmQ1N2M0YmZjODFlZjRkNjhkMzFjNDVkOSIsImRtIjozLCJmYyI6NjU2NjgyNTQ5LCJmbCI6NjQzOTMxODIxLCJpcCI6IjM1LjIyMy4xOTguOTUiLCJudyI6MTE1MDAsInBjIjo1MDAwLCJvcCI6NTAwMCwibXAiOjUwMDAsImVjIjowLCJnbSI6MCwiZXAiOm51bGwsInByIjoyNDkzMTYsInJ0IjoxLCJycyI6NTAwLCJzYSI6IjU1Iiwic2IiOiJpLTA0MDI0ODg4ZDlkMWRjZWQ3Iiwic3AiOjI3MjI3Miwic3QiOjEyODcyOTYsInRyIjp0cnVlLCJ1ayI6IjNhZWRhMWMxLTZhYjItNDUwNy04Mzg5LTEwZTJmNDMxYjM5MSIsInRzIjoxNzI5MzU5MDU0OTI3LCJiZiI6dHJ1ZSwicG4iOiJyYlByb2R1Y3RVcGNzIiwiZ2MiOnRydWUsImdDIjp0cnVlLCJncyI6Im5vbmUiLCJkYyI6MSwidHoiOiJBbWVyaWNhL05ld19Zb3JrIiwiYmEiOjEsImZxIjowfQ&s=djoysjCimurf-5T11AlNAwwLSS8',
-    },
-    {
-        event: RMN_SPOT_EVENT.PURCHASE,
-        url: 'https://dev.rmn.liquidcommerce.cloud/api/spots/event?e=eyJ2IjoiMS4xMiIsImF2IjozMDY1NzgzLCJhdCI6MTYzLCJidCI6MCwiY20iOjQ0MDE5MjQxOCwiY2giOjYzMTg0LCJjayI6e30sImNyIjo0ODE4NTUzNzUsImRpIjoiOWMxNGFhMGI3NWY4NDMxNTllMTAwYWQzNzA1NzQyYzMiLCJkaiI6MCwiaWkiOiIxZjU0MGM5NmQ1N2M0YmZjODFlZjRkNjhkMzFjNDVkOSIsImRtIjozLCJmYyI6NjU2NjgyNTQ5LCJmbCI6NjQzOTMxODIxLCJpcCI6IjM1LjIyMy4xOTguOTUiLCJudyI6MTE1MDAsInBjIjo1MDAwLCJvcCI6NTAwMCwibXAiOjUwMDAsImVjIjowLCJnbSI6MCwiZXAiOm51bGwsInByIjoyNDkzMTYsInJ0IjoxLCJycyI6NTAwLCJzYSI6IjU1Iiwic2IiOiJpLTA0MDI0ODg4ZDlkMWRjZWQ3Iiwic3AiOjI3MjI3Miwic3QiOjEyODcyOTYsInRyIjp0cnVlLCJ1ayI6IjNhZWRhMWMxLTZhYjItNDUwNy04Mzg5LTEwZTJmNDMxYjM5MSIsInRzIjoxNzI5MzU5MDU0OTI3LCJiZiI6dHJ1ZSwicG4iOiJyYlByb2R1Y3RVcGNzIiwiZ2MiOnRydWUsImdDIjp0cnVlLCJncyI6Im5vbmUiLCJkYyI6MSwidHoiOiJBbWVyaWNhL05ld19Zb3JrIiwiZXQiOjU5fQ&s=AAPAw-3SfZ0JMzjEGFSwt9L-2S4',
-    },
-    {
-        event: RMN_SPOT_EVENT.ADD_TO_CART,
-        url: 'https://dev.rmn.liquidcommerce.cloud/api/spots/event?e=eyJ2IjoiMS4xMiIsImF2IjozMDY1NzgzLCJhdCI6MTYzLCJidCI6MCwiY20iOjQ0MDE5MjQxOCwiY2giOjYzMTg0LCJjayI6e30sImNyIjo0ODE4NTUzNzUsImRpIjoiOWMxNGFhMGI3NWY4NDMxNTllMTAwYWQzNzA1NzQyYzMiLCJkaiI6MCwiaWkiOiIxZjU0MGM5NmQ1N2M0YmZjODFlZjRkNjhkMzFjNDVkOSIsImRtIjozLCJmYyI6NjU2NjgyNTQ5LCJmbCI6NjQzOTMxODIxLCJpcCI6IjM1LjIyMy4xOTguOTUiLCJudyI6MTE1MDAsInBjIjo1MDAwLCJvcCI6NTAwMCwibXAiOjUwMDAsImVjIjowLCJnbSI6MCwiZXAiOm51bGwsInByIjoyNDkzMTYsInJ0IjoxLCJycyI6NTAwLCJzYSI6IjU1Iiwic2IiOiJpLTA0MDI0ODg4ZDlkMWRjZWQ3Iiwic3AiOjI3MjI3Miwic3QiOjEyODcyOTYsInRyIjp0cnVlLCJ1ayI6IjNhZWRhMWMxLTZhYjItNDUwNy04Mzg5LTEwZTJmNDMxYjM5MSIsInRzIjoxNzI5MzU5MDU0OTI3LCJiZiI6dHJ1ZSwicG4iOiJyYlByb2R1Y3RVcGNzIiwiZ2MiOnRydWUsImdDIjp0cnVlLCJncyI6Im5vbmUiLCJkYyI6MSwidHoiOiJBbWVyaWNhL05ld19Zb3JrIiwiZXQiOjYwfQ&s=uzQFcjgL7m9XqUG8FvTPVN5YkZY',
-    },
-    {
-        event: RMN_SPOT_EVENT.ADD_TO_WISHLIST,
-        url: 'https://dev.rmn.liquidcommerce.cloud/api/spots/event?e=eyJ2IjoiMS4xMiIsImF2IjozMDY1NzgzLCJhdCI6MTYzLCJidCI6MCwiY20iOjQ0MDE5MjQxOCwiY2giOjYzMTg0LCJjayI6e30sImNyIjo0ODE4NTUzNzUsImRpIjoiOWMxNGFhMGI3NWY4NDMxNTllMTAwYWQzNzA1NzQyYzMiLCJkaiI6MCwiaWkiOiIxZjU0MGM5NmQ1N2M0YmZjODFlZjRkNjhkMzFjNDVkOSIsImRtIjozLCJmYyI6NjU2NjgyNTQ5LCJmbCI6NjQzOTMxODIxLCJpcCI6IjM1LjIyMy4xOTguOTUiLCJudyI6MTE1MDAsInBjIjo1MDAwLCJvcCI6NTAwMCwibXAiOjUwMDAsImVjIjowLCJnbSI6MCwiZXAiOm51bGwsInByIjoyNDkzMTYsInJ0IjoxLCJycyI6NTAwLCJzYSI6IjU1Iiwic2IiOiJpLTA0MDI0ODg4ZDlkMWRjZWQ3Iiwic3AiOjI3MjI3Miwic3QiOjEyODcyOTYsInRyIjp0cnVlLCJ1ayI6IjNhZWRhMWMxLTZhYjItNDUwNy04Mzg5LTEwZTJmNDMxYjM5MSIsInRzIjoxNzI5MzU5MDU0OTI3LCJiZiI6dHJ1ZSwicG4iOiJyYlByb2R1Y3RVcGNzIiwiZ2MiOnRydWUsImdDIjp0cnVlLCJncyI6Im5vbmUiLCJkYyI6MSwidHoiOiJBbWVyaWNhL05ld19Zb3JrIiwiZXQiOjYzfQ&s=m3ISU_iIy-OFtXrTKpI6cJAEC0k',
-    },
-    {
-        event: RMN_SPOT_EVENT.BUY_NOW,
-        url: 'https://dev.rmn.liquidcommerce.cloud/api/spots/event?e=eyJ2IjoiMS4xMiIsImF2IjozMDY1NzgzLCJhdCI6MTYzLCJidCI6MCwiY20iOjQ0MDE5MjQxOCwiY2giOjYzMTg0LCJjayI6e30sImNyIjo0ODE4NTUzNzUsImRpIjoiOWMxNGFhMGI3NWY4NDMxNTllMTAwYWQzNzA1NzQyYzMiLCJkaiI6MCwiaWkiOiIxZjU0MGM5NmQ1N2M0YmZjODFlZjRkNjhkMzFjNDVkOSIsImRtIjozLCJmYyI6NjU2NjgyNTQ5LCJmbCI6NjQzOTMxODIxLCJpcCI6IjM1LjIyMy4xOTguOTUiLCJudyI6MTE1MDAsInBjIjo1MDAwLCJvcCI6NTAwMCwibXAiOjUwMDAsImVjIjowLCJnbSI6MCwiZXAiOm51bGwsInByIjoyNDkzMTYsInJ0IjoxLCJycyI6NTAwLCJzYSI6IjU1Iiwic2IiOiJpLTA0MDI0ODg4ZDlkMWRjZWQ3Iiwic3AiOjI3MjI3Miwic3QiOjEyODcyOTYsInRyIjp0cnVlLCJ1ayI6IjNhZWRhMWMxLTZhYjItNDUwNy04Mzg5LTEwZTJmNDMxYjM5MSIsInRzIjoxNzI5MzU5MDU0OTI3LCJiZiI6dHJ1ZSwicG4iOiJyYlByb2R1Y3RVcGNzIiwiZ2MiOnRydWUsImdDIjp0cnVlLCJncyI6Im5vbmUiLCJkYyI6MSwidHoiOiJBbWVyaWNhL05ld19Zb3JrIiwiZXQiOjY5fQ&s=l6MOscQC-q-FkC2Ksd7w6jjySCQ',
-    },
-];
-const RB_SPOTS_SELECTION_EXAMPLE = {
-    rbHomepageHero: [
-        {
-            id: 'abc123',
-            spot: RMN_SPOT_TYPE.RB_HOMEPAGE_HERO_FULL_IMAGE,
-            variant: RMN_SPOT_TYPE.RB_HOMEPAGE_HERO_FULL_IMAGE,
-            width: 1140,
-            height: 640,
-            header: 'Premium Wine Collection',
-            description: 'Discover our exclusive selection of vintage wines',
-            ctaText: 'Shop Wines',
-            textColor: '#ffffff',
-            ctaTextColor: '#ffffff',
-            primaryImage: 'https://placehold.co/1140x640/png?text=Wine+Collection',
-            mobilePrimaryImage: 'https://placehold.co/640x640/png?text=Mobile+Wine',
-            events: SPOT_EVENTS_EXAMPLE,
-            productIds: [1, 2, 3],
-        },
-        {
-            id: 'jkl012',
-            spot: RMN_SPOT_TYPE.RB_HOMEPAGE_HERO_TWO_TILE,
-            variant: RMN_SPOT_TYPE.RB_HOMEPAGE_HERO_TWO_TILE,
-            width: 1140,
-            height: 640,
-            header: 'Whiskey Collection',
-            description: 'Premium whiskeys from around the world',
-            ctaText: 'Shop Whiskeys',
-            textColor: '#ffffff',
-            backgroundColor: '#2c1810',
-            ctaTextColor: '#2c1810',
-            primaryImage: 'https://placehold.co/1140x640/png?text=Whiskey',
-            mobilePrimaryImage: 'https://placehold.co/640x640/png?text=Mobile+Whiskey',
-            events: SPOT_EVENTS_EXAMPLE,
-            productIds: [10, 11],
-        },
-        {
-            id: 'stu901',
-            spot: RMN_SPOT_TYPE.RB_HOMEPAGE_HERO_THREE_TILE,
-            variant: RMN_SPOT_TYPE.RB_HOMEPAGE_HERO_THREE_TILE,
-            width: 1140,
-            height: 640,
-            header: 'Summer Cocktails',
-            description: 'Essential spirits for summer mixing',
-            ctaText: 'Mix It Up',
-            textColor: '#ffffff',
-            backgroundColor: '#4d3a0a',
-            ctaTextColor: '#4d3a0a',
-            primaryImage: 'https://placehold.co/1140x640/png?text=Cocktails',
-            secondaryImage: 'https://placehold.co/1140x640/png?text=Mixers',
-            mobilePrimaryImage: 'https://placehold.co/640x640/png?text=Mobile+Cocktails',
-            mobileSecondaryImage: 'https://placehold.co/640x320/png?text=Mobile+Mixers',
-            events: SPOT_EVENTS_EXAMPLE,
-            productIds: [16, 17, 18],
-        },
-        {
-            id: 'def456',
-            spot: RMN_SPOT_TYPE.RB_HOMEPAGE_HERO_FULL_IMAGE,
-            variant: RMN_SPOT_TYPE.RB_HOMEPAGE_HERO_FULL_IMAGE,
-            width: 1140,
-            height: 640,
-            header: 'Craft Beer Festival',
-            description: 'Local breweries and exclusive releases',
-            ctaText: 'Explore Beers',
-            textColor: '#ffffff',
-            ctaTextColor: '#ffffff',
-            primaryImage: 'https://placehold.co/1140x640/png?text=Beer+Festival',
-            mobilePrimaryImage: 'https://placehold.co/640x640/png?text=Mobile+Beer',
-            events: SPOT_EVENTS_EXAMPLE,
-            productIds: [4, 5, 6],
-        },
-        {
-            id: 'mno345',
-            spot: RMN_SPOT_TYPE.RB_HOMEPAGE_HERO_TWO_TILE,
-            variant: RMN_SPOT_TYPE.RB_HOMEPAGE_HERO_TWO_TILE,
-            width: 1140,
-            height: 640,
-            header: 'Champagne Selection',
-            description: 'Finest champagnes for every occasion',
-            ctaText: 'View Champagnes',
-            textColor: '#ffffff',
-            backgroundColor: '#1a1a1a',
-            ctaTextColor: '#1a1a1a',
-            primaryImage: 'https://placehold.co/1140x640/png?text=Champagne',
-            mobilePrimaryImage: 'https://placehold.co/640x640/png?text=Mobile+Champagne',
-            events: SPOT_EVENTS_EXAMPLE,
-            productIds: [12, 13],
-        },
-        {
-            id: 'vwx234',
-            spot: RMN_SPOT_TYPE.RB_HOMEPAGE_HERO_THREE_TILE,
-            variant: RMN_SPOT_TYPE.RB_HOMEPAGE_HERO_THREE_TILE,
-            width: 1140,
-            height: 640,
-            header: 'Wine Regions',
-            description: 'Explore wines from top regions',
-            ctaText: 'Tour Regions',
-            textColor: '#ffffff',
-            backgroundColor: '#4d0a0a',
-            ctaTextColor: '#4d0a0a',
-            primaryImage: 'https://placehold.co/1140x640/png?text=Wine+Regions',
-            secondaryImage: 'https://placehold.co/1140x640/png?text=Vineyards',
-            mobilePrimaryImage: 'https://placehold.co/640x640/png?text=Mobile+Regions',
-            mobileSecondaryImage: 'https://placehold.co/640x320/png?text=Mobile+Vineyards',
-            events: SPOT_EVENTS_EXAMPLE,
-            productIds: [19, 20, 21],
-        },
-        {
-            id: 'ghi789',
-            spot: RMN_SPOT_TYPE.RB_HOMEPAGE_HERO_FULL_IMAGE,
-            variant: RMN_SPOT_TYPE.RB_HOMEPAGE_HERO_FULL_IMAGE,
-            width: 1140,
-            height: 640,
-            header: 'Rare Spirits',
-            description: 'Limited edition spirits collection',
-            ctaText: 'View Collection',
-            textColor: '#ffffff',
-            ctaTextColor: '#ffffff',
-            primaryImage: 'https://placehold.co/1140x640/png?text=Rare+Spirits',
-            mobilePrimaryImage: 'https://placehold.co/640x640/png?text=Mobile+Spirits',
-            events: SPOT_EVENTS_EXAMPLE,
-            productIds: [7, 8, 9],
-        },
-        {
-            id: 'pqr678',
-            spot: RMN_SPOT_TYPE.RB_HOMEPAGE_HERO_TWO_TILE,
-            variant: RMN_SPOT_TYPE.RB_HOMEPAGE_HERO_TWO_TILE,
-            width: 1140,
-            height: 640,
-            header: 'Gin Collection',
-            description: 'Artisanal gins and botanicals',
-            ctaText: 'Explore Gins',
-            textColor: '#ffffff',
-            backgroundColor: '#0a4d4d',
-            ctaTextColor: '#0a4d4d',
-            primaryImage: 'https://placehold.co/1140x640/png?text=Gin',
-            mobilePrimaryImage: 'https://placehold.co/640x640/png?text=Mobile+Gin',
-            events: SPOT_EVENTS_EXAMPLE,
-            productIds: [14, 15],
-        },
-        {
-            id: 'yz5678',
-            spot: RMN_SPOT_TYPE.RB_HOMEPAGE_HERO_THREE_TILE,
-            variant: RMN_SPOT_TYPE.RB_HOMEPAGE_HERO_THREE_TILE,
-            width: 1140,
-            height: 640,
-            header: 'Tequila Collection',
-            description: 'Premium tequilas and mezcals',
-            ctaText: 'Shop Tequila',
-            textColor: '#ffffff',
-            backgroundColor: '#0a4d2b',
-            ctaTextColor: '#0a4d2b',
-            primaryImage: 'https://placehold.co/1140x640/png?text=Tequila',
-            secondaryImage: 'https://placehold.co/1140x640/png?text=Mezcal',
-            mobilePrimaryImage: 'https://placehold.co/640x640/png?text=Mobile+Tequila',
-            mobileSecondaryImage: 'https://placehold.co/640x320/png?text=Mobile+Mezcal',
-            events: SPOT_EVENTS_EXAMPLE,
-            productIds: [22, 23, 24],
-        },
-    ],
-    rbHomepageHeroFullImage: [
-        {
-            id: 'hjk567',
-            spot: RMN_SPOT_TYPE.RB_HOMEPAGE_HERO_FULL_IMAGE,
-            variant: RMN_SPOT_TYPE.RB_HOMEPAGE_HERO_FULL_IMAGE,
-            width: 1140,
-            height: 640,
-            header: 'Holiday Gift Guide',
-            description: 'Perfect spirits for every occasion',
-            ctaText: 'Shop Gifts',
-            textColor: '#ffffff',
-            ctaTextColor: '#ffffff',
-            primaryImage: 'https://placehold.co/1140x640/png?text=Gift+Guide',
-            mobilePrimaryImage: 'https://placehold.co/640x640/png?text=Mobile+Gifts',
-            events: SPOT_EVENTS_EXAMPLE,
-            productIds: [25, 26],
-        },
-        {
-            id: 'qwe890',
-            spot: RMN_SPOT_TYPE.RB_HOMEPAGE_HERO_FULL_IMAGE,
-            variant: RMN_SPOT_TYPE.RB_HOMEPAGE_HERO_FULL_IMAGE,
-            width: 1140,
-            height: 640,
-            header: 'Summer Wine Festival',
-            description: 'Refreshing wines for summer',
-            ctaText: 'Shop Festival',
-            textColor: '#ffffff',
-            ctaTextColor: '#ffffff',
-            primaryImage: 'https://placehold.co/1140x640/png?text=Wine+Festival',
-            mobilePrimaryImage: 'https://placehold.co/640x640/png?text=Mobile+Festival',
-            events: SPOT_EVENTS_EXAMPLE,
-            productIds: [27, 28],
-        },
-    ],
-    rbHomepageHeroTwoTile: [
-        {
-            id: 'iop987',
-            spot: RMN_SPOT_TYPE.RB_HOMEPAGE_HERO_TWO_TILE,
-            variant: RMN_SPOT_TYPE.RB_HOMEPAGE_HERO_TWO_TILE,
-            width: 1140,
-            height: 640,
-            header: 'Bourbon Selection',
-            description: "Kentucky's finest bourbons",
-            ctaText: 'Shop Bourbon',
-            textColor: '#ffffff',
-            backgroundColor: '#2c1810',
-            ctaTextColor: '#2c1810',
-            primaryImage: 'https://placehold.co/1140x640/png?text=Bourbon',
-            mobilePrimaryImage: 'https://placehold.co/640x640/png?text=Mobile+Bourbon',
-            events: SPOT_EVENTS_EXAMPLE,
-            productIds: [29, 30],
-        },
-        {
-            id: 'lkj012',
-            spot: RMN_SPOT_TYPE.RB_HOMEPAGE_HERO_TWO_TILE,
-            variant: RMN_SPOT_TYPE.RB_HOMEPAGE_HERO_TWO_TILE,
-            width: 1140,
-            height: 640,
-            header: 'Vodka Collection',
-            description: 'Premium vodkas from around the world',
-            ctaText: 'Shop Vodka',
-            textColor: '#ffffff',
-            backgroundColor: '#1a1a1a',
-            ctaTextColor: '#1a1a1a',
-            primaryImage: 'https://placehold.co/1140x640/png?text=Vodka',
-            mobilePrimaryImage: 'https://placehold.co/640x640/png?text=Mobile+Vodka',
-            events: SPOT_EVENTS_EXAMPLE,
-            productIds: [31, 32],
-        },
-    ],
-    rbHomepageHeroThreeTile: [
-        {
-            id: 'bnm345',
-            spot: RMN_SPOT_TYPE.RB_HOMEPAGE_HERO_THREE_TILE,
-            variant: RMN_SPOT_TYPE.RB_HOMEPAGE_HERO_THREE_TILE,
-            width: 1140,
-            height: 640,
-            header: 'Rum Collection',
-            description: 'Caribbean and craft rums',
-            ctaText: 'Shop Rum',
-            textColor: '#ffffff',
-            backgroundColor: '#4d3a0a',
-            ctaTextColor: '#4d3a0a',
-            primaryImage: 'https://placehold.co/1140x640/png?text=Rum',
-            secondaryImage: 'https://placehold.co/1140x640/png?text=Craft+Rum',
-            mobilePrimaryImage: 'https://placehold.co/640x640/png?text=Mobile+Rum',
-            mobileSecondaryImage: 'https://placehold.co/640x320/png?text=Mobile+Craft',
-            events: SPOT_EVENTS_EXAMPLE,
-            productIds: [33, 34],
-        },
-        {
-            id: 'fgh678',
-            spot: RMN_SPOT_TYPE.RB_HOMEPAGE_HERO_THREE_TILE,
-            variant: RMN_SPOT_TYPE.RB_HOMEPAGE_HERO_THREE_TILE,
-            width: 1140,
-            height: 640,
-            header: 'Scotch Selection',
-            description: 'Single malts and blends',
-            ctaText: 'Shop Scotch',
-            textColor: '#ffffff',
-            backgroundColor: '#4d0a0a',
-            ctaTextColor: '#4d0a0a',
-            primaryImage: 'https://placehold.co/1140x640/png?text=Scotch',
-            secondaryImage: 'https://placehold.co/1140x640/png?text=Single+Malts',
-            mobilePrimaryImage: 'https://placehold.co/640x640/png?text=Mobile+Scotch',
-            mobileSecondaryImage: 'https://placehold.co/640x320/png?text=Mobile+Malts',
-            events: SPOT_EVENTS_EXAMPLE,
-            productIds: [35, 36],
-        },
-    ],
-    rbLargeCategoryImageTout: [
-        {
-            id: 'cde567',
-            spot: RMN_SPOT_TYPE.RB_LARGE_CATEGORY_IMAGE_TOUT,
-            variant: RMN_SPOT_TYPE.RB_LARGE_CATEGORY_IMAGE_TOUT,
-            width: 468,
-            height: 410,
-            header: 'Rare & Limited Edition',
-            description: 'Discover our collection of hard-to-find and limited release spirits.',
-            textColor: '#ffffff',
-            ctaTextColor: '#ffffff',
-            primaryImage: 'https://placehold.co/468x410/png?text=Rare+Spirits',
-            mobilePrimaryImage: 'https://placehold.co/468x410/png?text=Mobile+Rare+Spirits',
-            ctaText: 'Shop Rare Spirits',
-            events: SPOT_EVENTS_EXAMPLE,
-            productIds: [37, 38, 39, 40, 41],
-        },
-        {
-            id: 'efg789',
-            spot: RMN_SPOT_TYPE.RB_LARGE_CATEGORY_IMAGE_TOUT,
-            variant: RMN_SPOT_TYPE.RB_LARGE_CATEGORY_IMAGE_TOUT,
-            width: 468,
-            height: 410,
-            header: 'Vintage Champagnes',
-            description: 'Explore our prestigious collection of aged champagnes.',
-            textColor: '#ffffff',
-            ctaTextColor: '#ffffff',
-            primaryImage: 'https://placehold.co/468x410/png?text=Vintage+Champagne',
-            mobilePrimaryImage: 'https://placehold.co/468x410/png?text=Mobile+Champagne',
-            ctaText: 'View Collection',
-            events: SPOT_EVENTS_EXAMPLE,
-            productIds: [42, 43, 44, 45, 46],
-        },
-        {
-            id: 'ghi012',
-            spot: RMN_SPOT_TYPE.RB_LARGE_CATEGORY_IMAGE_TOUT,
-            variant: RMN_SPOT_TYPE.RB_LARGE_CATEGORY_IMAGE_TOUT,
-            width: 468,
-            height: 410,
-            header: 'Small Batch Bourbon',
-            description: 'Hand-selected premium bourbon from craft distilleries.',
-            textColor: '#ffffff',
-            ctaTextColor: '#ffffff',
-            primaryImage: 'https://placehold.co/468x410/png?text=Craft+Bourbon',
-            mobilePrimaryImage: 'https://placehold.co/468x410/png?text=Mobile+Bourbon',
-            ctaText: 'Explore Bourbon',
-            events: SPOT_EVENTS_EXAMPLE,
-            productIds: [47, 48, 49, 50, 51],
-        },
-    ],
-    rbSmallDiscoverTout: [
-        {
-            id: 'jkl345',
-            spot: RMN_SPOT_TYPE.RB_SMALL_DISCOVER_TOUT,
-            variant: RMN_SPOT_TYPE.RB_SMALL_DISCOVER_TOUT,
-            width: 224,
-            height: 378,
-            header: 'Château Margaux 2015 Bordeaux',
-            textColor: '#ffffff',
-            primaryImage: 'https://placehold.co/224x378/png?text=Château+Margaux',
-            mobilePrimaryImage: 'https://placehold.co/224x378/png?text=Mobile+Château+Margaux',
-            events: SPOT_EVENTS_EXAMPLE,
-            productIds: [52, 53, 54, 55, 56],
-        },
-        {
-            id: 'lmn678',
-            spot: RMN_SPOT_TYPE.RB_SMALL_DISCOVER_TOUT,
-            variant: RMN_SPOT_TYPE.RB_SMALL_DISCOVER_TOUT,
-            width: 224,
-            height: 378,
-            header: 'Macallan 25 Year',
-            textColor: '#ffffff',
-            primaryImage: 'https://placehold.co/224x378/png?text=Macallan+25',
-            mobilePrimaryImage: 'https://placehold.co/224x378/png?text=Mobile+Macallan',
-            events: SPOT_EVENTS_EXAMPLE,
-            productIds: [57, 58, 59, 60, 61],
-        },
-        {
-            id: 'nop901',
-            spot: RMN_SPOT_TYPE.RB_SMALL_DISCOVER_TOUT,
-            variant: RMN_SPOT_TYPE.RB_SMALL_DISCOVER_TOUT,
-            width: 224,
-            height: 378,
-            header: 'Louis XIII Cognac',
-            textColor: '#ffffff',
-            primaryImage: 'https://placehold.co/224x378/png?text=Louis+XIII',
-            mobilePrimaryImage: 'https://placehold.co/224x378/png?text=Mobile+Louis+XIII',
-            events: SPOT_EVENTS_EXAMPLE,
-            productIds: [62, 63, 64, 65, 66],
-        },
-    ],
-    rbSmallCategoryImageTout: [
-        {
-            id: 'qrs234',
-            spot: RMN_SPOT_TYPE.RB_SMALL_CATEGORY_IMAGE_TOUT,
-            variant: RMN_SPOT_TYPE.RB_SMALL_CATEGORY_IMAGE_TOUT,
-            width: 224,
-            height: 410,
-            header: 'Japanese Sake',
-            textColor: '#ffffff',
-            primaryImage: 'https://placehold.co/224x410/png?text=Japanese+Sake',
-            mobilePrimaryImage: 'https://placehold.co/224x410/png?text=Mobile+Japanese+Sake',
-            events: SPOT_EVENTS_EXAMPLE,
-            productIds: [67, 68, 69, 70, 71],
-        },
-        {
-            id: 'stu567',
-            spot: RMN_SPOT_TYPE.RB_SMALL_CATEGORY_IMAGE_TOUT,
-            variant: RMN_SPOT_TYPE.RB_SMALL_CATEGORY_IMAGE_TOUT,
-            width: 224,
-            height: 410,
-            header: 'Craft Vermouth',
-            textColor: '#ffffff',
-            primaryImage: 'https://placehold.co/224x410/png?text=Craft+Vermouth',
-            mobilePrimaryImage: 'https://placehold.co/224x410/png?text=Mobile+Vermouth',
-            events: SPOT_EVENTS_EXAMPLE,
-            productIds: [72, 73, 74, 75, 76],
-        },
-        {
-            id: 'vwx890',
-            spot: RMN_SPOT_TYPE.RB_SMALL_CATEGORY_IMAGE_TOUT,
-            variant: RMN_SPOT_TYPE.RB_SMALL_CATEGORY_IMAGE_TOUT,
-            width: 224,
-            height: 410,
-            header: 'Premium Mezcal',
-            textColor: '#ffffff',
-            primaryImage: 'https://placehold.co/224x410/png?text=Premium+Mezcal',
-            mobilePrimaryImage: 'https://placehold.co/224x410/png?text=Mobile+Mezcal',
-            events: SPOT_EVENTS_EXAMPLE,
-            productIds: [77, 78, 79, 80, 81],
-        },
-    ],
-    rbCollectionBannerWithoutTextBlock: [
-        {
-            id: 'yz1234',
-            spot: RMN_SPOT_TYPE.RB_COLLECTION_BANNER_WITHOUT_TEXT_BLOCK,
-            variant: RMN_SPOT_TYPE.RB_COLLECTION_BANNER_WITHOUT_TEXT_BLOCK,
-            width: 887,
-            height: 344,
-            primaryImage: 'https://placehold.co/887x344/png?text=Summer+Cocktails',
-            mobilePrimaryImage: 'https://placehold.co/887x344/png?text=Mobile+Summer+Cocktails',
-            events: SPOT_EVENTS_EXAMPLE,
-            productIds: [82, 83, 84, 85, 86],
-        },
-        {
-            id: 'abc567',
-            spot: RMN_SPOT_TYPE.RB_COLLECTION_BANNER_WITHOUT_TEXT_BLOCK,
-            variant: RMN_SPOT_TYPE.RB_COLLECTION_BANNER_WITHOUT_TEXT_BLOCK,
-            width: 887,
-            height: 344,
-            primaryImage: 'https://placehold.co/887x344/png?text=Holiday+Spirits',
-            mobilePrimaryImage: 'https://placehold.co/887x344/png?text=Mobile+Holiday+Spirits',
-            events: SPOT_EVENTS_EXAMPLE,
-            productIds: [87, 88, 89, 90, 91],
-        },
-        {
-            id: 'def901',
-            spot: RMN_SPOT_TYPE.RB_COLLECTION_BANNER_WITHOUT_TEXT_BLOCK,
-            variant: RMN_SPOT_TYPE.RB_COLLECTION_BANNER_WITHOUT_TEXT_BLOCK,
-            width: 887,
-            height: 344,
-            primaryImage: 'https://placehold.co/887x344/png?text=Wine+Essentials',
-            mobilePrimaryImage: 'https://placehold.co/887x344/png?text=Mobile+Wine+Essentials',
-            events: SPOT_EVENTS_EXAMPLE,
-            productIds: [92, 93, 94, 95, 96],
-        },
-    ],
-    rbNavigationBanner: [
-        {
-            id: 'ghi234',
-            spot: RMN_SPOT_TYPE.RB_NAVIGATION_BANNER,
-            variant: RMN_SPOT_TYPE.RB_NAVIGATION_BANNER,
-            width: 440,
-            height: 220,
-            header: 'Explore Tequilas',
-            textColor: '#ffffff',
-            primaryImage: 'https://placehold.co/440x220/png?text=Tequila+Collection',
-            mobilePrimaryImage: 'https://placehold.co/440x220/png?text=Mobile+Tequila+Collection',
-            events: SPOT_EVENTS_EXAMPLE,
-            productIds: [97, 98, 99, 100, 101],
-        },
-        {
-            id: 'jkl678',
-            spot: RMN_SPOT_TYPE.RB_NAVIGATION_BANNER,
-            variant: RMN_SPOT_TYPE.RB_NAVIGATION_BANNER,
-            width: 440,
-            height: 220,
-            header: 'Craft Gin Selection',
-            textColor: '#ffffff',
-            primaryImage: 'https://placehold.co/440x220/png?text=Gin+Selection',
-            mobilePrimaryImage: 'https://placehold.co/440x220/png?text=Mobile+Gin+Selection',
-            events: SPOT_EVENTS_EXAMPLE,
-            productIds: [102, 103, 104, 105, 106],
-        },
-        {
-            id: 'mno012',
-            spot: RMN_SPOT_TYPE.RB_NAVIGATION_BANNER,
-            variant: RMN_SPOT_TYPE.RB_NAVIGATION_BANNER,
-            width: 440,
-            height: 220,
-            header: 'Premium Vodka',
-            textColor: '#ffffff',
-            primaryImage: 'https://placehold.co/440x220/png?text=Vodka+Premium',
-            mobilePrimaryImage: 'https://placehold.co/440x220/png?text=Mobile+Vodka+Premium',
-            events: SPOT_EVENTS_EXAMPLE,
-            productIds: [107, 108, 109, 110, 111],
-        },
-    ],
-};
-const IAB_SPOTS_SELECTION_EXAMPLE = {
-    banner: [],
-    billboard: [
-        {
-            id: 'kol567',
-            spot: RMN_SPOT_TYPE.BILLBOARD,
-            variant: `${RMN_SPOT_TYPE.BILLBOARD}V2`,
-            width: 1140,
-            height: 640,
-            header: 'Holiday Gift Guide',
-            description: 'Perfect spirits for every occasion',
-            ctaText: 'Shop Gifts',
-            textColor: '#ffffff',
-            ctaTextColor: '#ffffff',
-            primaryImage: 'https://placehold.co/1140x640/png?text=Gift+Guide',
-            mobilePrimaryImage: 'https://placehold.co/640x640/png?text=Mobile+Gifts',
-            events: SPOT_EVENTS_EXAMPLE,
-            productIds: [25, 26],
-        },
-        {
-            id: 'hpm390',
-            spot: RMN_SPOT_TYPE.BILLBOARD,
-            variant: `${RMN_SPOT_TYPE.BILLBOARD}V2`,
-            width: 1140,
-            height: 640,
-            header: 'Summer Wine Festival',
-            description: 'Refreshing wines for summer',
-            ctaText: 'Shop Festival',
-            textColor: '#ffffff',
-            ctaTextColor: '#ffffff',
-            primaryImage: 'https://placehold.co/1140x640/png?text=Wine+Festival',
-            mobilePrimaryImage: 'https://placehold.co/640x640/png?text=Mobile+Festival',
-            events: SPOT_EVENTS_EXAMPLE,
-            productIds: [27, 28],
-        },
-    ],
-    button2: [],
-    featurePhoneLargeBanner: [],
-    featurePhoneMediumBanner: [],
-    featurePhoneSmallBanner: [],
-    halfPage: [],
-    inText: [],
-    largeLeaderboard: [],
-    largeRectangle: [],
-    leaderboard: [],
-    mediumRectangle: [],
-    microBar: [],
-    mobilePhoneInterstitial1: [],
-    mobilePhoneInterstitial2: [],
-    mobilePhoneInterstitial3: [],
-    popUp: [],
-    portrait: [],
-    rbProductUpcs: [],
-    skyscraper: [],
-    smallRectangle: [],
-    smallSquare: [],
-    smartphoneBanner1: [],
-    smartphoneBanner2: [],
-    square: [],
-    verticalBanner: [],
-    verticalRectangle: [],
-    wideSkyscraper: [],
-};
-
 const REQUEST_CLOUD_PARTNER_SITE = 'X-Liquid-Partner-Site';
 const REQUEST_CLOUD_PROTECTED_KEY = 'X-Liquid-Protected';
 const REQUEST_CLOUD_PROTECTED_TIMESTAMP = 'X-Liquid-Timestamp';
@@ -16260,6 +15692,7 @@ class LocalStorageService {
             console.warn('Local storage is not supported in this environment');
             return;
         }
+        this.setUserId();
         this.spots = new Map();
         // Sync local storage with the current state
         this.syncLocalStorage();
@@ -16346,6 +15779,45 @@ class LocalStorageService {
         });
         this.updateLocalStorage();
     }
+    // ======================== Utility functions ======================== //
+    getUserId() {
+        return LocalStorageService.localStorageKey.replace(`${LocalStorageService.localStorageKeyPrefix}_`, '');
+    }
+    /**
+     * Sets the user ID in the local storage.
+     * If no existing key is found,
+     * it generates a new unique ID and sets it as the local storage key.
+     */
+    setUserId() {
+        const prefix = LocalStorageService.localStorageKeyPrefix;
+        const existingKeys = Object.keys(window.localStorage).filter((key) => key.startsWith(prefix));
+        const setNewKey = () => {
+            const uniqueId = UniqueIdGenerator.generate();
+            const newLocalStorageKey = `${prefix}_${uniqueId}`;
+            window.localStorage.setItem(newLocalStorageKey, '');
+            LocalStorageService.localStorageKey = newLocalStorageKey;
+        };
+        if (existingKeys.length === 0) {
+            setNewKey();
+        }
+        else {
+            const validKey = existingKeys.find((key) => UniqueIdGenerator.isValid(key.replace(`${prefix}_`, '')));
+            // Delete all other keys except the valid one
+            existingKeys.forEach((key) => {
+                if (key !== validKey) {
+                    window.localStorage.removeItem(key);
+                }
+            });
+            if (validKey) {
+                // Found a valid key, assign it to localStorageKey
+                LocalStorageService.localStorageKey = validKey;
+            }
+            else {
+                // No valid key found, generate a new key
+                setNewKey();
+            }
+        }
+    }
     mapToObject(map) {
         return Object.fromEntries(map);
     }
@@ -16399,7 +15871,8 @@ class LocalStorageService {
         return atob(data);
     }
 }
-LocalStorageService.localStorageKey = 'lc_rmn';
+LocalStorageService.localStorageKeyPrefix = 'lc_rmn';
+LocalStorageService.localStorageKey = '';
 LocalStorageService.spotExpirationTime = 1000 * 60 * 60 * 24 * 7; // 7 days
 LocalStorageService.encryptData = true;
 
@@ -18838,651 +18311,1319 @@ const STYLES$3 = ({ textColor = '#ffffff', ctaTextColor = textColor, ctaBorderCo
           font-size: 28px;
         }
 
-        .${prefix}__description {
-          font-size: 14px;
-        }
+        .${prefix}__description {
+          font-size: 14px;
+        }
+
+        .${prefix}__cta-button {
+          font-size: 13px;
+        }
+      }
+
+      @container (min-width: 1280px) {
+        .${prefix}__cta-button {
+          font-size: 14px;
+        }
+      }
+    </style>
+  `;
+};
+function rbLargeCategoryImageToutTemplate(spot, config) {
+    const { prefix = '' } = config;
+    return `
+    ${GFONT_PRECONNECT}
+    ${GFONT_SOURCE_SANS_3}
+    ${GFONT_CORMORANT}
+    ${STYLES$3(spot, config)}
+    <div class="${prefix}">
+      <div class="${prefix}__text">
+        ${spot.header ? `<h2 class="${prefix}__header">${spot.header}</h2>` : ''}
+        ${spot.description ? `<p class="${prefix}__description">${spot.description}</p>` : ''}
+        ${spot.ctaText ? `<span class="${prefix}__cta-button">${spot.ctaText}</span>` : ''}
+      </div>
+    </div>
+  `;
+}
+
+const STYLES$2 = ({ textColor = '#ffffff', primaryImage, mobilePrimaryImage = primaryImage }, { prefix, overlay }) => {
+    const linearGradient = generateGradientColor(overlay, 'rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 30%');
+    return `
+  <style>
+    .${prefix} {
+      width: 100%;
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      justify-content: flex-end;
+      border-radius: 5px;
+      overflow: hidden;
+      cursor: pointer;
+      background-image: linear-gradient(to top, ${linearGradient}), url("${mobilePrimaryImage}");
+      background-size: cover;
+      background-position: center;
+      background-repeat: no-repeat;
+      position: relative;
+    }
+
+    .${prefix}__header {
+      font-size: 16px;
+      color: ${textColor};
+      line-height: 20px;
+      font-weight: 400;
+      font-family: "Source Sans 3", system-ui;
+      font-style: normal;
+      margin: 0;
+      padding: 15px 10%;
+    }
+
+    @container (min-width: 640px) {
+      .${prefix} {
+        background-image: linear-gradient(to top, ${linearGradient}), url("${primaryImage}");
+      }
+    }
+
+    @container (min-width: 768px) {
+      .${prefix}__header {
+        font-size: 22px;
+      }
+    }
+
+    @container (min-width: 1024px) {
+      .${prefix}__header {
+        font-size: 24px;
+      }
+    }
+
+    @container (min-width: 1280px) {
+      .${prefix}__header {
+        font-size: 28px;
+      }
+    }
+  </style>
+`;
+};
+function rbNavigationBannerTemplate(spot, config) {
+    const { prefix = '' } = config;
+    return `
+    ${GFONT_PRECONNECT}
+    ${GFONT_SOURCE_SANS_3}
+    ${STYLES$2(spot, config)}
+    <div class="${prefix}">
+        ${spot.header ? `<h2 class="${prefix}__header">${spot.header}</h2>` : ''}
+    </div>
+  `;
+}
+
+const STYLES$1 = ({ textColor = '#ffffff', primaryImage, mobilePrimaryImage = primaryImage }, { prefix, overlay }) => {
+    const linearGradient = generateGradientColor(overlay, 'rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 30%');
+    return `
+    <style>
+      .${prefix} {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        justify-content: flex-end;
+        background-image: linear-gradient(to top, ${linearGradient}), url("${mobilePrimaryImage}");
+        background-size: cover;
+        background-repeat: no-repeat;
+        background-position: center;
+        border-radius: 5px;
+        overflow: hidden;
+        cursor: pointer;
+        position: relative;
+      }
+
+      .${prefix}__header {
+        font-size: 12px;
+        color: ${textColor};
+        line-height: 16px;
+        font-family: "Source Sans 3", system-ui;
+        font-style: normal;
+        font-weight: 400;
+        margin: 0;
+        padding: 10px;
+      }
+
+      @container (min-width: 640px) {
+        .${prefix} {
+          background-image: linear-gradient(to top, ${linearGradient}), url("${primaryImage}");
+        }
+      }
+    </style>
+  `;
+};
+function rbSmallCategoryImageToutTemplate(spot, config) {
+    const { prefix = '' } = config;
+    return `
+    ${GFONT_PRECONNECT}
+    ${GFONT_CORMORANT}
+    ${STYLES$1(spot, config)}
+    <div class="${prefix}">
+      ${spot.header ? `<h2 class="${prefix}__header">${spot.header}</h2>` : ''}
+    </div>
+  `;
+}
+
+const STYLES = ({ textColor = '#000000', backgroundColor = 'transparent', primaryImage, mobilePrimaryImage = primaryImage, }, { prefix }) => `
+  <style>
+    .${prefix} {
+      width: 100%;
+      height: 100%;
+      background-color: ${backgroundColor};
+      cursor: pointer;
+      display: flex;
+      flex-direction: column;
+      border-radius: 5px;
+    }
+
+    .${prefix}__image {
+      width: 100%;
+      height: 100%;
+      background-image: url("${mobilePrimaryImage}");
+      background-size: cover;
+      background-repeat: no-repeat;
+      background-position: center;
+      border-radius: 5px;
+    }
+
+    .${prefix}__text {
+      text-align: left;
+      display: flex;
+      flex-direction: row;
+      align-items: flex-start;
+      justify-content: flex-start;
+      width: 100%;
+      height: fit-content;
+      position: relative;
+    }
 
-        .${prefix}__cta-button {
-          font-size: 13px;
-        }
-      }
+    .${prefix}__header {
+      font-size: 12px;
+      color: ${textColor};
+      padding-top: 5px;
+      line-height: 16px;
+      font-family: "Source Sans 3", system-ui;
+      font-style: normal;
+      font-weight: 400;
+      margin: 0;
+    }
 
-      @container (min-width: 1280px) {
-        .${prefix}__cta-button {
-          font-size: 14px;
-        }
+    @container (min-width: 640px) {
+      .${prefix}__image {
+        background-image: url("${primaryImage}");
       }
-    </style>
-  `;
-};
-function rbLargeCategoryImageToutTemplate(spot, config) {
+    }
+  </style>
+`;
+function rbSmallDiscoverToutTemplate(spot, config) {
     const { prefix = '' } = config;
     return `
     ${GFONT_PRECONNECT}
-    ${GFONT_SOURCE_SANS_3}
     ${GFONT_CORMORANT}
-    ${STYLES$3(spot, config)}
+    ${STYLES(spot, config)}
     <div class="${prefix}">
+      <div class="${prefix}__image"></div>
       <div class="${prefix}__text">
         ${spot.header ? `<h2 class="${prefix}__header">${spot.header}</h2>` : ''}
-        ${spot.description ? `<p class="${prefix}__description">${spot.description}</p>` : ''}
-        ${spot.ctaText ? `<span class="${prefix}__cta-button">${spot.ctaText}</span>` : ''}
       </div>
     </div>
   `;
 }
 
-const STYLES$2 = ({ textColor = '#ffffff', primaryImage, mobilePrimaryImage = primaryImage }, { prefix, overlay }) => {
-    const linearGradient = generateGradientColor(overlay, 'rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 30%');
-    return `
-  <style>
-    .${prefix} {
-      width: 100%;
-      height: 100%;
-      display: flex;
-      flex-direction: column;
-      justify-content: flex-end;
-      border-radius: 5px;
-      overflow: hidden;
-      cursor: pointer;
-      background-image: linear-gradient(to top, ${linearGradient}), url("${mobilePrimaryImage}");
-      background-size: cover;
-      background-position: center;
-      background-repeat: no-repeat;
-      position: relative;
+/**
+ * Returns the HTML element for the given spot.
+ *
+ * @param {ISpot} spot - The spot object.
+ * @param {ISpotTemplateConfig} config - The spot template configuration.
+ *
+ * @return {HTMLElement | null} - The HTML element for the given spot or null if the spot template is not found.
+ */
+const SPOT_TEMPLATE_HTML_ELEMENT = (spot, config) => {
+    const templates = {
+        // Reserve Bar Spot Templates
+        [RMN_SPOT_TYPE.RB_HOMEPAGE_HERO_THREE_TILE]: {
+            rbHomepageHeroThreeTile: rbHomepageHeroThreeTileTemplate,
+        },
+        [RMN_SPOT_TYPE.RB_HOMEPAGE_HERO_TWO_TILE]: {
+            rbHomepageHeroTwoTile: rbHomepageHeroTwoTileTemplate,
+        },
+        [RMN_SPOT_TYPE.RB_HOMEPAGE_HERO_FULL_IMAGE]: {
+            rbHomepageHeroFullImage: rbHomepageHeroFullImageTemplate,
+        },
+        [RMN_SPOT_TYPE.RB_LARGE_CATEGORY_IMAGE_TOUT]: {
+            rbLargeCategoryImageTout: rbLargeCategoryImageToutTemplate,
+        },
+        [RMN_SPOT_TYPE.RB_SMALL_DISCOVER_TOUT]: {
+            rbSmallDiscoverTout: rbSmallDiscoverToutTemplate,
+        },
+        [RMN_SPOT_TYPE.RB_SMALL_CATEGORY_IMAGE_TOUT]: {
+            rbSmallCategoryImageTout: rbSmallCategoryImageToutTemplate,
+        },
+        [RMN_SPOT_TYPE.RB_COLLECTION_BANNER_WITHOUT_TEXT_BLOCK]: {
+            rbCollectionBannerWithoutTextBlock: rbCollectionBannerWithoutTextBlockTemplate,
+        },
+        [RMN_SPOT_TYPE.RB_NAVIGATION_BANNER]: {
+            rbNavigationBanner: rbNavigationBannerTemplate,
+        },
+        [RMN_SPOT_TYPE.RB_PRODUCT_UPCS]: {
+            rbProductUpcs: () => '', // No template for this spot type, it will be handled by ReserveBar App.
+        },
+        // IAB Standard Spot Templates
+        [RMN_SPOT_TYPE.BILLBOARD]: {
+            billboardV1: billboardV1Template,
+            billboardV2: billboardV2Template,
+            billboardV3: billboardV3Template,
+        },
+        [RMN_SPOT_TYPE.LARGE_RECTANGLE]: {
+            largeRectangleV1: largeRectangleV1Template,
+        },
+        [RMN_SPOT_TYPE.VERTICAL_RECTANGLE]: {
+            verticalRectangleV1: verticalRectangleV1Template,
+        },
+        [RMN_SPOT_TYPE.SQUARE]: {
+            squareV1: squareV1Template,
+            squareV2: squareV2Template,
+        },
+        [RMN_SPOT_TYPE.LARGE_LEADERBOARD]: {
+            largeLeaderboardV1: largeLeaderboardV1Template,
+            largeLeaderboardV2: largeLeaderboardV2Template,
+        },
+        [RMN_SPOT_TYPE.WIDE_SKYSCRAPER]: {
+            wideSkyscraperV1: wideSkyscraperV1Template,
+        },
+        [RMN_SPOT_TYPE.IN_TEXT]: {
+            inTextV1: inTextV1Template,
+        },
+    };
+    const spotVariants = templates[spot.spot];
+    if (!spotVariants) {
+        return null;
+    }
+    const variantTemplate = spotVariants[spot.variant];
+    if (!variantTemplate) {
+        return null;
+    }
+    // Generate a highly unique prefix to avoid conflicts with other elements.
+    const prefix = 's' + UniqueIdGenerator.generate().toLowerCase();
+    const spotHtmlString = variantTemplate(spot, { ...config, prefix });
+    return spotHtmlStringToElement(spotHtmlString);
+};
+
+// For the moment, we will only focus on sites that use Google Analytics,
+// but we will add support for other analytics tools in the future.
+var AnalyticsTool;
+(function (AnalyticsTool) {
+    AnalyticsTool["GoogleAnalytics"] = "google-analytics";
+    AnalyticsTool["Other"] = "Other";
+})(AnalyticsTool || (AnalyticsTool = {}));
+
+class DataLayerMonitor {
+    constructor() {
+        if (!window.dataLayer) {
+            return;
+        }
+        this.originalPush = window.dataLayer.push;
+    }
+    static getInstance() {
+        if (!DataLayerMonitor.instance) {
+            DataLayerMonitor.instance = new DataLayerMonitor();
+        }
+        return DataLayerMonitor.instance;
+    }
+    setListener(listener) {
+        this.listener = listener;
+    }
+    start() {
+        window.dataLayer.push = (...args) => {
+            const result = this.originalPush.apply(window.dataLayer, args);
+            const pushedEvent = args[0];
+            if (this.listener) {
+                const normalizedData = this.cleanEventData(pushedEvent);
+                if (normalizedData) {
+                    this.listener(normalizedData);
+                }
+            }
+            return result;
+        };
+    }
+    cleanEventData(data) {
+        const eventName = getEventTypeFromRawEvent(data.event);
+        if (!eventName) {
+            return null;
+        }
+        const productIds = extractDeepIds(data);
+        return {
+            event: eventName,
+            productIds,
+        };
+    }
+    stop() {
+        if (this.originalPush) {
+            window.dataLayer.push = this.originalPush;
+        }
+        this.listener = undefined;
+    }
+}
+
+// @TODO: Add support for user to push events to our own data layer, if they don't use any analytics tool.
+// window.rmnDataLayer = window.rmnDataLayer || [];
+class MonitorService {
+    constructor() {
+        const analyticsTool = this.detectAnalyticsTool();
+        switch (analyticsTool) {
+            case AnalyticsTool.GoogleAnalytics:
+                this.implementedMonitor = DataLayerMonitor.getInstance();
+                break;
+            case AnalyticsTool.Other:
+            default:
+                console.warn('This site uses an unsupported analytics tool.');
+                break;
+        }
+        if (analyticsTool === AnalyticsTool.Other) {
+            return;
+        }
+        this.pubSubService = PubsubService.getInstance();
+        this.localStorageService = LocalStorageService.getInstance();
+    }
+    static getInstance() {
+        if (!MonitorService.instance) {
+            MonitorService.instance = new MonitorService();
+        }
+        return MonitorService.instance;
+    }
+    start() {
+        if (!this.implementedMonitor)
+            return;
+        this.implementedMonitor.setListener(async (eventData) => {
+            var _a;
+            await this.matchAndFireEvent(eventData, (_a = this.localStorageService) === null || _a === void 0 ? void 0 : _a.getSpots());
+        });
+        this.implementedMonitor.start();
+    }
+    async matchAndFireEvent(eventData, spots) {
+        var _a, _b;
+        if (!spots)
+            return;
+        const eventProductIds = new Set(eventData.productIds.map((productId) => String(productId)));
+        for (const spot of Object.values(spots)) {
+            if (!spot.productIds.length)
+                continue;
+            const hasCommonProductIds = spot.productIds.find((productId) => eventProductIds.has(String(productId)));
+            if (hasCommonProductIds) {
+                if (Object.values(RMN_SPOT_EVENT).includes(eventData.event)) {
+                    await this.fireAndPublishSpotEvent({
+                        spotEvent: eventData.event,
+                        eventUrl: (_b = (_a = spot.events.find((event) => event.event === eventData.event)) === null || _a === void 0 ? void 0 : _a.url) !== null && _b !== void 0 ? _b : '',
+                        placementId: spot.placementId,
+                        spotId: spot.spotId,
+                    });
+                }
+            }
+        }
+    }
+    async fireAndPublishSpotEvent({ spotEvent, eventUrl, placementId, spotId, }) {
+        await fireEvent({
+            event: spotEvent,
+            eventUrl,
+        });
+        if (!this.pubSubService)
+            return;
+        this.pubSubService.publish(RMN_EVENT.SPOT_EVENT, {
+            eventType: spotEvent,
+            placementId,
+            spotId,
+        });
+    }
+    detectAnalyticsTool() {
+        let analyticsTool = AnalyticsTool.Other;
+        // Check for Google Analytics
+        if (typeof window.ga !== 'undefined') {
+            analyticsTool = AnalyticsTool.GoogleAnalytics;
+        }
+        // Check for Google Analytics 4
+        if (typeof window.gtag !== 'undefined') {
+            analyticsTool = AnalyticsTool.GoogleAnalytics;
+        }
+        // Check for Google Tag Manager
+        if (typeof window.google_tag_manager !== 'undefined') {
+            analyticsTool = AnalyticsTool.GoogleAnalytics;
+        }
+        // @TODO: Add support for other analytics tools
+        // Check for Heap Analytics
+        // Check for Mixpanel
+        // Check for Woopra
+        // Check for Segment
+        // Check for Amplitude
+        return analyticsTool;
+    }
+}
+
+class EventService {
+    constructor() {
+        this.pubSubService = PubsubService.getInstance();
+        this.localStorageService = LocalStorageService.getInstance();
+        this.activeSpots = new Map();
+        this.spotStates = new Map();
+        this.intersectionObserver = new IntersectionObserverService();
+        // Start the user monitor, which will track and check user interactions
+        MonitorService.getInstance().start();
     }
-
-    .${prefix}__header {
-      font-size: 16px;
-      color: ${textColor};
-      line-height: 20px;
-      font-weight: 400;
-      font-family: "Source Sans 3", system-ui;
-      font-style: normal;
-      margin: 0;
-      padding: 15px 10%;
+    static getInstance() {
+        if (!EventService.instance) {
+            EventService.instance = new EventService();
+        }
+        return EventService.instance;
     }
-
-    @container (min-width: 640px) {
-      .${prefix} {
-        background-image: linear-gradient(to top, ${linearGradient}), url("${primaryImage}");
-      }
+    subscribe(eventType, callback) {
+        return this.pubSubService.subscribe(eventType, callback);
     }
-
-    @container (min-width: 768px) {
-      .${prefix}__header {
-        font-size: 22px;
-      }
+    publish(eventType, data) {
+        this.pubSubService.publish(eventType, data);
     }
-
-    @container (min-width: 1024px) {
-      .${prefix}__header {
-        font-size: 24px;
-      }
+    registerSpot(params) {
+        const { placementId, spot, spotElement } = params;
+        this.activeSpots.set(placementId, { spotElement });
+        // Fire impression event
+        this.fireImpressionEvent(placementId, spot);
+        // Handle intersection observer
+        this.handleIntersectionObserver(placementId, spot, spotElement);
+        // Attach click event listener
+        spotElement.addEventListener('click', async () => await this.handleClick(params));
     }
-
-    @container (min-width: 1280px) {
-      .${prefix}__header {
-        font-size: 28px;
-      }
+    unregisterSpot(placementId) {
+        const placementIdClean = placementId.replace('#', '');
+        const spotData = this.activeSpots.get(placementIdClean);
+        if (!spotData) {
+            this.handleSpotState(placementIdClean, {
+                state: {
+                    error: `Active spot with placementId ${placementIdClean} not found.`,
+                },
+            });
+            return;
+        }
+        this.intersectionObserver.unobserve(spotData.spotElement);
+        this.handleSpotState(placementIdClean, {
+            dom: {
+                spotElement: undefined,
+                visibleOnViewport: false,
+            },
+            state: {
+                unmounted: true,
+                mounted: false,
+            },
+        });
+        this.activeSpots.delete(placementIdClean);
+        const placementElement = document.getElementById(placementIdClean);
+        if (!placementElement) {
+            this.handleSpotState(placementIdClean, {
+                state: {
+                    error: `Placement element with id ${placementIdClean} not found.`,
+                },
+            });
+            return;
+        }
+        placementElement.innerHTML = '';
     }
-  </style>
-`;
-};
-function rbNavigationBannerTemplate(spot, config) {
-    const { prefix = '' } = config;
-    return `
-    ${GFONT_PRECONNECT}
-    ${GFONT_SOURCE_SANS_3}
-    ${STYLES$2(spot, config)}
-    <div class="${prefix}">
-        ${spot.header ? `<h2 class="${prefix}__header">${spot.header}</h2>` : ''}
-    </div>
-  `;
-}
-
-const STYLES$1 = ({ textColor = '#ffffff', primaryImage, mobilePrimaryImage = primaryImage }, { prefix, overlay }) => {
-    const linearGradient = generateGradientColor(overlay, 'rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 30%');
-    return `
-    <style>
-      .${prefix} {
-        width: 100%;
-        height: 100%;
-        display: flex;
-        flex-direction: column;
-        justify-content: flex-end;
-        background-image: linear-gradient(to top, ${linearGradient}), url("${mobilePrimaryImage}");
-        background-size: cover;
-        background-repeat: no-repeat;
-        background-position: center;
-        border-radius: 5px;
-        overflow: hidden;
-        cursor: pointer;
-        position: relative;
-      }
-
-      .${prefix}__header {
-        font-size: 12px;
-        color: ${textColor};
-        line-height: 16px;
-        font-family: "Source Sans 3", system-ui;
-        font-style: normal;
-        font-weight: 400;
-        margin: 0;
-        padding: 10px;
-      }
-
-      @container (min-width: 640px) {
-        .${prefix} {
-          background-image: linear-gradient(to top, ${linearGradient}), url("${primaryImage}");
+    /**
+     * Updates the state of a spot.
+     *
+     * @param {string} placementId - The placement ID of the spot.
+     * @param {Partial<ILifecycleState>} updates - The updates to apply to the spot state.
+     * @param {boolean} publish - Whether to publish the updated state.
+     *
+     * @returns {void}
+     */
+    handleSpotState(placementId, updates, publish = true) {
+        let currentState = this.spotStates.get(placementId);
+        if (!currentState) {
+            currentState = {
+                identifier: {
+                    placementId,
+                    spotId: '',
+                    spotType: '',
+                },
+                dom: {
+                    spotElement: undefined,
+                    visibleOnViewport: false,
+                },
+                state: {
+                    mounted: false,
+                    unmounted: false,
+                    loading: false,
+                    error: undefined,
+                },
+                displayConfig: {
+                    isCarousel: false,
+                    isCarouselItem: false,
+                    isSingleItem: false,
+                },
+            };
         }
-      }
-    </style>
-  `;
-};
-function rbSmallCategoryImageToutTemplate(spot, config) {
-    const { prefix = '' } = config;
-    return `
-    ${GFONT_PRECONNECT}
-    ${GFONT_CORMORANT}
-    ${STYLES$1(spot, config)}
-    <div class="${prefix}">
-      ${spot.header ? `<h2 class="${prefix}__header">${spot.header}</h2>` : ''}
-    </div>
-  `;
-}
-
-const STYLES = ({ textColor = '#000000', backgroundColor = 'transparent', primaryImage, mobilePrimaryImage = primaryImage, }, { prefix }) => `
-  <style>
-    .${prefix} {
-      width: 100%;
-      height: 100%;
-      background-color: ${backgroundColor};
-      cursor: pointer;
-      display: flex;
-      flex-direction: column;
-      border-radius: 5px;
+        const merged = this.deepMerge(currentState, updates);
+        this.spotStates.set(placementId, merged);
+        if (publish) {
+            this.pubSubService.publish(RMN_EVENT.LIFECYCLE_STATE, this.spotStates.get(placementId));
+        }
+    }
+    deepMerge(current, updates) {
+        return {
+            identifier: updates.identifier
+                ? { ...current.identifier, ...updates.identifier }
+                : current.identifier,
+            dom: updates.dom ? { ...current.dom, ...updates.dom } : current.dom,
+            state: updates.state ? { ...current.state, ...updates.state } : current.state,
+            displayConfig: updates.displayConfig
+                ? { ...current.displayConfig, ...updates.displayConfig }
+                : current.displayConfig,
+        };
+    }
+    async handleClick({ placementId, spot }) {
+        var _a, _b, _c;
+        this.pubSubService.publish(RMN_EVENT.SPOT_EVENT, {
+            eventType: RMN_SPOT_EVENT.CLICK,
+            placementId,
+            spotId: spot.id,
+        });
+        await fireEvent({
+            event: RMN_SPOT_EVENT.CLICK,
+            eventUrl: (_b = (_a = spot.events.find((event) => event.event === RMN_SPOT_EVENT.CLICK)) === null || _a === void 0 ? void 0 : _a.url) !== null && _b !== void 0 ? _b : '',
+        });
+        // Save spot to local storage for event tracking
+        this.localStorageService.setSpot(spot.id, {
+            placementId,
+            spotId: spot.id,
+            spotType: spot.spot,
+            events: spot.events,
+            productIds: (_c = spot.productIds) !== null && _c !== void 0 ? _c : [1, 2, 3],
+        });
     }
-
-    .${prefix}__image {
-      width: 100%;
-      height: 100%;
-      background-image: url("${mobilePrimaryImage}");
-      background-size: cover;
-      background-repeat: no-repeat;
-      background-position: center;
-      border-radius: 5px;
+    handleIntersectionObserver(placementId, _spot, spotElement) {
+        const spotIsVisibleCallback = async () => {
+            this.intersectionObserver.unobserve(spotElement);
+            this.handleSpotState(placementId, {
+                dom: {
+                    spotElement,
+                    visibleOnViewport: true,
+                },
+            });
+        };
+        this.intersectionObserver.observe(spotElement, spotIsVisibleCallback);
     }
-
-    .${prefix}__text {
-      text-align: left;
-      display: flex;
-      flex-direction: row;
-      align-items: flex-start;
-      justify-content: flex-start;
-      width: 100%;
-      height: fit-content;
-      position: relative;
+    fireImpressionEvent(placementId, spot) {
+        this.pubSubService.publish(RMN_EVENT.SPOT_EVENT, {
+            eventType: RMN_SPOT_EVENT.IMPRESSION,
+            placementId,
+            spotId: spot.id,
+        });
+        (async () => {
+            var _a, _b;
+            await fireEvent({
+                event: RMN_SPOT_EVENT.IMPRESSION,
+                eventUrl: (_b = (_a = spot.events.find((event) => event.event === RMN_SPOT_EVENT.IMPRESSION)) === null || _a === void 0 ? void 0 : _a.url) !== null && _b !== void 0 ? _b : '',
+            });
+        })();
     }
+}
 
-    .${prefix}__header {
-      font-size: 12px;
-      color: ${textColor};
-      padding-top: 5px;
-      line-height: 16px;
-      font-family: "Source Sans 3", system-ui;
-      font-style: normal;
-      font-weight: 400;
-      margin: 0;
-    }
+const SELECTION_API_PATH = '/spots/selection';
 
-    @container (min-width: 640px) {
-      .${prefix}__image {
-        background-image: url("${primaryImage}");
-      }
+class SelectionService extends BaseApi {
+    constructor(auth) {
+        super(auth);
+    }
+    static getInstance(auth) {
+        return SingletonManager.getInstance('SelectionService', () => new SelectionService(auth));
+    }
+    /**
+     * Makes a selection request on our server based on the provided data.
+     *
+     * @param {ISpotSelectionParams} data - Spots selection parameters.
+     *
+     * @return {Promise<ISpots | { error: string }>} - The spots response object.
+     */
+    async spotSelection(data) {
+        const { isOk, val, isErr } = await this.post(SELECTION_API_PATH, data, {});
+        if (isErr) {
+            return { error: `There was an error during spot selection: (${isErr === null || isErr === void 0 ? void 0 : isErr.errorMessage})` };
+        }
+        if (isOk && val && val.data && (val === null || val === void 0 ? void 0 : val.refresh.token)) {
+            this.authInfo.authenticated = true;
+            this.authInfo.token = val.refresh.token;
+            return val.data.spots;
+        }
+        return { error: 'Spot selection response was not successful' };
     }
-  </style>
-`;
-function rbSmallDiscoverToutTemplate(spot, config) {
-    const { prefix = '' } = config;
-    return `
-    ${GFONT_PRECONNECT}
-    ${GFONT_CORMORANT}
-    ${STYLES(spot, config)}
-    <div class="${prefix}">
-      <div class="${prefix}__image"></div>
-      <div class="${prefix}__text">
-        ${spot.header ? `<h2 class="${prefix}__header">${spot.header}</h2>` : ''}
-      </div>
-    </div>
-  `;
 }
 
-/**
- * Returns the HTML element for the given spot.
- *
- * @param {ISpot} spot - The spot object.
- * @param {ISpotTemplateConfig} config - The spot template configuration.
- *
- * @return {HTMLElement | null} - The HTML element for the given spot or null if the spot template is not found.
- */
-const SPOT_TEMPLATE_HTML_ELEMENT = (spot, config) => {
-    const templates = {
-        // Reserve Bar Spot Templates
-        [RMN_SPOT_TYPE.RB_HOMEPAGE_HERO_THREE_TILE]: {
-            rbHomepageHeroThreeTile: rbHomepageHeroThreeTileTemplate,
+const SPOT_EVENTS_EXAMPLE = [
+    {
+        event: RMN_SPOT_EVENT.CLICK,
+        url: 'https://dev.rmn.liquidcommerce.cloud/api/spots/event?e=eyJ2IjoiMS4xMiIsImF2IjozMDY1NzgzLCJhdCI6MTYzLCJidCI6MCwiY20iOjQ0MDE5MjQxOCwiY2giOjYzMTg0LCJjayI6e30sImNyIjo0ODE4NTUzNzUsImRpIjoiOWMxNGFhMGI3NWY4NDMxNTllMTAwYWQzNzA1NzQyYzMiLCJkaiI6MCwiaWkiOiIxZjU0MGM5NmQ1N2M0YmZjODFlZjRkNjhkMzFjNDVkOSIsImRtIjozLCJmYyI6NjU2NjgyNTQ5LCJmbCI6NjQzOTMxODIxLCJpcCI6IjM1LjIyMy4xOTguOTUiLCJudyI6MTE1MDAsInBjIjo1MDAwLCJvcCI6NTAwMCwibXAiOjUwMDAsImVjIjowLCJnbSI6MCwiZXAiOm51bGwsInByIjoyNDkzMTYsInJ0IjoxLCJycyI6NTAwLCJzYSI6IjU1Iiwic2IiOiJpLTA0MDI0ODg4ZDlkMWRjZWQ3Iiwic3AiOjI3MjI3Miwic3QiOjEyODcyOTYsInRyIjp0cnVlLCJ1ayI6IjNhZWRhMWMxLTZhYjItNDUwNy04Mzg5LTEwZTJmNDMxYjM5MSIsInRzIjoxNzI5MzU5MDU0OTI3LCJiZiI6dHJ1ZSwicG4iOiJyYlByb2R1Y3RVcGNzIiwiZ2MiOnRydWUsImdDIjp0cnVlLCJncyI6Im5vbmUiLCJkYyI6MSwidHoiOiJBbWVyaWNhL05ld19Zb3JrIiwidXIiOm51bGx9&s=hWz37kbxi_u95EVNn2aoQhc5Aas',
+    },
+    {
+        event: RMN_SPOT_EVENT.IMPRESSION,
+        url: 'https://dev.rmn.liquidcommerce.cloud/api/spots/event?e=eyJ2IjoiMS4xMiIsImF2IjozMDY1NzgzLCJhdCI6MTYzLCJidCI6MCwiY20iOjQ0MDE5MjQxOCwiY2giOjYzMTg0LCJjayI6e30sImNyIjo0ODE4NTUzNzUsImRpIjoiOWMxNGFhMGI3NWY4NDMxNTllMTAwYWQzNzA1NzQyYzMiLCJkaiI6MCwiaWkiOiIxZjU0MGM5NmQ1N2M0YmZjODFlZjRkNjhkMzFjNDVkOSIsImRtIjozLCJmYyI6NjU2NjgyNTQ5LCJmbCI6NjQzOTMxODIxLCJpcCI6IjM1LjIyMy4xOTguOTUiLCJudyI6MTE1MDAsInBjIjo1MDAwLCJvcCI6NTAwMCwibXAiOjUwMDAsImVjIjowLCJnbSI6MCwiZXAiOm51bGwsInByIjoyNDkzMTYsInJ0IjoxLCJycyI6NTAwLCJzYSI6IjU1Iiwic2IiOiJpLTA0MDI0ODg4ZDlkMWRjZWQ3Iiwic3AiOjI3MjI3Miwic3QiOjEyODcyOTYsInRyIjp0cnVlLCJ1ayI6IjNhZWRhMWMxLTZhYjItNDUwNy04Mzg5LTEwZTJmNDMxYjM5MSIsInRzIjoxNzI5MzU5MDU0OTI3LCJiZiI6dHJ1ZSwicG4iOiJyYlByb2R1Y3RVcGNzIiwiZ2MiOnRydWUsImdDIjp0cnVlLCJncyI6Im5vbmUiLCJkYyI6MSwidHoiOiJBbWVyaWNhL05ld19Zb3JrIiwiYmEiOjEsImZxIjowfQ&s=djoysjCimurf-5T11AlNAwwLSS8',
+    },
+    {
+        event: RMN_SPOT_EVENT.PURCHASE,
+        url: 'https://dev.rmn.liquidcommerce.cloud/api/spots/event?e=eyJ2IjoiMS4xMiIsImF2IjozMDY1NzgzLCJhdCI6MTYzLCJidCI6MCwiY20iOjQ0MDE5MjQxOCwiY2giOjYzMTg0LCJjayI6e30sImNyIjo0ODE4NTUzNzUsImRpIjoiOWMxNGFhMGI3NWY4NDMxNTllMTAwYWQzNzA1NzQyYzMiLCJkaiI6MCwiaWkiOiIxZjU0MGM5NmQ1N2M0YmZjODFlZjRkNjhkMzFjNDVkOSIsImRtIjozLCJmYyI6NjU2NjgyNTQ5LCJmbCI6NjQzOTMxODIxLCJpcCI6IjM1LjIyMy4xOTguOTUiLCJudyI6MTE1MDAsInBjIjo1MDAwLCJvcCI6NTAwMCwibXAiOjUwMDAsImVjIjowLCJnbSI6MCwiZXAiOm51bGwsInByIjoyNDkzMTYsInJ0IjoxLCJycyI6NTAwLCJzYSI6IjU1Iiwic2IiOiJpLTA0MDI0ODg4ZDlkMWRjZWQ3Iiwic3AiOjI3MjI3Miwic3QiOjEyODcyOTYsInRyIjp0cnVlLCJ1ayI6IjNhZWRhMWMxLTZhYjItNDUwNy04Mzg5LTEwZTJmNDMxYjM5MSIsInRzIjoxNzI5MzU5MDU0OTI3LCJiZiI6dHJ1ZSwicG4iOiJyYlByb2R1Y3RVcGNzIiwiZ2MiOnRydWUsImdDIjp0cnVlLCJncyI6Im5vbmUiLCJkYyI6MSwidHoiOiJBbWVyaWNhL05ld19Zb3JrIiwiZXQiOjU5fQ&s=AAPAw-3SfZ0JMzjEGFSwt9L-2S4',
+    },
+    {
+        event: RMN_SPOT_EVENT.ADD_TO_CART,
+        url: 'https://dev.rmn.liquidcommerce.cloud/api/spots/event?e=eyJ2IjoiMS4xMiIsImF2IjozMDY1NzgzLCJhdCI6MTYzLCJidCI6MCwiY20iOjQ0MDE5MjQxOCwiY2giOjYzMTg0LCJjayI6e30sImNyIjo0ODE4NTUzNzUsImRpIjoiOWMxNGFhMGI3NWY4NDMxNTllMTAwYWQzNzA1NzQyYzMiLCJkaiI6MCwiaWkiOiIxZjU0MGM5NmQ1N2M0YmZjODFlZjRkNjhkMzFjNDVkOSIsImRtIjozLCJmYyI6NjU2NjgyNTQ5LCJmbCI6NjQzOTMxODIxLCJpcCI6IjM1LjIyMy4xOTguOTUiLCJudyI6MTE1MDAsInBjIjo1MDAwLCJvcCI6NTAwMCwibXAiOjUwMDAsImVjIjowLCJnbSI6MCwiZXAiOm51bGwsInByIjoyNDkzMTYsInJ0IjoxLCJycyI6NTAwLCJzYSI6IjU1Iiwic2IiOiJpLTA0MDI0ODg4ZDlkMWRjZWQ3Iiwic3AiOjI3MjI3Miwic3QiOjEyODcyOTYsInRyIjp0cnVlLCJ1ayI6IjNhZWRhMWMxLTZhYjItNDUwNy04Mzg5LTEwZTJmNDMxYjM5MSIsInRzIjoxNzI5MzU5MDU0OTI3LCJiZiI6dHJ1ZSwicG4iOiJyYlByb2R1Y3RVcGNzIiwiZ2MiOnRydWUsImdDIjp0cnVlLCJncyI6Im5vbmUiLCJkYyI6MSwidHoiOiJBbWVyaWNhL05ld19Zb3JrIiwiZXQiOjYwfQ&s=uzQFcjgL7m9XqUG8FvTPVN5YkZY',
+    },
+    {
+        event: RMN_SPOT_EVENT.ADD_TO_WISHLIST,
+        url: 'https://dev.rmn.liquidcommerce.cloud/api/spots/event?e=eyJ2IjoiMS4xMiIsImF2IjozMDY1NzgzLCJhdCI6MTYzLCJidCI6MCwiY20iOjQ0MDE5MjQxOCwiY2giOjYzMTg0LCJjayI6e30sImNyIjo0ODE4NTUzNzUsImRpIjoiOWMxNGFhMGI3NWY4NDMxNTllMTAwYWQzNzA1NzQyYzMiLCJkaiI6MCwiaWkiOiIxZjU0MGM5NmQ1N2M0YmZjODFlZjRkNjhkMzFjNDVkOSIsImRtIjozLCJmYyI6NjU2NjgyNTQ5LCJmbCI6NjQzOTMxODIxLCJpcCI6IjM1LjIyMy4xOTguOTUiLCJudyI6MTE1MDAsInBjIjo1MDAwLCJvcCI6NTAwMCwibXAiOjUwMDAsImVjIjowLCJnbSI6MCwiZXAiOm51bGwsInByIjoyNDkzMTYsInJ0IjoxLCJycyI6NTAwLCJzYSI6IjU1Iiwic2IiOiJpLTA0MDI0ODg4ZDlkMWRjZWQ3Iiwic3AiOjI3MjI3Miwic3QiOjEyODcyOTYsInRyIjp0cnVlLCJ1ayI6IjNhZWRhMWMxLTZhYjItNDUwNy04Mzg5LTEwZTJmNDMxYjM5MSIsInRzIjoxNzI5MzU5MDU0OTI3LCJiZiI6dHJ1ZSwicG4iOiJyYlByb2R1Y3RVcGNzIiwiZ2MiOnRydWUsImdDIjp0cnVlLCJncyI6Im5vbmUiLCJkYyI6MSwidHoiOiJBbWVyaWNhL05ld19Zb3JrIiwiZXQiOjYzfQ&s=m3ISU_iIy-OFtXrTKpI6cJAEC0k',
+    },
+    {
+        event: RMN_SPOT_EVENT.BUY_NOW,
+        url: 'https://dev.rmn.liquidcommerce.cloud/api/spots/event?e=eyJ2IjoiMS4xMiIsImF2IjozMDY1NzgzLCJhdCI6MTYzLCJidCI6MCwiY20iOjQ0MDE5MjQxOCwiY2giOjYzMTg0LCJjayI6e30sImNyIjo0ODE4NTUzNzUsImRpIjoiOWMxNGFhMGI3NWY4NDMxNTllMTAwYWQzNzA1NzQyYzMiLCJkaiI6MCwiaWkiOiIxZjU0MGM5NmQ1N2M0YmZjODFlZjRkNjhkMzFjNDVkOSIsImRtIjozLCJmYyI6NjU2NjgyNTQ5LCJmbCI6NjQzOTMxODIxLCJpcCI6IjM1LjIyMy4xOTguOTUiLCJudyI6MTE1MDAsInBjIjo1MDAwLCJvcCI6NTAwMCwibXAiOjUwMDAsImVjIjowLCJnbSI6MCwiZXAiOm51bGwsInByIjoyNDkzMTYsInJ0IjoxLCJycyI6NTAwLCJzYSI6IjU1Iiwic2IiOiJpLTA0MDI0ODg4ZDlkMWRjZWQ3Iiwic3AiOjI3MjI3Miwic3QiOjEyODcyOTYsInRyIjp0cnVlLCJ1ayI6IjNhZWRhMWMxLTZhYjItNDUwNy04Mzg5LTEwZTJmNDMxYjM5MSIsInRzIjoxNzI5MzU5MDU0OTI3LCJiZiI6dHJ1ZSwicG4iOiJyYlByb2R1Y3RVcGNzIiwiZ2MiOnRydWUsImdDIjp0cnVlLCJncyI6Im5vbmUiLCJkYyI6MSwidHoiOiJBbWVyaWNhL05ld19Zb3JrIiwiZXQiOjY5fQ&s=l6MOscQC-q-FkC2Ksd7w6jjySCQ',
+    },
+];
+({
+    rbHomepageHero: [
+        {
+            id: 'abc123',
+            spot: RMN_SPOT_TYPE.RB_HOMEPAGE_HERO_FULL_IMAGE,
+            variant: RMN_SPOT_TYPE.RB_HOMEPAGE_HERO_FULL_IMAGE,
+            width: 1140,
+            height: 640,
+            header: 'Premium Wine Collection',
+            description: 'Discover our exclusive selection of vintage wines',
+            ctaText: 'Shop Wines',
+            textColor: '#ffffff',
+            ctaTextColor: '#ffffff',
+            primaryImage: 'https://placehold.co/1140x640/png?text=Wine+Collection',
+            mobilePrimaryImage: 'https://placehold.co/640x640/png?text=Mobile+Wine',
+            events: SPOT_EVENTS_EXAMPLE,
+            productIds: [1, 2, 3],
+        },
+        {
+            id: 'jkl012',
+            spot: RMN_SPOT_TYPE.RB_HOMEPAGE_HERO_TWO_TILE,
+            variant: RMN_SPOT_TYPE.RB_HOMEPAGE_HERO_TWO_TILE,
+            width: 1140,
+            height: 640,
+            header: 'Whiskey Collection',
+            description: 'Premium whiskeys from around the world',
+            ctaText: 'Shop Whiskeys',
+            textColor: '#ffffff',
+            backgroundColor: '#2c1810',
+            ctaTextColor: '#2c1810',
+            primaryImage: 'https://placehold.co/1140x640/png?text=Whiskey',
+            mobilePrimaryImage: 'https://placehold.co/640x640/png?text=Mobile+Whiskey',
+            events: SPOT_EVENTS_EXAMPLE,
+            productIds: [10, 11],
+        },
+        {
+            id: 'stu901',
+            spot: RMN_SPOT_TYPE.RB_HOMEPAGE_HERO_THREE_TILE,
+            variant: RMN_SPOT_TYPE.RB_HOMEPAGE_HERO_THREE_TILE,
+            width: 1140,
+            height: 640,
+            header: 'Summer Cocktails',
+            description: 'Essential spirits for summer mixing',
+            ctaText: 'Mix It Up',
+            textColor: '#ffffff',
+            backgroundColor: '#4d3a0a',
+            ctaTextColor: '#4d3a0a',
+            primaryImage: 'https://placehold.co/1140x640/png?text=Cocktails',
+            secondaryImage: 'https://placehold.co/1140x640/png?text=Mixers',
+            mobilePrimaryImage: 'https://placehold.co/640x640/png?text=Mobile+Cocktails',
+            mobileSecondaryImage: 'https://placehold.co/640x320/png?text=Mobile+Mixers',
+            events: SPOT_EVENTS_EXAMPLE,
+            productIds: [16, 17, 18],
+        },
+        {
+            id: 'def456',
+            spot: RMN_SPOT_TYPE.RB_HOMEPAGE_HERO_FULL_IMAGE,
+            variant: RMN_SPOT_TYPE.RB_HOMEPAGE_HERO_FULL_IMAGE,
+            width: 1140,
+            height: 640,
+            header: 'Craft Beer Festival',
+            description: 'Local breweries and exclusive releases',
+            ctaText: 'Explore Beers',
+            textColor: '#ffffff',
+            ctaTextColor: '#ffffff',
+            primaryImage: 'https://placehold.co/1140x640/png?text=Beer+Festival',
+            mobilePrimaryImage: 'https://placehold.co/640x640/png?text=Mobile+Beer',
+            events: SPOT_EVENTS_EXAMPLE,
+            productIds: [4, 5, 6],
+        },
+        {
+            id: 'mno345',
+            spot: RMN_SPOT_TYPE.RB_HOMEPAGE_HERO_TWO_TILE,
+            variant: RMN_SPOT_TYPE.RB_HOMEPAGE_HERO_TWO_TILE,
+            width: 1140,
+            height: 640,
+            header: 'Champagne Selection',
+            description: 'Finest champagnes for every occasion',
+            ctaText: 'View Champagnes',
+            textColor: '#ffffff',
+            backgroundColor: '#1a1a1a',
+            ctaTextColor: '#1a1a1a',
+            primaryImage: 'https://placehold.co/1140x640/png?text=Champagne',
+            mobilePrimaryImage: 'https://placehold.co/640x640/png?text=Mobile+Champagne',
+            events: SPOT_EVENTS_EXAMPLE,
+            productIds: [12, 13],
+        },
+        {
+            id: 'vwx234',
+            spot: RMN_SPOT_TYPE.RB_HOMEPAGE_HERO_THREE_TILE,
+            variant: RMN_SPOT_TYPE.RB_HOMEPAGE_HERO_THREE_TILE,
+            width: 1140,
+            height: 640,
+            header: 'Wine Regions',
+            description: 'Explore wines from top regions',
+            ctaText: 'Tour Regions',
+            textColor: '#ffffff',
+            backgroundColor: '#4d0a0a',
+            ctaTextColor: '#4d0a0a',
+            primaryImage: 'https://placehold.co/1140x640/png?text=Wine+Regions',
+            secondaryImage: 'https://placehold.co/1140x640/png?text=Vineyards',
+            mobilePrimaryImage: 'https://placehold.co/640x640/png?text=Mobile+Regions',
+            mobileSecondaryImage: 'https://placehold.co/640x320/png?text=Mobile+Vineyards',
+            events: SPOT_EVENTS_EXAMPLE,
+            productIds: [19, 20, 21],
         },
-        [RMN_SPOT_TYPE.RB_HOMEPAGE_HERO_TWO_TILE]: {
-            rbHomepageHeroTwoTile: rbHomepageHeroTwoTileTemplate,
+        {
+            id: 'ghi789',
+            spot: RMN_SPOT_TYPE.RB_HOMEPAGE_HERO_FULL_IMAGE,
+            variant: RMN_SPOT_TYPE.RB_HOMEPAGE_HERO_FULL_IMAGE,
+            width: 1140,
+            height: 640,
+            header: 'Rare Spirits',
+            description: 'Limited edition spirits collection',
+            ctaText: 'View Collection',
+            textColor: '#ffffff',
+            ctaTextColor: '#ffffff',
+            primaryImage: 'https://placehold.co/1140x640/png?text=Rare+Spirits',
+            mobilePrimaryImage: 'https://placehold.co/640x640/png?text=Mobile+Spirits',
+            events: SPOT_EVENTS_EXAMPLE,
+            productIds: [7, 8, 9],
         },
-        [RMN_SPOT_TYPE.RB_HOMEPAGE_HERO_FULL_IMAGE]: {
-            rbHomepageHeroFullImage: rbHomepageHeroFullImageTemplate,
+        {
+            id: 'pqr678',
+            spot: RMN_SPOT_TYPE.RB_HOMEPAGE_HERO_TWO_TILE,
+            variant: RMN_SPOT_TYPE.RB_HOMEPAGE_HERO_TWO_TILE,
+            width: 1140,
+            height: 640,
+            header: 'Gin Collection',
+            description: 'Artisanal gins and botanicals',
+            ctaText: 'Explore Gins',
+            textColor: '#ffffff',
+            backgroundColor: '#0a4d4d',
+            ctaTextColor: '#0a4d4d',
+            primaryImage: 'https://placehold.co/1140x640/png?text=Gin',
+            mobilePrimaryImage: 'https://placehold.co/640x640/png?text=Mobile+Gin',
+            events: SPOT_EVENTS_EXAMPLE,
+            productIds: [14, 15],
         },
-        [RMN_SPOT_TYPE.RB_LARGE_CATEGORY_IMAGE_TOUT]: {
-            rbLargeCategoryImageTout: rbLargeCategoryImageToutTemplate,
+        {
+            id: 'yz5678',
+            spot: RMN_SPOT_TYPE.RB_HOMEPAGE_HERO_THREE_TILE,
+            variant: RMN_SPOT_TYPE.RB_HOMEPAGE_HERO_THREE_TILE,
+            width: 1140,
+            height: 640,
+            header: 'Tequila Collection',
+            description: 'Premium tequilas and mezcals',
+            ctaText: 'Shop Tequila',
+            textColor: '#ffffff',
+            backgroundColor: '#0a4d2b',
+            ctaTextColor: '#0a4d2b',
+            primaryImage: 'https://placehold.co/1140x640/png?text=Tequila',
+            secondaryImage: 'https://placehold.co/1140x640/png?text=Mezcal',
+            mobilePrimaryImage: 'https://placehold.co/640x640/png?text=Mobile+Tequila',
+            mobileSecondaryImage: 'https://placehold.co/640x320/png?text=Mobile+Mezcal',
+            events: SPOT_EVENTS_EXAMPLE,
+            productIds: [22, 23, 24],
         },
-        [RMN_SPOT_TYPE.RB_SMALL_DISCOVER_TOUT]: {
-            rbSmallDiscoverTout: rbSmallDiscoverToutTemplate,
+    ],
+    rbHomepageHeroFullImage: [
+        {
+            id: 'hjk567',
+            spot: RMN_SPOT_TYPE.RB_HOMEPAGE_HERO_FULL_IMAGE,
+            variant: RMN_SPOT_TYPE.RB_HOMEPAGE_HERO_FULL_IMAGE,
+            width: 1140,
+            height: 640,
+            header: 'Holiday Gift Guide',
+            description: 'Perfect spirits for every occasion',
+            ctaText: 'Shop Gifts',
+            textColor: '#ffffff',
+            ctaTextColor: '#ffffff',
+            primaryImage: 'https://placehold.co/1140x640/png?text=Gift+Guide',
+            mobilePrimaryImage: 'https://placehold.co/640x640/png?text=Mobile+Gifts',
+            events: SPOT_EVENTS_EXAMPLE,
+            productIds: [25, 26],
+        },
+        {
+            id: 'qwe890',
+            spot: RMN_SPOT_TYPE.RB_HOMEPAGE_HERO_FULL_IMAGE,
+            variant: RMN_SPOT_TYPE.RB_HOMEPAGE_HERO_FULL_IMAGE,
+            width: 1140,
+            height: 640,
+            header: 'Summer Wine Festival',
+            description: 'Refreshing wines for summer',
+            ctaText: 'Shop Festival',
+            textColor: '#ffffff',
+            ctaTextColor: '#ffffff',
+            primaryImage: 'https://placehold.co/1140x640/png?text=Wine+Festival',
+            mobilePrimaryImage: 'https://placehold.co/640x640/png?text=Mobile+Festival',
+            events: SPOT_EVENTS_EXAMPLE,
+            productIds: [27, 28],
+        },
+    ],
+    rbHomepageHeroTwoTile: [
+        {
+            id: 'iop987',
+            spot: RMN_SPOT_TYPE.RB_HOMEPAGE_HERO_TWO_TILE,
+            variant: RMN_SPOT_TYPE.RB_HOMEPAGE_HERO_TWO_TILE,
+            width: 1140,
+            height: 640,
+            header: 'Bourbon Selection',
+            description: "Kentucky's finest bourbons",
+            ctaText: 'Shop Bourbon',
+            textColor: '#ffffff',
+            backgroundColor: '#2c1810',
+            ctaTextColor: '#2c1810',
+            primaryImage: 'https://placehold.co/1140x640/png?text=Bourbon',
+            mobilePrimaryImage: 'https://placehold.co/640x640/png?text=Mobile+Bourbon',
+            events: SPOT_EVENTS_EXAMPLE,
+            productIds: [29, 30],
+        },
+        {
+            id: 'lkj012',
+            spot: RMN_SPOT_TYPE.RB_HOMEPAGE_HERO_TWO_TILE,
+            variant: RMN_SPOT_TYPE.RB_HOMEPAGE_HERO_TWO_TILE,
+            width: 1140,
+            height: 640,
+            header: 'Vodka Collection',
+            description: 'Premium vodkas from around the world',
+            ctaText: 'Shop Vodka',
+            textColor: '#ffffff',
+            backgroundColor: '#1a1a1a',
+            ctaTextColor: '#1a1a1a',
+            primaryImage: 'https://placehold.co/1140x640/png?text=Vodka',
+            mobilePrimaryImage: 'https://placehold.co/640x640/png?text=Mobile+Vodka',
+            events: SPOT_EVENTS_EXAMPLE,
+            productIds: [31, 32],
+        },
+    ],
+    rbHomepageHeroThreeTile: [
+        {
+            id: 'bnm345',
+            spot: RMN_SPOT_TYPE.RB_HOMEPAGE_HERO_THREE_TILE,
+            variant: RMN_SPOT_TYPE.RB_HOMEPAGE_HERO_THREE_TILE,
+            width: 1140,
+            height: 640,
+            header: 'Rum Collection',
+            description: 'Caribbean and craft rums',
+            ctaText: 'Shop Rum',
+            textColor: '#ffffff',
+            backgroundColor: '#4d3a0a',
+            ctaTextColor: '#4d3a0a',
+            primaryImage: 'https://placehold.co/1140x640/png?text=Rum',
+            secondaryImage: 'https://placehold.co/1140x640/png?text=Craft+Rum',
+            mobilePrimaryImage: 'https://placehold.co/640x640/png?text=Mobile+Rum',
+            mobileSecondaryImage: 'https://placehold.co/640x320/png?text=Mobile+Craft',
+            events: SPOT_EVENTS_EXAMPLE,
+            productIds: [33, 34],
+        },
+        {
+            id: 'fgh678',
+            spot: RMN_SPOT_TYPE.RB_HOMEPAGE_HERO_THREE_TILE,
+            variant: RMN_SPOT_TYPE.RB_HOMEPAGE_HERO_THREE_TILE,
+            width: 1140,
+            height: 640,
+            header: 'Scotch Selection',
+            description: 'Single malts and blends',
+            ctaText: 'Shop Scotch',
+            textColor: '#ffffff',
+            backgroundColor: '#4d0a0a',
+            ctaTextColor: '#4d0a0a',
+            primaryImage: 'https://placehold.co/1140x640/png?text=Scotch',
+            secondaryImage: 'https://placehold.co/1140x640/png?text=Single+Malts',
+            mobilePrimaryImage: 'https://placehold.co/640x640/png?text=Mobile+Scotch',
+            mobileSecondaryImage: 'https://placehold.co/640x320/png?text=Mobile+Malts',
+            events: SPOT_EVENTS_EXAMPLE,
+            productIds: [35, 36],
+        },
+    ],
+    rbLargeCategoryImageTout: [
+        {
+            id: 'cde567',
+            spot: RMN_SPOT_TYPE.RB_LARGE_CATEGORY_IMAGE_TOUT,
+            variant: RMN_SPOT_TYPE.RB_LARGE_CATEGORY_IMAGE_TOUT,
+            width: 468,
+            height: 410,
+            header: 'Rare & Limited Edition',
+            description: 'Discover our collection of hard-to-find and limited release spirits.',
+            textColor: '#ffffff',
+            ctaTextColor: '#ffffff',
+            primaryImage: 'https://placehold.co/468x410/png?text=Rare+Spirits',
+            mobilePrimaryImage: 'https://placehold.co/468x410/png?text=Mobile+Rare+Spirits',
+            ctaText: 'Shop Rare Spirits',
+            events: SPOT_EVENTS_EXAMPLE,
+            productIds: [37, 38, 39, 40, 41],
+        },
+        {
+            id: 'efg789',
+            spot: RMN_SPOT_TYPE.RB_LARGE_CATEGORY_IMAGE_TOUT,
+            variant: RMN_SPOT_TYPE.RB_LARGE_CATEGORY_IMAGE_TOUT,
+            width: 468,
+            height: 410,
+            header: 'Vintage Champagnes',
+            description: 'Explore our prestigious collection of aged champagnes.',
+            textColor: '#ffffff',
+            ctaTextColor: '#ffffff',
+            primaryImage: 'https://placehold.co/468x410/png?text=Vintage+Champagne',
+            mobilePrimaryImage: 'https://placehold.co/468x410/png?text=Mobile+Champagne',
+            ctaText: 'View Collection',
+            events: SPOT_EVENTS_EXAMPLE,
+            productIds: [42, 43, 44, 45, 46],
+        },
+        {
+            id: 'ghi012',
+            spot: RMN_SPOT_TYPE.RB_LARGE_CATEGORY_IMAGE_TOUT,
+            variant: RMN_SPOT_TYPE.RB_LARGE_CATEGORY_IMAGE_TOUT,
+            width: 468,
+            height: 410,
+            header: 'Small Batch Bourbon',
+            description: 'Hand-selected premium bourbon from craft distilleries.',
+            textColor: '#ffffff',
+            ctaTextColor: '#ffffff',
+            primaryImage: 'https://placehold.co/468x410/png?text=Craft+Bourbon',
+            mobilePrimaryImage: 'https://placehold.co/468x410/png?text=Mobile+Bourbon',
+            ctaText: 'Explore Bourbon',
+            events: SPOT_EVENTS_EXAMPLE,
+            productIds: [47, 48, 49, 50, 51],
+        },
+    ],
+    rbSmallDiscoverTout: [
+        {
+            id: 'jkl345',
+            spot: RMN_SPOT_TYPE.RB_SMALL_DISCOVER_TOUT,
+            variant: RMN_SPOT_TYPE.RB_SMALL_DISCOVER_TOUT,
+            width: 224,
+            height: 378,
+            header: 'Château Margaux 2015 Bordeaux',
+            textColor: '#ffffff',
+            primaryImage: 'https://placehold.co/224x378/png?text=Château+Margaux',
+            mobilePrimaryImage: 'https://placehold.co/224x378/png?text=Mobile+Château+Margaux',
+            events: SPOT_EVENTS_EXAMPLE,
+            productIds: [52, 53, 54, 55, 56],
+        },
+        {
+            id: 'lmn678',
+            spot: RMN_SPOT_TYPE.RB_SMALL_DISCOVER_TOUT,
+            variant: RMN_SPOT_TYPE.RB_SMALL_DISCOVER_TOUT,
+            width: 224,
+            height: 378,
+            header: 'Macallan 25 Year',
+            textColor: '#ffffff',
+            primaryImage: 'https://placehold.co/224x378/png?text=Macallan+25',
+            mobilePrimaryImage: 'https://placehold.co/224x378/png?text=Mobile+Macallan',
+            events: SPOT_EVENTS_EXAMPLE,
+            productIds: [57, 58, 59, 60, 61],
+        },
+        {
+            id: 'nop901',
+            spot: RMN_SPOT_TYPE.RB_SMALL_DISCOVER_TOUT,
+            variant: RMN_SPOT_TYPE.RB_SMALL_DISCOVER_TOUT,
+            width: 224,
+            height: 378,
+            header: 'Louis XIII Cognac',
+            textColor: '#ffffff',
+            primaryImage: 'https://placehold.co/224x378/png?text=Louis+XIII',
+            mobilePrimaryImage: 'https://placehold.co/224x378/png?text=Mobile+Louis+XIII',
+            events: SPOT_EVENTS_EXAMPLE,
+            productIds: [62, 63, 64, 65, 66],
         },
-        [RMN_SPOT_TYPE.RB_SMALL_CATEGORY_IMAGE_TOUT]: {
-            rbSmallCategoryImageTout: rbSmallCategoryImageToutTemplate,
+    ],
+    rbSmallCategoryImageTout: [
+        {
+            id: 'qrs234',
+            spot: RMN_SPOT_TYPE.RB_SMALL_CATEGORY_IMAGE_TOUT,
+            variant: RMN_SPOT_TYPE.RB_SMALL_CATEGORY_IMAGE_TOUT,
+            width: 224,
+            height: 410,
+            header: 'Japanese Sake',
+            textColor: '#ffffff',
+            primaryImage: 'https://placehold.co/224x410/png?text=Japanese+Sake',
+            mobilePrimaryImage: 'https://placehold.co/224x410/png?text=Mobile+Japanese+Sake',
+            events: SPOT_EVENTS_EXAMPLE,
+            productIds: [67, 68, 69, 70, 71],
         },
-        [RMN_SPOT_TYPE.RB_COLLECTION_BANNER_WITHOUT_TEXT_BLOCK]: {
-            rbCollectionBannerWithoutTextBlock: rbCollectionBannerWithoutTextBlockTemplate,
+        {
+            id: 'stu567',
+            spot: RMN_SPOT_TYPE.RB_SMALL_CATEGORY_IMAGE_TOUT,
+            variant: RMN_SPOT_TYPE.RB_SMALL_CATEGORY_IMAGE_TOUT,
+            width: 224,
+            height: 410,
+            header: 'Craft Vermouth',
+            textColor: '#ffffff',
+            primaryImage: 'https://placehold.co/224x410/png?text=Craft+Vermouth',
+            mobilePrimaryImage: 'https://placehold.co/224x410/png?text=Mobile+Vermouth',
+            events: SPOT_EVENTS_EXAMPLE,
+            productIds: [72, 73, 74, 75, 76],
         },
-        [RMN_SPOT_TYPE.RB_NAVIGATION_BANNER]: {
-            rbNavigationBanner: rbNavigationBannerTemplate,
+        {
+            id: 'vwx890',
+            spot: RMN_SPOT_TYPE.RB_SMALL_CATEGORY_IMAGE_TOUT,
+            variant: RMN_SPOT_TYPE.RB_SMALL_CATEGORY_IMAGE_TOUT,
+            width: 224,
+            height: 410,
+            header: 'Premium Mezcal',
+            textColor: '#ffffff',
+            primaryImage: 'https://placehold.co/224x410/png?text=Premium+Mezcal',
+            mobilePrimaryImage: 'https://placehold.co/224x410/png?text=Mobile+Mezcal',
+            events: SPOT_EVENTS_EXAMPLE,
+            productIds: [77, 78, 79, 80, 81],
         },
-        [RMN_SPOT_TYPE.RB_PRODUCT_UPCS]: {
-            rbProductUpcs: () => '', // No template for this spot type, it will be handled by ReserveBar App.
+    ],
+    rbCollectionBannerWithoutTextBlock: [
+        {
+            id: 'yz1234',
+            spot: RMN_SPOT_TYPE.RB_COLLECTION_BANNER_WITHOUT_TEXT_BLOCK,
+            variant: RMN_SPOT_TYPE.RB_COLLECTION_BANNER_WITHOUT_TEXT_BLOCK,
+            width: 887,
+            height: 344,
+            primaryImage: 'https://placehold.co/887x344/png?text=Summer+Cocktails',
+            mobilePrimaryImage: 'https://placehold.co/887x344/png?text=Mobile+Summer+Cocktails',
+            events: SPOT_EVENTS_EXAMPLE,
+            productIds: [82, 83, 84, 85, 86],
         },
-        // IAB Standard Spot Templates
-        [RMN_SPOT_TYPE.BILLBOARD]: {
-            billboardV1: billboardV1Template,
-            billboardV2: billboardV2Template,
-            billboardV3: billboardV3Template,
+        {
+            id: 'abc567',
+            spot: RMN_SPOT_TYPE.RB_COLLECTION_BANNER_WITHOUT_TEXT_BLOCK,
+            variant: RMN_SPOT_TYPE.RB_COLLECTION_BANNER_WITHOUT_TEXT_BLOCK,
+            width: 887,
+            height: 344,
+            primaryImage: 'https://placehold.co/887x344/png?text=Holiday+Spirits',
+            mobilePrimaryImage: 'https://placehold.co/887x344/png?text=Mobile+Holiday+Spirits',
+            events: SPOT_EVENTS_EXAMPLE,
+            productIds: [87, 88, 89, 90, 91],
         },
-        [RMN_SPOT_TYPE.LARGE_RECTANGLE]: {
-            largeRectangleV1: largeRectangleV1Template,
+        {
+            id: 'def901',
+            spot: RMN_SPOT_TYPE.RB_COLLECTION_BANNER_WITHOUT_TEXT_BLOCK,
+            variant: RMN_SPOT_TYPE.RB_COLLECTION_BANNER_WITHOUT_TEXT_BLOCK,
+            width: 887,
+            height: 344,
+            primaryImage: 'https://placehold.co/887x344/png?text=Wine+Essentials',
+            mobilePrimaryImage: 'https://placehold.co/887x344/png?text=Mobile+Wine+Essentials',
+            events: SPOT_EVENTS_EXAMPLE,
+            productIds: [92, 93, 94, 95, 96],
         },
-        [RMN_SPOT_TYPE.VERTICAL_RECTANGLE]: {
-            verticalRectangleV1: verticalRectangleV1Template,
+    ],
+    rbNavigationBanner: [
+        {
+            id: 'ghi234',
+            spot: RMN_SPOT_TYPE.RB_NAVIGATION_BANNER,
+            variant: RMN_SPOT_TYPE.RB_NAVIGATION_BANNER,
+            width: 440,
+            height: 220,
+            header: 'Explore Tequilas',
+            textColor: '#ffffff',
+            primaryImage: 'https://placehold.co/440x220/png?text=Tequila+Collection',
+            mobilePrimaryImage: 'https://placehold.co/440x220/png?text=Mobile+Tequila+Collection',
+            events: SPOT_EVENTS_EXAMPLE,
+            productIds: [97, 98, 99, 100, 101],
         },
-        [RMN_SPOT_TYPE.SQUARE]: {
-            squareV1: squareV1Template,
-            squareV2: squareV2Template,
+        {
+            id: 'jkl678',
+            spot: RMN_SPOT_TYPE.RB_NAVIGATION_BANNER,
+            variant: RMN_SPOT_TYPE.RB_NAVIGATION_BANNER,
+            width: 440,
+            height: 220,
+            header: 'Craft Gin Selection',
+            textColor: '#ffffff',
+            primaryImage: 'https://placehold.co/440x220/png?text=Gin+Selection',
+            mobilePrimaryImage: 'https://placehold.co/440x220/png?text=Mobile+Gin+Selection',
+            events: SPOT_EVENTS_EXAMPLE,
+            productIds: [102, 103, 104, 105, 106],
         },
-        [RMN_SPOT_TYPE.LARGE_LEADERBOARD]: {
-            largeLeaderboardV1: largeLeaderboardV1Template,
-            largeLeaderboardV2: largeLeaderboardV2Template,
+        {
+            id: 'mno012',
+            spot: RMN_SPOT_TYPE.RB_NAVIGATION_BANNER,
+            variant: RMN_SPOT_TYPE.RB_NAVIGATION_BANNER,
+            width: 440,
+            height: 220,
+            header: 'Premium Vodka',
+            textColor: '#ffffff',
+            primaryImage: 'https://placehold.co/440x220/png?text=Vodka+Premium',
+            mobilePrimaryImage: 'https://placehold.co/440x220/png?text=Mobile+Vodka+Premium',
+            events: SPOT_EVENTS_EXAMPLE,
+            productIds: [107, 108, 109, 110, 111],
         },
-        [RMN_SPOT_TYPE.WIDE_SKYSCRAPER]: {
-            wideSkyscraperV1: wideSkyscraperV1Template,
+    ],
+});
+({
+    banner: [],
+    billboard: [
+        {
+            id: 'kol567',
+            spot: RMN_SPOT_TYPE.BILLBOARD,
+            variant: `${RMN_SPOT_TYPE.BILLBOARD}V2`,
+            width: 1140,
+            height: 640,
+            header: 'Holiday Gift Guide',
+            description: 'Perfect spirits for every occasion',
+            ctaText: 'Shop Gifts',
+            textColor: '#ffffff',
+            ctaTextColor: '#ffffff',
+            primaryImage: 'https://placehold.co/1140x640/png?text=Gift+Guide',
+            mobilePrimaryImage: 'https://placehold.co/640x640/png?text=Mobile+Gifts',
+            events: SPOT_EVENTS_EXAMPLE,
+            productIds: [25, 26],
         },
-        [RMN_SPOT_TYPE.IN_TEXT]: {
-            inTextV1: inTextV1Template,
+        {
+            id: 'hpm390',
+            spot: RMN_SPOT_TYPE.BILLBOARD,
+            variant: `${RMN_SPOT_TYPE.BILLBOARD}V2`,
+            width: 1140,
+            height: 640,
+            header: 'Summer Wine Festival',
+            description: 'Refreshing wines for summer',
+            ctaText: 'Shop Festival',
+            textColor: '#ffffff',
+            ctaTextColor: '#ffffff',
+            primaryImage: 'https://placehold.co/1140x640/png?text=Wine+Festival',
+            mobilePrimaryImage: 'https://placehold.co/640x640/png?text=Mobile+Festival',
+            events: SPOT_EVENTS_EXAMPLE,
+            productIds: [27, 28],
         },
-    };
-    const spotVariants = templates[spot.spot];
-    if (!spotVariants) {
-        return null;
-    }
-    const variantTemplate = spotVariants[spot.variant];
-    if (!variantTemplate) {
-        return null;
-    }
-    // Generate a highly unique prefix to avoid conflicts with other elements.
-    const prefix = 's' + UniqueIdGenerator.generate().toLowerCase();
-    const spotHtmlString = variantTemplate(spot, { ...config, prefix });
-    return spotHtmlStringToElement(spotHtmlString);
-};
-
-// For the moment, we will only focus on sites that use Google Analytics,
-// but we will add support for other analytics tools in the future.
-var AnalyticsTool;
-(function (AnalyticsTool) {
-    AnalyticsTool["GoogleAnalytics"] = "google-analytics";
-    AnalyticsTool["Other"] = "Other";
-})(AnalyticsTool || (AnalyticsTool = {}));
-
-class DataLayerMonitor {
-    constructor() {
-        if (!window.dataLayer) {
-            return;
-        }
-        this.originalPush = window.dataLayer.push;
-    }
-    static getInstance() {
-        if (!DataLayerMonitor.instance) {
-            DataLayerMonitor.instance = new DataLayerMonitor();
-        }
-        return DataLayerMonitor.instance;
-    }
-    setListener(listener) {
-        this.listener = listener;
-    }
-    start() {
-        window.dataLayer.push = (...args) => {
-            const result = this.originalPush.apply(window.dataLayer, args);
-            const pushedEvent = args[0];
-            if (this.listener) {
-                const normalizedData = this.cleanEventData(pushedEvent);
-                if (normalizedData) {
-                    this.listener(normalizedData);
-                }
-            }
-            return result;
-        };
-    }
-    cleanEventData(data) {
-        const eventName = getEventTypeFromRawEvent(data.event);
-        if (!eventName) {
-            return null;
-        }
-        const productIds = extractDeepIds(data);
-        return {
-            event: eventName,
-            productIds,
-        };
-    }
-    stop() {
-        if (this.originalPush) {
-            window.dataLayer.push = this.originalPush;
-        }
-        this.listener = undefined;
-    }
-}
+    ],
+    button2: [],
+    featurePhoneLargeBanner: [],
+    featurePhoneMediumBanner: [],
+    featurePhoneSmallBanner: [],
+    halfPage: [],
+    inText: [],
+    largeLeaderboard: [],
+    largeRectangle: [],
+    leaderboard: [],
+    mediumRectangle: [],
+    microBar: [],
+    mobilePhoneInterstitial1: [],
+    mobilePhoneInterstitial2: [],
+    mobilePhoneInterstitial3: [],
+    popUp: [],
+    portrait: [],
+    rbProductUpcs: [],
+    skyscraper: [],
+    smallRectangle: [],
+    smallSquare: [],
+    smartphoneBanner1: [],
+    smartphoneBanner2: [],
+    square: [],
+    verticalBanner: [],
+    verticalRectangle: [],
+    wideSkyscraper: [],
+});
 
-// @TODO: Add support for user to push events to our own data layer, if they don't use any analytics tool.
-// window.rmnDataLayer = window.rmnDataLayer || [];
-class MonitorService {
-    constructor() {
-        const analyticsTool = this.detectAnalyticsTool();
-        switch (analyticsTool) {
-            case AnalyticsTool.GoogleAnalytics:
-                this.implementedMonitor = DataLayerMonitor.getInstance();
-                break;
-            case AnalyticsTool.Other:
-            default:
-                console.warn('This site uses an unsupported analytics tool.');
-                break;
-        }
-        if (analyticsTool === AnalyticsTool.Other) {
-            return;
-        }
-        this.pubSubService = PubsubService.getInstance();
-        this.localStorageService = LocalStorageService.getInstance();
-    }
-    static getInstance() {
-        if (!MonitorService.instance) {
-            MonitorService.instance = new MonitorService();
-        }
-        return MonitorService.instance;
-    }
-    start() {
-        if (!this.implementedMonitor)
-            return;
-        this.implementedMonitor.setListener(async (eventData) => {
-            var _a;
-            await this.matchAndFireEvent(eventData, (_a = this.localStorageService) === null || _a === void 0 ? void 0 : _a.getSpots());
-        });
-        this.implementedMonitor.start();
-    }
-    async matchAndFireEvent(eventData, spots) {
-        var _a, _b;
-        if (!spots)
-            return;
-        const eventProductIds = new Set(eventData.productIds);
-        for (const spot of Object.values(spots)) {
-            if (!spot.productIds.length)
-                continue;
-            const hasCommonProductIds = spot.productIds.find((productId) => eventProductIds.has(productId));
-            if (hasCommonProductIds) {
-                if (Object.values(RMN_SPOT_EVENT).includes(eventData.event)) {
-                    await this.fireAndPublishSpotEvent({
-                        spotEvent: eventData.event,
-                        eventUrl: (_b = (_a = spot.events.find((event) => event.event === eventData.event)) === null || _a === void 0 ? void 0 : _a.url) !== null && _b !== void 0 ? _b : '',
-                        placementId: spot.placementId,
-                        spotId: spot.spotId,
-                    });
-                }
-            }
-        }
-    }
-    async fireAndPublishSpotEvent({ spotEvent, eventUrl, placementId, spotId, }) {
-        await fireEvent({
-            event: spotEvent,
-            eventUrl,
-        });
-        if (!this.pubSubService)
-            return;
-        this.pubSubService.publish(RMN_EVENT.SPOT_EVENT, {
-            eventType: spotEvent,
-            placementId,
-            spotId,
-        });
-    }
-    detectAnalyticsTool() {
-        let analyticsTool = AnalyticsTool.Other;
-        // Check for Google Analytics
-        if (typeof window.ga !== 'undefined') {
-            analyticsTool = AnalyticsTool.GoogleAnalytics;
-        }
-        // Check for Google Analytics 4
-        if (typeof window.gtag !== 'undefined') {
-            analyticsTool = AnalyticsTool.GoogleAnalytics;
-        }
-        // Check for Google Tag Manager
-        if (typeof window.google_tag_manager !== 'undefined') {
-            analyticsTool = AnalyticsTool.GoogleAnalytics;
-        }
-        // @TODO: Add support for other analytics tools
-        // Check for Heap Analytics
-        // Check for Mixpanel
-        // Check for Woopra
-        // Check for Segment
-        // Check for Amplitude
-        return analyticsTool;
+/**
+ * Checks if the current environment is a browser environment.
+ *
+ * @return {boolean} - Whether the current environment is a browser environment.
+ */
+function isBrowserEnvironment() {
+    if (typeof window === 'undefined' || typeof document === 'undefined') {
+        console.warn('LiquidCommerce Rmn Sdk: Methods which create elements are only available in browser environments.');
+        return false;
     }
+    return true;
 }
-
-class EventService {
-    constructor() {
-        this.pubSubService = PubsubService.getInstance();
-        this.localStorageService = LocalStorageService.getInstance();
-        this.activeSpots = new Map();
-        this.spotStates = new Map();
-        this.intersectionObserver = new IntersectionObserverService();
-        // Start the user monitor, which will track and check user interactions
-        MonitorService.getInstance().start();
-    }
-    static getInstance() {
-        if (!EventService.instance) {
-            EventService.instance = new EventService();
-        }
-        return EventService.instance;
-    }
-    subscribe(eventType, callback) {
-        return this.pubSubService.subscribe(eventType, callback);
-    }
-    publish(eventType, data) {
-        this.pubSubService.publish(eventType, data);
-    }
-    registerSpot(params) {
-        const { placementId, spot, spotElement } = params;
-        this.activeSpots.set(placementId, { spotElement });
-        // Fire impression event
-        this.fireImpressionEvent(placementId, spot);
-        // Handle intersection observer
-        this.handleIntersectionObserver(placementId, spot, spotElement);
-        // Attach click event listener
-        spotElement.addEventListener('click', async () => await this.handleClick(params));
-    }
-    unregisterSpot(placementId) {
-        const placementIdClean = placementId.replace('#', '');
-        const spotData = this.activeSpots.get(placementIdClean);
-        if (!spotData) {
-            this.handleSpotState(placementIdClean, {
-                state: {
-                    error: `Active spot with placementId ${placementIdClean} not found.`,
-                },
-            });
-            return;
-        }
-        this.intersectionObserver.unobserve(spotData.spotElement);
-        this.handleSpotState(placementIdClean, {
-            dom: {
-                spotElement: undefined,
-                visibleOnViewport: false,
-            },
-            state: {
-                unmounted: true,
-                mounted: false,
-            },
-        });
-        this.activeSpots.delete(placementIdClean);
-        const placementElement = document.getElementById(placementIdClean);
-        if (!placementElement) {
-            this.handleSpotState(placementIdClean, {
+/**
+ * Validates the inject data by preventing duplicate placement ids and non-existent spot types.
+ *
+ * @param {IInjectSpotElement[]} inject - The inject data.
+ * @return {IInjectSpotElement[]} - The validated inject data.
+ */
+function validateInjectData(inject) {
+    const eventService = EventService.getInstance();
+    const placementIds = new Set();
+    const validSpotTypes = new Set(Object.values(RMN_SPOT_TYPE));
+    const validatedInject = [];
+    for (const item of inject) {
+        const placementId = item.placementId.replace('#', '');
+        // Check for duplicate placement ids
+        if (placementIds.has(placementId)) {
+            eventService.handleSpotState(placementId, {
                 state: {
-                    error: `Placement element with id ${placementIdClean} not found.`,
+                    error: `Duplicate placement id (${placementId}) found. Please provide a unique placement id for each spot element.`,
                 },
             });
-            return;
-        }
-        placementElement.innerHTML = '';
-    }
-    /**
-     * Updates the state of a spot.
-     *
-     * @param {string} placementId - The placement ID of the spot.
-     * @param {Partial<ILifecycleState>} updates - The updates to apply to the spot state.
-     * @param {boolean} publish - Whether to publish the updated state.
-     *
-     * @returns {void}
-     */
-    handleSpotState(placementId, updates, publish = true) {
-        let currentState = this.spotStates.get(placementId);
-        if (!currentState) {
-            currentState = {
-                identifier: {
-                    placementId,
-                    spotId: '',
-                    spotType: '',
-                },
-                dom: {
-                    spotElement: undefined,
-                    visibleOnViewport: false,
-                },
-                state: {
-                    mounted: false,
-                    unmounted: false,
-                    loading: false,
-                    error: undefined,
-                },
-                displayConfig: {
-                    isCarousel: false,
-                    isCarouselItem: false,
-                    isSingleItem: false,
-                },
-            };
-        }
-        const merged = this.deepMerge(currentState, updates);
-        this.spotStates.set(placementId, merged);
-        if (publish) {
-            this.pubSubService.publish(RMN_EVENT.LIFECYCLE_STATE, this.spotStates.get(placementId));
-        }
-    }
-    deepMerge(current, updates) {
-        return {
-            identifier: updates.identifier
-                ? { ...current.identifier, ...updates.identifier }
-                : current.identifier,
-            dom: updates.dom ? { ...current.dom, ...updates.dom } : current.dom,
-            state: updates.state ? { ...current.state, ...updates.state } : current.state,
-            displayConfig: updates.displayConfig
-                ? { ...current.displayConfig, ...updates.displayConfig }
-                : current.displayConfig,
-        };
-    }
-    async handleClick({ placementId, spot }) {
-        var _a, _b, _c;
-        this.pubSubService.publish(RMN_EVENT.SPOT_EVENT, {
-            eventType: RMN_SPOT_EVENT.CLICK,
-            placementId,
-            spotId: spot.id,
-        });
-        await fireEvent({
-            event: RMN_SPOT_EVENT.CLICK,
-            eventUrl: (_b = (_a = spot.events.find((event) => event.event === RMN_SPOT_EVENT.CLICK)) === null || _a === void 0 ? void 0 : _a.url) !== null && _b !== void 0 ? _b : '',
-        });
-        // Save spot to local storage for event tracking
-        this.localStorageService.setSpot(spot.id, {
-            placementId,
-            spotId: spot.id,
-            spotType: spot.spot,
-            events: spot.events,
-            productIds: (_c = spot.productIds) !== null && _c !== void 0 ? _c : [1, 2, 3],
-        });
-    }
-    handleIntersectionObserver(placementId, _spot, spotElement) {
-        const spotIsVisibleCallback = async () => {
-            this.intersectionObserver.unobserve(spotElement);
-            this.handleSpotState(placementId, {
-                dom: {
-                    spotElement,
-                    visibleOnViewport: true,
+            continue;
+        }
+        // Check for non-existent spot types
+        if (!validSpotTypes.has(item.spotType)) {
+            eventService.handleSpotState(placementId, {
+                state: {
+                    error: `Invalid spot type (${item.spotType}) found. Please provide a valid spot type for each spot element.`,
                 },
             });
-        };
-        this.intersectionObserver.observe(spotElement, spotIsVisibleCallback);
-    }
-    fireImpressionEvent(placementId, spot) {
-        this.pubSubService.publish(RMN_EVENT.SPOT_EVENT, {
-            eventType: RMN_SPOT_EVENT.IMPRESSION,
-            placementId,
-            spotId: spot.id,
-        });
-        (async () => {
-            var _a, _b;
-            await fireEvent({
-                event: RMN_SPOT_EVENT.IMPRESSION,
-                eventUrl: (_b = (_a = spot.events.find((event) => event.event === RMN_SPOT_EVENT.IMPRESSION)) === null || _a === void 0 ? void 0 : _a.url) !== null && _b !== void 0 ? _b : '',
-            });
-        })();
+            continue;
+        }
+        placementIds.add(placementId);
+        validatedInject.push(item);
     }
+    return validatedInject;
 }
-
-const SELECTION_API_PATH = '/spots/selection';
-
-class SelectionService extends BaseApi {
-    constructor(auth) {
-        super(auth);
-    }
-    static getInstance(auth) {
-        return SingletonManager.getInstance('SelectionService', () => new SelectionService(auth));
+/**
+ * Clears the placement element by removing all its children.
+ *
+ * @param {string} placementId - The placement id.
+ *
+ * @return {void}
+ */
+function clearPlacement(placementId) {
+    var _a;
+    (_a = document.getElementById(placementId)) === null || _a === void 0 ? void 0 : _a.replaceChildren();
+}
+/**
+ * Prepares the spot placement for rendering by taking care of its styling.
+ *
+ * @param {HTMLElement} placement - The placement element.
+ *
+ * @return {void}
+ */
+function prepareSpotPlacement(placement) {
+    placement.removeAttribute('style');
+    placement.removeAttribute('class');
+    const styles = {
+        width: '100%',
+        height: '100%',
+        display: 'flex',
+        justifyContent: 'center',
+    };
+    Object.assign(placement.style, styles);
+}
+/**
+ * Waits for the DOM to be ready before continuing.
+ *
+ * @return {Promise<void>} - A promise that resolves when the DOM is ready.
+ */
+async function waitForDOM() {
+    if (!isBrowserEnvironment()) {
+        return;
     }
-    /**
-     * Makes a selection request on our server based on the provided data.
-     *
-     * @param {ISpotSelectionParams} data - Spots selection parameters.
-     *
-     * @return {Promise<ISpots | { error: string }>} - The spots response object.
-     */
-    async spotSelection(data) {
-        const { isOk, val, isErr } = await this.post(SELECTION_API_PATH, data, {});
-        if (isErr) {
-            return { error: `There was an error during spot selection: (${isErr === null || isErr === void 0 ? void 0 : isErr.errorMessage})` };
-        }
-        if (isOk && val && val.data && (val === null || val === void 0 ? void 0 : val.refresh.token)) {
-            this.authInfo.authenticated = true;
-            this.authInfo.token = val.refresh.token;
-            return val.data.spots;
-        }
-        return { error: 'Spot selection response was not successful' };
+    if (document.readyState === 'complete' || document.readyState === 'interactive') {
+        return;
     }
+    return new Promise((resolve) => {
+        document.addEventListener('DOMContentLoaded', () => {
+            resolve();
+        });
+    });
 }
 
+/**
+ * LiquidCommerce Rmn Client
+ * @class
+ */
 class LiquidCommerceRmnClient {
     constructor(auth) {
         this.selectionService = SelectionService.getInstance(auth);
@@ -19511,14 +19652,11 @@ class LiquidCommerceRmnClient {
      */
     async injectSpotElement(params) {
         var _a;
-        if (typeof window === 'undefined' || typeof document === 'undefined') {
-            console.warn('LiquidCommerce Rmn Sdk: injectSpotElement method is only available in the browser environment.');
-            return;
-        }
+        // Wait for the DOM to be ready before continuing, to avoid issues with the spot placements
+        await waitForDOM();
         const config = params.config;
-        let inject = params.inject;
         // Handle no spots error state
-        if (!inject.length) {
+        if (!params.inject.length) {
             this.eventService.handleSpotState('all', {
                 state: {
                     error: 'No spot elements provided for injection.',
@@ -19526,49 +19664,32 @@ class LiquidCommerceRmnClient {
             });
             return;
         }
-        // Identify the spot elements
+        // Validate inject data
+        const inject = validateInjectData(params.inject);
         for (const item of inject) {
+            // Identify the spot element
             this.eventService.handleSpotState(item.placementId, {
                 identifier: {
                     placementId: item.placementId,
                     spotType: item.spotType,
                 },
             }, false);
-        }
-        // Prevent duplicate placement ids
-        const hasDuplicatePlacementIds = this.preventDuplicateSpotPlacementIds(inject);
-        if (!hasDuplicatePlacementIds) {
-            return;
-        }
-        // Prevent non-existent spot types
-        inject = this.preventNonExistentSpotTypes(inject);
-        // Add Intersection Observer to the spot elements to track visibility
-        // This is useful for lazy loading the spot elements
-        for (const item of inject) {
-            const placementId = item.placementId.replace('#', '');
-            const placement = document.getElementById(placementId);
+            const placement = document.getElementById(item.placementId);
+            // Handle placement not found error state
             if (!placement) {
-                // Handle placement not found error state
                 this.eventService.handleSpotState(item.placementId, {
                     state: {
-                        error: `Placement not found for id "${placementId}".`,
+                        error: `Placement not found for id "${item.placementId}".`,
                     },
                 });
                 continue;
             }
-            // Take over placement styles
-            placement.removeAttribute('style');
-            placement.removeAttribute('class');
-            Object.assign(placement.style, {
-                width: '100%',
-                height: '100%',
-                display: 'flex',
-                justifyContent: 'center',
-            });
+            prepareSpotPlacement(placement);
             const skeletonElement = this.elementService.createSkeletonElement({
                 fluid: (_a = config === null || config === void 0 ? void 0 : config.fluid) !== null && _a !== void 0 ? _a : false,
                 spotType: item.spotType,
             });
+            // Handle skeleton loader error state
             if (!skeletonElement) {
                 this.eventService.handleSpotState(item.placementId, {
                     state: {
@@ -19580,19 +19701,15 @@ class LiquidCommerceRmnClient {
                 continue;
             }
             placement.replaceChildren(skeletonElement);
-            const spotPlacementIsNear = async () => {
+            const spotPlacementIsNearCallback = async () => {
                 var _a;
-                // Set the spot element to loading state
-                this.eventService.handleSpotState(item.placementId, {
-                    state: {
-                        loading: true,
-                    },
-                });
-                // Stop observing the placement
+                // Stop observing the placement, as we only need to do this once
                 this.intersectionObserver.unobserve(placement);
+                // Set the spot element to loading state
+                this.eventService.handleSpotState(item.placementId, { state: { loading: true } });
                 // Make the spot selection request
-                const response = await this.spotSelectionRequest({ ...params, inject: [item] });
-                // const response = await this.useSpotSelectionExample(inject);
+                const response = await this.injectSpotSelectionRequest({ ...params, inject: [item] });
+                // const response = await useSpotSelectionExample(inject);
                 // Handle request error state
                 if (typeof response === 'object' && 'error' in response) {
                     this.eventService.handleSpotState(item.placementId, {
@@ -19602,13 +19719,13 @@ class LiquidCommerceRmnClient {
                             loading: false,
                         },
                     });
-                    this.clearPlacement(item.placementId);
+                    clearPlacement(item.placementId);
                     return;
                 }
                 const itemConfig = (_a = item.config) !== null && _a !== void 0 ? _a : config;
                 const spots = response[item.placementId];
+                // Handle no spots found error state
                 if (!(spots === null || spots === void 0 ? void 0 : spots.length)) {
-                    // Handle no spots found error state
                     this.eventService.handleSpotState(item.placementId, {
                         state: {
                             error: `No spots found for type "${item.spotType}".`,
@@ -19616,22 +19733,105 @@ class LiquidCommerceRmnClient {
                             loading: false,
                         },
                     });
-                    this.clearPlacement(item.placementId);
+                    clearPlacement(item.placementId);
                     return;
                 }
                 // Handle single spot
                 if (spots.length === 1) {
-                    this.injectOneSpotElement(item, placement, spots[0], itemConfig);
+                    this.injectOneSpotElement(placement, spots[0], itemConfig);
                 }
                 // Handle multiple spots (carousel)
                 if (spots.length > 1) {
                     this.injectCarouselSpotElement(placement, spots, itemConfig);
                 }
             };
-            this.intersectionObserver.observe(placement, spotPlacementIsNear, { rootMargin: '500px' });
+            /**
+             * Observe the placement element to check if it is near the viewport.
+             * If it is near, make the spot selection request.
+             */
+            this.intersectionObserver.observe(placement, spotPlacementIsNearCallback, {
+                rootMargin: '500px',
+            });
+        }
+    }
+    /**
+     * Injects a single spot element into the provided placement.
+     *
+     * @param {HTMLElement} placement - The placement element.
+     * @param {ISpot} spot - The spot data.
+     * @param {IInjectSpotElementConfig} config - The configuration object.
+     *
+     * @return {void}
+     */
+    injectOneSpotElement(placement, spot, config) {
+        var _a;
+        const placementId = placement.id;
+        const spotType = spot.spot;
+        this.eventService.handleSpotState(placementId, {
+            identifier: {
+                placementId,
+                spotType,
+                spotId: spot.id,
+            },
+            displayConfig: {
+                isSingleItem: true,
+                isCarousel: false,
+                isCarouselItem: false,
+            },
+        });
+        const spotData = this.elementService.overrideSpotColors(spot, config === null || config === void 0 ? void 0 : config.colors);
+        const content = SPOT_TEMPLATE_HTML_ELEMENT(spotData, { overlay: config === null || config === void 0 ? void 0 : config.overlay });
+        if (!content) {
+            this.eventService.handleSpotState(placementId, {
+                state: {
+                    error: `Failed to inject spot element. Could not create element for type "${spotType}".`,
+                    mounted: false,
+                    loading: false,
+                },
+            });
+            clearPlacement(placementId);
+            return;
+        }
+        // Create the spot element
+        const spotElement = this.elementService.createSpotElement({
+            content,
+            config: {
+                fluid: config === null || config === void 0 ? void 0 : config.fluid,
+                spot: spot.spot,
+                width: spot.width,
+                height: spot.height,
+                minScale: (_a = config === null || config === void 0 ? void 0 : config.minScale) !== null && _a !== void 0 ? _a : 0.25, // Scale down to 25% of the original size
+            },
+        });
+        if (!spotElement) {
+            this.eventService.handleSpotState(placementId, {
+                state: {
+                    error: `Failed to inject spot element. Could not create element for type "${spotType}".`,
+                    mounted: false,
+                    loading: false,
+                },
+            });
+            clearPlacement(placementId);
+            return;
         }
+        this.eventService.registerSpot({
+            spot: spotData,
+            placementId,
+            spotElement,
+        });
+        placement.replaceChildren(spotElement);
+        this.eventService.handleSpotState(placementId, {
+            dom: {
+                spotElement,
+                visibleOnViewport: false,
+            },
+            state: {
+                mounted: true,
+                loading: false,
+                error: undefined,
+            },
+        });
     }
-    /** ========================= HELPER METHODS ========================= **/
     /**
      * Injects a carousel element with the provided spots into the placement.
      *
@@ -19643,11 +19843,12 @@ class LiquidCommerceRmnClient {
      */
     injectCarouselSpotElement(placement, spots, config) {
         var _a;
+        const placementId = placement.id;
         const carouselSlides = [];
         for (const spotItem of spots) {
-            this.eventService.handleSpotState(placement.id, {
+            this.eventService.handleSpotState(placementId, {
                 identifier: {
-                    placementId: placement.id,
+                    placementId,
                     spotType: spotItem.spot,
                     spotId: spotItem.id,
                 },
@@ -19660,7 +19861,7 @@ class LiquidCommerceRmnClient {
             const spot = this.elementService.overrideSpotColors(spotItem, config === null || config === void 0 ? void 0 : config.colors);
             const content = SPOT_TEMPLATE_HTML_ELEMENT(spot, { overlay: config === null || config === void 0 ? void 0 : config.overlay });
             if (!content) {
-                this.eventService.handleSpotState(placement.id, {
+                this.eventService.handleSpotState(placementId, {
                     state: {
                         error: `Failed to inject carousel spot item element. Could not create element for type "${spot.spot}".`,
                         mounted: false,
@@ -19671,7 +19872,7 @@ class LiquidCommerceRmnClient {
             }
             this.eventService.registerSpot({
                 spot,
-                placementId: placement.id,
+                placementId,
                 spotElement: content,
             });
             carouselSlides.push(content);
@@ -19693,18 +19894,18 @@ class LiquidCommerceRmnClient {
             },
         });
         if (!carouselElement) {
-            this.eventService.handleSpotState(placement.id, {
+            this.eventService.handleSpotState(placementId, {
                 state: {
                     error: `Failed to inject spot carousel element. Could not create spot carousel element.`,
                     mounted: false,
                     loading: false,
                 },
             });
-            this.clearPlacement(placement.id);
+            clearPlacement(placementId);
             return;
         }
         placement.replaceChildren(carouselElement);
-        this.eventService.handleSpotState(placement.id, {
+        this.eventService.handleSpotState(placementId, {
             dom: {
                 spotElement: carouselElement,
                 visibleOnViewport: false,
@@ -19716,94 +19917,6 @@ class LiquidCommerceRmnClient {
             },
         });
     }
-    /**
-     * Injects a single spot element into the provided placement.
-     *
-     * @param {IInjectSpotElement} injectItem - The inject item data.
-     * @param {HTMLElement} placement - The placement element.
-     * @param {ISpot} spot - The spot data.
-     * @param {IInjectSpotElementConfig} config - The configuration object.
-     *
-     * @return {void}
-     */
-    injectOneSpotElement(injectItem, placement, spot, config) {
-        var _a;
-        this.eventService.handleSpotState(injectItem.placementId, {
-            identifier: {
-                placementId: injectItem.placementId,
-                spotType: injectItem.spotType,
-                spotId: spot.id,
-            },
-            displayConfig: {
-                isSingleItem: true,
-                isCarousel: false,
-                isCarouselItem: false,
-            },
-        });
-        const spotData = this.elementService.overrideSpotColors(spot, config === null || config === void 0 ? void 0 : config.colors);
-        const content = SPOT_TEMPLATE_HTML_ELEMENT(spotData, { overlay: config === null || config === void 0 ? void 0 : config.overlay });
-        if (!content) {
-            this.eventService.handleSpotState(injectItem.placementId, {
-                state: {
-                    error: `Failed to inject spot element. Could not create element for type "${injectItem.spotType}".`,
-                    mounted: false,
-                    loading: false,
-                },
-            });
-            this.clearPlacement(injectItem.placementId);
-            return;
-        }
-        // Create the spot element
-        const spotElement = this.elementService.createSpotElement({
-            content,
-            config: {
-                fluid: config === null || config === void 0 ? void 0 : config.fluid,
-                spot: spot.spot,
-                width: spot.width,
-                height: spot.height,
-                minScale: (_a = config === null || config === void 0 ? void 0 : config.minScale) !== null && _a !== void 0 ? _a : 0.25, // Scale down to 25% of the original size
-            },
-        });
-        if (!spotElement) {
-            this.eventService.handleSpotState(injectItem.placementId, {
-                state: {
-                    error: `Failed to inject spot element. Could not create element for type "${injectItem.spotType}".`,
-                    mounted: false,
-                    loading: false,
-                },
-            });
-            this.clearPlacement(injectItem.placementId);
-            return;
-        }
-        this.eventService.registerSpot({
-            spot: spotData,
-            placementId: injectItem.placementId,
-            spotElement,
-        });
-        placement.replaceChildren(spotElement);
-        this.eventService.handleSpotState(injectItem.placementId, {
-            dom: {
-                spotElement,
-                visibleOnViewport: false,
-            },
-            state: {
-                mounted: true,
-                loading: false,
-                error: undefined,
-            },
-        });
-    }
-    /**
-     * Clears the placement element by removing all its children.
-     *
-     * @param {string} placementId - The placement id.
-     *
-     * @return {void}
-     */
-    clearPlacement(placementId) {
-        var _a;
-        (_a = document.getElementById(placementId)) === null || _a === void 0 ? void 0 : _a.replaceChildren();
-    }
     /**
      * Makes a selection request on our server based on the provided data.
      *
@@ -19811,77 +19924,23 @@ class LiquidCommerceRmnClient {
      *
      * @return {Promise<ISpots | {error: string}>} - The spots response object.
      */
-    async spotSelectionRequest(params) {
+    async injectSpotSelectionRequest(params) {
         const { inject, filter, config } = params;
+        const localStorageService = LocalStorageService.getInstance();
+        const spots = inject.map((item) => ({
+            placementId: item.placementId,
+            spot: item.spotType,
+            count: item === null || item === void 0 ? void 0 : item.count,
+            ...item === null || item === void 0 ? void 0 : item.filter,
+        }));
         const request = {
+            userId: localStorageService.getUserId(),
             url: config === null || config === void 0 ? void 0 : config.url,
             filter,
-            spots: inject.map((item) => ({
-                placementId: item.placementId,
-                spot: item.spotType,
-                count: item === null || item === void 0 ? void 0 : item.count,
-                ...item === null || item === void 0 ? void 0 : item.filter,
-            })),
+            spots,
         };
         return this.spotSelection(request);
     }
-    /**
-     * Prevents duplicate placement ids in the inject data.
-     *
-     * @param {IInjectSpotElement[]} inject - The inject data.
-     *
-     * @throws {Error} - If a duplicate placement id is found.
-     *
-     * @return {void}
-     */
-    preventDuplicateSpotPlacementIds(inject) {
-        const placementIds = new Set();
-        for (const item of inject) {
-            if (placementIds.has(item.placementId)) {
-                this.eventService.handleSpotState(item.placementId, {
-                    state: {
-                        error: `Duplicate placement id (${item.placementId}) found. Please provide a unique placement id for each spot element.`,
-                    },
-                });
-                return false;
-            }
-            placementIds.add(item.placementId);
-        }
-        return true;
-    }
-    /**
-     * Prevents non-existent spot types in the inject data.
-     *
-     * @param {IInjectSpotElement[]} inject - The inject data.
-     * @return {IInjectSpotElement[]} - The filtered inject data.
-     */
-    preventNonExistentSpotTypes(inject) {
-        const newInject = [];
-        for (const item of inject) {
-            if (!Object.values(RMN_SPOT_TYPE).includes(item.spotType)) {
-                this.eventService.handleSpotState(item.placementId, {
-                    state: {
-                        error: `Invalid spot type (${item.spotType}) found. Please provide a valid spot type for each spot element.`,
-                    },
-                });
-                continue;
-            }
-            newInject.push(item);
-        }
-        return newInject;
-    }
-    // Use spot selection example data for private testing
-    useSpotSelectionExample(inject) {
-        const examples = { ...RB_SPOTS_SELECTION_EXAMPLE, ...IAB_SPOTS_SELECTION_EXAMPLE };
-        const data = {};
-        inject.map((item) => {
-            var _a, _b, _c;
-            data[item.placementId] = (_c = (_a = examples[item.spotType]) === null || _a === void 0 ? void 0 : _a.slice(0, (_b = item.count) !== null && _b !== void 0 ? _b : 1)) !== null && _c !== void 0 ? _c : [];
-        });
-        return new Promise((resolve) => {
-            resolve(data);
-        });
-    }
 }
 /**
  * Creates a new instance of the RmnClient.