Load external javascript with saved settings using Shopify app.

[ajitpickcel]

I want to create an app that loads external script. I am using Shopify CLI to create app and I managed to take input form user and save the input as setting.

export const loader = async ({ request }) => {
  // Fetch current settings from your database
  const settings = await fetchSettingsFromDB();
  return json(settings);
};

export const action = async ({ request }) => {
  const formData = await request.formData();
  const enableChatbot = formData.get("enableChatbot") === "on";
  const chatbotId = formData.get("chatbotId");

  // Save settings to your database
  await saveSettingsToDB({ enableChatbot, chatbotId });

  return { success: true };
};
export default function App() {
  const settings = useLoaderData();
  const actionData = useActionData();

  const labelStyle = {
    display: "block",
    width: "100px",
    height: "40px",
    lineHeight: "40px",
  };

  const flex = {
    display: "flex",
    alignItems: "center",
    gap: "10px",
  };

  return (
    <AppProvider>
      <Page>
        <Layout>
          <Layout.Section>
            <div style={{ fontFamily: "sans-serif" }}>
              <Form method="post">
                <h2 style={{ fontWeight: "bold", fontSize: "1.2rem" }}>
                  Thinkstack Settings
                </h2>
                <hr />
                <label style={flex}>
                  <span style={labelStyle}>Enable Chatbot</span>:
                  <input
                    type="checkbox"
                    name="enableChatbot"
                    defaultChecked={settings.enableChatbot}
                  />
                </label>
                <label style={flex}>
                  <span style={labelStyle}>Chatbot ID</span>:
                  <input
                    type="text"
                    name="chatbotId"
                    style={{ height: "30px" }}
                    defaultValue={settings.chatbotId}
                  />
                </label>
                <button type="submit" style={{ height: "40px", width: "80px" }}>
                  Save
                </button>
              </Form>
              {actionData && actionData.error ? (
                <p style={{ color: "red" }}>{actionData.error}</p>
              ) : (
                <p style={{ color: "green" }}>Saved!</p>
              )}
            </div>
          </Layout.Section>
        </Layout>
      </Page>
    </AppProvider>
  );
}

app/routes/_index.jsx

After this I want to load the script on the website the app is installed for. Here is what I am true.

export const action = async ({ request }) => {
  const { session, chatbotId } = await request.json();
  const client = new Shopify.Clients.Rest(session.shop, session.accessToken);

  try {
    const response = await client.post({
      path: "script_tags",
      data: {
        script_tag: {
          event: "onload",
          src: `https://app.thinkstack.ai/bot/thinkstackai-loader.min.js?id=${chatbotId}`,
        },
      },
      type: "application/json",
    });
    return json(response);
  } catch (error) {
    return json({ error: error.message }, { status: 500 });
  }
};

app/api/create-script.js

export const loader = async ({ request }) => {
  const url = new URL(request.url);
  const query = Object.fromEntries(url.searchParams.entries());
  const session = await Shopify.Auth.validateAuthCallback(request, query);

  const settings = await fetchSettingsFromDB();
  if (settings.enableChatbot) {
    const response = await fetch(`${url.origin}/api/create-script-tag`, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({ session, chatbotId: settings.chatbotId }),
    });

    if (!response.ok) {
      throw new Error("Failed to create script tag");
    }
  }

  return redirect(`https://${session.shop}/admin/apps`);
};

app/auth/callback.js

NOTE: I am new to Shopify and I am not sure what I am doing wrong.