Fix style for setup page
This commit is contained in:
Alan
parent
8580c29a92
commit
9ebc65e8c4
|
|
@ -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"
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -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,104 +76,103 @@ 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">
|
<form autoComplete="off">
|
||||||
<p className="text-lg">Mercado Pago</p>
|
<div className="mt-5">
|
||||||
<form autoComplete="off">
|
<label className="text-default block text-sm font-medium" htmlFor="public_key">
|
||||||
<div className="mt-5">
|
Public key
|
||||||
<label className="block text-sm font-medium text-gray-700" htmlFor="public_key">
|
</label>
|
||||||
Public key
|
<div className="mt-1">
|
||||||
</label>
|
<input
|
||||||
<div className="mt-1">
|
type="text"
|
||||||
<input
|
name="public_key"
|
||||||
type="text"
|
id="public_key"
|
||||||
name="public_key"
|
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"
|
||||||
id="public_key"
|
value={newPublicKey}
|
||||||
className="block w-full rounded-md border-gray-300 text-black shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
|
autoComplete="new-password"
|
||||||
value={newPublicKey}
|
onChange={(e) => setNewPublicKey(e.target.value)}
|
||||||
autoComplete="new-password"
|
/>
|
||||||
onChange={(e) => setNewPublicKey(e.target.value)}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div className="mt-5">
|
|
||||||
<label className="block text-sm font-medium text-gray-700" htmlFor="access_token">
|
|
||||||
{t("access_token")}
|
|
||||||
</label>
|
|
||||||
<div className="mt-1">
|
|
||||||
<input
|
|
||||||
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"
|
|
||||||
value={newAccessToken}
|
|
||||||
autoComplete="new-password"
|
|
||||||
onChange={(e) => setNewAccessToken(e.target.value)}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="mt-5">
|
|
||||||
<label className="block text-sm font-medium text-gray-700" htmlFor="currency">
|
|
||||||
Currency
|
|
||||||
</label>
|
|
||||||
<Select
|
|
||||||
options={currencyOptions}
|
|
||||||
value={selectedCurrency}
|
|
||||||
className="text-black"
|
|
||||||
defaultValue={selectedCurrency?.value}
|
|
||||||
onChange={(e) => {
|
|
||||||
if (e) {
|
|
||||||
setSelectedCurrency(e);
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{/* Button to submit */}
|
|
||||||
<div className="mt-5">
|
|
||||||
<Button
|
|
||||||
color="primary"
|
|
||||||
onClick={() =>
|
|
||||||
saveKeys({
|
|
||||||
publicKey: newPublicKey,
|
|
||||||
accessToken: newAccessToken,
|
|
||||||
currency: selectedCurrency,
|
|
||||||
})
|
|
||||||
}>
|
|
||||||
{t("save")}
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
<div>
|
|
||||||
<p className="text-lgf mt-5 font-bold">Setup instructions</p>
|
|
||||||
|
|
||||||
<ol className="ml-1 list-decimal pl-2">
|
|
||||||
{/* <Trans i18nKey="zapier_setup_instructions"> */}
|
|
||||||
<li>
|
|
||||||
Log into your Mercado Pago account and create a new app{" "}
|
|
||||||
<a
|
|
||||||
href="https://www.mercadopago.com.mx/developers/panel"
|
|
||||||
className="text-orange-600 underline">
|
|
||||||
{t("here")}
|
|
||||||
</a>
|
|
||||||
.
|
|
||||||
</li>
|
|
||||||
<li>Choose a name for your application.</li>
|
|
||||||
<li>Select Online payments solution.</li>
|
|
||||||
<li>Choose No for Using online platform.</li>
|
|
||||||
<li>CheckoutAPI as integration product.</li>
|
|
||||||
<li>Accept terms and Create APP</li>
|
|
||||||
<li>Go back to dashboard, click on new app and copy the credentials.</li>
|
|
||||||
<li>Paste them on the required field and save them.</li>
|
|
||||||
<li>You're all setup</li>
|
|
||||||
</ol>
|
|
||||||
</div>
|
</div>
|
||||||
|
<div className="mt-5">
|
||||||
|
<label className="text-default block text-sm font-medium" htmlFor="access_token">
|
||||||
|
{t("access_token")}
|
||||||
|
</label>
|
||||||
|
<div className="mt-1">
|
||||||
|
<input
|
||||||
|
type="password"
|
||||||
|
name="access_token"
|
||||||
|
id="access_token"
|
||||||
|
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)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="mt-5">
|
||||||
|
<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}
|
||||||
|
onChange={(e) => {
|
||||||
|
if (e) {
|
||||||
|
setSelectedCurrency(e);
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/* Button to submit */}
|
||||||
|
<div className="mt-5 flex flex-row justify-end">
|
||||||
|
<Button
|
||||||
|
color="secondary"
|
||||||
|
onClick={() =>
|
||||||
|
saveKeys({
|
||||||
|
publicKey: newPublicKey,
|
||||||
|
accessToken: newAccessToken,
|
||||||
|
currency: selectedCurrency,
|
||||||
|
})
|
||||||
|
}>
|
||||||
|
{t("save")}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
<div>
|
||||||
|
<p className="text-lgf text-default mt-5 font-bold">Setup instructions</p>
|
||||||
|
|
||||||
|
<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
|
||||||
|
href="https://www.mercadopago.com.mx/developers/panel"
|
||||||
|
className="text-orange-600 underline">
|
||||||
|
{t("here")}
|
||||||
|
</a>
|
||||||
|
.
|
||||||
|
</li>
|
||||||
|
<li>Choose a name for your application.</li>
|
||||||
|
<li>Select Online payments solution.</li>
|
||||||
|
<li>Choose No for Using online platform.</li>
|
||||||
|
<li>CheckoutAPI as integration product.</li>
|
||||||
|
<li>Accept terms and Create APP</li>
|
||||||
|
<li>Go back to dashboard, click on new app and copy the credentials.</li>
|
||||||
|
<li>Paste them on the required field and save them.</li>
|
||||||
|
<li>You're all setup</li>
|
||||||
|
</ol>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user