maronato/cal
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: add additional parameters for QR code generator app (#9177) 

* fix: add i18n key

* fix: add additional parameters

* fix: query params

---------

Co-authored-by: Keith Williams <keithwillcode@gmail.com>
This commit is contained in:
Nafees Nazik 2023-06-01 15:43:54 +05:30 committed by GitHub
parent b1019d6bab
commit 6bc713bc2e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 25 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
apps/web/public/static/locales/en/common.json
View File

@ -1840,5 +1840,6 @@
"connect_google_workspace":"Connect Google Workspace",
"google_workspace_admin_tooltip":"You must be a Workspace Admin to use this feature",
"first_event_type_webhook_description": "Create your first webhook for this event type",
"create_for": "Create for"
"create_for": "Create for",
"additional_url_parameters":"Additional URL parameters"
}

30
packages/app-store/qr_code/components/EventTypeAppCardInterface.tsx
View File

@ -3,15 +3,19 @@ import { useState } from "react";
import { useAppContextWithSchema } from "@calcom/app-store/EventTypeAppContext";
import AppCard from "@calcom/app-store/_components/AppCard";
import type { EventTypeAppCardComponent } from "@calcom/app-store/types";
import { Tooltip } from "@calcom/ui";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { Tooltip, TextField } from "@calcom/ui";
import type { appDataSchema } from "../zod";
const EventTypeAppCard: EventTypeAppCardComponent = function EventTypeAppCard({ eventType, app }) {
const { t } = useLocale();
const [getAppData, setAppData] = useAppContextWithSchema<typeof appDataSchema>();
const [enabled, setEnabled] = useState(getAppData("enabled"));
const [additionalParameters, setAdditionalParameters] = useState("");
const eventTypeURL = eventType.URL;
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;
@ -19,7 +23,7 @@ const EventTypeAppCard: EventTypeAppCardComponent = function EventTypeAppCard({
<Tooltip content={eventTypeURL}>
<a download href={QR_URL} target="_blank" rel="noreferrer">
<img
className="hover:bg-muted border hover:shadow-sm"
className="hover:bg-muted border-default border hover:shadow-sm"
style={{ padding: size / 16, borderRadius: size / 20 }}
width={size}
src={QR_URL}
@ -42,10 +46,22 @@ const EventTypeAppCard: EventTypeAppCardComponent = function EventTypeAppCard({
}
}}
switchChecked={enabled}>
<div className="max-w-60 flex items-baseline justify-between gap-2 text-sm ">
<QRCode size={256} data={eventTypeURL} />
<QRCode size={128} data={eventTypeURL} />
<QRCode size={64} data={eventTypeURL} />
<div className="flex w-full flex-col gap-2 text-sm">
<div className="flex w-full">
<TextField
name="hello"
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>
</AppCard>
);