public-offering
/
cal.pub0.org
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add i18n

pr/2623
CarinaWolli 2022-04-27 11:36:18 +02:00
parent abb7559838
commit 9828b6cdf1
2 changed files with 34 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -767,5 +767,16 @@
"impersonate":"Impersonate",
"impersonate_user_tip":"All uses of this feature is audited.",
"impersonating_user_warning":"Impersonating username \"{{user}}\".",
"impersonating_stop_instructions": "<0>Click Here to stop</0>."
"impersonating_stop_instructions": "<0>Click Here to stop</0>.",
"setting_up_zapier": "Setting up your Zapier integration",
"generate_api_key": "Generate Api Key",
"your_unique_api_key": "Your unique API key",
"copy_safe_api_key": "Copy this API key and save it somewhere safe. If you lose this key you have to generate a new one.",
"log_into_zapier_account": "1. Log into your Zapier account and create a new Zap.",
"select_cal_trigger_app": "2. Select Cal.com as your Trigger app. Also choose a Trigger event.",
"choose_account_enter_key": "3. Choose your account and then enter your Unique API Key.",
"test_your_trigger": "4. Test your Trigger.",
"you_are_set": "5. You're set!",
"install_zapier_app": "Please first install the Zapier App in the app store.",
"go_to_app_store": "Go to App Store"
}

43
packages/app-store/zapierother/components/zapierSetup.tsx
View File

@ -10,6 +10,7 @@ import { Button } from "@calcom/ui";
import Loader from "../../../../apps/web/components/Loader";
import { Tooltip } from "../../../../apps/web/components/Tooltip";
import Icon from "./icon";
import { useLocale } from "@calcom/lib/hooks/useLocale";
interface IZapierSetupProps {
trpc: any;
@ -19,6 +20,7 @@ export default function ZapierSetup(props: IZapierSetupProps) {
const { trpc } = props;
const router = useRouter();
const [newApiKey, setNewApiKey] = useState("");
const { t } = useLocale();
const utils = trpc.useContext();
const integrations = trpc.useQuery(["viewer.integrations"]);
const oldApiKey = trpc.useQuery(["viewer.apiKeys.findKeyOfType", { apiKeyType: ApiKeyType.ZAPIER }]);
@ -42,7 +44,7 @@ export default function ZapierSetup(props: IZapierSetupProps) {
if (integrations.isLoading) {
return (
<div className="absolute z-50 flex h-screen w-full items-center bg-gray-200">
<div className="absolute z-50 flex items-center w-full h-screen bg-gray-200">
<Loader />
</div>
);
@ -51,64 +53,63 @@ export default function ZapierSetup(props: IZapierSetupProps) {
return (
<div className="flex h-screen bg-gray-200">
{showContent ? (
<div className="m-auto rounded bg-white p-10">
<div className="p-10 m-auto bg-white rounded">
<div className="flex flex-row">
<div className="mr-5">
<Icon />
</div>
<div className="ml-5">
<div className="text-gray-600">Setting up your Zapier integration </div>
<div className="text-gray-600">{t("setting_up_zapier")}</div>
{!newApiKey ? (
<>
<div className="mt-1 text-xl">Generate API key:</div>
<div className="mt-1 text-xl">{t("generate_api_key")}:</div>
<Button onClick={() => createApiKey()} className="mt-4 mb-4">
Generate Api Key
{t("generate_api_key")}
</Button>
</>
) : (
<>
<div className="mt-1 text-xl">Your unique API</div>
<div className="my-2 mt-3 flex">
<div className="mr-1 w-full rounded bg-gray-100 p-3 pr-5">{newApiKey}</div>
<div className="mt-1 text-xl">{t("your_unique_api_key")}</div>
<div className="flex my-2 mt-3">
<div className="w-full p-3 pr-5 mr-1 bg-gray-100 rounded">{newApiKey}</div>
<Tooltip content="copy to clipboard">
<Button
onClick={() => {
navigator.clipboard.writeText(newApiKey);
showToast("Api key copied", "success");
showToast(t("api_key_copied"), "success");
}}
type="button"
className="px-4 text-base ">
<ClipboardCopyIcon className="mr-2 h-5 w-5 text-neutral-100" />
copy
<ClipboardCopyIcon className="w-5 h-5 mr-2 text-neutral-100" />
{t("copy")}
</Button>
</Tooltip>
</div>
<div className="mt-2 mb-5 text-sm font-semibold text-gray-600">
Copy this API key and save it somewhere safe. If you lose this key you have to generate a
new one.
{t("copy_safe_api_key")}
</div>
</>
)}
<ul className="mt-5 mb-5 mr-5">
<li>1. Log into your Zapier account and create a new Zap.</li>
<li>2. Select Cal.com as your Trigger app. Also choose a Trigger event.</li>
<li>3. Choose your account and then enter your Unique API Key.</li>
<li>4. Test your Trigger.</li>
<li>5. You're set!</li>
<li>{t("log_into_zapier_account")}</li>
<li>{t("select_cal_trigger_app")}</li>
<li>{t("choose_account_enter_key")}</li>
<li>{t("test_your_trigger")}</li>
<li>{t("you_are_set")}</li>
</ul>
<Link href={"/apps/installed"} passHref={true}>
<Button color="secondary">Done</Button>
<Button color="secondary">{t("done")}</Button>
</Link>
</div>
</div>
</div>
) : (
<div className="mt-5 ml-5">
<div>Please first install the Zapier App in the app store.</div>
<div>{t("install_zapier_app")}</div>
<div className="mt-3">
<Link href={"/apps/zapier"} passHref={true}>
<Button>Go to App Store</Button>
<Button>{t("go_to_app_store")}</Button>
</Link>
</div>
</div>