diff --git a/ee/components/LicenseBanner.tsx b/ee/components/LicenseBanner.tsx index 8a9373de..34e79bf1 100644 --- a/ee/components/LicenseBanner.tsx +++ b/ee/components/LicenseBanner.tsx @@ -1,12 +1,16 @@ import { XIcon } from "@heroicons/react/outline"; import { BadgeCheckIcon } from "@heroicons/react/solid"; +import { Trans } from "react-i18next"; + +import { useLocale } from "@lib/hooks/useLocale"; import { Dialog, DialogTrigger } from "@components/Dialog"; import ConfirmationDialogContent from "@components/dialog/ConfirmationDialogContent"; export default function LicenseBanner() { + const { t } = useLocale(); /* - Set this value to 'agree' to accept our license: + Set this value to 'agree' to accept our license: LICENSE: https://github.com/calendso/calendso/blob/main/LICENSE Summary of terms: @@ -30,9 +34,11 @@ export default function LicenseBanner() {

- Accept our license by changing the .env variable{" "} - NEXT_PUBLIC_LICENSE_CONSENT to - 'agree'. + + Accept our license by changing the .env variable{" "} + NEXT_PUBLIC_LICENSE_CONSENT to + 'agree'. +

@@ -40,7 +46,7 @@ export default function LicenseBanner() { @@ -50,7 +56,7 @@ export default function LicenseBanner() { @@ -67,18 +73,22 @@ export default function LicenseBanner() { return ( - To remove this banner, please open your .env file and change the{" "} - NEXT_PUBLIC_LICENSE_CONSENT{" "} - variable to 'agree'. -

Summary of terms:

+ title={t("open_env")} + confirmBtnText={t("env_changed")} + cancelBtnText={t("cancel")}> + + To remove this banner, please open your .env file and change the{" "} + + NEXT_PUBLIC_LICENSE_CONSENT + {" "} + variable to 'agreeapos;. + +

{t("terms_summary")}:

    -
  • The codebase has to stay open source, whether it was modified or not
  • -
  • You can not repackage or sell the codebase
  • +
  • {t("codebase_has_to_stay_opensource")}
  • +
  • {t("cannot_repackage_codebase")}
  • - Acquire a commercial license to remove these terms by emailing:{" "} + {t("acquire_license")}:{" "} license@cal.com diff --git a/ee/components/stripe/Payment.tsx b/ee/components/stripe/Payment.tsx index cf0360e7..b547bb18 100644 --- a/ee/components/stripe/Payment.tsx +++ b/ee/components/stripe/Payment.tsx @@ -1,11 +1,14 @@ import { CardElement, useStripe, useElements } from "@stripe/react-stripe-js"; +import { StripeCardElementChangeEvent } from "@stripe/stripe-js"; import { useRouter } from "next/router"; import { stringify } from "querystring"; import React, { useState } from "react"; +import { SyntheticEvent } from "react"; import { PaymentData } from "@ee/lib/stripe/server"; import useDarkMode from "@lib/core/browser/useDarkMode"; +import { useLocale } from "@lib/hooks/useLocale"; import Button from "@components/ui/Button"; @@ -34,6 +37,7 @@ type Props = { }; eventType: { id: number }; user: { username: string | null }; + location: string; }; type States = @@ -43,6 +47,7 @@ type States = | { status: "ok" }; export default function PaymentComponent(props: Props) { + const { t } = useLocale(); const router = useRouter(); const { name, date } = router.query; const [state, setState] = useState({ status: "idle" }); @@ -56,15 +61,17 @@ export default function PaymentComponent(props: Props) { CARD_OPTIONS.style.base["::placeholder"].color = "#fff"; } - const handleChange = async (event) => { + const handleChange = async (event: StripeCardElementChangeEvent) => { // Listen for changes in the CardElement // and display any errors as the customer types their card details setState({ status: "idle" }); - if (event.emtpy || event.error) - setState({ status: "error", error: new Error(event.error?.message || "Missing card fields") }); + if (event.error) + setState({ status: "error", error: new Error(event.error?.message || t("missing_card_fields")) }); }; - const handleSubmit = async (ev) => { + + const handleSubmit = async (ev: SyntheticEvent) => { ev.preventDefault(); + if (!stripe || !elements) return; const card = elements.getElement(CardElement); if (!card) return; @@ -87,11 +94,11 @@ export default function PaymentComponent(props: Props) { name, }; - if (payload["location"]) { - if (payload["location"].includes("integration")) { - params.location = "Web conferencing details to follow."; + if (props.location) { + if (props.location.includes("integration")) { + params.location = t("web_conferencing_details_to_follow"); } else { - params.location = payload["location"]; + params.location = props.location; } } @@ -104,19 +111,19 @@ export default function PaymentComponent(props: Props) { return (
    -
    +
    {state.status === "error" && ( -
    +
    {state.error.message}
    )} diff --git a/ee/components/stripe/PaymentPage.tsx b/ee/components/stripe/PaymentPage.tsx index 24a4bf28..375d8962 100644 --- a/ee/components/stripe/PaymentPage.tsx +++ b/ee/components/stripe/PaymentPage.tsx @@ -12,6 +12,7 @@ import PaymentComponent from "@ee/components/stripe/Payment"; import getStripe from "@ee/lib/stripe/client"; import { PaymentPageProps } from "@ee/pages/payment/[uid]"; +import { useLocale } from "@lib/hooks/useLocale"; import useTheme from "@lib/hooks/useTheme"; dayjs.extend(utc); @@ -19,6 +20,7 @@ dayjs.extend(toArray); dayjs.extend(timezone); const PaymentPage: FC = (props) => { + const { t } = useLocale(); const [is24h, setIs24h] = useState(false); const [date, setDate] = useState(dayjs.utc(props.booking.startTime)); const { isReady } = useTheme(props.profile.theme); @@ -31,43 +33,45 @@ const PaymentPage: FC = (props) => { const eventName = props.booking.title; return isReady ? ( -
    +
    - Payment | {eventName} | Calendso + + {t("payment")} | {eventName} | Cal.com + -
    -
    -
    -