@smileid/web-components 11.0.2 → 11.1.0

package/lib/components/document/src/document-capture-instructions/DocumentCaptureInstructions.js

@@ -1,6 +1,7 @@
 import SmartFileUpload from '../../../../domain/file-upload/src/SmartFileUpload';
 import styles from '../../../../styles/src/styles';
 import '../../../navigation/src';
+import { t, escapeHtml, getDirection } from '../../../../domain/localisation';
 
 function frontDocumentIcon() {
   return `<svg xmlns="http://www.w3.org/2000/svg" width="173" height="103" viewBox="0 0 173 103" fill="none">
@@ -191,7 +192,7 @@ function templateString() {
       margin-top: 1rem;
     }
   </style>
-    <div id="document-capture-instructions-screen" class="flow center">
+    <div id="document-capture-instructions-screen" class="flow center" dir="${this.direction}">
         <div class="content-root">
             <div class="content-header">
         <smileid-navigation theme-color='${this.themeColor}' ${this.showNavigation ? 'show-navigation' : ''} ${this.hideBack ? 'hide-back' : ''}></smileid-navigation>
@@ -199,12 +200,12 @@ function templateString() {
         <div class="content-body">
         <header>
         ${this.isFrontOfId ? frontDocumentIcon() : backDocumentIcon()}
-            <h1 class='title-color font-bold'>${this.title}</h1>
+            <h1 class='title-color font-bold'>${escapeHtml(this.title)}</h1>
         <p class="description text-sm font-normal">
-            We'll use it to verify your identity.
+            ${t('document.instructions.description')}
           </p>
           <p class="description padding-bottom-2">
-          Please follow the instructions below.
+          ${t('document.instructions.followInstructions')}
           </p>
         </header>
         <div class="instructions-wrapper">
@@ -284,9 +285,9 @@ function templateString() {
                 </defs>
                 </svg>
                 <div class="instruction">
-                <p class="instruction-header font-bold text-base">Good Light</p>
+                <p class="instruction-header font-bold text-base">${t('document.instructions.goodLight.header')}</p>
                 <p class="instruction-body text-xs font-medium">
-                  Make sure the image is taken in a well-lit environment where the ID document is easy to read.
+                  ${t('document.instructions.goodLight.body')}
                 </p>
             </div>
         </div>
@@ -372,9 +373,9 @@ function templateString() {
             </defs>
             </svg>
             <div>
-                <p class="instruction-header font-bold text-base">Clear Image</p>
+                <p class="instruction-header font-bold text-base">${t('document.instructions.clearImage.header')}</p>
                 <p class="instruction-body text-xs font-medium">
-                  Hold your camera steady so the words on the ID are not blurry.
+                  ${t('document.instructions.clearImage.body')}
                 </p>
             </div>
         </div>
@@ -386,7 +387,7 @@ function templateString() {
       this.supportBothCaptureModes || this.documentCaptureModes === 'camera'
         ? `
     <button data-variant='solid full-width' class='button' type='button' id='take-photo'>
-        Take Photo
+        ${t('document.instructions.takePhotoButton')}
     </button>
     `
         : ''
@@ -398,7 +399,7 @@ function templateString() {
       this.supportBothCaptureModes ? 'outline' : 'solid'
     }' class='button'>
         <input type='file' hidden onclick='this.value=null;' id='upload-photo' name='document' accept='image/png, image/jpeg' />
-        <span>Upload Photo</span>
+        <span>${t('document.instructions.uploadPhotoButton')}</span>
     </label>
     `
         : ''
@@ -506,7 +507,7 @@ class DocumentInstruction extends HTMLElement {
   }
 
   get title() {
-    return this.getAttribute('title') || 'Submit Front of ID';
+    return this.getAttribute('title') || t('document.title.front');
   }
 
   get sideOfId() {
@@ -521,6 +522,10 @@ class DocumentInstruction extends HTMLElement {
     return !this.isFrontOfId;
   }
 
+  get direction() {
+    return this.getAttribute('dir') || getDirection() || 'ltr';
+  }
+
   handleBackEvents() {
     this.dispatchEvent(
       new CustomEvent('document-capture-instructions.cancelled'),

package/lib/components/document/src/document-capture-instructions/DocumentCaptureInstructions.stories.js

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

package/lib/components/document/src/document-capture-review/DocumentCaptureReview.js

@@ -1,5 +1,6 @@
 import styles from '../../../../styles/src/styles';
 import '../../../navigation/src';
+import { t, getDirection } from '../../../../domain/localisation';
 
 function templateString() {
   return `
@@ -218,13 +219,12 @@ function templateString() {
     }
   </style>
   ${styles(this.themeColor)}
-  <div id='document-capture-review-screen' class='flow center'>
+  <div id='document-capture-review-screen' class='flow center' dir='${this.direction}'>
   <smileid-navigation ${this.showNavigation ? 'show-navigation' : ''} hide-back></smileid-navigation>
     <h1 class="header-title title-color">
-      Is the document clear and readable?
+      ${t('document.review.question')}
     </h1>
-    <p class="description">Make sure all corners of the document 
-    are visible and there is no glare</p>
+    <p class="description">${t('document.review.description')}</p>
     <div class='section | flow'>
       <div class='id-image-container'>
         <div class='id-image'>
@@ -233,10 +233,10 @@ function templateString() {
           </div>
         <div class='flow action-buttons'>
           <button data-variant='solid full-width' class='button' type='button' id='select-id-image'>
-            Yes, my ID is readable
+            ${t('document.review.acceptButton')}
           </button>
           <button data-variant='ghost full-width' class='button  retake-photo' type='button' id='re-capture-id-image'>
-            No, retake photo
+            ${t('document.review.retakeButton')}
           </button>
         </div>
       </div>
@@ -295,7 +295,11 @@ class IdReview extends HTMLElement {
   }
 
   get title() {
-    return this.getAttribute('title') || 'Submit Front of ID';
+    return this.getAttribute('title') || t('document.title.front');
+  }
+
+  get direction() {
+    return this.getAttribute('dir') || getDirection() || 'ltr';
   }
 
   handleBackEvents() {

package/lib/components/document/src/document-capture-review/DocumentCaptureReview.stories.js

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

package/lib/components/end-user-consent/src/EndUserConsent.js

@@ -1,6 +1,7 @@
 import styles from '../../../styles/src/styles';
 import '../../totp-consent/src/TotpConsent';
 import '../../attribution/PoweredBySmileId';
+import { t, tHtml, getDirection } from '../../../domain/localisation';
 
 function templateString() {
   return `
@@ -316,7 +317,7 @@ function templateString() {
       }
     </style>
     ${styles(this.themeColor)}
-    <div id='consent-screen'>
+    <div id='consent-screen' dir='${this.direction}'>
       <section class='flow center'>
         <div class="nav ${this.hideBack ? 'justify-right' : ''}">
           <div class="back-wrapper" ${this.hideBack ? 'hidden' : ''}>
@@ -326,14 +327,14 @@ function templateString() {
                 <path fill="${this.themeColor}" d="M15.5 11.25h-5.19l1.72-1.72c.29-.29.29-.77 0-1.06a.754.754 0 0 0-1.06 0l-3 3c-.29.29-.29.77 0 1.06l3 3c.15.15.34.22.53.22s.38-.07.53-.22c.29-.29.29-.77 0-1.06l-1.72-1.72h5.19c.41 0 .75-.34.75-.75s-.34-.75-.75-.75Z"/>
               </svg>
             </button>
-            <div class="back-button-text">Back</div>
+            <div class="back-button-text">${t('common.back')}</div>
           </div>
           <button data-type='icon' type='button' class='close-iframe'>
             <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none">
               <path fill="#DBDBC4" d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10Z" opacity=".4"/>
               <path fill="#91190F" d="m13.06 12 2.3-2.3c.29-.29.29-.77 0-1.06a.754.754 0 0 0-1.06 0l-2.3 2.3-2.3-2.3a.754.754 0 0 0-1.06 0c-.29.29-.29.77 0 1.06l2.3 2.3-2.3 2.3c-.29.29-.29.77 0 1.06.15.15.34.22.53.22s.38-.07.53-.22l2.3-2.3 2.3 2.3c.15.15.34.22.53.22s.38-.07.53-.22c.29-.29.29-.77 0-1.06l-2.3-2.3Z"/>
             </svg>
-            <span class='visually-hidden'>Close SmileIdentity Verification frame</span>
+            <span class='visually-hidden'>${t('common.close')} SmileIdentity Verification frame</span>
           </button>
         </div>
         <img alt='' width='50' height='50' src='${this.partnerLogoURL}' />
@@ -345,17 +346,17 @@ function templateString() {
           </svg>
 
           <span>
-            This consent screen is for illustrative purposes only. Demo App does not collect personal ID data.
+            ${t('consent.demoTip')}
           </span>
         </p>
         <h1 class='text-base font-bold'>
-          <span class='theme'>${this.partnerName}</span>
-          wants to access your
-          <span class='theme'>${this.idTypeLabel}</span>
-          information
+          ${tHtml('consent.accessRequest', {
+            idTypeLabel: { className: 'theme', value: this.idTypeLabel },
+            partnerName: { className: 'theme', value: this.partnerName },
+          })}
         </h1>
         <p class='text-base font-normal'>
-          This will allow ${this.partnerName} to:
+          ${tHtml('consent.allowPartner', { partnerName: this.partnerName })}
         </p>
       </section>
 
@@ -367,8 +368,8 @@ function templateString() {
             <path d="M14.9238 19.0148L13.8262 17.931C13.8262 17.931 13.6341 17.7956 13.5244 17.7956C13.4146 17.7956 13.3049 17.8498 13.2226 17.931C13.1402 18.0123 13.0854 18.1207 13.0854 18.2291C13.0854 18.3374 13.1402 18.4458 13.2226 18.5271L14.622 19.9089C14.622 19.9089 14.814 20.0443 14.9238 20.0443C15.0335 20.0443 15.1433 19.9901 15.2256 19.9089L17.8323 17.335C17.8323 17.335 17.9421 17.1724 17.9421 17.0369C17.9421 16.9015 17.9146 16.8202 17.8323 16.7389C17.75 16.6576 17.6677 16.6305 17.5579 16.6305C17.4482 16.6305 17.3384 16.6576 17.2835 16.7389L15.0061 18.9877L14.9238 19.0148ZM15.5 24C15.5 24 15.4177 24 15.3902 24C15.3628 24 15.3354 24 15.3079 24C14.0457 23.6207 13.0305 22.8621 12.2073 21.7241C11.4116 20.5862 11 19.3128 11 17.931V15.2217C11 15.0591 11.0549 14.8965 11.1646 14.734C11.2744 14.5714 11.4116 14.4901 11.5488 14.4089L15.1982 13.0542C15.1982 13.0542 15.3902 13 15.5 13C15.6098 13 15.6921 13 15.8018 13.0542L19.4512 14.4089C19.6159 14.4631 19.753 14.5714 19.8354 14.734C19.9177 14.8965 20 15.032 20 15.2217V17.931C20 19.3128 19.5884 20.5862 18.7927 21.7241C17.9969 22.8621 16.9543 23.6478 15.6921 24H15.5Z" fill="#2CC05C"/>
           </svg>        
           <div class='processing-list__items-item'>
-            <p class='font-medium text-base processing-list__item__title'>Process your personal details</p>
-            <p class='text-xs font-medium processing-list__items-item__description'>Partner can process your names, DoB and gender</p>
+            <p class='font-medium text-base processing-list__item__title'>${t('consent.processing.personalDetails.title')}</p>
+            <p class='text-xs font-medium processing-list__items-item__description'>${t('consent.processing.personalDetails.description')}</p>
           </div
         </li>
         <li class='processing-list__items'>
@@ -378,8 +379,8 @@ function templateString() {
             <path d="M20 16.83C19.9987 17.2074 19.9131 17.5798 19.7496 17.92C19.5794 18.28 19.359 18.62 19.0686 18.94C18.5779 19.48 18.037 19.87 17.4261 20.12C17.4161 20.12 17.4061 20.13 17.3961 20.13C16.8052 20.37 16.1642 20.5 15.4732 20.5C14.4517 20.5 13.36 20.26 12.2083 19.77C11.0566 19.28 9.90483 18.62 8.76312 17.79C8.37253 17.5 7.98195 17.21 7.61139 16.9L10.8863 13.63C11.1667 13.84 11.4171 14 11.6274 14.11C11.6775 14.13 11.7376 14.16 11.8077 14.19C11.8878 14.22 11.9679 14.23 12.0581 14.23C12.2283 14.23 12.3585 14.17 12.4687 14.06L13.2298 13.31C13.4802 13.06 13.7206 12.87 13.9509 12.75C14.1813 12.61 14.4116 12.54 14.662 12.54C14.8523 12.54 15.0526 12.58 15.2729 12.67C15.4932 12.76 15.7236 12.89 15.9739 13.06L19.2889 15.41C19.5493 15.59 19.7296 15.8 19.8397 16.05C19.9399 16.3 20 16.55 20 16.83Z" fill="#151F72"/>
           </svg>
           <div class='processing-list__items-item'>
-            <p class='font-medium text-base processing-list__item__title'>Process your contact information</p>
-            <p class='text-xs font-medium processing-list__items-item__description'>Partner can process your phone numbers and address</p>
+            <p class='font-medium text-base processing-list__item__title'>${t('consent.processing.contactInfo.title')}</p>
+            <p class='text-xs font-medium processing-list__items-item__description'>${t('consent.processing.contactInfo.description')}</p>
           </div
         </li>
         <li class='processing-list__items'>
@@ -402,34 +403,30 @@ function templateString() {
             </defs>
           </svg>
           <div class='processing-list__items-item'>
-            <p class='font-medium text-base processing-list__item__title'>Process your document information</p>
-            <p class='text-xs font-medium processing-list__items-item__description'>Partner can process your photo, ID expiration date, country of issuance and document number</p>
+            <p class='font-medium text-base processing-list__item__title'>${t('consent.processing.documentInfo.title')}</p>
+            <p class='text-xs font-medium processing-list__items-item__description'>${t('consent.processing.documentInfo.description')}</p>
           </div
         </li>
       </ul>
 
       <section class='callout | flow center' style='--flow-space: 2rem; margin: var(--flow-space) auto;'>
         <p>
-          You can view <span class='theme'>${this.partnerName}</span>'s privacy policy
-          <a class='theme' href='${
-            this.partnerPolicyURL
-          }' rel='noreferer noopener' target='_blank'>here</a>
+          ${tHtml('consent.privacyPolicy', { partnerName: this.partnerName })}
+          <a class='theme' href='${this.partnerPolicyURL}' rel='noreferer noopener' target='_blank'>${t('consent.privacyPolicyLink')}</a>
         </p>
 
         <p style='--flow-space: .75rem'>
-          By choosing "Allow", you grant
-          <span class='theme'>${this.partnerName}</span>
-          consent to process your personal data to offer you this service
+          ${tHtml('consent.grantConsent', { partnerName: this.partnerName })}
         </p>
       </section>
 
       <section class='flow' style='--flow-space: 2.5rem'>
         <button id='allow' data-variant='solid'>
-          Allow
+          ${t('common.allow')}
         </button>
 
         <button id='cancel' data-variant='ghost' class='color-danger' style='--flow-space: 1.5rem'>
-          Cancel
+          ${t('common.cancel')}
         </button>
       </section>
     </div>
@@ -557,15 +554,15 @@ function templateString() {
         </svg>
 
         <h1 style='font-size: 36px; line-height: 1; font-weight: 500; --flow-space: 1.5rem'>
-          Consent Denied
+          ${t('consent.denied.title')}
         </h1>
 
         <p class='color-grey' style='--flow-space: 1rem'>
-          We cannot verify you without your consent
+          ${t('consent.denied.message')}
         </p>
 
         <p>
-          Wish to correct that?
+          ${t('consent.denied.prompt')}
         </p>
       </section>
 
@@ -573,11 +570,11 @@ function templateString() {
         <svg style='transform: rotate(.5turn);' width="25" height="24" fill="none" xmlns="http://www.w3.org/2000/svg">
           <path d="M7 12h11m0 0-4.588-4M18 12l-4.588 4" stroke="#fff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
         </svg>
-        Go Back
+        ${t('consent.denied.goBack')}
       </button>
 
       <button data-variant='outline' id='confirm-consent-rejection' style='--flow-space: 1rem; border-radius: 2rem'>
-        No, Cancel Verification
+        ${t('consent.denied.confirmCancel')}
       </button>
 
       ${this.hideAttribution ? '' : '<powered-by-smile-id></powered-by-smile-id>'}
@@ -725,6 +722,10 @@ class EndUserConsent extends HTMLElement {
     return this.getAttribute('theme-color') || '#151F72';
   }
 
+  get direction() {
+    return this.getAttribute('dir') || getDirection() || 'ltr';
+  }
+
   get token() {
     return this.getAttribute('token');
   }

package/lib/components/end-user-consent/src/EndUserConsent.stories.js

@@ -1,10 +1,16 @@
 import './EndUserConsent';
+import { setCurrentLocale } from '../../../domain/localisation';
 
 const meta = {
   args: {
+    language: 'en',
     'theme-color': '#001096',
   },
   argTypes: {
+    language: {
+      control: 'select',
+      options: ['en', 'ar'],
+    },
     'theme-color': { control: 'color' },
   },
   component: 'end-user-consent',
@@ -13,7 +19,10 @@ const meta = {
 export default meta;
 
 export const EndUserConsent = {
-  render: (args) => `
+  render: (args) => {
+    setCurrentLocale(args.language);
+
+    return `
         <end-user-consent
             country="NG"
             id-type="NATIONAL_ID"
@@ -25,5 +34,6 @@ export const EndUserConsent = {
             partner-logo="https://portal.usesmileid.com/favicon.ico"
         >
         </end-user-consent>
-    `,
+    `;
+  },
 };

package/lib/components/navigation/src/Navigation.js

@@ -1,6 +1,9 @@
+import { t, getDirection } from '../../../domain/localisation';
+
 class Navigation extends HTMLElement {
   connectedCallback() {
     const shadow = this.attachShadow({ mode: 'open' });
+    const direction = getDirection();
 
     const style = document.createElement('style');
     style.textContent = `
@@ -8,6 +11,12 @@ class Navigation extends HTMLElement {
   display: flex;
   max-inline-size: 100%;
   justify-content: ${this.showBackButton ? 'space-between' : 'flex-end'};
+  direction: ${direction};
+}
+
+:host([dir="rtl"]) .back-button svg,
+:host .back-button svg[data-rtl="true"] {
+  transform: scaleX(-1);
 }
 
 button {
@@ -80,6 +89,7 @@ button[data-type="icon"] {
         height="24"
         viewBox="0 0 24 24"
         fill="none"
+        data-rtl="${direction === 'rtl'}"
       >
         <path
           fill="#DBDBC4"
@@ -91,7 +101,7 @@ button[data-type="icon"] {
           d="M15.5 11.25h-5.19l1.72-1.72c.29-.29.29-.77 0-1.06a.754.754 0 0 0-1.06 0l-3 3c-.29.29-.29.77 0 1.06l3 3c.15.15.34.22.53.22s.38-.07.53-.22c.29-.29.29-.77 0-1.06l-1.72-1.72h5.19c.41 0 .75-.34.75-.75s-.34-.75-.75-.75Z"
         />
       </svg>
-      <span part="back-button-text">Back</span>
+      <span part="back-button-text">${t('navigation.back')}</span>
     `;
 
     const closeButton = document.createElement('button');
@@ -118,7 +128,7 @@ button[data-type="icon"] {
         />
       </svg>
       <span class="visually-hidden"
-        >Close SmileIdentity Verification frame</span
+        >${t('navigation.closeVerificationFrame')}</span
       >
     `;
 
@@ -126,6 +136,9 @@ button[data-type="icon"] {
     if (this.showBackButton) shadow.appendChild(backButton);
     shadow.appendChild(closeButton);
 
+    // Set language direction attribute on host for CSS selectors
+    this.setAttribute('dir', direction);
+
     // Back Button Controls
     this.backButton = backButton;
     this.backButton.addEventListener('click', () => this.handleBack());

package/lib/components/navigation/src/Navigation.stories.js

@@ -1,24 +1,40 @@
 import './Navigation';
+import { setCurrentLocale } from '../../../domain/localisation';
 
 const meta = {
+  args: {
+    language: 'en',
+  },
+  argTypes: {
+    language: {
+      control: { type: 'select' },
+      options: ['en', 'ar'],
+    },
+  },
   component: 'smileid-navigation',
 };
 
 export default meta;
 
 export const Navigation = {
-  render: () => `
+  render: (args) => {
+    setCurrentLocale(args.language);
+    return `
         <smileid-navigation
         >
         </smileid-navigation>
-    `,
+    `;
+  },
 };
 
 export const NavigationWithBackHidden = {
-  render: () => `
+  render: (args) => {
+    setCurrentLocale(args.language);
+    return `
         <smileid-navigation
           hide-back
         >
         </smileid-navigation>
-    `,
+    `;
+  },
 };

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

@@ -4,17 +4,13 @@ import './selfie-capture-wrapper/index.ts';
 import SmartCamera from '../../../domain/camera/src/SmartCamera';
 import styles from '../../../styles/src/styles';
 import packageJson from '../../../../package.json';
+import { JPEG_QUALITY } from '../../../domain/constants/src/Constants';
 
 const COMPONENTS_VERSION = packageJson.version;
 
 const smartCameraWeb = document.querySelector('smart-camera-web');
 
-const cropImageFromDataUri = (
-  dataUri,
-  cropPercentX = 0,
-  cropPercentY = 0,
-  quality = 0.9,
-) =>
+const cropImageFromDataUri = (dataUri, cropPercentX = 0, cropPercentY = 0) =>
   new Promise((resolve, reject) => {
     if (!dataUri || typeof dataUri !== 'string') {
       reject(new Error('Invalid data URI provided'));
@@ -60,7 +56,7 @@ const cropImageFromDataUri = (
           newHeight,
         );
 
-        const croppedDataUri = canvas.toDataURL('image/jpeg', quality);
+        const croppedDataUri = canvas.toDataURL('image/jpeg', JPEG_QUALITY);
         resolve(croppedDataUri);
       } catch (error) {
         reject(new Error(`Failed to process image: ${error.message}`));

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