Add currency select (saleor#1047)

Author: typeofweb

src/ui/components/ChannelSelect.tsx

@@ -0,0 +1,28 @@
+"use client";
+
+import { useParams, useRouter } from "next/navigation";
+
+export const ChannelSelect = ({
+	channels,
+}: {
+	channels: { id: string; name: string; slug: string; currencyCode: string }[];
+}) => {
+	const router = useRouter();
+	const params = useParams<{ channel: string }>();
+
+	return (
+		<select
+			className="h-10 w-fit rounded-md border border-neutral-300 bg-transparent bg-white px-4 py-2 pr-10 text-sm  placeholder:text-neutral-500 focus:border-black focus:ring-black"
+			onChange={(e) => {
+				const newChannel = e.currentTarget.value;
+				return router.push(`/${newChannel}`);
+			}}
+		>
+			{channels.map((channel) => (
+				<option key={channel.id} value={channel.slug} selected={params.channel === channel.slug}>
+					{channel.currencyCode}
+				</option>
+			))}
+		</select>
+	);
+};

src/ui/components/Footer.tsx

@@ -1,12 +1,22 @@
 import { LinkWithChannel } from "../atoms/LinkWithChannel";
-import { MenuGetBySlugDocument } from "@/gql/graphql";
+import { ChannelSelect } from "./ChannelSelect";
+import { ChannelsListDocument, MenuGetBySlugDocument } from "@/gql/graphql";
 import { executeGraphQL } from "@/lib/graphql";
 
 export async function Footer({ channel }: { channel: string }) {
 	const footerLinks = await executeGraphQL(MenuGetBySlugDocument, {
 		variables: { slug: "footer", channel },
 		revalidate: 60 * 60 * 24,
 	});
+	const channels = process.env.SALEOR_APP_TOKEN
+		? await executeGraphQL(ChannelsListDocument, {
+				withAuth: false, // disable cookie-based auth for this call
+				headers: {
+					// and use app token instead
+					Authorization: `Bearer ${process.env.SALEOR_APP_TOKEN}`,
+				},
+		  })
+		: null;
 	const currentYear = new Date().getFullYear();
 
 	return (
@@ -61,6 +71,14 @@ export async function Footer({ channel }: { channel: string }) {
 					})}
 				</div>
 
+				{channels?.channels && (
+					<div className="mb-4 text-neutral-500">
+						<label>
+							<span className="text-sm">Change currency:</span> <ChannelSelect channels={channels.channels} />
+						</label>
+					</div>
+				)}
+
 				<div className="flex flex-col justify-between border-t border-neutral-200 py-10 sm:flex-row">
 					<p className="text-sm text-neutral-500">Copyright &copy; {currentYear} Your Store, Inc.</p>
 					<p className="text-sm text-neutral-500">Powered by Saleor</p>