Temporarily disable the "Download" button in gallery (#1192)

prezly · Sep 25, 2024 · 6402ec6 · 6402ec6
2 parents a92ef98 + 1d91fe9
commit 6402ec6
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 4 deletions.
diff --git a/modules/Gallery/DownloadLink.module.scss b/modules/Gallery/DownloadLink.module.scss
@@ -7,3 +7,8 @@
     height: 1rem;
     margin-left: $spacing-1;
 }
+
+.disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
diff --git a/modules/Gallery/DownloadLink.tsx b/modules/Gallery/DownloadLink.tsx
@@ -3,6 +3,7 @@
 import { DOWNLOAD, useAnalytics } from '@prezly/analytics-nextjs';
 import type { Locale } from '@prezly/theme-kit-nextjs';
 import { translations } from '@prezly/theme-kit-nextjs';
+import classNames from 'classnames';
 
 import { FormattedMessage } from '@/adapters/client';
 import { ButtonLink } from '@/components/Button';
@@ -13,9 +14,10 @@ import styles from './DownloadLink.module.scss';
 interface Props {
     localeCode: Locale.Code;
     href: string;
+    disabled: boolean;
 }
 
-export function DownloadLink({ localeCode, href }: Props) {
+export function DownloadLink({ localeCode, href, disabled }: Props) {
     const { track } = useAnalytics();
 
     function handleClick() {
@@ -24,10 +26,14 @@ export function DownloadLink({ localeCode, href }: Props) {
 
     return (
         <ButtonLink
+            title={disabled ? 'Temporarily disabled due to system maintenance' : undefined}
             variation="primary"
             forceRefresh
-            href={href}
-            className={styles.link}
+            // eslint-disable-next-line no-script-url
+            href={disabled ? 'javascript:void(0)' : href}
+            className={classNames(styles.link, {
+                [styles.disabled]: disabled,
+            })}
             onClick={handleClick}
         >
             <FormattedMessage locale={localeCode} for={translations.actions.download} />

diff --git a/modules/Gallery/Gallery.tsx b/modules/Gallery/Gallery.tsx
@@ -29,7 +29,9 @@ export function Gallery({ localeCode, gallery, href, withSharingIcons }: Props)
             <PageTitle className={styles.title} title={name} subtitle={description} />
 
             <div className={styles.links}>
-                {downloadUrl && <DownloadLink localeCode={localeCode} href={downloadUrl} />}
+                {downloadUrl && (
+                    <DownloadLink disabled localeCode={localeCode} href={downloadUrl} />
+                )}
                 {withSharingIcons && <StoryLinks url={href} className={styles.shareLinks} />}
             </div>