first commit

calcom/packages/app-store/qr_code/components/EventTypeAppCardInterface.tsx

@@ -0,0 +1,32 @@
+import { useAppContextWithSchema } from "@calcom/app-store/EventTypeAppContext";
+import AppCard from "@calcom/app-store/_components/AppCard";
+import useIsAppEnabled from "@calcom/app-store/_utils/useIsAppEnabled";
+import type { EventTypeAppCardComponent } from "@calcom/app-store/types";
+
+import type { appDataSchema } from "../zod";
+import EventTypeAppSettingsInterface from "./EventTypeAppSettingsInterface";
+
+const EventTypeAppCard: EventTypeAppCardComponent = function EventTypeAppCard({ eventType, app }) {
+  const { enabled, updateEnabled } = useIsAppEnabled(app);
+  const { disabled, getAppData, setAppData } = useAppContextWithSchema<typeof appDataSchema>();
+
+  return (
+    <AppCard
+      app={app}
+      switchOnClick={(e) => {
+        updateEnabled(e);
+      }}
+      switchChecked={enabled}
+      teamId={eventType.team?.id || undefined}>
+      <EventTypeAppSettingsInterface
+        eventType={eventType}
+        slug={app.slug}
+        disabled={disabled}
+        getAppData={getAppData}
+        setAppData={setAppData}
+      />
+    </AppCard>
+  );
+};
+
+export default EventTypeAppCard;

calcom/packages/app-store/qr_code/components/EventTypeAppSettingsInterface.tsx

@@ -0,0 +1,55 @@
+import { useState } from "react";
+
+import type { EventTypeAppSettingsComponent } from "@calcom/app-store/types";
+import { classNames } from "@calcom/lib";
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { TextField, Tooltip } from "@calcom/ui";
+
+const EventTypeAppSettingsInterface: EventTypeAppSettingsComponent = ({ eventType, disabled }) => {
+  const { t } = useLocale();
+  const [additionalParameters, setAdditionalParameters] = useState("");
+  const query = additionalParameters !== "" ? `?${additionalParameters}` : "";
+  const eventTypeURL = eventType.URL + query;
+
+  function QRCode({ size, data }: { size: number; data: string }) {
+    const QR_URL = `https://api.qrserver.com/v1/create-qr-code/?size=${size}&data=${data}`;
+    return (
+      <Tooltip content={eventTypeURL}>
+        <a download href={QR_URL} target="_blank" rel="noreferrer">
+          <img
+            className={classNames(
+              "hover:bg-muted border-default border hover:shadow-sm",
+              size >= 256 && "min-h-32"
+            )}
+            style={{ padding: size / 16, borderRadius: size / 20 }}
+            width={size}
+            src={QR_URL}
+            alt={eventTypeURL}
+          />
+        </a>
+      </Tooltip>
+    );
+  }
+  return (
+    <div className="flex w-full flex-col gap-5 text-sm">
+      <div className="flex w-full">
+        <TextField
+          name="hello"
+          disabled={disabled}
+          value={additionalParameters}
+          onChange={(e) => setAdditionalParameters(e.target.value)}
+          label={t("additional_url_parameters")}
+          containerClassName="w-full"
+        />
+      </div>
+
+      <div className="max-w-60 flex items-baseline gap-2">
+        <QRCode size={256} data={eventTypeURL} />
+        <QRCode size={128} data={eventTypeURL} />
+        <QRCode size={64} data={eventTypeURL} />
+      </div>
+    </div>
+  );
+};
+
+export default EventTypeAppSettingsInterface;