@hedia/recommendation-screen 2.1.21 → 2.1.22-alpha.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 (47) hide show
  1. package/coverage/clover.xml +716 -0
  2. package/coverage/coverage-final.json +28 -0
  3. package/coverage/lcov-report/base.css +224 -0
  4. package/coverage/lcov-report/block-navigation.js +79 -0
  5. package/coverage/lcov-report/favicon.png +0 -0
  6. package/coverage/lcov-report/index.html +201 -0
  7. package/coverage/lcov-report/prettify.css +1 -0
  8. package/coverage/lcov-report/prettify.js +2 -0
  9. package/coverage/lcov-report/sort-arrow-sprite.png +0 -0
  10. package/coverage/lcov-report/sorter.js +170 -0
  11. package/coverage/lcov-report/src/RecommendationScreen.tsx.html +2483 -0
  12. package/coverage/lcov-report/src/__tests__/index.html +111 -0
  13. package/coverage/lcov-report/src/__tests__/utils.tsx.html +533 -0
  14. package/coverage/lcov-report/src/components/Header.tsx.html +356 -0
  15. package/coverage/lcov-report/src/components/InfoBars.tsx.html +518 -0
  16. package/coverage/lcov-report/src/components/InvisibleNumberInput.tsx.html +566 -0
  17. package/coverage/lcov-report/src/components/LimitationMessage.tsx.html +209 -0
  18. package/coverage/lcov-report/src/components/LineSeparator.tsx.html +161 -0
  19. package/coverage/lcov-report/src/components/RecentInsulin.tsx.html +410 -0
  20. package/coverage/lcov-report/src/components/RecommendationModal.tsx.html +923 -0
  21. package/coverage/lcov-report/src/components/RecommendedCarbs.tsx.html +1061 -0
  22. package/coverage/lcov-report/src/components/RecommendedInsulin.tsx.html +779 -0
  23. package/coverage/lcov-report/src/components/Remeasure.tsx.html +551 -0
  24. package/coverage/lcov-report/src/components/TransferToLogbook.tsx.html +443 -0
  25. package/coverage/lcov-report/src/components/TwoOptionModal.tsx.html +665 -0
  26. package/coverage/lcov-report/src/components/activity/Activity.tsx.html +371 -0
  27. package/coverage/lcov-report/src/components/activity/ActivityIcon.tsx.html +281 -0
  28. package/coverage/lcov-report/src/components/activity/ActivityIntensity.tsx.html +281 -0
  29. package/coverage/lcov-report/src/components/activity/index.html +141 -0
  30. package/coverage/lcov-report/src/components/index.html +276 -0
  31. package/coverage/lcov-report/src/components/mood/Emotion.tsx.html +353 -0
  32. package/coverage/lcov-report/src/components/mood/MoodIcon.tsx.html +335 -0
  33. package/coverage/lcov-report/src/components/mood/index.html +126 -0
  34. package/coverage/lcov-report/src/index.html +111 -0
  35. package/coverage/lcov-report/src/locale/i18nUtils.ts.html +206 -0
  36. package/coverage/lcov-report/src/locale/index.html +111 -0
  37. package/coverage/lcov-report/src/utils/AttentionMessages.tsx.html +554 -0
  38. package/coverage/lcov-report/src/utils/Constants.ts.html +248 -0
  39. package/coverage/lcov-report/src/utils/RecommendationError.tsx.html +620 -0
  40. package/coverage/lcov-report/src/utils/RecommendationUtils.ts.html +764 -0
  41. package/coverage/lcov-report/src/utils/Translations.ts.html +131 -0
  42. package/coverage/lcov-report/src/utils/Utils.ts.html +545 -0
  43. package/coverage/lcov-report/src/utils/Validations.ts.html +1544 -0
  44. package/coverage/lcov-report/src/utils/index.html +201 -0
  45. package/coverage/lcov.info +1611 -0
  46. package/package.json +2 -2
  47. package/src/__tests__/utils.js +2 -2
