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}}",
|
||||
"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"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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,104 +76,103 @@ 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">
|
||||
Public key
|
||||
</label>
|
||||
<div className="mt-1">
|
||||
<input
|
||||
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"
|
||||
value={newPublicKey}
|
||||
autoComplete="new-password"
|
||||
onChange={(e) => setNewPublicKey(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<form autoComplete="off">
|
||||
<div className="mt-5">
|
||||
<label className="text-default block text-sm font-medium" htmlFor="public_key">
|
||||
Public key
|
||||
</label>
|
||||
<div className="mt-1">
|
||||
<input
|
||||
type="text"
|
||||
name="public_key"
|
||||
id="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"
|
||||
value={newPublicKey}
|
||||
autoComplete="new-password"
|
||||
onChange={(e) => setNewPublicKey(e.target.value)}
|
||||
/>
|
||||
</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 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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user