Adjust how we pass selected payment method & resolve channel slug

src/modules/environment/components/environment.tsx

@@ -17,14 +17,19 @@ import {
 } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
 import { toast } from "@/components/ui/use-toast";
-import { env } from "@/env";
 import { type FragmentOf } from "@/graphql/gql";
 import { envUrlSchema } from "@/lib/env-url";
 import { clearIdempotencyKey } from "@/lib/idempotency-key";
 
 import { fetchProduct } from "../actions/fetch-product";
 import { ProductFragment } from "../fragments";
 import { Cart } from "./cart";
+import {
+  resolveChannelSlug,
+  resolveEnvUrl,
+  saveChannelSlugToLocalStorage,
+  saveEnvUrlToLocalStorage,
+} from "./storage-helpers";
 
 const EnvironmentConfigSchema = z.object({
   url: envUrlSchema,
@@ -33,22 +38,6 @@ const EnvironmentConfigSchema = z.object({
 
 type EnvironmentConfigSchemaType = z.infer<typeof EnvironmentConfigSchema>;
 
-const lsKey = "saleorApiUrl";
-
-const getEnvFromLs = () => {
-  try {
-    return localStorage.getItem(lsKey) ?? "";
-  } catch (e) {
-    return "";
-  }
-};
-
-const saveEnvToLs = (env: string) => {
-  try {
-    localStorage.setItem(lsKey, env);
-  } catch (e) {}
-};
-
 export const Environment = () => {
   const [products, setProducts] = useState<
     FragmentOf<typeof ProductFragment>[]
@@ -57,14 +46,14 @@ export const Environment = () => {
   const form = useForm<EnvironmentConfigSchemaType>({
     resolver: zodResolver(EnvironmentConfigSchema),
     defaultValues: {
-      url: getEnvFromLs(),
-      channelSlug: env.NEXT_PUBLIC_INITIAL_CHANNEL_SLUG,
+      url: resolveEnvUrl(),
+      channelSlug: resolveChannelSlug(),
     },
   });
 
   const onSubmit = async (data: EnvironmentConfigSchemaType) => {
-    saveEnvToLs(data.url);
-
+    saveEnvUrlToLocalStorage(data.url);
+    saveChannelSlugToLocalStorage(data.channelSlug);
     const response = await fetchProduct({
       channelSlug: data.channelSlug,
       envUrl: data.url,

src/modules/environment/components/storage-helpers.ts

@@ -0,0 +1,39 @@
+import { env } from "@/env";
+
+const localStorageEnvKey = "saleorApiUrl";
+
+export const resolveEnvUrl = () => {
+  try {
+    return (
+      localStorage.getItem(localStorageEnvKey) ??
+      env.NEXT_PUBLIC_INITIAL_ENV_URL
+    );
+  } catch (e) {
+    return env.NEXT_PUBLIC_INITIAL_ENV_URL;
+  }
+};
+
+export const saveEnvUrlToLocalStorage = (env: string) => {
+  try {
+    localStorage.setItem(localStorageEnvKey, env);
+  } catch (e) {}
+};
+
+const localStorageChannelKey = "saleorChannelSlug";
+
+export const resolveChannelSlug = () => {
+  try {
+    return (
+      localStorage.getItem(localStorageChannelKey) ??
+      env.NEXT_PUBLIC_INITIAL_CHANNEL_SLUG
+    );
+  } catch (e) {
+    return env.NEXT_PUBLIC_INITIAL_CHANNEL_SLUG;
+  }
+};
+
+export const saveChannelSlugToLocalStorage = (channelSlug: string) => {
+  try {
+    localStorage.setItem(localStorageChannelKey, channelSlug);
+  } catch (e) {}
+};

src/modules/stripe/components/stripe-checkout-form.tsx

@@ -54,7 +54,6 @@ export const StripeCheckoutFormWrapped = (props: {
   const stripe = useStripe();
   const elements = useElements();
   const [loading, setLoading] = useState(false);
-  const [paymentMethod, setPaymentMethod] = useState<string | null>(null);
 
   const handleSubmit = async (event: any) => {
     if (!stripe) {
@@ -68,7 +67,8 @@ export const StripeCheckoutFormWrapped = (props: {
     }
 
     // Trigger form validation and wallet collection
-    const { error: submitError } = await elements.submit();
+    const { error: submitError, selectedPaymentMethod } =
+      await elements.submit();
 
     if (submitError) {
       toast({
@@ -81,7 +81,7 @@ export const StripeCheckoutFormWrapped = (props: {
 
     setLoading(true);
 
-    if (!paymentMethod) {
+    if (!selectedPaymentMethod) {
       setLoading(false);
       toast({
         variant: "destructive",
@@ -99,7 +99,7 @@ export const StripeCheckoutFormWrapped = (props: {
       idempotencyKey: getIdempotencyKey(),
       data: {
         paymentIntent: {
-          paymentMethod,
+          paymentMethod: selectedPaymentMethod,
         },
       },
     });
@@ -168,11 +168,7 @@ export const StripeCheckoutFormWrapped = (props: {
 
   return (
     <form onSubmit={handleSubmit} className="flex flex-col gap-4">
-      <PaymentElement
-        onChange={(event) => {
-          setPaymentMethod(event.value.type);
-        }}
-      />
+      <PaymentElement />
       <div className="flex justify-stretch">
         <Button
           type="submit"