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