From 82f11b5121993cf4a85cf3e7ebedad7a21189cf4 Mon Sep 17 00:00:00 2001 From: Tiago Cruz <6704635+tjaoc@users.noreply.github.com> Date: Mon, 11 Oct 2021 15:42:43 +0200 Subject: [PATCH] Translations (#900) * Translations * Variables to Translated Words * Fix Translations * Fix Title to Create Events Types Co-authored-by: Bailey Pumfleet --- pages/event-types/[type].tsx | 191 +++++++++++----------- pages/event-types/index.tsx | 64 ++++---- public/static/locales/en/common.json | 86 +++++++++- public/static/locales/es/common.json | 230 ++++++++++++++++++--------- 4 files changed, 370 insertions(+), 201 deletions(-) diff --git a/pages/event-types/[type].tsx b/pages/event-types/[type].tsx index 8bc35e22..7fb6a66b 100644 --- a/pages/event-types/[type].tsx +++ b/pages/event-types/[type].tsx @@ -85,7 +85,7 @@ const EventTypePage = (props: inferSSRProps) => { const { eventType, locationOptions, availability, team, teamMembers, hasPaymentIntegration, currency } = props; - const { locale } = useLocale({ localeProp: props.localeProp }); + const { t, locale } = useLocale({ localeProp: props.localeProp }); const router = useRouter(); const [successModalOpen, setSuccessModalOpen] = useState(false); @@ -112,9 +112,7 @@ const EventTypePage = (props: inferSSRProps) => { }); const [users, setUsers] = useState([]); - const [editIcon, setEditIcon] = useState(true); - const [enteredAvailability, setEnteredAvailability] = useState(); const [showLocationModal, setShowLocationModal] = useState(false); const [selectedTimeZone, setSelectedTimeZone] = useState(""); @@ -166,7 +164,7 @@ const EventTypePage = (props: inferSSRProps) => { advancedPayload.price = !requirePayment ? undefined : formData.price ? Math.round(parseFloat(asStringOrThrow(formData.price)) * 100) : - /* otherwise */ 0; + /* otherwise */ 0; advancedPayload.currency = currency; } @@ -250,7 +248,7 @@ const EventTypePage = (props: inferSSRProps) => { return (
) => {
); case LocationType.Phone: - return ( -

Cal will ask your invitee to enter a phone number before scheduling.

- ); + return

{t("cal_invitee_phone_number_scheduling")}

; case LocationType.GoogleMeet: - return

Cal will provide a Google Meet location.

; + return

{t("cal_provide_google_meet_location")}

; case LocationType.Zoom: - return

Cal will provide a Zoom meeting URL.

; + return

{t("cal_provide_zoom_meeting_url")}

; case LocationType.Daily: - return

Cal will provide a video meeting URL.

; + return

{t("cal_provide_video_meeting_url")}

