mythic-insight/calcom
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 5

Revert dialog view change (#2193)

Browse source
This commit is contained in:
alannnc 2022-03-17 16:28:43 -07:00 committed by GitHub
parent 77879bc193
commit c558c880f2
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 80 additions and 77 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

31
apps/web/ee/components/stripe/PaymentPage.tsx
View file

@ -8,12 +8,11 @@ import Head from "next/head";
import React, { FC, useEffect, useState } from "react"; import React, { FC, useEffect, useState } from "react";
import { FormattedNumber, IntlProvider } from "react-intl"; import { FormattedNumber, IntlProvider } from "react-intl";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import getStripe from "@calcom/stripe/client"; import getStripe from "@calcom/stripe/client";
import { Dialog, DialogContent, DialogFooter } from "@calcom/ui/Dialog";
import PaymentComponent from "@ee/components/stripe/Payment"; import PaymentComponent from "@ee/components/stripe/Payment";
import { PaymentPageProps } from "@ee/pages/payment/[uid]"; import { PaymentPageProps } from "@ee/pages/payment/[uid]";
import { useLocale } from "@lib/hooks/useLocale";
import useTheme from "@lib/hooks/useTheme"; import useTheme from "@lib/hooks/useTheme";
import { isBrowserLocale24h } from "@lib/timeFormat"; import { isBrowserLocale24h } from "@lib/timeFormat";
@ -44,11 +43,17 @@ const PaymentPage: FC<PaymentPageProps> = (props) => {
<link rel="icon" href="/favicon.ico" /> <link rel="icon" href="/favicon.ico" />
</Head> </Head>
<main className="mx-auto max-w-3xl py-24"> <main className="mx-auto max-w-3xl py-24">
<Dialog defaultOpen={true}> <div className="fixed inset-0 z-50 overflow-y-auto">
<DialogContent <div className="flex min-h-screen items-end justify-center px-4 pt-4 pb-20 text-center sm:block sm:p-0">
onInteractOutside={(e) => { <div className="fixed inset-0 my-4 transition-opacity sm:my-0" aria-hidden="true">
e.preventDefault(); <span className="hidden sm:inline-block sm:h-screen sm:align-middle" aria-hidden="true">
}}> &#8203;
</span>
<div
className="inline-block transform overflow-hidden rounded-sm border border-neutral-200 bg-white px-8 pt-5 pb-4 text-left align-bottom transition-all dark:border-neutral-700 dark:bg-gray-800 sm:my-8 sm:w-full sm:max-w-lg sm:py-6 sm:align-middle"
role="dialog"
aria-modal="true"
aria-labelledby="modal-headline">
<div> <div>
<div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-green-100"> <div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-green-100">
<CreditCardIcon className="h-8 w-8 text-green-600" /> <CreditCardIcon className="h-8 w-8 text-green-600" />
@ -60,7 +65,9 @@ const PaymentPage: FC<PaymentPageProps> = (props) => {
{t("payment")} {t("payment")}
</h3> </h3>
<div className="mt-3"> <div className="mt-3">
<p className="text-sm text-neutral-600 dark:text-gray-300">{t("pay_later_instructions")}</p> <p className="text-sm text-neutral-600 dark:text-gray-300">
{t("pay_later_instructions")}
</p>
</div> </div>
<div className="mt-4 grid grid-cols-3 border-t border-b py-4 text-left text-gray-700 dark:border-gray-900 dark:text-gray-300"> <div className="mt-4 grid grid-cols-3 border-t border-b py-4 text-left text-gray-700 dark:border-gray-900 dark:text-gray-300">
<div className="font-medium">{t("what")}</div> <div className="font-medium">{t("what")}</div>
@ -93,7 +100,6 @@ const PaymentPage: FC<PaymentPageProps> = (props) => {
</div> </div>
</div> </div>
</div> </div>
<div className="mt-5 sm:mt-6">
<div> <div>
{props.payment.success && !props.payment.refunded && ( {props.payment.success && !props.payment.refunded && (
<div className="mt-4 text-center text-gray-700 dark:text-gray-300">{t("paid")}</div> <div className="mt-4 text-center text-gray-700 dark:text-gray-300">{t("paid")}</div>
@ -112,18 +118,15 @@ const PaymentPage: FC<PaymentPageProps> = (props) => {
<div className="mt-4 text-center text-gray-700 dark:text-gray-300">{t("refunded")}</div> <div className="mt-4 text-center text-gray-700 dark:text-gray-300">{t("refunded")}</div>
)} )}
</div> </div>
<div className="flex justify-center">
<DialogFooter>
{!props.profile.hideBranding && ( {!props.profile.hideBranding && (
<div className="mt-4 border-t pt-4 text-center text-xs text-gray-400 dark:border-gray-900 dark:text-white"> <div className="mt-4 border-t pt-4 text-center text-xs text-gray-400 dark:border-gray-900 dark:text-white">
<a href="https://cal.com/signup">{t("create_booking_link_with_calcom")}</a> <a href="https://cal.com/signup">{t("create_booking_link_with_calcom")}</a>
</div> </div>
)} )}
</DialogFooter>
</div> </div>
</div> </div>
</DialogContent> </div>
</Dialog> </div>
</main> </main>
</div> </div>
) : null; ) : null;