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":"Impersonate",
"impersonate_user_tip":"All uses of this feature is audited.", "impersonate_user_tip":"All uses of this feature is audited.",
"impersonating_user_warning":"Impersonating username \"{{user}}\".", "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 Loader from "../../../../apps/web/components/Loader";
import { Tooltip } from "../../../../apps/web/components/Tooltip"; import { Tooltip } from "../../../../apps/web/components/Tooltip";
import Icon from "./icon"; import Icon from "./icon";
import { useLocale } from "@calcom/lib/hooks/useLocale";
interface IZapierSetupProps { interface IZapierSetupProps {
trpc: any; trpc: any;
@ -19,6 +20,7 @@ export default function ZapierSetup(props: IZapierSetupProps) {
const { trpc } = props; const { trpc } = props;
const router = useRouter(); const router = useRouter();
const [newApiKey, setNewApiKey] = useState(""); const [newApiKey, setNewApiKey] = useState("");
const { t } = useLocale();
const utils = trpc.useContext(); const utils = trpc.useContext();
const integrations = trpc.useQuery(["viewer.integrations"]); const integrations = trpc.useQuery(["viewer.integrations"]);
const oldApiKey = trpc.useQuery(["viewer.apiKeys.findKeyOfType", { apiKeyType: ApiKeyType.ZAPIER }]); const oldApiKey = trpc.useQuery(["viewer.apiKeys.findKeyOfType", { apiKeyType: ApiKeyType.ZAPIER }]);
@ -42,7 +44,7 @@ export default function ZapierSetup(props: IZapierSetupProps) {
if (integrations.isLoading) { if (integrations.isLoading) {
return ( 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 /> <Loader />
</div> </div>
); );
@ -51,64 +53,63 @@ export default function ZapierSetup(props: IZapierSetupProps) {
return ( return (
<div className="flex h-screen bg-gray-200"> <div className="flex h-screen bg-gray-200">
{showContent ? ( {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="flex flex-row">
<div className="mr-5"> <div className="mr-5">
<Icon /> <Icon />
</div> </div>
<div className="ml-5"> <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 ? ( {!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"> <Button onClick={() => createApiKey()} className="mt-4 mb-4">
Generate Api Key {t("generate_api_key")}
</Button> </Button>
</> </>
) : ( ) : (
<> <>
<div className="mt-1 text-xl">Your unique API</div> <div className="mt-1 text-xl">{t("your_unique_api_key")}</div>
<div className="my-2 mt-3 flex"> <div className="flex my-2 mt-3">
<div className="mr-1 w-full rounded bg-gray-100 p-3 pr-5">{newApiKey}</div> <div className="w-full p-3 pr-5 mr-1 bg-gray-100 rounded">{newApiKey}</div>
<Tooltip content="copy to clipboard"> <Tooltip content="copy to clipboard">
<Button <Button
onClick={() => { onClick={() => {
navigator.clipboard.writeText(newApiKey); navigator.clipboard.writeText(newApiKey);
showToast("Api key copied", "success"); showToast(t("api_key_copied"), "success");
}} }}
type="button" type="button"
className="px-4 text-base "> className="px-4 text-base ">
<ClipboardCopyIcon className="mr-2 h-5 w-5 text-neutral-100" /> <ClipboardCopyIcon className="w-5 h-5 mr-2 text-neutral-100" />
copy {t("copy")}
</Button> </Button>
</Tooltip> </Tooltip>
</div> </div>
<div className="mt-2 mb-5 text-sm font-semibold text-gray-600"> <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 {t("copy_safe_api_key")}
new one.
</div> </div>
</> </>
)} )}
<ul className="mt-5 mb-5 mr-5"> <ul className="mt-5 mb-5 mr-5">
<li>1. Log into your Zapier account and create a new Zap.</li> <li>{t("log_into_zapier_account")}</li>
<li>2. Select Cal.com as your Trigger app. Also choose a Trigger event.</li> <li>{t("select_cal_trigger_app")}</li>
<li>3. Choose your account and then enter your Unique API Key.</li> <li>{t("choose_account_enter_key")}</li>
<li>4. Test your Trigger.</li> <li>{t("test_your_trigger")}</li>
<li>5. You're set!</li> <li>{t("you_are_set")}</li>
</ul> </ul>
<Link href={"/apps/installed"} passHref={true}> <Link href={"/apps/installed"} passHref={true}>
<Button color="secondary">Done</Button> <Button color="secondary">{t("done")}</Button>
</Link> </Link>
</div> </div>
</div> </div>
</div> </div>
) : ( ) : (
<div className="mt-5 ml-5"> <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"> <div className="mt-3">
<Link href={"/apps/zapier"} passHref={true}> <Link href={"/apps/zapier"} passHref={true}>
<Button>Go to App Store</Button> <Button>{t("go_to_app_store")}</Button>
</Link> </Link>
</div> </div>
</div> </div>