; } return null; }; @@ -325,7 +321,7 @@ const EventTypePage = (props: inferSSRProps) => { centered title={`${eventType.title} | Event Type`} heading={ -
setEditIcon(false)}> +
setEditIcon(false)}> ) => {
} subtitle={eventType.description || ""}> -
+
-
@@ -378,7 +374,7 @@ const EventTypePage = (props: inferSSRProps) => { - Duration + {t("duration")} } name="length" @@ -394,7 +390,7 @@ const EventTypePage = (props: inferSSRProps) => {
@@ -427,7 +423,7 @@ const EventTypePage = (props: inferSSRProps) => { {location.type === LocationType.Phone && (
- Phone call + {t("phone_call")}
)} {location.type === LocationType.GoogleMeet && ( @@ -537,11 +533,11 @@ const EventTypePage = (props: inferSSRProps) => {
@@ -555,7 +551,7 @@ const EventTypePage = (props: inferSSRProps) => { onClick={() => setShowLocationModal(true)}> - Add a location + {t("add_location")} @@ -571,7 +567,7 @@ const EventTypePage = (props: inferSSRProps) => {
@@ -579,7 +575,7 @@ const EventTypePage = (props: inferSSRProps) => { name="description" id="description" className="block w-full border-gray-300 rounded-sm shadow-sm focus:ring-primary-500 focus:border-primary-500 sm:text-sm" - placeholder="A quick video meeting." + placeholder={t("quick_video_meeting")} defaultValue={asStringOrUndefined(eventType.description)}>
@@ -592,7 +588,7 @@ const EventTypePage = (props: inferSSRProps) => {
) => {
@@ -614,7 +610,7 @@ const EventTypePage = (props: inferSSRProps) => { defaultValue={eventType.users.map(mapUserToValue)} options={teamMembers.map(mapUserToValue)} id="users" - placeholder="Add attendees" + placeholder={t("add_attendees")} />
@@ -628,13 +624,15 @@ const EventTypePage = (props: inferSSRProps) => { - Show advanced settings + + {t("show_advanced_settings")} +
@@ -645,7 +643,7 @@ const EventTypePage = (props: inferSSRProps) => { name="title" id="title" className="block w-full border-gray-300 rounded-sm shadow-sm focus:ring-primary-500 focus:border-primary-500 sm:text-sm" - placeholder="Meeting with {USER}" + placeholder={t("meeting_with_user")} defaultValue={eventType.eventName} />
@@ -655,8 +653,8 @@ const EventTypePage = (props: inferSSRProps) => {
@@ -666,7 +664,9 @@ const EventTypePage = (props: inferSSRProps) => {
- Label: {customInput.label} + + {t("label")}: {customInput.label} +
{customInput.placeholder && (
@@ -676,7 +676,9 @@ const EventTypePage = (props: inferSSRProps) => {
)}
- Type: {customInput.type} + + {t("type")}: {customInput.type} +
@@ -692,7 +694,7 @@ const EventTypePage = (props: inferSSRProps) => { }} color="minimal" type="button"> - Edit + {t("edit")} @@ -720,23 +722,23 @@ const EventTypePage = (props: inferSSRProps) => {
) => {
- Date Range + {t("date_range")}
{PERIOD_TYPES.map((period) => ( ) => { defaultValue={ eventType.periodCountCalendarDays ? "1" : "0" }> - - + +
)} @@ -838,7 +840,7 @@ const EventTypePage = (props: inferSSRProps) => {
@@ -859,7 +861,7 @@ const EventTypePage = (props: inferSSRProps) => {
@@ -880,7 +882,7 @@ const EventTypePage = (props: inferSSRProps) => {

- Require Payment (0.5% +{" "} + {t("require_payment")} (0.5% +{" "} ) => { currency={currency} /> {" "} - commission per transaction) + {t("commission_per_transaction")})

@@ -939,14 +941,15 @@ const EventTypePage = (props: inferSSRProps) => {
+ {t("update")} -
@@ -958,7 +961,7 @@ const EventTypePage = (props: inferSSRProps) => { name="isHidden" defaultChecked={hidden} onCheckedChange={setHidden} - label="Hide event type" + label={t("hide_event_type")} />
@@ -966,9 +969,9 @@ const EventTypePage = (props: inferSSRProps) => { href={permalink} target="_blank" rel="noreferrer" - className="flex font-medium text-md text-neutral-700 text-sm items-center hover:text-gray-900 hover:bg-gray-200 px-2 py-1 rounded-sm inline-flex"> + className="flex inline-flex items-center px-2 py-1 text-sm font-medium rounded-sm text-md text-neutral-700 hover:text-gray-900 hover:bg-gray-200">
@@ -1020,7 +1022,7 @@ const EventTypePage = (props: inferSSRProps) => {
@@ -1037,10 +1039,10 @@ const EventTypePage = (props: inferSSRProps) => {
@@ -1057,39 +1059,39 @@ const EventTypePage = (props: inferSSRProps) => {
-

This input will be shown when booking this event

+

{t("this_input_will_shown_booking_this_event")}

-
- { - const customInput: EventTypeCustomInput = { - id: -1, - eventTypeId: -1, - label: values.label, - placeholder: values.placeholder, - required: values.required, - type: values.type, - }; + { + const customInput: EventTypeCustomInput = { + id: -1, + eventTypeId: -1, + label: values.label, + placeholder: values.placeholder, + required: values.required, + type: values.type, + }; - if (selectedCustomInput) { - selectedCustomInput.label = customInput.label; - selectedCustomInput.placeholder = customInput.placeholder; - selectedCustomInput.required = customInput.required; - selectedCustomInput.type = customInput.type; - } else { - setCustomInputs(customInputs.concat(customInput)); - } - setSelectedCustomInputModalOpen(false); - }} - onCancel={() => { - setSelectedCustomInputModalOpen(false); - }} - /> + if (selectedCustomInput) { + selectedCustomInput.label = customInput.label; + selectedCustomInput.placeholder = customInput.placeholder; + selectedCustomInput.required = customInput.required; + selectedCustomInput.type = customInput.type; + } else { + setCustomInputs(customInputs.concat(customInput)); + } + setSelectedCustomInputModalOpen(false); + }} + onCancel={() => { + setSelectedCustomInputModalOpen(false); + }} + /> +
@@ -1244,7 +1246,6 @@ export const getServerSideProps = async (context: GetServerSidePropsContext) => if (hasDailyIntegration) { locationOptions.push({ value: LocationType.Daily, label: "Daily.co Video" }); } - const currency = (credentials.find((integration) => integration.type === "stripe_payment")?.key as unknown as StripeData) ?.default_currency || "usd"; diff --git a/pages/event-types/index.tsx b/pages/event-types/index.tsx index da497fc8..13575e6c 100644 --- a/pages/event-types/index.tsx +++ b/pages/event-types/index.tsx @@ -55,17 +55,14 @@ type Profile = PageProps["profiles"][number]; type MembershipCount = EventType["metadata"]["membershipCount"]; const EventTypesPage = (props: PageProps) => { - const { locale } = useLocale({ localeProp: props.localeProp }); + const { t, locale } = useLocale({ localeProp: props.localeProp }); const CreateFirstEventTypeView = () => (
-

Create your first event type

-

- Event types enable you to share links that show available times on your calendar and allow people to - make bookings with you. -

+

{t("new_event_type_heading")}

+

{t("new_event_type_description")}

{ {type.title} {type.hidden && ( - Hidden + {t("hidden")} )} {readOnly && ( - Readonly + {t("readonly")} )}
@@ -207,7 +204,7 @@ const EventTypesPage = (props: PageProps) => { <>
- Open options + {t("open_options")}
@@ -239,7 +236,7 @@ const EventTypesPage = (props: PageProps) => { className="w-4 h-4 mr-3 text-neutral-400 group-hover:text-neutral-500" aria-hidden="true" /> - Preview + {t("preview")} )} @@ -260,7 +257,7 @@ const EventTypesPage = (props: PageProps) => { className="w-4 h-4 mr-3 text-neutral-400 group-hover:text-neutral-500" aria-hidden="true" /> - Copy link to event + {t("copy_link")} )} @@ -281,12 +278,12 @@ const EventTypesPage = (props: PageProps) => { return (
- Event Types | Cal.com + {t("event_types_page_title")}| Cal.com @@ -295,10 +292,10 @@ const EventTypesPage = (props: PageProps) => { {props.user.plan === "FREE" && !props.canAddEvents && ( You need to upgrade your plan to have more than one active event type.} + title={<>{t("plan_upgrade")}} message={ <> - To upgrade go to{" "} + {t("to_upgrade_go_to")}{" "} {"https://cal.com/upgrade"} @@ -384,7 +381,7 @@ const CreateNewEventDialog = ({ - Create an event type under your name or a team. + {t("new_event_subtitle")} {profiles.map((profile) => (
-

Create a new event type for people to book times with.

+

{t("new_event_type_to_book_description")}

+ {process.env.NEXT_PUBLIC_APP_URL}/{router.query.eventPage || profiles[0].slug}/