Merge pull request #650 from acelaya-forks/feature/qr-code-logo

Allow logo to be set in QR codes

Author: acelaya

CHANGELOG.md

@@ -4,6 +4,23 @@ All notable changes to this project will be documented in this file.
 
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to [Semantic Versioning](https://semver.org).
 
+## [Unreleased]
+### Added
+* [#641](https://github.com/shlinkio/shlink-web-component/issues/641) Allow custom logos to be selected for the short URL QR code.
+
+### Changed
+* *Nothing*
+
+### Deprecated
+* *Nothing*
+
+### Removed
+* *Nothing*
+
+### Fixed
+* *Nothing*
+
+
 ## [0.13.2] - 2025-04-12
 ### Added
 * *Nothing*

src/short-urls/helpers/QrCodeModal.tsx

@@ -1,15 +1,14 @@
-import { faClone } from '@fortawesome/free-regular-svg-icons';
-import { faCheck, faFileDownload as downloadIcon } from '@fortawesome/free-solid-svg-icons';
+import { faClone, faImage } from '@fortawesome/free-regular-svg-icons';
+import { faCheck, faFileDownload as downloadIcon, faXmark } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { useTimeoutToggle } from '@shlinkio/shlink-frontend-kit';
-import type { FC } from 'react';
+import type { ChangeEvent, FC } from 'react';
 import { useCallback , useRef , useState } from 'react';
 import { ExternalLink } from 'react-external-link';
 import { Button, Modal, ModalBody, ModalHeader } from 'reactstrap';
 import { ColorInput } from '../../utils/components/ColorInput';
 import type { QrRef } from '../../utils/components/QrCode';
 import { QrCode } from '../../utils/components/QrCode';
-import { useFeature } from '../../utils/features';
 import { copyToClipboard } from '../../utils/helpers/clipboard';
 import type { QrCodeFormat, QrDrawType, QrErrorCorrection } from '../../utils/helpers/qrCodes';
 import type { ShortUrlModalProps } from '../data';
@@ -32,8 +31,18 @@ export const QrCodeModal: FC<QrCodeModalProps> = (
   const [color, setColor] = useState('#000000');
   const [bgColor, setBgColor] = useState('#ffffff');
   const [format, setFormat] = useState<QrCodeFormat>('png');
+  const [logo, setLogo] = useState<{ url: string; name: string }>();
 
-  const qrCodeColorsSupported = useFeature('qrCodeColors');
+  const logoInputRef = useRef<HTMLInputElement>(null);
+  const onSelectLogo = useCallback((e: ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (file) {
+      setLogo({
+        url: URL.createObjectURL(new Blob([file], { type: file.type })),
+        name: file.name,
+      });
+    }
+  }, []);
 
   const qrCodeRef = useRef<QrRef>(null);
   const downloadQrCode = useCallback(
@@ -46,14 +55,24 @@ export const QrCodeModal: FC<QrCodeModalProps> = (
     return copyToClipboard({ text: uri, onCopy: toggleCopied });
   }, [format, toggleCopied]);
 
+  const resetOptions = useCallback(() => {
+    setSize(300);
+    setMargin(0);
+    setErrorCorrection('L');
+    setColor('#000000');
+    setBgColor('#ffffff');
+    setFormat('png');
+    setLogo(undefined);
+  }, []);
+
   return (
-    <Modal isOpen={isOpen} toggle={toggle} centered size="lg">
+    <Modal isOpen={isOpen} toggle={toggle} centered size="lg" onClosed={resetOptions}>
       <ModalHeader toggle={toggle}>
         QR code for <ExternalLink href={shortUrl}>{shortUrl}</ExternalLink>
       </ModalHeader>
       <ModalBody className="d-flex flex-column-reverse flex-lg-row gap-3">
         <div className="flex-grow-1 d-flex align-items-center justify-content-around qr-code-modal__qr-code">
-          <div className="d-flex flex-column gap-1" data-testid="qr-code-container">
+          <div className="d-flex flex-column gap-1 align-items-center" data-testid="qr-code-container">
             <QrCode
               ref={qrCodeRef}
               data={shortUrl}
@@ -62,6 +81,7 @@ export const QrCodeModal: FC<QrCodeModalProps> = (
               errorCorrection={errorCorrection}
               color={color}
               bgColor={bgColor}
+              logo={logo?.url}
               drawType={qrDrawType}
             />
             <div className="text-center fst-italic">Preview ({size + margin}x{size + margin})</div>
@@ -85,13 +105,41 @@ export const QrCodeModal: FC<QrCodeModalProps> = (
             max={100}
           />
           <QrErrorCorrectionDropdown errorCorrection={errorCorrection} onChange={setErrorCorrection} />
+          <ColorInput name="color" color={color} onChange={setColor} />
+          <ColorInput name="background" color={bgColor} onChange={setBgColor} />
 
-          {qrCodeColorsSupported && (
+          {!logo && (
             <>
-              <ColorInput name="color" color={color} onChange={setColor} />
-              <ColorInput name="background" color={bgColor} onChange={setBgColor} />
+              <Button
+                outline
+                className="d-flex align-items-center gap-1"
+                onClick={() => logoInputRef.current?.click()}
+              >
+                <FontAwesomeIcon icon={faImage} />
+                Select logo
+              </Button>
+              <input
+                ref={logoInputRef}
+                type="file"
+                accept="image/*"
+                aria-hidden
+                tabIndex={-1}
+                className="d-none"
+                onChange={onSelectLogo}
+                data-testid="logo-input"
+              />
             </>
           )}
+          {logo && (
+            <Button
+              outline
+              className="d-flex align-items-center gap-1"
+              onClick={() => setLogo(undefined)}
+            >
+              <FontAwesomeIcon icon={faXmark} />
+              <div className="text-truncate">Clear logo ({logo.name})</div>
+            </Button>
+          )}
 
           <div className="my-auto">
             <hr className="my-2" />

src/utils/components/QrCode.tsx

@@ -1,6 +1,6 @@
 import QRCodeStyling from 'qr-code-styling';
 import { forwardRef, useCallback , useEffect , useImperativeHandle , useRef } from 'react';
-import type { QrCodeFormat, QrCodeOptions, QrDrawType } from '../helpers/qrCodes';
+import type { QrCodeFormat, QrCodeOptions, QrDrawType, QrErrorCorrection } from '../helpers/qrCodes';
 
 export type QrCodeProps = Omit<QrCodeOptions, 'format'> & {
   data: string;
@@ -12,6 +12,17 @@ export type QrRef = {
   getDataUri: (format: QrCodeFormat) => Promise<string>;
 };
 
+function errorCorrectionToLogoSize(errorCorrection: QrErrorCorrection): number {
+  switch (errorCorrection) {
+    case 'L':
+      return 1;
+    case 'M':
+      return 0.5;
+    default:
+      return 0.3;
+  }
+}
+
 export const QrCode = forwardRef<QrRef, QrCodeProps>(({
   data,
   color = '#000000',
@@ -20,6 +31,7 @@ export const QrCode = forwardRef<QrRef, QrCodeProps>(({
   errorCorrection = 'L',
   size = 300,
   drawType = 'canvas',
+  logo,
 }, ref) => {
   const containerRef = useRef<HTMLDivElement>(null);
   const qrCodeRef = useRef(new QRCodeStyling());
@@ -48,7 +60,7 @@ export const QrCode = forwardRef<QrRef, QrCodeProps>(({
     });
   }), []);
 
-  // Expose the download method via provided ref
+  // Expose the download and getDataUri methods via provided ref
   useImperativeHandle(ref, () => ({ download, getDataUri }), [download, getDataUri]);
 
   useEffect(() => {
@@ -66,8 +78,13 @@ export const QrCode = forwardRef<QrRef, QrCodeProps>(({
       dotsOptions: { color },
       backgroundOptions: { color: bgColor },
       qrOptions: { errorCorrectionLevel: errorCorrection },
+      imageOptions: {
+        margin: 5,
+        imageSize: errorCorrectionToLogoSize(errorCorrection),
+      },
+      image: logo,
     });
-  }, [bgColor, color, data, drawType, errorCorrection, margin, size]);
+  }, [bgColor, color, data, drawType, errorCorrection, logo, margin, size]);
 
   return <div ref={containerRef} />;
 });

src/utils/features.ts

@@ -7,7 +7,6 @@ const supportedFeatures = {
   orphanVisitsDeletion: { minVersion: '3.7.0' },
   deviceLongUrls: { maxVersion: '3.*.*' },
   shortUrlRedirectRules: { minVersion: '4.0.0' },
-  qrCodeColors: { minVersion: '4.0.0' },
   urlValidation: { maxVersion: '3.*.*' },
   ipRedirectCondition: { minVersion: '4.2.0' },
   geolocationRedirectCondition: { minVersion: '4.3.0' },
@@ -28,7 +27,6 @@ const getFeaturesForVersion = (serverVersion: SemVerOrLatest): Record<Feature, b
   shortUrlVisitsDeletion: isFeatureEnabledForVersion('shortUrlVisitsDeletion', serverVersion),
   orphanVisitsDeletion: isFeatureEnabledForVersion('orphanVisitsDeletion', serverVersion),
   shortUrlRedirectRules: isFeatureEnabledForVersion('shortUrlRedirectRules', serverVersion),
-  qrCodeColors: isFeatureEnabledForVersion('qrCodeColors', serverVersion),
   urlValidation: isFeatureEnabledForVersion('urlValidation', serverVersion),
   ipRedirectCondition: isFeatureEnabledForVersion('ipRedirectCondition', serverVersion),
   geolocationRedirectCondition: isFeatureEnabledForVersion('geolocationRedirectCondition', serverVersion),

src/utils/helpers/qrCodes.ts

@@ -15,4 +15,5 @@ export type QrCodeOptions = {
   errorCorrection?: QrErrorCorrection;
   color?: string;
   bgColor?: string;
+  logo?: string;
 };

test/short-urls/helpers/QrCodeModal.test.tsx

@@ -2,27 +2,21 @@ import { fireEvent, screen, waitFor } from '@testing-library/react';
 import type { UserEvent } from '@testing-library/user-event';
 import { fromPartial } from '@total-typescript/shoehorn';
 import { QrCodeModal } from '../../../src/short-urls/helpers/QrCodeModal';
-import { FeaturesProvider } from '../../../src/utils/features';
 import { checkAccessibility } from '../../__helpers__/accessibility';
 import { renderWithEvents } from '../../__helpers__/setUpTest';
 
 describe('<QrCodeModal />', () => {
   const shortUrl = 'https://s.test/abc123';
-  const setUp = ({ qrCodeColors = false }: { qrCodeColors?: boolean } = {}) => renderWithEvents(
-    <FeaturesProvider value={fromPartial({ qrCodeColors })}>
-      <QrCodeModal
-        isOpen
-        shortUrl={fromPartial({ shortUrl })}
-        toggle={() => {}}
-        qrDrawType="svg" // Render as SVG so that we can test certain functionalities via snapshots
-      />
-    </FeaturesProvider>,
+  const setUp = () => renderWithEvents(
+    <QrCodeModal
+      isOpen
+      shortUrl={fromPartial({ shortUrl })}
+      toggle={() => {}}
+      qrDrawType="svg" // Render as SVG so that we can test certain functionalities via snapshots
+    />,
   );
 
-  it.each([{ qrCodeColors: false }, { qrCodeColors: true }])(
-    'passes a11y checks',
-    ({ qrCodeColors }) => checkAccessibility(setUp({ qrCodeColors })),
-  );
+  it('passes a11y checks', () => checkAccessibility(setUp()));
 
   it('shows an external link to the URL in the header', () => {
     setUp();
@@ -61,26 +55,47 @@ describe('<QrCodeModal />', () => {
         fireEvent.change(screen.getByLabelText('background picker'), { target: { value: '#0000ff' } });
       },
     },
+    {
+      // Set custom logo
+      applyChanges: async (user: UserEvent) => {
+        const byteCharacters = atob('iVBORw0KGgoAAAANSUhEUgAAAAgAAAAIAQMAAAD+wSzIAAAABlBMVEX///+/v7+jQ3Y5AAAADklEQVQI12P4AIX8EAgALgAD/aNpbtEAAAAASUVORK5CYII');
+        const byteNumbers = Array.from(byteCharacters, (char) => char.charCodeAt(0));
+        const byteArray = new Uint8Array(byteNumbers);
+        const logo = new File([byteArray], 'logo.png', { type: 'image/svg' });
+
+        await user.upload(screen.getByTestId('logo-input'), [logo]);
+      },
+    },
   ])('displays an image with expected configuration', async ({ applyChanges }) => {
-    const { user } = setUp({ qrCodeColors: true });
+    const { user } = setUp();
 
     await applyChanges(user);
     expect(screen.getByTestId('qr-code-container')).toMatchSnapshot();
   });
 
   it.each([
-    { qrCodeColors: false },
-    { qrCodeColors: true },
-  ])('shows color controls only if feature is supported', ({ qrCodeColors }) => {
-    setUp({ qrCodeColors });
-
-    if (qrCodeColors) {
-      expect(screen.getByLabelText('color')).toBeInTheDocument();
-      expect(screen.getByLabelText('background')).toBeInTheDocument();
-    } else {
-      expect(screen.queryByLabelText('color')).not.toBeInTheDocument();
-      expect(screen.queryByLabelText('background')).not.toBeInTheDocument();
-    }
+    'logo.png',
+    'some-image.svg',
+    'whatever.jpg',
+  ])('allows logo to be seat and cleared', async (logoName) => {
+    const logo = new File([''], logoName, { type: 'image/svg' });
+    const { user } = setUp();
+
+    // At first, we can select a logo
+    expect(screen.getByRole('button', { name: 'Select logo' })).toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: /^Clear logo/ })).not.toBeInTheDocument();
+
+    await user.upload(screen.getByTestId('logo-input'), [logo]);
+
+    // Once a logo has been selected, we can clear it
+    expect(screen.queryByRole('button', { name: 'Select logo' })).not.toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /^Clear logo/ })).toHaveTextContent(`Clear logo (${logoName})`);
+
+    await user.click(screen.getByRole('button', { name: /^Clear logo/ }));
+
+    // After clearing previous logo, we can select a new one
+    expect(screen.getByRole('button', { name: 'Select logo' })).toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: /^Clear logo/ })).not.toBeInTheDocument();
   });
 
   // FIXME This test needs a real browser