@repzo/widget-react-native 1.0.9 → 1.2.0

package/src/storage.ts

@@ -44,7 +44,6 @@ function createMemoryAdapter(): RepzoWidgetStorageAdapter {
 
 function resolveAsyncStorage(): RepzoWidgetStorageAdapter | null {
   try {
-    // eslint-disable-next-line @typescript-eslint/no-var-requires, global-require
     const mod = require('@react-native-async-storage/async-storage');
     const asyncStorage = mod?.default ?? mod;
     if (!asyncStorage?.getItem) return null;
@@ -101,10 +100,27 @@ export const Storage = {
 
 let secureAdapter: RepzoWidgetStorageAdapter | null = null;
 
+let warnedPlaintext = false;
+
 export function setSecureStorageAdapter(adapter: RepzoWidgetStorageAdapter | null): void {
   secureAdapter = adapter;
 }
 
+/**
+ * Development builds only, once per run: the bearer token is about to land on
+ * disk unencrypted. The in-memory fallback writes nothing, so it stays quiet.
+ */
+function warnPlaintextOnce(): void {
+  if (warnedPlaintext || typeof __DEV__ === 'undefined' || !__DEV__) return;
+  if (activeAdapter() === memoryAdapter) return;
+  warnedPlaintext = true;
+  console.warn(
+    '[repzo-widget] no secure storage adapter is set, so the visitor token is stored in plain ' +
+      'text. Call RepzoWidget.setSecureStorageAdapter() before boot() — see "Secure token ' +
+      'storage" in the README.'
+  );
+}
+
 export const SecureStorage = {
   async getItem(key: string): Promise<string | null> {
     if (!secureAdapter) return Storage.getItem(key);
@@ -126,6 +142,7 @@ export const SecureStorage = {
 
   async setItem(key: string, value: string): Promise<void> {
     if (!secureAdapter) {
+      warnPlaintextOnce();
       await Storage.setItem(key, value);
       return;
     }

package/src/types.ts

@@ -164,12 +164,18 @@ export interface WidgetUser {
   /**
    * The user's account (company) in your app. Matched by `id`, so a renamed
    * account updates the same CRM account instead of creating another.
+   * @since 1.0.8
    */
   account?: WidgetUserAccount;
-  /** When they signed up in your app — a Date, unix seconds/ms, or an ISO string. Shown as "Signed up" in the inbox. */
+  /**
+   * When they signed up in your app — a Date, unix seconds/ms, or an ISO
+   * string. Shown as "Signed up" in the inbox.
+   * @since 1.0.9
+   */
   signedUpAt?: Date | number | string;
 }
 
+/** The user's account (company) in your app, sent as `WidgetUser.account`. @since 1.0.8 */
 export interface WidgetUserAccount {
   /** Your app's stable account id — required. */
   id: string;
@@ -237,6 +243,13 @@ export interface BootOptions {
    * `<RepzoWidgetProvider>` to be mounted.
    */
   inAppNotifications?: boolean;
+  /**
+   * Show Send posts from Workstation (Send → Post, "Show on: Mobile") over the
+   * app (default true): a card that opens into the full post, with replies or
+   * reactions. Requires `<RepzoWidgetProvider>`.
+   * @since 1.2.0
+   */
+  posts?: boolean;
 }
 
 /** An option in the composer's attach menu. */
@@ -490,13 +503,6 @@ export interface RepzoWidgetStorageAdapter {
   removeItem(key: string): Promise<void> | void;
 }
 
-/**
- * `RepzoWidgetError.code`. The last two come from the server's 403 body and
- * are terminal — the SDK stops realtime and does not retry on its own:
- * - `messenger_api_disabled` — the channel's Messenger API is switched off.
- * - `identity_verification_failed` — `userHash` missing/wrong while the
- *   channel enforces identity verification.
- */
 /** A bad-rating reason on the rating card, labelled per language. */
 export interface RatingReason {
   id: string;
@@ -516,6 +522,13 @@ export interface ConversationRatingResult {
   locked: boolean;
 }
 
+/**
+ * `RepzoWidgetError.code`. The last two come from the server's 403 body and
+ * are terminal — the SDK stops realtime and does not retry on its own:
+ * - `messenger_api_disabled` — the channel's Messenger API is switched off.
+ * - `identity_verification_failed` — `userHash` missing/wrong while the
+ *   channel enforces identity verification.
+ */
 export type RepzoWidgetErrorCode =
   | 'network'
   | 'http'
@@ -563,6 +576,18 @@ export interface WidgetState {
    * app. Only set while the messenger is closed and its thread is unread.
    */
   inAppNotification: InAppNotification | null;
+  /**
+   * The Send post this visitor should see now (Send → Post shown on Mobile),
+   * drawn over the app. One at a time: the next one loads once this one is
+   * closed. Always `null` with `boot({ posts: false })`.
+   * @since 1.2.0
+   */
+  post: WidgetPost | null;
+  /**
+   * The post is open in full (tapped from its card, or sent as a full post).
+   * @since 1.2.0
+   */
+  postExpanded: boolean;
 }
 
 export interface InAppNotification {
@@ -574,3 +599,61 @@ export interface InAppNotification {
   preview: string;
   hasAttachments: boolean;
 }
+
+/** What a visitor did with a post: saw it, opened it, tapped a link, reacted, replied, minimized or closed it. @since 1.2.0 */
+export type PostInteractionKind = 'view' | 'open' | 'click' | 'reaction' | 'reply' | 'minimize' | 'dismiss';
+
+/** Something the visitor already replied to a post (shown under it). @since 1.2.0 */
+export interface PostReply {
+  text: string;
+  /** ISO time. */
+  at: string;
+}
+
+/**
+ * A Send post as Workstation sends it for this visitor: already personalized
+ * and sanitized down to paragraphs, bold/italic/code, links, lists, code
+ * blocks, a button (`div[data-post-button]`) and social links
+ * (`div[data-post-social]`). Fields the SDK doesn't recognize fall back to the
+ * plainest option.
+ * @since 1.2.0
+ */
+export interface WidgetPost {
+  /** The Send campaign id. */
+  id: string;
+  bodyHtml: string;
+  /** First words of the post, for its card. */
+  snippet: string;
+  sender: { name: string; initials: string; avatarUrl: string | null } | null;
+  workspaceName: string;
+  /** `small` opens as a sheet, `large` as a full screen. */
+  format: 'small' | 'large';
+  replyType: 'text' | 'reaction' | 'none';
+  reactions: string[];
+  /** `badge`: a small pill; `snippet`: a card with the first words; `full`: opens right away. */
+  sentAs: 'badge' | 'snippet' | 'full';
+  /** The reaction this visitor already picked. */
+  reacted: string | null;
+  /** What they already replied, oldest first. */
+  replies: PostReply[];
+  /** They minimized it ("not now"): it waits as its badge or card instead of opening by itself. */
+  minimized: boolean;
+  /**
+   * The post's conversation with them, oldest first: their replies and the
+   * team's answers from the inbox. Older Workstation versions send only
+   * `replies`, which then fill it.
+   */
+  thread: PostThreadMessage[];
+  /** That conversation, to continue it in the messenger (null before their first reply). */
+  conversationId: string | null;
+}
+
+/** One message under a post: theirs, or a teammate's answer. @since 1.2.0 */
+export interface PostThreadMessage {
+  from: 'person' | 'team';
+  text: string;
+  /** The teammate's name on team answers. */
+  senderName: string | null;
+  /** ISO time. */
+  at: string;
+}

package/src/ui/WidgetProvider.tsx

@@ -6,7 +6,7 @@
  * the modal (or never mounting it) never drops a conversation.
  */
 
-import { useCallback, useMemo } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import {
   ActivityIndicator,
   Modal,
@@ -29,16 +29,18 @@ import {
 import { controller } from '../controller';
 import { buildLabels, createTranslator, formatLabel, localizeWelcomeText } from '../i18n';
 import { useWidgetState } from '../state/use-widget-state';
-import type { AgentUiAction, OutgoingAttachment, WidgetSpaceType } from '../types';
+import type { AgentUiAction, OutgoingAttachment, PostInteractionKind, WidgetSpaceType } from '../types';
 import { WidgetErrorBoundary } from './components/ErrorBoundary';
 import { AlertIcon } from './components/icons';
 import { InAppNotification } from './components/InAppNotification';
+import { PostOverlay } from './components/Post';
 import { OutboundMessageCard } from './components/OutboundMessageCard';
 import { WidgetPanel } from './components/WidgetPanel';
 import { useKeyboardOverlap } from './hooks/use-keyboard-overlap';
 import { TopInsetContext } from './hooks/use-top-inset';
 import { useWidgetInsets } from './hooks/use-widget-insets';
 import { ChatView } from './screens/chat/ChatView';
+import type { ChatLabels } from './screens/chat/ChatView.types';
 import { ConversationsList } from './screens/conversations/ConversationsList';
 import { HomeView, resolveHeaderTextColor } from './screens/home/HomeView';
 import { PreChatForm } from './screens/pre-chat/PreChatForm';
@@ -61,6 +63,9 @@ export interface RepzoWidgetProviderProps {
   presentationStyle?: 'pageSheet' | 'fullScreen';
 }
 
+/** Longest the messenger's iOS slide-out is waited on when `onDismiss` doesn't arrive. */
+const MESSENGER_DISMISS_FALLBACK_MS = 600;
+
 export function RepzoWidgetProvider({
   children,
   presentationStyle = 'pageSheet',
@@ -135,6 +140,17 @@ export function RepzoWidgetProvider({
       professional: labels.blockProfessional,
       priceOffer: labels.blockPriceOffer,
       working: labels.working,
+      subtotal: labels.blockSubtotal,
+      discount: labels.blockDiscount,
+      tax: labels.blockTax,
+      shipping: labels.blockShipping,
+      total: labels.blockTotal,
+      minutes: labels.blockMinutes,
+      save: labels.blockSave,
+      anyAvailable: labels.blockAnyAvailable,
+      withProvider: labels.blockWithProvider,
+      bookTime: labels.blockBookTime,
+      validUntil: labels.blockValidUntil,
     }),
     [labels]
   );
@@ -156,6 +172,62 @@ export function RepzoWidgetProvider({
     [labels]
   );
 
+  // Stable across renders so each message bubble only re-renders when its
+  // own message changes, not on every store update or keystroke.
+  const chatLabels = useMemo<ChatLabels>(
+    () => ({
+      back: labels.back,
+      loading: labels.loading,
+      loadEarlier: labels.loadEarlier,
+      emptyConversation: labels.emptyConversation,
+      messagePlaceholder: labels.messagePlaceholder,
+      failedToSend: labels.failedToSend,
+      thinking: labels.thinking,
+      team: labels.team,
+      statusOnline: labels.homeStatusOnline,
+      statusAway: labels.homeStatusAway,
+      close: labels.close,
+      today: labels.today,
+      yesterday: labels.yesterday,
+      conversationUpdated: labels.conversationUpdated,
+      messageDeleted: labels.messageDeleted,
+      messageSent: labels.messageSent,
+      messageSeen: labels.messageSeen,
+      waitingForTeammate: labels.waitingForTeammate,
+      joinedConversation: labels.joinedConversation,
+      procedureSend: labels.procedureSend,
+      procedureSent: labels.procedureSent,
+      procedureShareDetails: labels.procedureShareDetails,
+      procedureDetailsSent: labels.procedureDetailsSent,
+      procedureHide: labels.procedureHide,
+      procedureFieldCount: labels.procedureFieldCount,
+      procedureFieldCountOne: labels.procedureFieldCountOne,
+      procedureTitle: labels.procedureTitle,
+      procedureEmailPlaceholder: labels.procedureEmailPlaceholder,
+      procedurePhonePlaceholder: labels.procedurePhonePlaceholder,
+      blocks: blockLabels,
+      rating: {
+        question: labels.ratingQuestion,
+        reasonPrompt: labels.ratingReasonPrompt,
+        commentPlaceholder: labels.ratingCommentPlaceholder,
+        submit: labels.ratingSubmit,
+        done: labels.ratingDone,
+        thanks: labels.ratingThanks,
+        locked: labels.ratingLocked,
+        expired: labels.ratingExpired,
+        failed: labels.ratingFailed,
+        scale: [labels.rating1, labels.rating2, labels.rating3, labels.rating4, labels.rating5],
+      },
+      attach: attachLabels,
+      viewer: {
+        close: labels.close,
+        loadFailed: labels.imageLoadFailed,
+        openExternally: labels.openImageExternally,
+      },
+    }),
+    [labels, blockLabels, attachLabels]
+  );
+
   // Read per render: `boot({ attachments })` sets it outside React state.
   const attachmentSources = theme.attachmentsEnabled ? getAttachmentSources() : [];
 
@@ -167,6 +239,57 @@ export function RepzoWidgetProvider({
   );
   const handleDismissNotification = useCallback(() => store.dismissInAppNotification(), [store]);
 
+  // iOS can't present the post's modal while the messenger's is still sliding
+  // away (it would silently never show), so a post waits for that to finish.
+  // `onDismiss` is the signal; the timer covers React Native versions where it
+  // doesn't fire.
+  const [messengerOnScreen, setMessengerOnScreen] = useState(state.isOpen);
+  useEffect(() => {
+    if (state.isOpen || Platform.OS !== 'ios') {
+      setMessengerOnScreen(state.isOpen);
+      return undefined;
+    }
+    const timer = setTimeout(() => setMessengerOnScreen(false), MESSENGER_DISMISS_FALLBACK_MS);
+    return () => clearTimeout(timer);
+  }, [state.isOpen]);
+  const handleMessengerDismiss = useCallback(() => setMessengerOnScreen(false), []);
+
+  const handlePostShown = useCallback((campaignId: string) => store.postDidShow(campaignId), [store]);
+  const handlePostExpand = useCallback((campaignId: string) => store.expandPost(campaignId), [store]);
+  const handlePostMinimize = useCallback((campaignId: string) => store.minimizePost(campaignId), [store]);
+  const handlePostCollapse = useCallback((campaignId: string) => store.collapsePost(campaignId), [store]);
+  // The post steps aside first: iOS can't present the messenger while the post's modal is still up.
+  const handlePostOpenConversation = useCallback(
+    (campaignId: string, conversationId: string) => {
+      store.collapsePost(campaignId);
+      setTimeout(() => void store.openConversation(conversationId), Platform.OS === 'ios' ? 400 : 0);
+    },
+    [store]
+  );
+  const handlePostInteract = useCallback(
+    (campaignId: string, kind: Exclude<PostInteractionKind, 'view' | 'open' | 'minimize'>, value?: string) =>
+      store.recordPostInteraction(campaignId, kind, value),
+    [store]
+  );
+  const postLabels = useMemo(
+    () => ({
+      from: labels.postFrom,
+      newMessage: labels.postNewMessage,
+      openHint: labels.postOpenHint,
+      close: labels.postClose,
+      minimize: labels.postMinimize,
+      replyPlaceholder: labels.postReplyPlaceholder,
+      send: labels.postSend,
+      sent: labels.postSent,
+      replyFailed: labels.postReplyFailed,
+      reactions: labels.postReactions,
+      thanks: labels.postThanks,
+      conversation: labels.postConversation,
+      continueChat: labels.postContinueChat,
+    }),
+    [labels]
+  );
+
   const handleTabChange = useCallback((tab: WidgetSpaceType) => store.setActiveTab(tab), [store]);
 
   // Rejections reach ChatView, which keeps unsent attachments for a retry.
@@ -176,6 +299,21 @@ export function RepzoWidgetProvider({
     [store]
   );
 
+  const handleIdentifyVisitor = useCallback(
+    (data: { email?: string; name?: string; phone?: string }) => store.identifyVisitor(data),
+    [store]
+  );
+  const handleRateConversation = useCallback(
+    (
+      messageId: string,
+      ratingId: string,
+      data: { rating: number; reason?: string; comment?: string }
+    ) => store.rateConversation(messageId, ratingId, data),
+    [store]
+  );
+  const handleLoadMore = useCallback(() => void store.loadMoreMessages(), [store]);
+  const handleTyping = useCallback((isTyping: boolean) => store.notifyTyping(isTyping), [store]);
+
   const handlePreChatSubmit = useCallback(
     async (data: Record<string, string>) => {
       try {
@@ -298,55 +436,14 @@ export function RepzoWidgetProvider({
           defaultLocale={state.config?.defaultLocale}
           prefillText={state.prefillText}
           offlineMessage={theme.offlineMessage}
-          labels={{
-            back: labels.back,
-            loading: labels.loading,
-            loadEarlier: labels.loadEarlier,
-            emptyConversation: labels.emptyConversation,
-            messagePlaceholder: labels.messagePlaceholder,
-            failedToSend: labels.failedToSend,
-            thinking: labels.thinking,
-            team: labels.team,
-            statusOnline: labels.homeStatusOnline,
-            statusAway: labels.homeStatusAway,
-            close: labels.close,
-            today: labels.today,
-            yesterday: labels.yesterday,
-            conversationUpdated: labels.conversationUpdated,
-            messageDeleted: labels.messageDeleted,
-            messageSent: labels.messageSent,
-            messageSeen: labels.messageSeen,
-            waitingForTeammate: labels.waitingForTeammate,
-            joinedConversation: labels.joinedConversation,
-            procedureSend: labels.procedureSend,
-            procedureSent: labels.procedureSent,
-            blocks: blockLabels,
-            rating: {
-              question: labels.ratingQuestion,
-              reasonPrompt: labels.ratingReasonPrompt,
-              commentPlaceholder: labels.ratingCommentPlaceholder,
-              submit: labels.ratingSubmit,
-              done: labels.ratingDone,
-              thanks: labels.ratingThanks,
-              locked: labels.ratingLocked,
-              expired: labels.ratingExpired,
-              failed: labels.ratingFailed,
-              scale: [labels.rating1, labels.rating2, labels.rating3, labels.rating4, labels.rating5],
-            },
-            attach: attachLabels,
-            viewer: {
-              close: labels.close,
-              loadFailed: labels.imageLoadFailed,
-              openExternally: labels.openImageExternally,
-            },
-          }}
+          labels={chatLabels}
           attachmentSources={attachmentSources}
           onPickAttachments={pickAttachments}
           onSendMessage={handleSendMessage}
-          onIdentifyVisitor={(data) => store.identifyVisitor(data)}
-          onRateConversation={(messageId, ratingId, data) => store.rateConversation(messageId, ratingId, data)}
-          onLoadMore={() => store.loadMoreMessages()}
-          onTyping={(isTyping) => store.notifyTyping(isTyping)}
+          onIdentifyVisitor={handleIdentifyVisitor}
+          onRateConversation={handleRateConversation}
+          onLoadMore={handleLoadMore}
+          onTyping={handleTyping}
           onBack={handleBack}
           onClose={handleClose}
         />
@@ -421,6 +518,26 @@ export function RepzoWidgetProvider({
   return (
     <>
       {children}
+      {/* A post steps aside while the messenger is open, and its card while a reply card shows. */}
+      {state.post && !state.isOpen && !messengerOnScreen && (state.postExpanded || !state.inAppNotification) ? (
+        <WidgetErrorBoundary resetKey={state.post.id} fallback={() => null}>
+          <PostOverlay
+            // A new post remounts, so it reports its view.
+            key={state.post.id}
+            post={state.post}
+            expanded={state.postExpanded}
+            color={theme.primaryColor}
+            insets={insets}
+            labels={postLabels}
+            onShown={handlePostShown}
+            onExpand={handlePostExpand}
+            onMinimize={handlePostMinimize}
+            onCollapse={handlePostCollapse}
+            onOpenConversation={handlePostOpenConversation}
+            onInteract={handlePostInteract}
+          />
+        </WidgetErrorBoundary>
+      ) : null}
       {state.inAppNotification ? (
         <InAppNotification
           // A new reply remounts the card, so it slides in fresh.
@@ -444,6 +561,7 @@ export function RepzoWidgetProvider({
         animationType="slide"
         presentationStyle={Platform.OS === 'ios' ? presentationStyle : undefined}
         onRequestClose={handleClose}
+        onDismiss={handleMessengerDismiss}
         // Edge to edge on every Android version, so the insets below are the
         // only top spacing (a non-translucent modal used to add a second one).
         statusBarTranslucent>

package/src/ui/components/AgentUiBlocks.tsx

@@ -8,6 +8,7 @@
 import { createContext, useContext, useState } from 'react';
 import { Image, Pressable, StyleSheet, Text, TextInput, View, type ViewStyle } from 'react-native';
 
+import { formatLabel } from '../../i18n';
 import type { AgentUiAction, AgentUiBlock } from '../../types';
 import { fontSize, palette, radius, shadows, spacing, withAlpha } from '../styles/theme';
 
@@ -18,6 +19,20 @@ export interface AgentUiBlockLabels {
   professional: string;
   priceOffer: string;
   working: string;
+  subtotal: string;
+  discount: string;
+  tax: string;
+  shipping: string;
+  total: string;
+  /** `{count}` = minutes. */
+  minutes: string;
+  save: string;
+  anyAvailable: string;
+  /** `{name}` = the professional. */
+  withProvider: string;
+  bookTime: string;
+  /** `{date}` = the formatted date. */
+  validUntil: string;
 }
 
 const DEFAULT_BLOCK_LABELS: AgentUiBlockLabels = {
@@ -27,6 +42,17 @@ const DEFAULT_BLOCK_LABELS: AgentUiBlockLabels = {
   professional: 'Professional',
   priceOffer: 'Price offer',
   working: 'Working...',
+  subtotal: 'Subtotal',
+  discount: 'Discount',
+  tax: 'Tax',
+  shipping: 'Shipping',
+  total: 'Total',
+  minutes: '{count} min',
+  save: 'Save',
+  anyAvailable: 'Any available',
+  withProvider: 'With {name}',
+  bookTime: 'Book this time',
+  validUntil: 'Valid until {date}',
 };
 
 const BlockLabelContext = createContext<AgentUiBlockLabels>(DEFAULT_BLOCK_LABELS);
@@ -99,7 +125,7 @@ export function AgentUiBlocks({
                   <View style={styles.row}>
                     <Text style={styles.muted}>
                       {block.product.durationMinutes
-                        ? `${block.product.durationMinutes} min`
+                        ? formatLabel(labels.minutes, { count: block.product.durationMinutes })
                         : block.product.unit || ''}
                     </Text>
                     <Text style={styles.price}>
@@ -182,23 +208,23 @@ export function AgentUiBlocks({
                   ))}
                 </View>
                 <View style={styles.totals}>
-                  <MoneyRow label="Subtotal" value={formatMoney(block.subtotal, block.currency)} />
+                  <MoneyRow label={labels.subtotal} value={formatMoney(block.subtotal, block.currency)} />
                   {block.discount ? (
                     <MoneyRow
-                      label="Discount"
+                      label={labels.discount}
                       value={`−${formatMoney(block.discount, block.currency)}`}
                     />
                   ) : null}
                   {block.tax ? (
-                    <MoneyRow label="Tax" value={formatMoney(block.tax, block.currency)} />
+                    <MoneyRow label={labels.tax} value={formatMoney(block.tax, block.currency)} />
                   ) : null}
                   {block.shipping ? (
                     <MoneyRow
-                      label="Shipping"
+                      label={labels.shipping}
                       value={formatMoney(block.shipping, block.currency)}
                     />
                   ) : null}
-                  <MoneyRow label="Total" value={formatMoney(block.total, block.currency)} strong />
+                  <MoneyRow label={labels.total} value={formatMoney(block.total, block.currency)} strong />
                 </View>
                 {block.action ? (
                   <View style={styles.blockAction}>
@@ -314,7 +340,7 @@ export function AgentUiBlocks({
                     hitSlop={8}>
                     <Text
                       style={[styles.linkButton, { color: checked ? color : palette.textSubtle }]}>
-                      Save
+                      {labels.save}
                     </Text>
                   </Pressable>
                 </View>
@@ -339,7 +365,7 @@ export function AgentUiBlocks({
               <View key={block.id} style={[styles.card, styles.cardPadded]}>
                 <Text style={styles.title}>{labels.chooseTime}</Text>
                 <Text style={styles.description}>
-                  {block.serviceName} · {block.durationMinutes} min
+                  {block.serviceName} · {formatLabel(labels.minutes, { count: block.durationMinutes })}
                   {block.timezone ? ` · ${block.timezone}` : ''}
                 </Text>
 
@@ -351,7 +377,7 @@ export function AgentUiBlocks({
                         selected={activeProviderId === 'any'}
                         color={color}
                         disabled={pending !== null}
-                        label="Any available"
+                        label={labels.anyAvailable}
                         onPress={() =>
                           activeProviderId !== 'any' &&
                           act({
@@ -425,7 +451,7 @@ export function AgentUiBlocks({
 
                 {selectedProvider ? (
                   <Text style={[styles.muted, styles.blockAction]}>
-                    With {selectedProvider.name}
+                    {formatLabel(labels.withProvider, { name: selectedProvider.name })}
                   </Text>
                 ) : null}
                 <View style={styles.blockAction}>
@@ -453,7 +479,7 @@ export function AgentUiBlocks({
                         },
                       })
                     }>
-                    Book this time
+                    {labels.bookTime}
                   </ActionButton>
                 </View>
               </View>
@@ -477,7 +503,9 @@ export function AgentUiBlocks({
                 <Text style={styles.amount}>{formatMoney(block.amount, block.currency)}</Text>
                 {block.validUntil ? (
                   <Text style={styles.muted}>
-                    Valid until {formatDate(block.validUntil.slice(0, 10))}
+                    {formatLabel(labels.validUntil, {
+                      date: formatDate(block.validUntil.slice(0, 10)),
+                    })}
                   </Text>
                 ) : null}
                 {publicActions.map((action) => (

package/src/ui/components/Launcher.tsx

@@ -9,6 +9,7 @@
 
 import { Pressable, StyleSheet, Text, View } from 'react-native';
 
+import { createTranslator, DEFAULT_LABELS } from '../../i18n';
 import { useWidgetState } from '../../state/use-widget-state';
 import { controller } from '../../controller';
 import { ChatIcon, ChevronIcon } from './icons';
@@ -47,6 +48,10 @@ export function Launcher({
   const inset = Math.max(horizontalPadding ?? config?.launcherHorizontalPadding ?? 20, 20);
   const text = config?.bubbleText;
   const showText = !!text && !state.isOpen;
+  const translate = createTranslator(config, state.locale);
+  const accessibilityLabel = state.isOpen
+    ? translate('launcherClose', DEFAULT_LABELS.launcherClose)
+    : translate('launcherOpen', DEFAULT_LABELS.launcherOpen);
 
   return (
     <View
@@ -55,7 +60,7 @@ export function Launcher({
       <Pressable
         onPress={() => controller.store.toggle()}
         accessibilityRole="button"
-        accessibilityLabel={state.isOpen ? 'Close chat' : 'Open chat'}
+        accessibilityLabel={accessibilityLabel}
         style={({ pressed }) => [
           styles.bubble,
           showText ? styles.bubbleWithText : styles.bubbleRound,