Merge pull request #1194 from cultuurnet/bugfix/PPF-498

resources/ts/Pages/Integrations/New.tsx

@@ -1,6 +1,5 @@
 import type { FormEvent, ReactNode } from "react";
-import React from "react";
-import { useState } from "react";
+import React, { useEffect, useState } from "react";
 import { router, useForm } from "@inertiajs/react";
 import Layout from "../../layouts/Layout";
 import { Heading } from "../../Components/Heading";
@@ -33,12 +32,6 @@ const New = ({ subscriptions }: Props) => {
   const { t } = useTranslation();
   const { i18n } = useTranslation();
 
-  const freeSubscriptionId = subscriptions.find(
-    (subscription) =>
-      subscription.integrationType === IntegrationType.EntryApi &&
-      subscription.price === 0
-  )?.id;
-
   const basicSubscriptionIds = subscriptions
     .filter(
       (subscription) => subscription.category === SubscriptionCategory.Basic
@@ -53,10 +46,7 @@ const New = ({ subscriptions }: Props) => {
 
   const initialFormValues = {
     integrationType: activeType,
-    subscriptionId:
-      activeType === IntegrationType.EntryApi && !!freeSubscriptionId
-        ? freeSubscriptionId
-        : "",
+    subscriptionId: "",
     integrationName: "",
     description: "",
     website: "",
@@ -77,6 +67,17 @@ const New = ({ subscriptions }: Props) => {
   const { data, setData, errors, hasErrors, post, processing } =
     useForm(initialFormValues);
 
+  useEffect(() => {
+    const freeSubscriptionId = subscriptions.find(
+      (subscription) =>
+        subscription.integrationType === activeType &&
+        subscription.category === SubscriptionCategory.Free
+    )?.id;
+
+    setData("subscriptionId", freeSubscriptionId ?? "");
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [activeType, subscriptions]);
+
   function handleSubmit(e: FormEvent<HTMLFormElement>) {
     e.preventDefault();
     post("/integrations", {