Rename Shop and Newsletter modules files

src/components/organisms/ShopModule.svelte

@@ -0,0 +1,74 @@
+<script lang="ts">
+    import { getContext, onMount } from 'svelte'
+    // Components
+    import Button from '$components/atoms/Button.svelte'
+    import Image from '$components/atoms/Image.svelte'
+
+    interface Location {
+        slug: string
+        name: string
+        has_poster: boolean
+    }
+
+    const { locations, shop } = getContext('global')
+    const locationsWithPoster = locations
+        // Filter locations with posters only
+        .filter((loc: Location) => loc.has_poster)
+        // Sort locations alphabetically from slug (a>z)
+        .sort((a: Location, b: Location) => a.slug.localeCompare(b.slug))
+        // Return name only
+        .map((loc: Location) => loc.name)
+
+
+    // Image rotation
+    let imagesLoop: ReturnType<typeof setTimeout>
+    let currentImageIndex = 0
+
+    const incrementCurrentImageIndex = () => {
+        currentImageIndex = currentImageIndex === shop.module_images.length - 1 ? 0 : currentImageIndex + 1
+        imagesLoop = setTimeout(() => requestAnimationFrame(incrementCurrentImageIndex), 3000)
+    }
+
+    onMount(() => {
+        incrementCurrentImageIndex()
+
+        return () => {
+            // Clear rotating words timeout
+            clearTimeout(imagesLoop)
+        }
+    })
+</script>
+
+<div class="shop shadow-box-dark">
+    <div class="content">
+        <div class="shop__images">
+            {#if shop.module_images}
+            <a href="/shop" sveltekit:noscroll sveltekit:prefetch>
+                {#each shop.module_images as { directus_files_id: { id }, title }, index}
+                    <Image
+                        class={index === currentImageIndex ? 'is-visible' : null}
+                        {id}
+                        sizeKey="square"
+                        sizes={{
+                            small: { width: 400, height: 400 },
+                            large: { width: 800, height: 800 },
+                        }}
+                        alt={title}
+                    />
+                {/each}
+            </a>
+            {/if}
+        </div>
+
+        <div class="shop__content">
+            <h2 class="title-medium">{shop.module_title}</h2>
+            <p class="text-small">{shop.module_text}</p>
+            {#if shop.enabled}
+                <Button url="/shop" text="Shop" color="pinklight" />
+            {/if}
+            <p class="detail">
+                Posters available for {locationsWithPoster.join(', ').replace(/,(?!.*,)/gmi, ' and')}.
+            </p>
+        </div>
+    </div>
+</div>