@smileid/web-components 11.0.3 → 11.1.0

package/lib/components/selfie/src/selfie-capture/SelfieCapture.js

@@ -1,8 +1,12 @@
-import { IMAGE_TYPE } from '../../../../domain/constants/src/Constants';
+import {
+  IMAGE_TYPE,
+  JPEG_QUALITY,
+} from '../../../../domain/constants/src/Constants';
 import SmartCamera from '../../../../domain/camera/src/SmartCamera';
 import styles from '../../../../styles/src/styles';
 import packageJson from '../../../../../package.json';
 import '../../../navigation/src';
+import { t, tHtml, getDirection } from '../../../../domain/localisation';
 
 const COMPONENTS_VERSION = packageJson.version;
 
@@ -28,8 +32,9 @@ function getLivenessFramesIndices(
 
   if (totalNoOfFrames < numberOfFramesRequired) {
     throw new Error(
-      'SmartCameraWeb: Minimum required no of frames is ',
-      numberOfFramesRequired,
+      tHtml('selfie.capture.error.minFrames', {
+        count: numberOfFramesRequired,
+      }),
     );
   }
 
@@ -146,7 +151,7 @@ function templateString() {
   .title-color {
     color: ${this.themeColor};
   }
-  
+
   .theme-color {
     color: ${this.themeColor};
   }
@@ -509,10 +514,10 @@ function templateString() {
     margin-inline-start; 1em;
   }
   </style>
-  <div id='selfie-capture-screen' class='flow center'>
+  <div id='selfie-capture-screen' class='flow center' dir='${this.direction}'>
     <smileid-navigation theme-color='${this.themeColor}' ${this.showNavigation ? 'show-navigation' : ''} ${this.hideBack ? 'hide-back' : ''}></smileid-navigation>
 
-    <div class='tips'>Fit your head inside the oval frame</div>
+    <div class='tips'>${t('selfie.capture.tip.fitHead')}</div>
 
     <div className="error">
       ${this.cameraError ? `<p class="color-red">${this.cameraError}</p>` : ''}
@@ -544,15 +549,15 @@ function templateString() {
             </svg>
           </div>
           <div>
-            <p id='smile-cta'>SMILE</p>
+            <p id='smile-cta'>${t('selfie.capture.cta.smile')}</p>
           </div>
         </div>
       </div>
 
-      ${this.allowAgentMode ? `<button data-variant='outline small' id='switch-camera' class='button | center' type='button'>${this.inAgentMode ? 'Agent Mode On' : 'Agent Mode Off'}</button>` : ''}
+      ${this.allowAgentMode ? `<button data-variant='outline small' id='switch-camera' class='button | center' type='button'>${this.inAgentMode ? t('selfie.capture.agentMode.on') : t('selfie.capture.agentMode.off')}</button>` : ''}
 
       <button data-variant='solid' id='start-image-capture' class='button | center' type='button'>
-        Take Selfie
+        ${t('selfie.capture.button.takeSelfie')}
       </button>
 
       ${this.hideAttribution ? '' : '<powered-by-smile-id></powered-by-smile-id>'}
@@ -687,7 +692,7 @@ class SelfieCaptureScreen extends HTMLElement {
 
     setTimeout(() => {
       this.smileCTABox.style.opacity = 1;
-      this.smileCTA.textContent = 'WIDER SMILE';
+      this.smileCTA.textContent = t('selfie.capture.cta.widerSmile');
       this.mouth.setAttribute(
         'd',
         'm 213.88314,319.4551 c -1.58,0.97 -0.35309,9.33393 1.50671,9.30586 6.05679,-0.0914 16.11631,0.17227 34.57066,0.13346 18.45435,-0.0388 28.15778,-0.0418 31.09964,-0.79956 1.80122,-0.46394 2.75061,-7.48365 1.16061,-8.45365 -1.6,-1.74874 -2.96432,-0.94348 -6.77747,-1.56441 -12.83012,0.04 -36.52534,0.50197 -41.29469,0.43262 -2.51525,-0.0713 -18.41588,-0.61 -20.01588,0.35 z m 57.29363,1.36599 c -9.24417,-2.23757 -8.08363,-2.42362 -20.78363,-2.42362 -12.7,0 -17.77931,2.69528 -26.84042,5.36549 12.57883,3.28731 33.57775,-4.29887 49.70067,2.24964 z',
@@ -773,7 +778,7 @@ class SelfieCaptureScreen extends HTMLElement {
     // NOTE: we do not want to test POL images
     this._drawImage(canvas, false);
 
-    this._rawImages.push(canvas.toDataURL('image/jpeg'));
+    this._rawImages.push(canvas.toDataURL('image/jpeg', JPEG_QUALITY));
   }
 
   _captureReferencePhoto() {
@@ -801,7 +806,7 @@ class SelfieCaptureScreen extends HTMLElement {
     // NOTE: we want to test the image quality of the reference photo
     this._drawImage(canvas, !this.disableImageTests);
 
-    const image = canvas.toDataURL('image/jpeg');
+    const image = canvas.toDataURL('image/jpeg', JPEG_QUALITY);
 
     this._referenceImage = image;
 
@@ -852,9 +857,7 @@ class SelfieCaptureScreen extends HTMLElement {
       if (hasEnoughColors) {
         return context;
       }
-      throw new Error(
-        'Unable to capture webcam images - Please try another device',
-      );
+      throw new Error(t('selfie.capture.error.webcamCapture'));
     } else {
       return context;
     }
@@ -994,7 +997,11 @@ class SelfieCaptureScreen extends HTMLElement {
   }
 
   get title() {
-    return this.getAttribute('title') || 'Submit Front of ID';
+    return this.getAttribute('title') || t('selfie.instructions.title');
+  }
+
+  get direction() {
+    return this.getAttribute('dir') || getDirection() || 'ltr';
   }
 
   get hidden() {

package/lib/components/selfie/src/selfie-capture/SelfieCapture.stories.js

@@ -1,8 +1,17 @@
 import SmartCamera from '../../../../domain/camera/src/SmartCamera';
+import { setCurrentLocale } from '../../../../domain/localisation';
 import './SelfieCapture';
 
 const meta = {
+  args: {
+    language: 'en',
+    'theme-color': '#001096',
+  },
   argTypes: {
+    language: {
+      control: 'select',
+      options: ['en', 'ar'],
+    },
     'theme-color': { control: 'color' },
   },
   component: 'selfie-capture',
@@ -11,9 +20,6 @@ const meta = {
 export default meta;
 
 export const SelfieCapture = {
-  args: {
-    'theme-color': '#001096',
-  },
   loaders: [
     async () => ({
       permissionGranted: await SmartCamera.getMedia({
@@ -22,15 +28,21 @@ export const SelfieCapture = {
       }),
     }),
   ],
-  render: (args) => `
+  render: (args) => {
+    setCurrentLocale(args.language);
+    return `
         <selfie-capture theme-color='${args['theme-color']}'>
         </selfie-capture>
-    `,
+    `;
+  },
 };
 
 export const SelfieCaptureAgentMode = {
-  render: () => `
+  render: (args) => {
+    setCurrentLocale(args.language);
+    return `
         <selfie-capture allow-agent-mode='true' data-camera-ready show-agent-mode-for-tests>
         </selfie-capture>
-    `,
+    `;
+  },
 };

package/lib/components/selfie/src/selfie-capture-instructions/SelfieCaptureInstructions.js

@@ -1,5 +1,6 @@
 import styles from '../../../../styles/src/styles';
 import '../../../navigation/src';
+import { t, getDirection } from '../../../../domain/localisation';
 
 function templateString() {
   return `
@@ -339,7 +340,7 @@ function templateString() {
       }
     </style>
     ${styles(this.themeColor)}
-    <div id="selfie-capture-instruction-screen" class="center">
+    <div id="selfie-capture-instruction-screen" class="center" dir="${this.direction}">
     <div class="content-root">
       <div class="content-header">
         <smileid-navigation theme-color=${this.themeColor} ${this.hideBack ? 'hide-back' : ''} ${this.showNavigation ? '' : 'hidden'}></smileid-navigation>
@@ -370,7 +371,7 @@ function templateString() {
               </clipPath>
             </defs>
           </svg>
-          <h1 class='title-color font-bold'>Next, we'll take a quick selfie</h1>
+          <h1 class='title-color font-bold'>${t('selfie.instructions.title')}</h1>
         </header>
     <div class="instructions-wrapper">
       <div class="instructions">
@@ -449,9 +450,9 @@ function templateString() {
           </defs>
         </svg>
         <div class="instruction">
-          <p class="text-base title-color font-bold tip-header">Good Light</p>
+          <p class="text-base title-color font-bold tip-header">${t('selfie.instructions.tips.goodLight.header')}</p>
           <p class="tip-body">
-            Make sure you are in a well-lit environment.
+            ${t('selfie.instructions.tips.goodLight.body')}
           </p>
         </div>
       </div>
@@ -537,9 +538,9 @@ function templateString() {
           </defs>
         </svg>
         <div class="instruction">
-          <p class="text-base title-color font-bold tip-header">Clear Image</p>
+          <p class="text-base title-color font-bold tip-header">${t('selfie.instructions.tips.clearImage.header')}</p>
           <p class="tip-body">
-            Hold your phone steady so the selfie is clear and sharp.
+            ${t('selfie.instructions.tips.clearImage.body')}
           </p>
         </div>
       </div>
@@ -569,25 +570,25 @@ function templateString() {
           />
         </svg>
         <div class="instruction">
-          <p class="text-base title-color font-bold tip-header">Remove Obstructions</p>
+          <p class="text-base title-color font-bold tip-header">${t('selfie.instructions.tips.removeObstructions.header')}</p>
           <p class="tip-body">
-            Remove anything that covers your face, such as glasses, masks, and hats.
+            ${t('selfie.instructions.tips.removeObstructions.body')}
           </p>
         </div>
       </div>
       <div class="instructions">
         <svg  xmlns="http://www.w3.org/2000/svg"  width="38"  height="38"  viewBox="0 0 24 24"  fill="none"  stroke="${this.themeColor}"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-mood-happy"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" /><path d="M9 9l.01 0" /><path d="M15 9l.01 0" /><path d="M8 13a4 4 0 1 0 8 0h-8" /></svg>
         <div class="instruction">
-          <p class="text-base title-color font-bold tip-header">Wide Smile</p>
+          <p class="text-base title-color font-bold tip-header">${t('selfie.instructions.tips.wideSmile.header')}</p>
           <p class="tip-body">
-            When asked to smile, give a wide smile, showing your teeth.
+            ${t('selfie.instructions.tips.wideSmile.body')}
           </p>
         </div>
       </div>
     </div>
     <section class="controls">
       <button id='allow' data-variant='solid full-width' class='button theme-background'>
-        Allow
+        ${t('selfie.instructions.allowButton')}
       </button>
     </section>
     ${
@@ -667,6 +668,10 @@ class SelfieCaptureInstructions extends HTMLElement {
     return this.hasAttribute('show-navigation');
   }
 
+  get direction() {
+    return this.getAttribute('dir') || getDirection() || 'ltr';
+  }
+
   handleCloseEvents() {
     this.dispatchEvent(new CustomEvent('selfie-capture-instructions.close'));
   }

package/lib/components/selfie/src/selfie-capture-instructions/SelfieCaptureInstructions.stories.js

@@ -1,7 +1,16 @@
+import { setCurrentLocale } from '../../../../domain/localisation';
 import './index';
 
 const meta = {
+  args: {
+    language: 'en',
+    'theme-color': '#001096',
+  },
   argTypes: {
+    language: {
+      control: 'select',
+      options: ['en', 'ar'],
+    },
     'theme-color': { control: 'color' },
   },
   component: 'selfie-capture-instructions',
@@ -10,14 +19,14 @@ const meta = {
 export default meta;
 
 export const SelfieInstruction = {
-  args: {
-    'theme-color': '#001096',
-  },
-  render: (args) => `
+  render: (args) => {
+    setCurrentLocale(args.language);
+    return `
         <selfie-capture-instructions
             show-navigation
             theme-color='${args['theme-color']}'
         >
         </selfie-capture-instructions>
-    `,
+    `;
+  },
 };

package/lib/components/selfie/src/selfie-capture-review/SelfieCaptureReview.js

@@ -1,5 +1,6 @@
 import styles from '../../../../styles/src/styles';
 import '../../../navigation/src';
+import { t, getDirection } from '../../../../domain/localisation';
 
 function templateString() {
   return `
@@ -55,10 +56,10 @@ function templateString() {
       }
     </style>
     ${styles(this.themeColor)}
-    <div id='selfie-capture-review-screen' class='center'>
+    <div id='selfie-capture-review-screen' class='center' dir='${this.direction}'>
     <smileid-navigation ${this.showNavigation ? 'show-navigation' : ''} hide-back></smileid-navigation>
     <h1 class="header-title title-color font-bold">
-      Is your whole face clear?
+      ${t('selfie.review.question')}
     </h1>
     <div class='section | flow'>
       <div class='selfie-review-container ${this.isPortraitCaptureView ? 'portrait' : 'landscape'}'>
@@ -76,10 +77,10 @@ function templateString() {
       </div>
       <div class='flow action-buttons'>
         <button data-variant='solid full-width' class='button' type='button' id='select-id-image'>
-          Yes, use this
+          ${t('selfie.review.acceptButton')}
         </button>
         <button data-variant='ghost full-width' class='button  retake-photo' type='button' id='re-capture-image'>
-          No, Retake Selfie
+          ${t('selfie.review.retakeButton')}
         </button>
       </div>
       ${
@@ -145,7 +146,11 @@ class SelfieCaptureReview extends HTMLElement {
   }
 
   get title() {
-    return this.getAttribute('title') || 'Submit Front of ID';
+    return this.getAttribute('title') || t('selfie.review.title');
+  }
+
+  get direction() {
+    return this.getAttribute('dir') || getDirection() || 'ltr';
   }
 
   handleBackEvents() {

package/lib/components/selfie/src/selfie-capture-review/SelfieCaptureReview.stories.js

@@ -1,7 +1,16 @@
+import { setCurrentLocale } from '../../../../domain/localisation';
 import './SelfieCaptureReview';
 
 const meta = {
+  args: {
+    language: 'en',
+    'theme-color': '#001096',
+  },
   argTypes: {
+    language: {
+      control: 'select',
+      options: ['en', 'ar'],
+    },
     'theme-color': { control: 'color' },
   },
   component: 'selfie-capture-review',
@@ -10,15 +19,15 @@ const meta = {
 export default meta;
 
 export const SelfieCaptureReview = {
-  args: {
-    'theme-color': '#001096',
-  },
-  render: (args) => `
+  render: (args) => {
+    setCurrentLocale(args.language);
+    return `
         <selfie-capture-review
             show-navigation
             data-image="https://placehold.co/600x400"
             theme-color='${args['theme-color']}'
         >
         </selfie-capture-review>
-    `,
+    `;
+  },
 };

package/lib/components/selfie/src/selfie-capture-wrapper/SelfieCaptureWrapper.tsx

@@ -3,7 +3,7 @@ import { IconLoader2 } from '@tabler/icons-preact';
 import register from 'preact-custom-element';
 import type { FunctionComponent } from 'preact';
 
-import { getBoolProp } from '@/utils/props';
+import { getBoolProp } from '../../../../utils/props';
 import SmartSelfieCapture from '../smartselfie-capture/SmartSelfieCapture';
 // Legacy web component fallback (used when Mediapipe isn't available)
 import '../selfie-capture/SelfieCapture';
@@ -196,7 +196,7 @@ const SelfieCaptureWrapper: FunctionComponent<Props> = ({
     delete (propsWithoutHidden as any).hidden;
 
     return (
-      // @ts-ignore
+      // @ts-expect-error --- preact-custom-element doesn't have proper types for refs
       <selfie-capture
         {...propsWithoutHidden}
         ref={(el: HTMLElement) => {

package/lib/components/selfie/src/smartselfie-capture/SmartSelfieCapture.stories.js

@@ -0,0 +1,47 @@
+import { setCurrentLocale } from '../../../../domain/localisation';
+import './index';
+
+const meta = {
+  args: {
+    language: 'en',
+    'theme-color': '#001096',
+  },
+  argTypes: {
+    language: {
+      control: 'select',
+      options: ['en', 'ar'],
+    },
+    'theme-color': { control: 'color' },
+  },
+  component: 'smart-selfie-capture',
+};
+
+export default meta;
+
+export const SmartSelfieCapture = {
+  render: (args) => {
+    setCurrentLocale(args.language);
+    return `
+        <smart-selfie-capture
+            show-navigation
+            theme-color='${args['theme-color']}'
+        >
+        </smart-selfie-capture>
+    `;
+  },
+};
+
+export const SmartSelfieCaptureAgentMode = {
+  render: (args) => {
+    setCurrentLocale(args.language);
+    return `
+        <smart-selfie-capture
+            show-navigation
+            allow-agent-mode
+            show-agent-mode-for-tests
+            theme-color='${args['theme-color']}'
+        >
+        </smart-selfie-capture>
+    `;
+  },
+};

package/lib/components/selfie/src/smartselfie-capture/SmartSelfieCapture.tsx

@@ -152,7 +152,7 @@ const SmartSelfieCapture: FunctionComponent<Props> = ({
   return (
     <div className="smartselfie-capture">
       {showNavigation && (
-        // @ts-ignore
+        // @ts-expect-error --- preact-custom-element doesn't have proper types for refs
         <smileid-navigation ref={navigationRef} theme-color={themeColor} />
       )}
 
@@ -188,7 +188,7 @@ const SmartSelfieCapture: FunctionComponent<Props> = ({
           />
         )}
 
-      {/* @ts-ignore */}
+      {/* @ts-expect-error -- preact-custom-element doesn't have proper types for refs */}
       {!hideAttribution && <powered-by-smile-id />}
 
       <style>{`

package/lib/components/selfie/src/smartselfie-capture/components/CaptureControls.tsx

@@ -1,4 +1,5 @@
 import type { FunctionComponent } from 'preact';
+import { t } from '../../../../../domain/localisation';
 
 interface CaptureControlsProps {
   isCapturing: boolean;
@@ -33,7 +34,7 @@ export const CaptureControls: FunctionComponent<CaptureControlsProps> = ({
         onClick={onStartCapture}
         disabled={isCapturing || hasFinishedCapture || !isReadyToCapture}
       >
-        Start Capture
+        {t('selfie.capture.button.startCapture')}
       </button>
 
       {allowAgentMode && (agentSupported || showAgentModeForTests) && (
@@ -43,7 +44,9 @@ export const CaptureControls: FunctionComponent<CaptureControlsProps> = ({
           className="agent-mode-btn"
           disabled={isCapturing || hasFinishedCapture}
         >
-          {facingMode === 'user' ? 'Agent Mode Off' : 'Agent Mode On'}
+          {facingMode === 'user'
+            ? t('selfie.capture.agentMode.off')
+            : t('selfie.capture.agentMode.on')}
         </button>
       )}
     </div>

package/lib/components/selfie/src/smartselfie-capture/hooks/useCamera.ts

@@ -110,7 +110,7 @@ export const useCamera = (initialFacingMode: CameraFacingMode = 'user') => {
       }
 
       await startCamera(newFacingMode);
-    } catch (error) {
+    } catch {
       setFacingMode(previousFacingMode);
       isSwitchingCameraRef.current = false;
 
@@ -180,7 +180,7 @@ export const useCamera = (initialFacingMode: CameraFacingMode = 'user') => {
         userCameraId =
           userStream.getVideoTracks()[0].getSettings().deviceId ?? null;
         userStream.getTracks().forEach((track) => track.stop());
-      } catch (error) {
+      } catch {
         // no user-facing camera available
       }
 
@@ -192,7 +192,7 @@ export const useCamera = (initialFacingMode: CameraFacingMode = 'user') => {
         environmentCameraId =
           envStream.getVideoTracks()[0].getSettings().deviceId ?? null;
         envStream.getTracks().forEach((track) => track.stop());
-      } catch (error) {
+      } catch {
         // no environment-facing camera available
       }
 
@@ -207,7 +207,7 @@ export const useCamera = (initialFacingMode: CameraFacingMode = 'user') => {
       }
 
       setAgentSupported(!isGecko);
-    } catch (error) {
+    } catch {
       setAgentSupported(false);
     }
   };

package/lib/components/selfie/src/smartselfie-capture/hooks/useFaceCapture.ts

@@ -17,6 +17,7 @@ import { captureImageFromVideo } from '../utils/imageCapture';
 import { ImageType } from '../constants';
 import { MESSAGES, type MessageKey } from '../utils/alertMessages';
 import { getMediapipeInstance } from '../utils/mediapipeManager';
+import { t } from '../../../../../domain/localisation';
 import packageJson from '../../../../../../package.json';
 
 const COMPONENTS_VERSION = packageJson.version;
@@ -88,7 +89,7 @@ export const useFaceCapture = ({
 
   const updateAlertImmediate = (messageKey: MessageKey | null) => {
     if (messageKey && MESSAGES[messageKey]) {
-      alertTitle.value = MESSAGES[messageKey];
+      alertTitle.value = MESSAGES[messageKey]?.();
     } else {
       alertTitle.value = '';
     }
@@ -141,7 +142,7 @@ export const useFaceCapture = ({
     const isInSmileZone = capturesTaken.value >= smileCheckpoint.value;
 
     if (isInNeutralZone) {
-      alertTitle.value = 'Capturing...';
+      alertTitle.value = t('selfie.smart.status.capturing');
     } else if (isInSmileZone) {
       const timeSinceSmile = Date.now() - lastSmileTime.value;
       if (timeSinceSmile > smileCooldown) {
@@ -154,7 +155,7 @@ export const useFaceCapture = ({
           updateAlert('smile-required');
         }
       } else {
-        alertTitle.value = 'Keep smiling!';
+        alertTitle.value = t('selfie.smart.status.keepSmiling');
       }
     } else {
       updateAlert(null);
@@ -177,7 +178,7 @@ export const useFaceCapture = ({
     } else if (isCapturing.value) {
       updateCaptureAlerts();
     } else {
-      alertTitle.value = 'Ready to capture';
+      alertTitle.value = t('selfie.smart.status.readyToCapture');
     }
   };
 
@@ -330,7 +331,7 @@ export const useFaceCapture = ({
       }
 
       updateAlerts();
-    } catch (error) {
+    } catch {
       faceDetected.value = false;
       faceInBounds.value = false;
       multipleFaces.value = false;

package/lib/components/selfie/src/smartselfie-capture/utils/alertMessages.ts

@@ -1,13 +1,15 @@
+import { t } from '../../../../../domain/localisation';
+
 export const MESSAGES = {
-  'multiple-faces': 'Ensure only one face is visible',
-  'no-face': 'Position your face in the oval',
-  'out-of-bounds': 'Position your face in the oval',
-  'too-close': 'Move farther away',
-  'too-far': 'Move closer',
-  'neutral-expression': 'Neutral expression',
-  'smile-required': 'Smile!',
-  'open-mouth-smile': 'Wider smile - teeth visible',
-  initializing: 'Initializing...',
+  'multiple-faces': () => t('selfie.smart.alert.multipleFaces'),
+  'no-face': () => t('selfie.smart.alert.noFace'),
+  'out-of-bounds': () => t('selfie.smart.alert.outOfBounds'),
+  'too-close': () => t('selfie.smart.alert.tooClose'),
+  'too-far': () => t('selfie.smart.alert.tooFar'),
+  'neutral-expression': () => t('selfie.smart.alert.neutralExpression'),
+  'smile-required': () => t('selfie.smart.alert.smileRequired'),
+  'open-mouth-smile': () => t('selfie.smart.alert.openMouthSmile'),
+  initializing: () => t('selfie.smart.alert.initializing'),
 };
 
 export type MessageKey = keyof typeof MESSAGES;

package/lib/components/selfie/src/smartselfie-capture/utils/imageCapture.ts

@@ -1,3 +1,5 @@
+import { JPEG_QUALITY } from '../../../../../domain/constants/src/Constants';
+
 export const captureImageFromVideo = (
   videoElement: HTMLVideoElement,
   isReference: boolean = false,
@@ -60,5 +62,5 @@ export const captureImageFromVideo = (
     canvas.height,
   );
 
-  return canvas.toDataURL('image/jpeg');
+  return canvas.toDataURL('image/jpeg', JPEG_QUALITY);
 };

package/lib/components/signature-pad/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@smileid/signature-pad",
-  "version": "11.0.3",
+  "version": "11.1.0",
   "private": "true",
   "exports": {
     ".": "./index.js"