Merge pull request #653 from HiEventsDev/develop

Fixes (#652)

Author: daveearley

frontend/src/components/common/OrganizerDocumentHead/index.tsx

@@ -53,7 +53,7 @@ export const OrganizerDocumentHead = ({organizer}: OrganizerDocumentHeadProps) =
         if (socialHandles.facebook) sameAs.push(`https://facebook.com/${socialHandles.facebook}`);
         if (socialHandles.twitter) sameAs.push(`https://twitter.com/${socialHandles.twitter}`);
         if (socialHandles.instagram) sameAs.push(`https://instagram.com/${socialHandles.instagram}`);
-        if (socialHandles.linkedin) sameAs.push(`https://linkedin.com/in/${socialHandles.linkedin}`);
+        if (socialHandles.linkedin) sameAs.push(`https://linkedin.com/company/${socialHandles.linkedin}`);
         if (socialHandles.youtube) sameAs.push(`https://youtube.com/@${socialHandles.youtube}`);
         if (socialHandles.github) sameAs.push(`https://github.com/${socialHandles.github}`);
     }

frontend/src/components/common/PoweredByFooter/index.tsx

@@ -13,7 +13,7 @@ import {iHavePurchasedALicence, isHiEvents} from "../../../utilites/helpers.ts";
  *
  * You can find the full license text at: https://github.com/HiEventsDev/hi.events/blob/main/LICENCE
  *
- * In accordance with Section 7(b) of the AGPL, we ask that you retain the "Powered by Hi.Events" notice.
+ * In accordance with Section 7(b) of the AGPL, you must retain the "Powered by Hi.Events" notice.
  *
  * If you wish to remove this notice, a commercial license is available at: https://hi.events/licensing
  */
@@ -22,16 +22,31 @@ export const PoweredByFooter = (props: React.DetailedHTMLProps<React.HTMLAttribu
         return <></>;
     }
 
+    const footerContent = isHiEvents() ? (
+        <>
+            {t`Planning an event?`} {' '}
+            <a href="https://hi.events?utm_source=app-powered-by-footer&utm_content=try-hi-events-free"
+               target="_blank"
+               className={classes.ctaLink}
+               title={'Effortlessly manage events and sell tickets online with Hi.Events'}>
+                {t`Try Hi.Events Free`}
+            </a>
+        </>
+    ) : (
+        <>
+            {t`Powered by`} {' '}
+            <a href="https://hi.events?utm_source=app-powered-by-footer"
+               target="_blank"
+               title={'Effortlessly manage events and sell tickets online with Hi.Events'}>
+                Hi.Events
+            </a> 🚀
+        </>
+    );
+
     return (
         <div {...props} className={classNames(classes.poweredBy, props.className)}>
             <div className={classes.poweredByText}>
-                {isHiEvents() ? t`Event Ticketing by` : t`Powered by`} {'  '}
-                {/* eslint-disable-next-line lingui/no-unlocalized-strings */}
-                <a href="https://hi.events?utm_source=app-powered-by-footer"
-                   target="_blank"
-                   title={'Effortlessly manage events and sell tickets online with Hi.Events'}>
-                    Hi.Events
-                </a> 🚀
+                {footerContent}
             </div>
         </div>
     );

frontend/src/components/layouts/AuthLayout/index.tsx

@@ -18,6 +18,7 @@ import {
 } from '@tabler/icons-react';
 import {useMemo} from "react";
 import { getConfig } from "../../../utilites/config.ts";
