@smileid/web-components 11.0.3 → 11.2.0

package/lib/components/selfie/src/SelfieCaptureScreens.stories.js

@@ -1,12 +1,18 @@
+import { setCurrentLocale } from '../../../domain/localisation';
 import './SelfieCaptureScreens';
 
 const meta = {
   args: {
     'hide-attribution': false,
+    language: 'en',
     'theme-color': '#001096',
   },
   argTypes: {
     'hide-attribution': { control: 'boolean' },
+    language: {
+      control: 'select',
+      options: ['en', 'ar'],
+    },
     'theme-color': { control: 'color' },
   },
   component: 'selfie-capture-screens',
@@ -15,15 +21,21 @@ const meta = {
 export default meta;
 
 export const SelfieCaptureFlow = {
-  render: (args) => `
+  render: (args) => {
+    setCurrentLocale(args.language);
+    return `
         <selfie-capture-screens theme-color='${args['theme-color']}' ${args['hide-attribution'] ? 'hide-attribution' : ''}>
         </selfie-capture-screens>
-    `,
+    `;
+  },
 };
 
 export const SelfieCaptureFlowHiddenInstructions = {
-  render: (args) => `
+  render: (args) => {
+    setCurrentLocale(args.language);
+    return `
         <selfie-capture-screens hide-instructions theme-color='${args['theme-color']}' ${args['hide-attribution'] ? 'hide-attribution' : ''}>
         </selfie-capture-screens>
-    `,
+    `;
+  },
 };

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;
     }
@@ -929,11 +932,11 @@ class SelfieCaptureScreen extends HTMLElement {
       this._switchCamera();
     });
 
-    this.navigation.addEventListener('navigation.back', () => {
+    this.navigation?.addEventListener('navigation.back', () => {
       this.handleBackEvents();
     });
 
-    this.navigation.addEventListener('navigation.close', () => {
+    this.navigation?.addEventListener('navigation.close', () => {
       this.closeWindow();
     });
 
@@ -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,10 +340,10 @@ 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>
+        ${this.showNavigation ? `<smileid-navigation theme-color='${this.themeColor}' ${this.hideBack ? 'hide-back' : ''}></smileid-navigation>` : ''}
       </div>
       <div class="content-body">
         <header>
@@ -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>
     ${
@@ -624,7 +625,7 @@ class SelfieCaptureInstructions extends HTMLElement {
     this.allowButton = this.shadowRoot.querySelector('#allow');
     this.navigation = this.shadowRoot.querySelector('smileid-navigation');
 
-    this.navigation.addEventListener('navigation.back', () => {
+    this.navigation?.addEventListener('navigation.back', () => {
       this.handleBackEvents();
     });
 
@@ -636,7 +637,7 @@ class SelfieCaptureInstructions extends HTMLElement {
       });
     }
 
-    this.navigation.addEventListener(
+    this.navigation?.addEventListener(
       'navigation.close',
       () => {
         this.handleCloseEvents();
@@ -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'>
-    <smileid-navigation ${this.showNavigation ? 'show-navigation' : ''} hide-back></smileid-navigation>
+    <div id='selfie-capture-review-screen' class='center' dir='${this.direction}'>
+   ${this.showNavigation ? `<smileid-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() {
@@ -175,10 +180,10 @@ class SelfieCaptureReview extends HTMLElement {
     this.reCaptureImage = this.shadowRoot.querySelector('#re-capture-image');
     this.navigation = this.shadowRoot.querySelector('smileid-navigation');
 
-    this.navigation.addEventListener('navigation.back', () => {
+    this.navigation?.addEventListener('navigation.back', () => {
       this.handleBackEvents();
     });
-    this.navigation.addEventListener('navigation.close', () => {
+    this.navigation?.addEventListener('navigation.close', () => {
       this.handleCloseEvents();
     });
 

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>
-    `,
+    `;
+  },
 };