feat(currency): Currency switcher

components/CurrencySwitcher.vue

@@ -0,0 +1,3 @@
+<template>
+    <CurrencySwitcherInner />
+</template>

components/CurrencySwitcherInner.vue

@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import type { Schemas } from '@shopware/api-client/api-types';
+import type { AcceptableValue } from 'reka-ui';
+
+const { currency, setCurrency } = useSessionContext();
+const { getAvailableCurrencies } = usePondSalesChannel();
+
+const availableCurrencies: Ref<null | Schemas['Currency'][]> = ref(null);
+const selectedCurrencyId: Ref<null | AcceptableValue> = ref(null);
+
+onMounted(() => {
+    selectedCurrencyId.value = currency.value.id;
+});
+
+const { data } = await getAvailableCurrencies();
+if (data.value) {
+    // Remove fetchedAt & server, which is returned due to async fetch
+    const { fetchedAt, server, ...currencies } = data.value;
+    availableCurrencies.value = currencies;
+}
+
+const onUpdate = async (selectedId: AcceptableValue) => {
+    const arrayOfAvailableCurrencies = availableCurrencies.value ? Object.values(availableCurrencies.value) : [];
+    const currency = arrayOfAvailableCurrencies.find(availableCurrency => availableCurrency.id === selectedId);
+    if (currency) {
+        await setCurrency(currency);
+        selectedCurrencyId.value = selectedId;
+    }
+};
+</script>
+
+<template>
+    <UiSelect :model-value="selectedCurrencyId" @update:model-value="onUpdate">
+        <slot name="currency-switcher-trigger">
+            <UiSelectTrigger>
+                <UiSelectValue  />
+            </UiSelectTrigger>
+        </slot>
+
+        <slot name="currency-switcher-content">
+            <UiSelectContent>
+                <UiSelectGroup>
+                    <UiSelectItem
+                        v-for="availableCurrency in availableCurrencies || []"
+                        :key="availableCurrency.id"
+                        :value="availableCurrency.id"
+                    >
+                        {{ availableCurrency.symbol }}
+                        {{ availableCurrency.shortName }}
+                    </UiSelectItem>
+                </UiSelectGroup>
+            </UiSelectContent>
+        </slot>
+    </UiSelect>
+</template>

components/layout/footer/LayoutFooterInner.vue

@@ -49,6 +49,12 @@ defineProps<{
                         </div>
                     </slot>
 
+                    <slot name="currency-switcher">
+                        <div class="w-full mt-5 md:mt-0 md:w-auto flex justify-self-end">
+                            <CurrencySwitcher />
+                        </div>
+                    </slot>
+
                     <!-- footer service navigation -->
                     <slot name="footer-service-navigation">
                         <LayoutFooterSericeNavigation :navigation-elements="serviceNavigationElements" />

composables/usePondSalesChannel.ts

@@ -0,0 +1,15 @@
+export function usePondSalesChannel() {
+    const { apiClient } = useShopwareContext();
+    const { handleError } = usePondHandleError();
+
+    const getAvailableCurrencies = async () => usePondCacheAsyncData('availableCurrencies', async () => {
+        try {
+            return (await apiClient.invoke('loadCurrencies get /currency')).data;
+        } catch (error) {
+            handleError(error);
+            return null;
+        }
+    });
+
+    return { getAvailableCurrencies };
+}