+import {isHiEvents} from "../../../utilites/helpers.ts";
 
 const RegisterFeatures = () => (
     <div className={classes.featureGrid}>
@@ -148,7 +149,7 @@ const AuthLayout = () => {
                                 * If you wish to remove this notice, a commercial license is available at: https://hi.events/licensing
                                 */
                             }
-                            <PoweredByFooter/>
+                            {!isHiEvents() && <PoweredByFooter/>}
                             <div className={classes.languageSwitcher}>
                                 <LanguageSwitcher/>
                             </div>

frontend/src/components/layouts/EventHomepage/EventHomepage.module.scss

@@ -240,12 +240,7 @@
 
   .mapLink {
     color: var(--homepage-secondary-color);
-    opacity: 0.7;
     transition: opacity 0.2s ease;
-
-    &:hover {
-      opacity: 1;
-    }
   }
 
   .organizerWebsite {

frontend/src/components/layouts/EventHomepage/index.tsx

@@ -230,13 +230,14 @@ const EventHomepage = ({colors, continueButtonText, backgroundType, ...loaderDat
                                             {getShortLocationDisplay(organizerLocation) && (
                                                 <div className={classes.organizerLocation}>
                                                     <IconMapPin size={16}/>
-                                                    <span>{getShortLocationDisplay(organizerLocation)}</span>
                                                     <Anchor
                                                         href={getGoogleMapsUrl(organizerLocation!)}
                                                         target="_blank"
                                                         rel="noopener noreferrer"
                                                         className={classes.mapLink}
                                                     >
+                                                        <span>{getShortLocationDisplay(organizerLocation)}</span>
+                                                        &nbsp;
                                                         <IconExternalLink size={14}/>
                                                     </Anchor>
                                                 </div>

frontend/src/components/layouts/OrganizerHomepage/OrganizerHomepage.module.scss

@@ -233,7 +233,6 @@
 
 .mapLink {
   color: var(--secondary-text-color);
-  opacity: 0.7;
   transition: opacity 0.2s ease;
   margin-left: 4px;
 

frontend/src/components/layouts/OrganizerHomepage/index.tsx

@@ -161,13 +161,14 @@ export const OrganizerHomepage = ({
                                                         {getShortLocationDisplay(organizer?.settings?.location_details) && (
                                                             <div className={classes.metaItem}>
                                                                 <IconMapPin size={16} className={classes.metaIcon}/>
-                                                                <span>{getShortLocationDisplay(organizer.settings!.location_details)}</span>
                                                                 <a
                                                                     href={getGoogleMapsUrl(organizer.settings!.location_details)}
                                                                     target="_blank"
                                                                     rel="noopener noreferrer"
                                                                     className={classes.mapLink}
                                                                 >
+                                                                    <span>{getShortLocationDisplay(organizer.settings!.location_details)}</span>
+                                                                    &nbsp;
                                                                     <IconExternalLink size={14}/>
                                                                 </a>
                                                             </div>

frontend/src/components/routes/welcome/index.tsx

@@ -5,7 +5,7 @@ import {Card} from "../../common/Card";
 import {Button, Center, Container, PinInput, Select, Stack, Text, TextInput} from "@mantine/core";
 import classes from "./Welcome.module.scss";
 import {useForm} from "@mantine/form";
-import {useMediaQuery} from "@mantine/hooks";
+import {useDebouncedValue, useMediaQuery} from "@mantine/hooks";
 import {Event} from "../../../types.ts";
 import {useCreateEvent} from "../../../mutations/useCreateEvent.ts";
 import {NavLink, useNavigate} from "react-router";
@@ -57,6 +57,7 @@ const ConfirmVerificationPin = ({progressInfo}: {
     const confirmEmailMutation = useConfirmEmailWithCode();
     const resendMutation = useResendEmailConfirmation();
     const [resendCooldown, setResendCooldown] = useState(0);
+    const [completedPin, setCompletedPin] = useState('');
     const isMobile = useMediaQuery('(max-width: 768px)');
 
     const form = useForm({
@@ -68,6 +69,16 @@ const ConfirmVerificationPin = ({progressInfo}: {
         }
     });
 
+    // Debounce the completed pin value
+    const [debouncedPin] = useDebouncedValue(completedPin, 800);
+
+    // Auto-submit when debounced pin is complete
+    useEffect(() => {
+        if (debouncedPin.length === 5 && !confirmEmailMutation.isPending) {
+            handleSubmit({pin: debouncedPin});
+        }
+    }, [debouncedPin]);
+
     useEffect(() => {
         if (resendCooldown > 0) {
             const timer = setTimeout(() => setResendCooldown(resendCooldown - 1), 1000);
@@ -83,9 +94,13 @@ const ConfirmVerificationPin = ({progressInfo}: {
                 onSuccess: () => {
                     showSuccess(t`Email verified successfully!`);
                     form.reset();
+                    setCompletedPin('');
                 },
                 onError: (error) => {
                     showError(error.response?.data?.message || t`Failed to verify email`);
+                    // Clear the pin on error so user can try again
+                    form.reset();
+                    setCompletedPin('');
                 }
             }
         );
@@ -148,9 +163,13 @@ const ConfirmVerificationPin = ({progressInfo}: {
                                 error={!!form.errors.pin}
                                 className={classes.pinInput}
                                 gap={isMobile ? 8 : "sm"}
-                                onComplete={(value) => {
+                                onChange={(value) => {
                                     form.setFieldValue('pin', value);
-                                    handleSubmit({pin: value});
+                                    if (value.length === 5) {
+                                        setCompletedPin(value);
+                                    } else {
+                                        setCompletedPin('');
+                                    }
                                 }}
                             />
                         </Center>

frontend/src/constants/socialMediaConfig.ts

@@ -25,7 +25,7 @@ export const socialMediaConfig = {
     facebook: {icon: IconBrandFacebook, baseUrl: 'https://facebook.com/'},
     instagram: {icon: IconBrandInstagram, baseUrl: 'https://instagram.com/'},
     twitter: {icon: IconBrandX, baseUrl: 'https://twitter.com/'},
-    linkedin: {icon: IconBrandLinkedin, baseUrl: 'https://linkedin.com/in/'},
+    linkedin: {icon: IconBrandLinkedin, baseUrl: 'https://linkedin.com/company/'},
     discord: {icon: IconBrandDiscord, baseUrl: 'https://discord.com/users/'},
     tiktok: {icon: IconBrandTiktok, baseUrl: 'https://tiktok.com/@'},
     youtube: {icon: IconBrandYoutube, baseUrl: 'https://youtube.com/@'},
@@ -42,4 +42,4 @@ export const socialMediaConfig = {
     tumblr: {icon: IconBrandTumblr, baseUrl: 'https://tumblr.com/blog/'},
     vimeo: {icon: IconBrandVimeo, baseUrl: 'https://vimeo.com/'},
     github: {icon: IconBrandGithub, baseUrl: 'https://github.com/'},
-};
+};

frontend/src/utilites/helpers.ts

@@ -102,7 +102,7 @@ export const isSsr = () => import.meta.env.SSR;
  *
  * You can find the full license text at: https://github.com/HiEventsDev/hi.events/blob/main/LICENCE
  *
- * In accordance with Section 7(b) of the AGPL, we ask that you retain the "Powered by Hi.Events" notice.
+ * In accordance with Section 7(b) of the AGPL, you must retain the "Powered by Hi.Events" notice.
  *
  * If you wish to remove this notice, a commercial license is available at: https://hi.events/licensing
  */