package/coverage/lcov-report/src/components/RecommendationModal.tsx.html ADDED
@@ -0,0 +1,923 @@
1
+
2
+ <!doctype html>
3
+ <html lang="en">
4
+
5
+ <head>
6
+ <title>Code coverage report for src/components/RecommendationModal.tsx</title>
7
+ <meta charset="utf-8" />
8
+ <link rel="stylesheet" href="../../prettify.css" />
9
+ <link rel="stylesheet" href="../../base.css" />
10
+ <link rel="shortcut icon" type="image/x-icon" href="../../favicon.png" />
11
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
12
+ <style type='text/css'>
13
+ .coverage-summary .sorter {
14
+ background-image: url(../../sort-arrow-sprite.png);
15
+ }
16
+ </style>
17
+ </head>
18
+
19
+ <body>
20
+ <div class='wrapper'>
21
+ <div class='pad1'>
22
+ <h1><a href="../../index.html">All files</a> / <a href="index.html">src/components</a> RecommendationModal.tsx</h1>
23
+ <div class='clearfix'>
24
+
25
+ <div class='fl pad1y space-right2'>
26
+ <span class="strong">100% </span>
27
+ <span class="quiet">Statements</span>
28
+ <span class='fraction'>33/33</span>
29
+ </div>
30
+
31
+
32
+ <div class='fl pad1y space-right2'>
33
+ <span class="strong">100% </span>
34
+ <span class="quiet">Branches</span>
35
+ <span class='fraction'>12/12</span>
36
+ </div>
37
+
38
+
39
+ <div class='fl pad1y space-right2'>
40
+ <span class="strong">100% </span>
41
+ <span class="quiet">Functions</span>
42
+ <span class='fraction'>7/7</span>
43
+ </div>
44
+
45
+
46
+ <div class='fl pad1y space-right2'>
47
+ <span class="strong">100% </span>
48
+ <span class="quiet">Lines</span>
49
+ <span class='fraction'>33/33</span>
50
+ </div>
51
+
52
+
53
+ </div>
54
+ <p class="quiet">
55
+ Press <em>n</em> or <em>j</em> to go to the next uncovered block, <em>b</em>, <em>p</em> or <em>k</em> for the previous block.
56
+ </p>
57
+ </div>
58
+ <div class='status-line high'></div>
59
+ <pre><table class="coverage">
60
+ <tr><td class="line-count quiet"><a name='L1'></a><a href='#L1'>1</a>
61
+ <a name='L2'></a><a href='#L2'>2</a>
62
+ <a name='L3'></a><a href='#L3'>3</a>
63
+ <a name='L4'></a><a href='#L4'>4</a>
64
+ <a name='L5'></a><a href='#L5'>5</a>
65
+ <a name='L6'></a><a href='#L6'>6</a>
66
+ <a name='L7'></a><a href='#L7'>7</a>
67
+ <a name='L8'></a><a href='#L8'>8</a>
68
+ <a name='L9'></a><a href='#L9'>9</a>
69
+ <a name='L10'></a><a href='#L10'>10</a>
70
+ <a name='L11'></a><a href='#L11'>11</a>
71
+ <a name='L12'></a><a href='#L12'>12</a>
72
+ <a name='L13'></a><a href='#L13'>13</a>
73
+ <a name='L14'></a><a href='#L14'>14</a>
74
+ <a name='L15'></a><a href='#L15'>15</a>
75
+ <a name='L16'></a><a href='#L16'>16</a>
76
+ <a name='L17'></a><a href='#L17'>17</a>
77
+ <a name='L18'></a><a href='#L18'>18</a>
78
+ <a name='L19'></a><a href='#L19'>19</a>
79
+ <a name='L20'></a><a href='#L20'>20</a>
80
+ <a name='L21'></a><a href='#L21'>21</a>
81
+ <a name='L22'></a><a href='#L22'>22</a>
82
+ <a name='L23'></a><a href='#L23'>23</a>
83
+ <a name='L24'></a><a href='#L24'>24</a>
84
+ <a name='L25'></a><a href='#L25'>25</a>
85
+ <a name='L26'></a><a href='#L26'>26</a>
86
+ <a name='L27'></a><a href='#L27'>27</a>
87
+ <a name='L28'></a><a href='#L28'>28</a>
88
+ <a name='L29'></a><a href='#L29'>29</a>
89
+ <a name='L30'></a><a href='#L30'>30</a>
90
+ <a name='L31'></a><a href='#L31'>31</a>
91
+ <a name='L32'></a><a href='#L32'>32</a>
92
+ <a name='L33'></a><a href='#L33'>33</a>
93
+ <a name='L34'></a><a href='#L34'>34</a>
94
+ <a name='L35'></a><a href='#L35'>35</a>
95
+ <a name='L36'></a><a href='#L36'>36</a>
96
+ <a name='L37'></a><a href='#L37'>37</a>
97
+ <a name='L38'></a><a href='#L38'>38</a>
98
+ <a name='L39'></a><a href='#L39'>39</a>
99
+ <a name='L40'></a><a href='#L40'>40</a>
100
+ <a name='L41'></a><a href='#L41'>41</a>
101
+ <a name='L42'></a><a href='#L42'>42</a>
102
+ <a name='L43'></a><a href='#L43'>43</a>
103
+ <a name='L44'></a><a href='#L44'>44</a>
104
+ <a name='L45'></a><a href='#L45'>45</a>
105
+ <a name='L46'></a><a href='#L46'>46</a>
106
+ <a name='L47'></a><a href='#L47'>47</a>
107
+ <a name='L48'></a><a href='#L48'>48</a>
108
+ <a name='L49'></a><a href='#L49'>49</a>
109
+ <a name='L50'></a><a href='#L50'>50</a>
110
+ <a name='L51'></a><a href='#L51'>51</a>
111
+ <a name='L52'></a><a href='#L52'>52</a>
112
+ <a name='L53'></a><a href='#L53'>53</a>
113
+ <a name='L54'></a><a href='#L54'>54</a>
114
+ <a name='L55'></a><a href='#L55'>55</a>
115
+ <a name='L56'></a><a href='#L56'>56</a>
116
+ <a name='L57'></a><a href='#L57'>57</a>
117
+ <a name='L58'></a><a href='#L58'>58</a>
118
+ <a name='L59'></a><a href='#L59'>59</a>
119
+ <a name='L60'></a><a href='#L60'>60</a>
120
+ <a name='L61'></a><a href='#L61'>61</a>
121
+ <a name='L62'></a><a href='#L62'>62</a>
122
+ <a name='L63'></a><a href='#L63'>63</a>
123
+ <a name='L64'></a><a href='#L64'>64</a>
124
+ <a name='L65'></a><a href='#L65'>65</a>
125
+ <a name='L66'></a><a href='#L66'>66</a>
126
+ <a name='L67'></a><a href='#L67'>67</a>
127
+ <a name='L68'></a><a href='#L68'>68</a>
128
+ <a name='L69'></a><a href='#L69'>69</a>
129
+ <a name='L70'></a><a href='#L70'>70</a>
130
+ <a name='L71'></a><a href='#L71'>71</a>
131
+ <a name='L72'></a><a href='#L72'>72</a>
132
+ <a name='L73'></a><a href='#L73'>73</a>
133
+ <a name='L74'></a><a href='#L74'>74</a>
134
+ <a name='L75'></a><a href='#L75'>75</a>
135
+ <a name='L76'></a><a href='#L76'>76</a>
136
+ <a name='L77'></a><a href='#L77'>77</a>
137
+ <a name='L78'></a><a href='#L78'>78</a>
138
+ <a name='L79'></a><a href='#L79'>79</a>
139
+ <a name='L80'></a><a href='#L80'>80</a>
140
+ <a name='L81'></a><a href='#L81'>81</a>
141
+ <a name='L82'></a><a href='#L82'>82</a>
142
+ <a name='L83'></a><a href='#L83'>83</a>
143
+ <a name='L84'></a><a href='#L84'>84</a>
144
+ <a name='L85'></a><a href='#L85'>85</a>
145
+ <a name='L86'></a><a href='#L86'>86</a>
146
+ <a name='L87'></a><a href='#L87'>87</a>
147
+ <a name='L88'></a><a href='#L88'>88</a>
148
+ <a name='L89'></a><a href='#L89'>89</a>
149
+ <a name='L90'></a><a href='#L90'>90</a>
150
+ <a name='L91'></a><a href='#L91'>91</a>
151
+ <a name='L92'></a><a href='#L92'>92</a>
152
+ <a name='L93'></a><a href='#L93'>93</a>
153
+ <a name='L94'></a><a href='#L94'>94</a>
154
+ <a name='L95'></a><a href='#L95'>95</a>
155
+ <a name='L96'></a><a href='#L96'>96</a>
156
+ <a name='L97'></a><a href='#L97'>97</a>
157
+ <a name='L98'></a><a href='#L98'>98</a>
158
+ <a name='L99'></a><a href='#L99'>99</a>
159
+ <a name='L100'></a><a href='#L100'>100</a>
160
+ <a name='L101'></a><a href='#L101'>101</a>
161
+ <a name='L102'></a><a href='#L102'>102</a>
162
+ <a name='L103'></a><a href='#L103'>103</a>
163
+ <a name='L104'></a><a href='#L104'>104</a>
164
+ <a name='L105'></a><a href='#L105'>105</a>
165
+ <a name='L106'></a><a href='#L106'>106</a>
166
+ <a name='L107'></a><a href='#L107'>107</a>
167
+ <a name='L108'></a><a href='#L108'>108</a>
168
+ <a name='L109'></a><a href='#L109'>109</a>
169
+ <a name='L110'></a><a href='#L110'>110</a>
170
+ <a name='L111'></a><a href='#L111'>111</a>
171
+ <a name='L112'></a><a href='#L112'>112</a>
172
+ <a name='L113'></a><a href='#L113'>113</a>
173
+ <a name='L114'></a><a href='#L114'>114</a>
174
+ <a name='L115'></a><a href='#L115'>115</a>
175
+ <a name='L116'></a><a href='#L116'>116</a>
176
+ <a name='L117'></a><a href='#L117'>117</a>
177
+ <a name='L118'></a><a href='#L118'>118</a>
178
+ <a name='L119'></a><a href='#L119'>119</a>
179
+ <a name='L120'></a><a href='#L120'>120</a>
180
+ <a name='L121'></a><a href='#L121'>121</a>
181
+ <a name='L122'></a><a href='#L122'>122</a>
182
+ <a name='L123'></a><a href='#L123'>123</a>
183
+ <a name='L124'></a><a href='#L124'>124</a>
184
+ <a name='L125'></a><a href='#L125'>125</a>
185
+ <a name='L126'></a><a href='#L126'>126</a>
186
+ <a name='L127'></a><a href='#L127'>127</a>
187
+ <a name='L128'></a><a href='#L128'>128</a>
188
+ <a name='L129'></a><a href='#L129'>129</a>
189
+ <a name='L130'></a><a href='#L130'>130</a>
190
+ <a name='L131'></a><a href='#L131'>131</a>
191
+ <a name='L132'></a><a href='#L132'>132</a>
192
+ <a name='L133'></a><a href='#L133'>133</a>
193
+ <a name='L134'></a><a href='#L134'>134</a>
194
+ <a name='L135'></a><a href='#L135'>135</a>
195
+ <a name='L136'></a><a href='#L136'>136</a>
196
+ <a name='L137'></a><a href='#L137'>137</a>
197
+ <a name='L138'></a><a href='#L138'>138</a>
198
+ <a name='L139'></a><a href='#L139'>139</a>
199
+ <a name='L140'></a><a href='#L140'>140</a>
200
+ <a name='L141'></a><a href='#L141'>141</a>
201
+ <a name='L142'></a><a href='#L142'>142</a>
202
+ <a name='L143'></a><a href='#L143'>143</a>
203
+ <a name='L144'></a><a href='#L144'>144</a>
204
+ <a name='L145'></a><a href='#L145'>145</a>
205
+ <a name='L146'></a><a href='#L146'>146</a>
206
+ <a name='L147'></a><a href='#L147'>147</a>
207
+ <a name='L148'></a><a href='#L148'>148</a>
208
+ <a name='L149'></a><a href='#L149'>149</a>
209
+ <a name='L150'></a><a href='#L150'>150</a>
210
+ <a name='L151'></a><a href='#L151'>151</a>
211
+ <a name='L152'></a><a href='#L152'>152</a>
212
+ <a name='L153'></a><a href='#L153'>153</a>
213
+ <a name='L154'></a><a href='#L154'>154</a>
214
+ <a name='L155'></a><a href='#L155'>155</a>
215
+ <a name='L156'></a><a href='#L156'>156</a>
216
+ <a name='L157'></a><a href='#L157'>157</a>
217
+ <a name='L158'></a><a href='#L158'>158</a>
218
+ <a name='L159'></a><a href='#L159'>159</a>
219
+ <a name='L160'></a><a href='#L160'>160</a>
220
+ <a name='L161'></a><a href='#L161'>161</a>
221
+ <a name='L162'></a><a href='#L162'>162</a>
222
+ <a name='L163'></a><a href='#L163'>163</a>
223
+ <a name='L164'></a><a href='#L164'>164</a>
224
+ <a name='L165'></a><a href='#L165'>165</a>
225
+ <a name='L166'></a><a href='#L166'>166</a>
226
+ <a name='L167'></a><a href='#L167'>167</a>
227
+ <a name='L168'></a><a href='#L168'>168</a>
228
+ <a name='L169'></a><a href='#L169'>169</a>
229
+ <a name='L170'></a><a href='#L170'>170</a>
230
+ <a name='L171'></a><a href='#L171'>171</a>
231
+ <a name='L172'></a><a href='#L172'>172</a>
232
+ <a name='L173'></a><a href='#L173'>173</a>
233
+ <a name='L174'></a><a href='#L174'>174</a>
234
+ <a name='L175'></a><a href='#L175'>175</a>
235
+ <a name='L176'></a><a href='#L176'>176</a>
236
+ <a name='L177'></a><a href='#L177'>177</a>
237
+ <a name='L178'></a><a href='#L178'>178</a>
238
+ <a name='L179'></a><a href='#L179'>179</a>
239
+ <a name='L180'></a><a href='#L180'>180</a>
240
+ <a name='L181'></a><a href='#L181'>181</a>
241
+ <a name='L182'></a><a href='#L182'>182</a>
242
+ <a name='L183'></a><a href='#L183'>183</a>
243
+ <a name='L184'></a><a href='#L184'>184</a>
244
+ <a name='L185'></a><a href='#L185'>185</a>
245
+ <a name='L186'></a><a href='#L186'>186</a>
246
+ <a name='L187'></a><a href='#L187'>187</a>
247
+ <a name='L188'></a><a href='#L188'>188</a>
248
+ <a name='L189'></a><a href='#L189'>189</a>
249
+ <a name='L190'></a><a href='#L190'>190</a>
250
+ <a name='L191'></a><a href='#L191'>191</a>
251
+ <a name='L192'></a><a href='#L192'>192</a>
252
+ <a name='L193'></a><a href='#L193'>193</a>
253
+ <a name='L194'></a><a href='#L194'>194</a>
254
+ <a name='L195'></a><a href='#L195'>195</a>
255
+ <a name='L196'></a><a href='#L196'>196</a>
256
+ <a name='L197'></a><a href='#L197'>197</a>
257
+ <a name='L198'></a><a href='#L198'>198</a>
258
+ <a name='L199'></a><a href='#L199'>199</a>
259
+ <a name='L200'></a><a href='#L200'>200</a>
260
+ <a name='L201'></a><a href='#L201'>201</a>
261
+ <a name='L202'></a><a href='#L202'>202</a>
262
+ <a name='L203'></a><a href='#L203'>203</a>
263
+ <a name='L204'></a><a href='#L204'>204</a>
264
+ <a name='L205'></a><a href='#L205'>205</a>
265
+ <a name='L206'></a><a href='#L206'>206</a>
266
+ <a name='L207'></a><a href='#L207'>207</a>
267
+ <a name='L208'></a><a href='#L208'>208</a>
268
+ <a name='L209'></a><a href='#L209'>209</a>
269
+ <a name='L210'></a><a href='#L210'>210</a>
270
+ <a name='L211'></a><a href='#L211'>211</a>
271
+ <a name='L212'></a><a href='#L212'>212</a>
272
+ <a name='L213'></a><a href='#L213'>213</a>
273
+ <a name='L214'></a><a href='#L214'>214</a>
274
+ <a name='L215'></a><a href='#L215'>215</a>
275
+ <a name='L216'></a><a href='#L216'>216</a>
276
+ <a name='L217'></a><a href='#L217'>217</a>
277
+ <a name='L218'></a><a href='#L218'>218</a>
278
+ <a name='L219'></a><a href='#L219'>219</a>
279
+ <a name='L220'></a><a href='#L220'>220</a>
280
+ <a name='L221'></a><a href='#L221'>221</a>
281
+ <a name='L222'></a><a href='#L222'>222</a>
282
+ <a name='L223'></a><a href='#L223'>223</a>
283
+ <a name='L224'></a><a href='#L224'>224</a>
284
+ <a name='L225'></a><a href='#L225'>225</a>
285
+ <a name='L226'></a><a href='#L226'>226</a>
286
+ <a name='L227'></a><a href='#L227'>227</a>
287
+ <a name='L228'></a><a href='#L228'>228</a>
288
+ <a name='L229'></a><a href='#L229'>229</a>
289
+ <a name='L230'></a><a href='#L230'>230</a>
290
+ <a name='L231'></a><a href='#L231'>231</a>
291
+ <a name='L232'></a><a href='#L232'>232</a>
292
+ <a name='L233'></a><a href='#L233'>233</a>
293
+ <a name='L234'></a><a href='#L234'>234</a>
294
+ <a name='L235'></a><a href='#L235'>235</a>
295
+ <a name='L236'></a><a href='#L236'>236</a>
296
+ <a name='L237'></a><a href='#L237'>237</a>
297
+ <a name='L238'></a><a href='#L238'>238</a>
298
+ <a name='L239'></a><a href='#L239'>239</a>
299
+ <a name='L240'></a><a href='#L240'>240</a>
300
+ <a name='L241'></a><a href='#L241'>241</a>
301
+ <a name='L242'></a><a href='#L242'>242</a>
302
+ <a name='L243'></a><a href='#L243'>243</a>
303
+ <a name='L244'></a><a href='#L244'>244</a>
304
+ <a name='L245'></a><a href='#L245'>245</a>
305
+ <a name='L246'></a><a href='#L246'>246</a>
306
+ <a name='L247'></a><a href='#L247'>247</a>
307
+ <a name='L248'></a><a href='#L248'>248</a>
308
+ <a name='L249'></a><a href='#L249'>249</a>
309
+ <a name='L250'></a><a href='#L250'>250</a>
310
+ <a name='L251'></a><a href='#L251'>251</a>
311
+ <a name='L252'></a><a href='#L252'>252</a>
312
+ <a name='L253'></a><a href='#L253'>253</a>
313
+ <a name='L254'></a><a href='#L254'>254</a>
314
+ <a name='L255'></a><a href='#L255'>255</a>
315
+ <a name='L256'></a><a href='#L256'>256</a>
316
+ <a name='L257'></a><a href='#L257'>257</a>
317
+ <a name='L258'></a><a href='#L258'>258</a>
318
+ <a name='L259'></a><a href='#L259'>259</a>
319
+ <a name='L260'></a><a href='#L260'>260</a>
320
+ <a name='L261'></a><a href='#L261'>261</a>
321
+ <a name='L262'></a><a href='#L262'>262</a>
322
+ <a name='L263'></a><a href='#L263'>263</a>
323
+ <a name='L264'></a><a href='#L264'>264</a>
324
+ <a name='L265'></a><a href='#L265'>265</a>
325
+ <a name='L266'></a><a href='#L266'>266</a>
326
+ <a name='L267'></a><a href='#L267'>267</a>
327
+ <a name='L268'></a><a href='#L268'>268</a>
328
+ <a name='L269'></a><a href='#L269'>269</a>
329
+ <a name='L270'></a><a href='#L270'>270</a>
330
+ <a name='L271'></a><a href='#L271'>271</a>
331
+ <a name='L272'></a><a href='#L272'>272</a>
332
+ <a name='L273'></a><a href='#L273'>273</a>
333
+ <a name='L274'></a><a href='#L274'>274</a>
334
+ <a name='L275'></a><a href='#L275'>275</a>
335
+ <a name='L276'></a><a href='#L276'>276</a>
336
+ <a name='L277'></a><a href='#L277'>277</a>
337
+ <a name='L278'></a><a href='#L278'>278</a>
338
+ <a name='L279'></a><a href='#L279'>279</a>
339
+ <a name='L280'></a><a href='#L280'>280</a>
340
+ <a name='L281'></a><a href='#L281'>281</a>
341
+ <a name='L282'></a><a href='#L282'>282</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
342
+ <span class="cline-any cline-neutral">&nbsp;</span>
343
+ <span class="cline-any cline-neutral">&nbsp;</span>
344
+ <span class="cline-any cline-neutral">&nbsp;</span>
345
+ <span class="cline-any cline-neutral">&nbsp;</span>
346
+ <span class="cline-any cline-neutral">&nbsp;</span>
347
+ <span class="cline-any cline-neutral">&nbsp;</span>
348
+ <span class="cline-any cline-neutral">&nbsp;</span>
349
+ <span class="cline-any cline-neutral">&nbsp;</span>
350
+ <span class="cline-any cline-yes">4x</span>
351
+ <span class="cline-any cline-neutral">&nbsp;</span>
352
+ <span class="cline-any cline-neutral">&nbsp;</span>
353
+ <span class="cline-any cline-neutral">&nbsp;</span>
354
+ <span class="cline-any cline-neutral">&nbsp;</span>
355
+ <span class="cline-any cline-neutral">&nbsp;</span>
356
+ <span class="cline-any cline-neutral">&nbsp;</span>
357
+ <span class="cline-any cline-neutral">&nbsp;</span>
358
+ <span class="cline-any cline-neutral">&nbsp;</span>
359
+ <span class="cline-any cline-neutral">&nbsp;</span>
360
+ <span class="cline-any cline-neutral">&nbsp;</span>
361
+ <span class="cline-any cline-neutral">&nbsp;</span>
362
+ <span class="cline-any cline-neutral">&nbsp;</span>
363
+ <span class="cline-any cline-neutral">&nbsp;</span>
364
+ <span class="cline-any cline-neutral">&nbsp;</span>
365
+ <span class="cline-any cline-neutral">&nbsp;</span>
366
+ <span class="cline-any cline-neutral">&nbsp;</span>
367
+ <span class="cline-any cline-neutral">&nbsp;</span>
368
+ <span class="cline-any cline-neutral">&nbsp;</span>
369
+ <span class="cline-any cline-neutral">&nbsp;</span>
370
+ <span class="cline-any cline-neutral">&nbsp;</span>
371
+ <span class="cline-any cline-neutral">&nbsp;</span>
372
+ <span class="cline-any cline-neutral">&nbsp;</span>
373
+ <span class="cline-any cline-neutral">&nbsp;</span>
374
+ <span class="cline-any cline-neutral">&nbsp;</span>
375
+ <span class="cline-any cline-neutral">&nbsp;</span>
376
+ <span class="cline-any cline-neutral">&nbsp;</span>
377
+ <span class="cline-any cline-neutral">&nbsp;</span>
378
+ <span class="cline-any cline-neutral">&nbsp;</span>
379
+ <span class="cline-any cline-neutral">&nbsp;</span>
380
+ <span class="cline-any cline-neutral">&nbsp;</span>
381
+ <span class="cline-any cline-neutral">&nbsp;</span>
382
+ <span class="cline-any cline-neutral">&nbsp;</span>
383
+ <span class="cline-any cline-neutral">&nbsp;</span>
384
+ <span class="cline-any cline-neutral">&nbsp;</span>
385
+ <span class="cline-any cline-neutral">&nbsp;</span>
386
+ <span class="cline-any cline-neutral">&nbsp;</span>
387
+ <span class="cline-any cline-neutral">&nbsp;</span>
388
+ <span class="cline-any cline-neutral">&nbsp;</span>
389
+ <span class="cline-any cline-neutral">&nbsp;</span>
390
+ <span class="cline-any cline-neutral">&nbsp;</span>
391
+ <span class="cline-any cline-neutral">&nbsp;</span>
392
+ <span class="cline-any cline-neutral">&nbsp;</span>
393
+ <span class="cline-any cline-neutral">&nbsp;</span>
394
+ <span class="cline-any cline-neutral">&nbsp;</span>
395
+ <span class="cline-any cline-yes">73x</span>
396
+ <span class="cline-any cline-yes">73x</span>
397
+ <span class="cline-any cline-neutral">&nbsp;</span>
398
+ <span class="cline-any cline-neutral">&nbsp;</span>
399
+ <span class="cline-any cline-neutral">&nbsp;</span>
400
+ <span class="cline-any cline-neutral">&nbsp;</span>
401
+ <span class="cline-any cline-neutral">&nbsp;</span>
402
+ <span class="cline-any cline-neutral">&nbsp;</span>
403
+ <span class="cline-any cline-neutral">&nbsp;</span>
404
+ <span class="cline-any cline-neutral">&nbsp;</span>
405
+ <span class="cline-any cline-neutral">&nbsp;</span>
406
+ <span class="cline-any cline-neutral">&nbsp;</span>
407
+ <span class="cline-any cline-neutral">&nbsp;</span>
408
+ <span class="cline-any cline-neutral">&nbsp;</span>
409
+ <span class="cline-any cline-yes">73x</span>
410
+ <span class="cline-any cline-yes">3x</span>
411
+ <span class="cline-any cline-yes">3x</span>
412
+ <span class="cline-any cline-yes">3x</span>
413
+ <span class="cline-any cline-neutral">&nbsp;</span>
414
+ <span class="cline-any cline-neutral">&nbsp;</span>
415
+ <span class="cline-any cline-neutral">&nbsp;</span>
416
+ <span class="cline-any cline-neutral">&nbsp;</span>
417
+ <span class="cline-any cline-neutral">&nbsp;</span>
418
+ <span class="cline-any cline-neutral">&nbsp;</span>
419
+ <span class="cline-any cline-neutral">&nbsp;</span>
420
+ <span class="cline-any cline-yes">73x</span>
421
+ <span class="cline-any cline-yes">36x</span>
422
+ <span class="cline-any cline-neutral">&nbsp;</span>
423
+ <span class="cline-any cline-neutral">&nbsp;</span>
424
+ <span class="cline-any cline-neutral">&nbsp;</span>
425
+ <span class="cline-any cline-neutral">&nbsp;</span>
426
+ <span class="cline-any cline-neutral">&nbsp;</span>
427
+ <span class="cline-any cline-neutral">&nbsp;</span>
428
+ <span class="cline-any cline-neutral">&nbsp;</span>
429
+ <span class="cline-any cline-neutral">&nbsp;</span>
430
+ <span class="cline-any cline-neutral">&nbsp;</span>
431
+ <span class="cline-any cline-neutral">&nbsp;</span>
432
+ <span class="cline-any cline-neutral">&nbsp;</span>
433
+ <span class="cline-any cline-neutral">&nbsp;</span>
434
+ <span class="cline-any cline-neutral">&nbsp;</span>
435
+ <span class="cline-any cline-neutral">&nbsp;</span>
436
+ <span class="cline-any cline-neutral">&nbsp;</span>
437
+ <span class="cline-any cline-neutral">&nbsp;</span>
438
+ <span class="cline-any cline-neutral">&nbsp;</span>
439
+ <span class="cline-any cline-neutral">&nbsp;</span>
440
+ <span class="cline-any cline-neutral">&nbsp;</span>
441
+ <span class="cline-any cline-neutral">&nbsp;</span>
442
+ <span class="cline-any cline-neutral">&nbsp;</span>
443
+ <span class="cline-any cline-neutral">&nbsp;</span>
444
+ <span class="cline-any cline-neutral">&nbsp;</span>
445
+ <span class="cline-any cline-neutral">&nbsp;</span>
446
+ <span class="cline-any cline-neutral">&nbsp;</span>
447
+ <span class="cline-any cline-neutral">&nbsp;</span>
448
+ <span class="cline-any cline-yes">73x</span>
449
+ <span class="cline-any cline-yes">36x</span>
450
+ <span class="cline-any cline-neutral">&nbsp;</span>
451
+ <span class="cline-any cline-yes">36x</span>
452
+ <span class="cline-any cline-neutral">&nbsp;</span>
453
+ <span class="cline-any cline-neutral">&nbsp;</span>
454
+ <span class="cline-any cline-neutral">&nbsp;</span>
455
+ <span class="cline-any cline-neutral">&nbsp;</span>
456
+ <span class="cline-any cline-neutral">&nbsp;</span>
457
+ <span class="cline-any cline-neutral">&nbsp;</span>
458
+ <span class="cline-any cline-neutral">&nbsp;</span>
459
+ <span class="cline-any cline-neutral">&nbsp;</span>
460
+ <span class="cline-any cline-neutral">&nbsp;</span>
461
+ <span class="cline-any cline-neutral">&nbsp;</span>
462
+ <span class="cline-any cline-neutral">&nbsp;</span>
463
+ <span class="cline-any cline-neutral">&nbsp;</span>
464
+ <span class="cline-any cline-neutral">&nbsp;</span>
465
+ <span class="cline-any cline-neutral">&nbsp;</span>
466
+ <span class="cline-any cline-neutral">&nbsp;</span>
467
+ <span class="cline-any cline-neutral">&nbsp;</span>
468
+ <span class="cline-any cline-neutral">&nbsp;</span>
469
+ <span class="cline-any cline-neutral">&nbsp;</span>
470
+ <span class="cline-any cline-neutral">&nbsp;</span>
471
+ <span class="cline-any cline-neutral">&nbsp;</span>
472
+ <span class="cline-any cline-neutral">&nbsp;</span>
473
+ <span class="cline-any cline-neutral">&nbsp;</span>
474
+ <span class="cline-any cline-neutral">&nbsp;</span>
475
+ <span class="cline-any cline-neutral">&nbsp;</span>
476
+ <span class="cline-any cline-neutral">&nbsp;</span>
477
+ <span class="cline-any cline-neutral">&nbsp;</span>
478
+ <span class="cline-any cline-neutral">&nbsp;</span>
479
+ <span class="cline-any cline-neutral">&nbsp;</span>
480
+ <span class="cline-any cline-neutral">&nbsp;</span>
481
+ <span class="cline-any cline-neutral">&nbsp;</span>
482
+ <span class="cline-any cline-neutral">&nbsp;</span>
483
+ <span class="cline-any cline-neutral">&nbsp;</span>
484
+ <span class="cline-any cline-neutral">&nbsp;</span>
485
+ <span class="cline-any cline-yes">73x</span>
486
+ <span class="cline-any cline-yes">141x</span>
487
+ <span class="cline-any cline-yes">141x</span>
488
+ <span class="cline-any cline-neutral">&nbsp;</span>
489
+ <span class="cline-any cline-yes">141x</span>
490
+ <span class="cline-any cline-neutral">&nbsp;</span>
491
+ <span class="cline-any cline-neutral">&nbsp;</span>
492
+ <span class="cline-any cline-neutral">&nbsp;</span>
493
+ <span class="cline-any cline-neutral">&nbsp;</span>
494
+ <span class="cline-any cline-neutral">&nbsp;</span>
495
+ <span class="cline-any cline-neutral">&nbsp;</span>
496
+ <span class="cline-any cline-neutral">&nbsp;</span>
497
+ <span class="cline-any cline-neutral">&nbsp;</span>
498
+ <span class="cline-any cline-neutral">&nbsp;</span>
499
+ <span class="cline-any cline-neutral">&nbsp;</span>
500
+ <span class="cline-any cline-neutral">&nbsp;</span>
501
+ <span class="cline-any cline-neutral">&nbsp;</span>
502
+ <span class="cline-any cline-neutral">&nbsp;</span>
503
+ <span class="cline-any cline-neutral">&nbsp;</span>
504
+ <span class="cline-any cline-neutral">&nbsp;</span>
505
+ <span class="cline-any cline-neutral">&nbsp;</span>
506
+ <span class="cline-any cline-neutral">&nbsp;</span>
507
+ <span class="cline-any cline-neutral">&nbsp;</span>
508
+ <span class="cline-any cline-neutral">&nbsp;</span>
509
+ <span class="cline-any cline-neutral">&nbsp;</span>
510
+ <span class="cline-any cline-neutral">&nbsp;</span>
511
+ <span class="cline-any cline-neutral">&nbsp;</span>
512
+ <span class="cline-any cline-neutral">&nbsp;</span>
513
+ <span class="cline-any cline-neutral">&nbsp;</span>
514
+ <span class="cline-any cline-neutral">&nbsp;</span>
515
+ <span class="cline-any cline-neutral">&nbsp;</span>
516
+ <span class="cline-any cline-neutral">&nbsp;</span>
517
+ <span class="cline-any cline-neutral">&nbsp;</span>
518
+ <span class="cline-any cline-yes">73x</span>
519
+ <span class="cline-any cline-yes">3x</span>
520
+ <span class="cline-any cline-yes">3x</span>
521
+ <span class="cline-any cline-neutral">&nbsp;</span>
522
+ <span class="cline-any cline-neutral">&nbsp;</span>
523
+ <span class="cline-any cline-neutral">&nbsp;</span>
524
+ <span class="cline-any cline-neutral">&nbsp;</span>
525
+ <span class="cline-any cline-neutral">&nbsp;</span>
526
+ <span class="cline-any cline-neutral">&nbsp;</span>
527
+ <span class="cline-any cline-neutral">&nbsp;</span>
528
+ <span class="cline-any cline-neutral">&nbsp;</span>
529
+ <span class="cline-any cline-yes">144x</span>
530
+ <span class="cline-any cline-yes">144x</span>
531
+ <span class="cline-any cline-yes">144x</span>
532
+ <span class="cline-any cline-neutral">&nbsp;</span>
533
+ <span class="cline-any cline-neutral">&nbsp;</span>
534
+ <span class="cline-any cline-neutral">&nbsp;</span>
535
+ <span class="cline-any cline-neutral">&nbsp;</span>
536
+ <span class="cline-any cline-neutral">&nbsp;</span>
537
+ <span class="cline-any cline-neutral">&nbsp;</span>
538
+ <span class="cline-any cline-neutral">&nbsp;</span>
539
+ <span class="cline-any cline-yes">4x</span>
540
+ <span class="cline-any cline-yes">4x</span>
541
+ <span class="cline-any cline-yes">4x</span>
542
+ <span class="cline-any cline-yes">4x</span>
543
+ <span class="cline-any cline-yes">4x</span>
544
+ <span class="cline-any cline-yes">4x</span>
545
+ <span class="cline-any cline-yes">4x</span>
546
+ <span class="cline-any cline-yes">4x</span>
547
+ <span class="cline-any cline-yes">4x</span>
548
+ <span class="cline-any cline-yes">4x</span>
549
+ <span class="cline-any cline-neutral">&nbsp;</span>
550
+ <span class="cline-any cline-neutral">&nbsp;</span>
551
+ <span class="cline-any cline-yes">4x</span>
552
+ <span class="cline-any cline-neutral">&nbsp;</span>
553
+ <span class="cline-any cline-neutral">&nbsp;</span>
554
+ <span class="cline-any cline-neutral">&nbsp;</span>
555
+ <span class="cline-any cline-neutral">&nbsp;</span>
556
+ <span class="cline-any cline-neutral">&nbsp;</span>
557
+ <span class="cline-any cline-neutral">&nbsp;</span>
558
+ <span class="cline-any cline-neutral">&nbsp;</span>
559
+ <span class="cline-any cline-neutral">&nbsp;</span>
560
+ <span class="cline-any cline-neutral">&nbsp;</span>
561
+ <span class="cline-any cline-neutral">&nbsp;</span>
562
+ <span class="cline-any cline-neutral">&nbsp;</span>
563
+ <span class="cline-any cline-neutral">&nbsp;</span>
564
+ <span class="cline-any cline-neutral">&nbsp;</span>
565
+ <span class="cline-any cline-neutral">&nbsp;</span>
566
+ <span class="cline-any cline-neutral">&nbsp;</span>
567
+ <span class="cline-any cline-neutral">&nbsp;</span>
568
+ <span class="cline-any cline-neutral">&nbsp;</span>
569
+ <span class="cline-any cline-neutral">&nbsp;</span>
570
+ <span class="cline-any cline-neutral">&nbsp;</span>
571
+ <span class="cline-any cline-neutral">&nbsp;</span>
572
+ <span class="cline-any cline-neutral">&nbsp;</span>
573
+ <span class="cline-any cline-neutral">&nbsp;</span>
574
+ <span class="cline-any cline-neutral">&nbsp;</span>
575
+ <span class="cline-any cline-neutral">&nbsp;</span>
576
+ <span class="cline-any cline-neutral">&nbsp;</span>
577
+ <span class="cline-any cline-neutral">&nbsp;</span>
578
+ <span class="cline-any cline-neutral">&nbsp;</span>
579
+ <span class="cline-any cline-neutral">&nbsp;</span>
580
+ <span class="cline-any cline-neutral">&nbsp;</span>
581
+ <span class="cline-any cline-neutral">&nbsp;</span>
582
+ <span class="cline-any cline-neutral">&nbsp;</span>
583
+ <span class="cline-any cline-neutral">&nbsp;</span>
584
+ <span class="cline-any cline-neutral">&nbsp;</span>
585
+ <span class="cline-any cline-neutral">&nbsp;</span>
586
+ <span class="cline-any cline-neutral">&nbsp;</span>
587
+ <span class="cline-any cline-neutral">&nbsp;</span>
588
+ <span class="cline-any cline-neutral">&nbsp;</span>
589
+ <span class="cline-any cline-neutral">&nbsp;</span>
590
+ <span class="cline-any cline-neutral">&nbsp;</span>
591
+ <span class="cline-any cline-neutral">&nbsp;</span>
592
+ <span class="cline-any cline-neutral">&nbsp;</span>
593
+ <span class="cline-any cline-neutral">&nbsp;</span>
594
+ <span class="cline-any cline-neutral">&nbsp;</span>
595
+ <span class="cline-any cline-neutral">&nbsp;</span>
596
+ <span class="cline-any cline-neutral">&nbsp;</span>
597
+ <span class="cline-any cline-neutral">&nbsp;</span>
598
+ <span class="cline-any cline-neutral">&nbsp;</span>
599
+ <span class="cline-any cline-neutral">&nbsp;</span>
600
+ <span class="cline-any cline-neutral">&nbsp;</span>
601
+ <span class="cline-any cline-neutral">&nbsp;</span>
602
+ <span class="cline-any cline-neutral">&nbsp;</span>
603
+ <span class="cline-any cline-neutral">&nbsp;</span>
604
+ <span class="cline-any cline-neutral">&nbsp;</span>
605
+ <span class="cline-any cline-neutral">&nbsp;</span>
606
+ <span class="cline-any cline-neutral">&nbsp;</span>
607
+ <span class="cline-any cline-neutral">&nbsp;</span>
608
+ <span class="cline-any cline-neutral">&nbsp;</span>
609
+ <span class="cline-any cline-neutral">&nbsp;</span>
610
+ <span class="cline-any cline-neutral">&nbsp;</span>
611
+ <span class="cline-any cline-neutral">&nbsp;</span>
612
+ <span class="cline-any cline-neutral">&nbsp;</span>
613
+ <span class="cline-any cline-neutral">&nbsp;</span>
614
+ <span class="cline-any cline-neutral">&nbsp;</span>
615
+ <span class="cline-any cline-neutral">&nbsp;</span>
616
+ <span class="cline-any cline-neutral">&nbsp;</span>
617
+ <span class="cline-any cline-neutral">&nbsp;</span>
618
+ <span class="cline-any cline-neutral">&nbsp;</span>
619
+ <span class="cline-any cline-neutral">&nbsp;</span>
620
+ <span class="cline-any cline-neutral">&nbsp;</span>
621
+ <span class="cline-any cline-neutral">&nbsp;</span>
622
+ <span class="cline-any cline-neutral">&nbsp;</span></td><td class="text"><pre class="prettyprint lang-js">import { t } from "@lingui/macro";
623
+ import * as React from "react";
624
+ import { Dimensions, StyleSheet, Text, TouchableOpacity, View } from "react-native";
625
+ import ReactNativeModal from "react-native-modal";
626
+ import { i18n } from "../locale/i18nUtils";
627
+ import { Testing } from "../types/enum";
628
+ import { BORDER_COLOUR_TEAL } from "../utils/Constants";
629
+ import LimitationMessage from "./LimitationMessage";
630
+ &nbsp;
631
+ const { RecommendationModalTestIds } = Testing.Id;
632
+ &nbsp;
633
+ export interface IModalProps {
634
+ /** Whether or not the modal should currently be displayed on the screen */
635
+ isVisible: boolean;
636
+ /** The amount of additional carbohydrates that is being recommended for the user in grams. */
637
+ suggestedCarbohydrates: number | null;
638
+ /** A message to display to the user to inform them in natural language about special recommendations or warnings from HDA. */
639
+ attentionMessage: string | null;
640
+ /** A message to display to the user to inform them if their insulin recommendation was limited by the maximum threshold. */
641
+ limitationMessage: string | null;
642
+ /** Callback function taking no arguments and returning no value - Should be called if the user taps the “OK” button on the modal. */
643
+ onClickOkButton(): void;
644
+ /**
645
+ * Callback function taking no arguments and returning no value.
646
+ * Should be called if the user taps the “accept” button when they are recommended to eat additional carbohydrates.
647
+ */
648
+ onAcceptCarbohydrates(): void;
649
+ /**
650
+ * Callback function taking no arguments and returning no value.
651
+ * Should be called if the user taps the “decline” button when they are recommended to eat additional carbohydrates.
652
+ */
653
+ onDeclineCarbohydrates(): void;
654
+ }
655
+ export interface IModalState {
656
+ /** If true then the first page will be displayed, otherwise the second page will be displayed. */
657
+ firstPageVisible: boolean;
658
+ }
659
+ &nbsp;
660
+ /**
661
+ * Popup modal for displaying information messages or warnings to the user if necessary.
662
+ * The modal has two “pages” with different content that it is able to display.
663
+ * The first page is for informing the user if their insulin recommendation was limited by the maximum insulin safety limit.
664
+ * This page will only be displayed if the recommendation was actually limited.
665
+ * The second page is for displaying a general attention message that may contain instructions for the user,
666
+ * and for letting the user know if they are being recommended eating additional carbohydrates.
667
+ */
668
+ export default class RecommendationModal extends React.Component&lt;IModalProps, IModalState&gt; {
669
+ /**
670
+ * Steps:
671
+ * 1. Call the super() method with the props.
672
+ * 2. Set the firstPageVisible state variable true if the limitationMessage prop is truthy.
673
+ * @param props The class props
674
+ */
675
+ constructor(props: IModalProps) {
676
+ super(props);
677
+ this.state = {
678
+ firstPageVisible: !!this.props.limitationMessage,
679
+ };
680
+ }
681
+ &nbsp;
682
+ /**
683
+ * Handle what happens when the “next” button is pressed.
684
+ *
685
+ * Steps:
686
+ * 1. Unpack attentionMessage and suggestedCarbohydrates from the props object.
687
+ * 2. Define isPageVisible to be true if either attentionMessage or suggestedCarbohydrates is truthy.
688
+ * 3. If isPageVisible is true then set the firstPageVisible state variable to false. Otherwise call the onClickOkButton prop callback function.
689
+ */
690
+ public onPressNextButton = (): void =&gt; {
691
+ const { attentionMessage, suggestedCarbohydrates } = this.props;
692
+ const isPageVisible = !!attentionMessage || !!suggestedCarbohydrates;
693
+ return isPageVisible ? this.setState({ firstPageVisible: false }) : this.props.onClickOkButton();
694
+ };
695
+ &nbsp;
696
+ /**
697
+ * @returns Return an JSX element for composing two buttons: one for accepting a suggestion and one for rejecting it.
698
+ * If the accept button is pressed the onAcceptCarbohydrates prop callback function shall be called.
699
+ * If the accept button is pressed the onDeclineCarbohydrates prop callback function shall be called.
700
+ */
701
+ public recommendationButtons = (): JSX.Element =&gt; {
702
+ return (
703
+ &lt;View style={stylesModal.recommendationButtonsContainer}&gt;
704
+ &lt;TouchableOpacity
705
+ testID={RecommendationModalTestIds.AcceptCarbs}
706
+ accessibilityLabel="yesButtonModal"
707
+ style={stylesModal.affirmativeCarbsButton}
708
+ onPress={this.props.onAcceptCarbohydrates}
709
+ &gt;
710
+ &lt;Text style={stylesModal.affirmativeCarbsText}&gt;{i18n._(t`OK`)}&lt;/Text&gt;
711
+ &lt;/TouchableOpacity&gt;
712
+ &lt;TouchableOpacity
713
+ testID={RecommendationModalTestIds.DeclineCarbs}
714
+ accessibilityLabel="noButtonModal"
715
+ style={stylesModal.negativeCarbsButton}
716
+ onPress={this.props.onDeclineCarbohydrates}
717
+ &gt;
718
+ &lt;Text style={stylesModal.negativeCarbsText}&gt;{i18n._(t`NO`)}&lt;/Text&gt;
719
+ &lt;/TouchableOpacity&gt;
720
+ &lt;/View&gt;
721
+ );
722
+ };
723
+ &nbsp;
724
+ /**
725
+ * Compose a JSX element for displaying a recommendation of additional carbohydrates (the value of the suggestedCarbohydrates prop rounded to the nearest integer)
726
+ * to the user in a way that explains what to do with the suggestion.
727
+ * @param suggestedCarbohydrates the recommended additional carbohydrates
728
+ */
729
+ public recommendCarbohydrates = (suggestedCarbohydrates: number): JSX.Element =&gt; {
730
+ const displayCarbs = Math.round(suggestedCarbohydrates);
731
+ &nbsp;
732
+ return (
733
+ &lt;React.Fragment&gt;
734
+ &lt;View style={stylesModal.innerView}&gt;
735
+ &lt;View style={stylesModal.recommendationRow}&gt;
736
+ &lt;Text style={stylesModal.recommendEatingText}&gt;
737
+ {i18n._(t`We recommend eating an additional:`)}
738
+ &lt;/Text&gt;
739
+ &lt;/View&gt;
740
+ &lt;View style={stylesModal.suggestedContainer}&gt;
741
+ &lt;Text style={stylesModal.textCenter}&gt;
742
+ &lt;Text
743
+ style={stylesModal.suggestedCarbs}
744
+ testID={RecommendationModalTestIds.SuggestedCarbs}
745
+ &gt;{`${displayCarbs} `}&lt;/Text&gt;
746
+ &lt;Text style={stylesModal.carbohydrateText}&gt;{i18n._(t`grams of carbohydrates`)}&lt;/Text&gt;
747
+ &lt;/Text&gt;
748
+ &lt;/View&gt;
749
+ &lt;View style={stylesModal.recommendationRow}&gt;
750
+ &lt;Text style={stylesModal.recommendEatingText}&gt;{i18n._(t`Instead of taking insulin`)}&lt;/Text&gt;
751
+ &lt;/View&gt;
752
+ &lt;/View&gt;
753
+ &lt;View style={stylesModal.addToCalculationContainer}&gt;
754
+ &lt;Text style={stylesModal.addToCalculation}&gt;
755
+ {i18n._(t`Would you like to add this to your current calculation?`)}
756
+ &lt;/Text&gt;
757
+ {this.recommendationButtons()}
758
+ &lt;/View&gt;
759
+ &lt;/React.Fragment&gt;
760
+ );
761
+ };
762
+ &nbsp;
763
+ /**
764
+ * @returns JSX element for displaying the “second” page of the recommendation modal. The second page displays the string from the attentionMessage prop.
765
+ */
766
+ public secondPage = (): JSX.Element =&gt; {
767
+ const { attentionMessage, suggestedCarbohydrates } = this.props;
768
+ const willRecommendCarbs = suggestedCarbohydrates !== null &amp;&amp; suggestedCarbohydrates &gt; 0;
769
+ &nbsp;
770
+ return (
771
+ &lt;React.Fragment&gt;
772
+ &lt;View style={stylesModal.container}&gt;
773
+ &lt;View style={stylesModal.titleContainer}&gt;
774
+ &lt;Text style={stylesModal.textTittleMessage}&gt;{i18n._(t`Attention`)}&lt;/Text&gt;
775
+ &lt;/View&gt;
776
+ &lt;Text style={stylesModal.textMessage}&gt;{attentionMessage}&lt;/Text&gt;
777
+ {willRecommendCarbs ? this.recommendCarbohydrates(suggestedCarbohydrates!) : null}
778
+ &lt;/View&gt;
779
+ {willRecommendCarbs ? null : (
780
+ &lt;View style={stylesModal.containerAcceptButton}&gt;
781
+ &lt;TouchableOpacity
782
+ testID={RecommendationModalTestIds.OkButton}
783
+ accessibilityLabel="okayButtonModal"
784
+ style={stylesModal.okButton}
785
+ onPress={this.props.onClickOkButton}
786
+ &gt;
787
+ &lt;Text style={stylesModal.buttonText}&gt;{i18n._(t`OK`)}&lt;/Text&gt;
788
+ &lt;/TouchableOpacity&gt;
789
+ &lt;/View&gt;
790
+ )}
791
+ &lt;/React.Fragment&gt;
792
+ );
793
+ };
794
+ &nbsp;
795
+ /**
796
+ * @returns JSX element for displaying the “first” page of the recommendation modal.
797
+ * The first page consists of a limitation message rendered using a LimitationMessage component.
798
+ */
799
+ public firstPage = (): JSX.Element =&gt; {
800
+ const { limitationMessage } = this.props;
801
+ return &lt;LimitationMessage limitationMessage={limitationMessage} onPressNextButton={this.onPressNextButton} /&gt;;
802
+ };
803
+ &nbsp;
804
+ /**
805
+ * @returns JSX element for rendering a modal that is visible if the isVisible prop is true.
806
+ * If the firstPageVisible state variable is true then use firstPage() to render the first page.
807
+ * Otherwise use secondPage() to render the second page.
808
+ */
809
+ public render(): JSX.Element {
810
+ const { isVisible } = this.props;
811
+ const { firstPageVisible } = this.state;
812
+ return (
813
+ &lt;ReactNativeModal isVisible={isVisible} style={stylesModal.modalStyle}&gt;
814
+ {firstPageVisible ? this.firstPage() : this.secondPage()}
815
+ &lt;/ReactNativeModal&gt;
816
+ );
817
+ }
818
+ }
819
+ &nbsp;
820
+ const { height, width } = Dimensions.get(`screen`);
821
+ const buttonHeight = height / 20;
822
+ const buttonWidth = width / 2.5;
823
+ const buttonFontSize = width / 22;
824
+ const buttonBorderRadius = height / 30;
825
+ const buttonBorderWidth = height / 500;
826
+ const sugestionFontSize = width / 19;
827
+ const recommendEatingFontSize = height / 45;
828
+ const textFontSize = width / 20;
829
+ const titleFontSize = width / 13;
830
+ &nbsp;
831
+ /** @internal */
832
+ export const stylesModal = StyleSheet.create({
833
+ modalStyle: { margin: 0 },
834
+ container: {
835
+ flex: 4,
836
+ backgroundColor: `rgba(30, 35, 87, 0.9)`,
837
+ justifyContent: `center`,
838
+ paddingHorizontal: `4%`,
839
+ },
840
+ containerAcceptButton: {
841
+ flex: 1,
842
+ backgroundColor: `rgba(30, 35, 87, 0.9)`,
843
+ justifyContent: `flex-start`,
844
+ },
845
+ titleContainer: { marginBottom: `5%` },
846
+ recommendationRow: { justifyContent: `center`, alignContent: `center`, marginBottom: `3%` },
847
+ textTittleMessage: { color: `white`, fontSize: titleFontSize, textAlign: `center` },
848
+ textMessage: { color: `white`, fontSize: textFontSize, textAlign: `center` },
849
+ buttonText: { color: BORDER_COLOUR_TEAL, fontSize: buttonFontSize, textAlign: `center` },
850
+ addToCalculationContainer: { justifyContent: `flex-start`, marginVertical: `5%` },
851
+ innerView: {
852
+ alignContent: `center`,
853
+ paddingVertical: `5%`,
854
+ paddingHorizontal: `3%`,
855
+ marginTop: `5%`,
856
+ borderRadius: height / 80,
857
+ borderWidth: height / 300,
858
+ borderColor: BORDER_COLOUR_TEAL,
859
+ },
860
+ &nbsp;
861
+ suggestedContainer: { justifyContent: `center`, flexDirection: `row`, marginBottom: `3%` },
862
+ suggestedCarbs: { color: `white`, fontSize: sugestionFontSize, fontWeight: `bold` },
863
+ textCenter: { textAlign: `center` },
864
+ recommendEatingText: { color: `#C5D0E7`, fontSize: recommendEatingFontSize, textAlign: `center` },
865
+ carbohydrateText: { color: `white`, fontSize: sugestionFontSize },
866
+ addToCalculation: { color: `white`, fontSize: textFontSize, textAlign: `center` },
867
+ recommendationButtonsContainer: { justifyContent: `center`, flexDirection: `row`, margin: `3%` },
868
+ affirmativeCarbsText: { color: BORDER_COLOUR_TEAL, fontSize: buttonFontSize, textAlign: `center` },
869
+ negativeCarbsText: { color: `white`, fontSize: buttonFontSize, textAlign: `center` },
870
+ affirmativeCarbsButton: {
871
+ marginTop: `2%`,
872
+ borderRadius: buttonBorderRadius,
873
+ borderWidth: buttonBorderWidth,
874
+ borderColor: BORDER_COLOUR_TEAL,
875
+ width: buttonWidth,
876
+ height: buttonHeight,
877
+ alignSelf: `center`,
878
+ justifyContent: `center`,
879
+ marginRight: `2%`,
880
+ },
881
+ negativeCarbsButton: {
882
+ marginTop: `2%`,
883
+ borderRadius: buttonBorderRadius,
884
+ borderWidth: buttonBorderWidth,
885
+ borderColor: `white`,
886
+ width: buttonWidth,
887
+ height: buttonHeight,
888
+ alignSelf: `center`,
889
+ justifyContent: `center`,
890
+ marginLeft: `2%`,
891
+ },
892
+ okButton: {
893
+ marginTop: `6%`,
894
+ borderRadius: buttonBorderRadius,
895
+ borderWidth: buttonBorderWidth,
896
+ borderColor: BORDER_COLOUR_TEAL,
897
+ width: buttonWidth,
898
+ height: buttonHeight,
899
+ alignSelf: `center`,
900
+ justifyContent: `center`,
901
+ },
902
+ });
903
+ &nbsp;</pre></td></tr></table></pre>
904
+
905
+ <div class='push'></div><!-- for sticky footer -->
906
+ </div><!-- /wrapper -->
907
+ <div class='footer quiet pad2 space-top1 center small'>
908
+ Code coverage generated by
909
+ <a href="https://istanbul.js.org/" target="_blank">istanbul</a>
910
+ at Thu Sep 23 2021 09:47:17 GMT+0000 (Coordinated Universal Time)
911
+ </div>
912
+ </div>
913
+ <script src="../../prettify.js"></script>
914
+ <script>
915
+ window.onload = function () {
916
+ prettyPrint();
917
+ };
918
+ </script>
919
+ <script src="../../sorter.js"></script>
920
+ <script src="../../block-navigation.js"></script>
921
+ </body>
922
+ </html>
923
+