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

Fix style for setup page

This commit is contained in:
Alan 2023-04-26 17:06:19 -06:00
parent 8580c29a92
commit 9ebc65e8c4
2 changed files with 96 additions and 95 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

@ -1789,5 +1789,6 @@
"charge_attendee": "Charge attendee {{amount, currency}}",
"payment_app_commission": "Require payment ({{paymentFeePercentage}}% + {{fee, currency}} commission per transaction)",
"email_invite_team": "{{email}} has been invited",
"image_size_limit_exceed": "Uploaded image shouldn't exceed 5mb size limit"
"image_size_limit_exceed": "Uploaded image shouldn't exceed 5mb size limit",
"currency": "Currency"
}

40
packages/app-store/mercado_pago/pages/setup/index.tsx
View File

@ -1,4 +1,5 @@
import Link from "next/link";
import { useRouter } from "next/router";
import { useState } from "react";
import { Toaster } from "react-hot-toast";
@ -17,7 +18,7 @@ export default function MercadoPagoSetup(props: IMercadoPagoSetupProps) {
const [newPublicKey, setNewPublicKey] = useState("");
const [newAccessToken, setNewAccessToken] = useState("");
const [selectedCurrency, setSelectedCurrency] = useState({ label: "", value: "" });
const router = useRouter();
const { t } = useLocale();
const integrations = trpc.viewer.integrations.useQuery({ variant: "payment" });
@ -31,7 +32,7 @@ export default function MercadoPagoSetup(props: IMercadoPagoSetupProps) {
const saveKeysMutation = trpc.viewer.appsRouter.updateAppCredentials.useMutation({
onSuccess: () => {
showToast(t("keys_have_been_saved"), "success");
// router.push("/event-types");
router.push("/event-types");
},
onError: (error) => {
showToast(error.message, "error");
@ -75,18 +76,17 @@ export default function MercadoPagoSetup(props: IMercadoPagoSetupProps) {
];
return (
<div className="flex h-screen bg-gray-200">
<div className="dark:bg-default flex h-screen bg-gray-300">
{showContent ? (
<div className="m-auto max-w-[43em] overflow-auto rounded bg-white pb-10 md:p-10">
<div className="md:flex md:flex-row">
<div className="bg-default m-auto max-w-[43em] overflow-auto rounded border border-gray-200 pb-10 md:p-10">
<div className="ml-2 ltr:mr-2 rtl:ml-2 md:ml-5">
<div className="invisible md:visible">
<img className="h-11" src="/api/app-store/mercado_pago/icon.svg" alt="Mercado Pago Logo" />
<p className="text-default text-lg">Mercado Pago</p>
</div>
<div className="ml-2 ltr:mr-2 rtl:ml-2 md:ml-5">
<p className="text-lg">Mercado Pago</p>
<form autoComplete="off">
<div className="mt-5">
<label className="block text-sm font-medium text-gray-700" htmlFor="public_key">
<label className="text-default block text-sm font-medium" htmlFor="public_key">
Public key
</label>
<div className="mt-1">
@ -94,7 +94,7 @@ export default function MercadoPagoSetup(props: IMercadoPagoSetupProps) {
type="text"
name="public_key"
id="public_key"
className="block w-full rounded-md border-gray-300 text-black shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
className="text-default bg-default block w-full rounded-md border-gray-300 text-black shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
value={newPublicKey}
autoComplete="new-password"
onChange={(e) => setNewPublicKey(e.target.value)}
@ -102,7 +102,7 @@ export default function MercadoPagoSetup(props: IMercadoPagoSetupProps) {
</div>
</div>
<div className="mt-5">
<label className="block text-sm font-medium text-gray-700" htmlFor="access_token">
<label className="text-default block text-sm font-medium" htmlFor="access_token">
{t("access_token")}
</label>
<div className="mt-1">
@ -110,7 +110,7 @@ export default function MercadoPagoSetup(props: IMercadoPagoSetupProps) {
type="password"
name="access_token"
id="access_token"
className="block w-full rounded-md border-gray-300 text-black shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
className="bg-default text-default block w-full rounded-md border-gray-300 text-black shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
value={newAccessToken}
autoComplete="new-password"
onChange={(e) => setNewAccessToken(e.target.value)}
@ -118,14 +118,15 @@ export default function MercadoPagoSetup(props: IMercadoPagoSetupProps) {
</div>
<div className="mt-5">
<label className="block text-sm font-medium text-gray-700" htmlFor="currency">
Currency
<label className="text-default block text-sm font-medium" htmlFor="currency">
{t("currency")}
</label>
<Select
variant="default"
options={currencyOptions}
value={selectedCurrency}
className="text-black"
defaultValue={selectedCurrency?.value}
defaultValue={selectedCurrency}
onChange={(e) => {
if (e) {
setSelectedCurrency(e);
@ -135,9 +136,9 @@ export default function MercadoPagoSetup(props: IMercadoPagoSetupProps) {
</div>
</div>
{/* Button to submit */}
<div className="mt-5">
<div className="mt-5 flex flex-row justify-end">
<Button
color="primary"
color="secondary"
onClick={() =>
saveKeys({
publicKey: newPublicKey,
@ -150,10 +151,10 @@ export default function MercadoPagoSetup(props: IMercadoPagoSetupProps) {
</div>
</form>
<div>
<p className="text-lgf mt-5 font-bold">Setup instructions</p>
<p className="text-lgf text-default mt-5 font-bold">Setup instructions</p>
<ol className="ml-1 list-decimal pl-2">
{/* <Trans i18nKey="zapier_setup_instructions"> */}
<ol className="text-default ml-1 list-decimal pl-2">
{/* @TODO: translate */}
<li>
Log into your Mercado Pago account and create a new app{" "}
<a
@ -175,7 +176,6 @@ export default function MercadoPagoSetup(props: IMercadoPagoSetupProps) {
</div>
</div>
</div>
</div>
) : (
<div className="mt-5 ml-5">
<div>Mercado Pago</div>