@wise/dynamic-flow-client-internal 2.7.1 → 2.8.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/README.md +39 -13
  2. package/build/main.css +0 -20
  3. package/build/main.js +1835 -1831
  4. package/build/main.min.js +1 -1
  5. package/package.json +2 -2
package/README.md CHANGED
@@ -44,30 +44,56 @@ import '@wise/dynamic-flow-client-internal/build/main.css';
44
44
 
45
45
  The `DynamicFlow` component must be wraped in a Neptune `Provider` to support localisation, a `ThemeProvider` to provide theming, and a `SnackbarProvider` to ensure snackbars display correctly. Translations should be imported from both components and dynamic flows, merged, and passed to the `Provider` component (as below).
46
46
 
47
+ ### For CRAB apps, use the `getLocalisedMessages(...)` function for translations
48
+
47
49
  ```js
48
50
  import {
49
51
  Provider,
50
52
  SnackbarProvider,
51
53
  translations as componentTranslations,
52
- getLangFromLocale,
53
- DEFAULT_LANG,
54
54
  } from '@transferwise/components';
55
+ import { getLocalisedMessages } from '@transferwise/crab/client';
55
56
  import {
56
57
  DynamicFlow,
57
58
  translations as dynamicFlowsTranslations,
58
- } from '@wise/dynamic-flow-client-internal/';
59
-
60
- const lang = getLangFromLocale(locale) || DEFAULT_LANG;
61
- const i18n = {
62
- locale,
63
- messages: {
64
- ...componentTranslations[lang],
65
- ...dynamicFlowsTranslations[lang],
66
- },
67
- };
59
+ } from '@wise/dynamic-flow-client-internal';
60
+
61
+ const messages = getLocalisedMessages(locale, [componentTranslations, dynamicFlowsTranslations])
62
+
63
+ return (
64
+ <Provider i18n={{ locale, messages }}>
65
+ <ThemeProvider theme={theme} screenMode={screenMode}>
66
+ <SnackbarProvider>
67
+ <DynamicFlow {...props} />
68
+ </SnackbarProvider>
69
+ </ThemeProvider>
70
+ </Provider>
71
+ );
72
+ ```
73
+
74
+ ### For non-CRAB apps
75
+
76
+ You'll need to merge the '@transferwise/components' translations with the '@wise/dynamic-flow-client' translations.
77
+
78
+ ```js
79
+ import {
80
+ Provider,
81
+ SnackbarProvider,
82
+ translations as componentTranslations,
83
+ } from '@transferwise/components';
84
+ import {
85
+ DynamicFlow,
86
+ translations as dynamicFlowsTranslations,
87
+ } from '@wise/dynamic-flow-client-internal';
88
+
89
+ // create your messages object
90
+ const messages: Record<string, string> = {
91
+ ...(componentTranslations[lang] || componentTranslations[lang.replace('-', '_')] || componentTranslations[lang.substring(0, 2)] || {}),
92
+ ...(translations[lang] || translations[lang.replace('-', '_')] || translations[lang.substring(0, 2)] || {}),
93
+ }
68
94
 
69
95
  return (
70
- <Provider i18n={i18n}>
96
+ <Provider i18n={{ locale, messages }}>
71
97
  <ThemeProvider theme={theme} screenMode={screenMode}>
72
98
  <SnackbarProvider>
73
99
  <DynamicFlow {...props} />
package/build/main.css CHANGED
@@ -129,26 +129,6 @@
129
129
  .df-back-btn:active .tw-avatar__content {
130
130
  background-color: var(--color-background-neutral-active);
131
131
  }
132
- #camera-not-supported {
133
- background-color: #fff;
134
- height: 100%;
135
- left: 0;
136
- overflow: scroll;
137
- position: fixed;
138
- top: 0;
139
- width: 100%;
140
- z-index: 10000;
141
- }
142
- #no-camera-access {
143
- background-color: #fff;
144
- height: 100%;
145
- left: 0;
146
- overflow: scroll;
147
- position: fixed;
148
- top: 0;
149
- width: 100%;
150
- z-index: 10000;
151
- }
152
132
  .orientation-lock-overlay {
153
133
  display: none;
154
134
  position: fixed;