ordering-ui-react-native 0.21.36-test → 0.21.37-test

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 (3) hide show
  1. package/package.json +1 -1
  2. package/themes/business/index.tsx +3 -0
  3. package/themes/business/src/components/StarPrinter/index.tsx +132 -680
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "ordering-ui-react-native",
3
- "version": "0.21.36-test",
3
+ "version": "0.21.37-test",
4
4
  "description": "Reusable components made in react native",
5
5
  "main": "src/index.tsx",
6
6
  "author": "ordering.inc",
package/themes/business/index.tsx CHANGED
@@ -42,6 +42,7 @@ import { NewOrderNotification } from './src/components/NewOrderNotification';
42
42
  import { DriverSchedule } from './src/components/DriverSchedule';
43
43
  import { ScheduleBlocked } from './src/components/ScheduleBlocked';
44
44
  import { OrderDetailsLogistic } from './src/components/OrderDetailsLogistic'
45
+ import HandleStarPrinter from './src/components/StarPrinter';
45
46
  //OComponents
46
47
  import {
47
48
  OText,
@@ -130,4 +131,6 @@ export {
130
131
  useLocation,
131
132
  // providers
132
133
  StoreMethods,
134
+ //printer
135
+ HandleStarPrinter,
133
136
  };
package/themes/business/src/components/StarPrinter/index.tsx CHANGED
@@ -1,698 +1,150 @@
1
1
  import React, { useState } from 'react';
2
- import { OText, OIconButton } from '../shared';
3
2
  import {
4
- StyleSheet, View, Platform, Alert
5
- } from 'react-native';
3
+ InterfaceType,
4
+ StarConnectionSettings,
5
+ StarXpandCommand,
6
+ StarPrinter
7
+ } from 'react-native-star-io10';
8
+ import { Picker } from '@react-native-picker/picker';
6
9
  import {
7
- Content,
8
- OrderCustomer,
9
- OrderHeader,
10
- OrderContent,
11
- OrderBusiness,
12
- OrderProducts,
13
- Table,
14
- OrderBill,
15
- Total,
16
- Action,
17
- ContentInfo,
18
- } from './styles';
19
- import { useUtils, useLanguage, useConfig } from 'ordering-components/native';
20
- import { verifyDecimals, getProductPrice } from '../../utils';
21
- import { FloatingButton } from '../FloatingButton';
22
- import RNHTMLtoPDF from 'react-native-html-to-pdf';
23
- import RNPrint from 'react-native-print';
24
- import { useTheme } from 'styled-components/native';
25
- import { ProductItemAccordion } from '../ProductItemAccordion';
26
-
27
-
28
- export const OrderSummary = ({ order, navigation, orderStatus, askBluetoothPermission, getPermissions, isGrantedPermissions, checkBluetoothPermission }: any) => {
29
- const handleArrowBack: any = () => {
30
- navigation?.canGoBack() && navigation.goBack();
31
- };
32
- const [{ parsePrice, parseNumber, parseDate }] = useUtils();
33
- const [, t] = useLanguage();
34
- const [{ configs }] = useConfig();
35
- const [state, setState] = useState({
36
- selectedPrinter: { url: undefined },
37
- });
38
-
39
-
40
- const getFormattedSubOptionName = ({ quantity, name, position, price }: any) => {
41
- if (name !== 'No') {
42
- const pos = position && position !== 'whole' ? `(${t(position.toUpperCase(), position)})` : '';
43
- return pos
44
- ? `${quantity} x ${name} ${pos} +${parsePrice(price)}\n`
45
- : `${quantity} x ${name} +${parsePrice(price)}\n`;
46
- } else {
47
- return 'No\n';
48
- }
49
- };
50
-
51
- const getSuboptions = (suboptions: any) => {
52
- const array: any = []
53
- suboptions?.length > 0 &&
54
- suboptions?.map((suboption: any) => {
55
- const string = `&nbsp;&nbsp;&nbsp;${getFormattedSubOptionName(suboption)}<br/>`
56
- array.push(string)
57
- })
58
-
59
- return array.join('')
60
- }
61
-
62
- const getOptions = (options: any, productComment: string = '') => {
63
- const array: any = [];
64
-
65
- options?.length &&
66
- options?.map((option: any) => {
67
- const string =
68
- ` ${option.name}<br/>${getSuboptions(option.suboptions)}`;
69
-
70
- array.push(string)
71
- })
72
-
73
- if (productComment) {
74
- array.push(`${t('COMMENT', 'Comment')}<br/>&nbsp;&nbsp;&nbsp;&nbsp;${productComment}`)
75
- }
76
-
77
- return array.join('')
78
- }
79
-
80
- const theme = useTheme();
81
- const percentTip =
82
- parseInt(configs?.driver_tip_type?.value, 10) === 2 &&
83
- !parseInt(configs?.driver_tip_use_custom?.value, 10) &&
84
- verifyDecimals(order?.summary?.driver_tip, parseNumber);
85
-
86
- const customerName = `${order?.customer?.name ?? ''} ${order?.customer?.middle_name ?? ''} ${order?.customer?.lastname ?? ''} ${order?.customer?.second_lastname ?? ''
87
- }`?.replace(' ', ' ')?.trim() ?? ''
88
-
89
- const orderSummary = () => {
90
- return `
91
- <div>
92
- <h1>${t('ORDER_NO', 'Order No.')} ${order.id}</h1>
93
- <p style="font-size: 27px">
94
-
95
- ${orderStatus} </br>
96
-
97
- ${t('DELIVERY_TYPE', 'Delivery Type')}: ${deliveryStatus[order?.delivery_type]
98
- }
99
- </br>
100
- ${t('DELIVERY_DATE', 'Delivery Date')}: ${order?.delivery_datetime_utc
101
- ? parseDate(order?.delivery_datetime_utc)
102
- : parseDate(order?.delivery_datetime, { utc: false })
103
- }
104
- </br>
105
- ${t('PAYMENT_METHOD')}: ${order?.paymethod?.name}
106
- </p>
107
-
108
- <h1>${t('CUSTOMER_DETAILS', 'Customer details')}</h1>
109
- <p style="font-size: 27px"> ${t('FULL_NAME', 'Full Name')}: ${customerName}
110
- </br>
111
- ${t('EMAIL', 'Email')}: ${order?.customer?.email}
112
- </br>
113
- ${t('MOBILE_PHONE', 'Mobile Phone')}: ${order?.customer?.cellphone}
114
- </br>
115
- ${!!order?.customer?.phone
116
- ? `${t('MOBILE_PHONE', 'Mobile Phone')}: ${order?.customer?.phone
117
- } </br>`
118
- : ''
119
- }
120
- ${t('FULL_ADDRESS', 'Full Addres')}: ${order?.customer?.address}
121
- </br>
122
- ${!!order?.customer?.internal_number
123
- ? `${t('INTERNAL_NUMBER', 'Internal Number')}: ${order?.customer?.internal_number
124
- } </br>`
125
- : ''
126
- }
127
- ${t('ZIPCODE', 'Zipcode')}: ${order?.customer.zipcode}
128
- </p>
129
-
130
- <h1>${t('BUSINESS_DETAILS', 'Business details')}</h1>
131
- <p style="font-size: 27px">
132
- ${order?.business?.name}
133
- </br>
134
- ${order?.business?.email}
135
- </br>
136
- ${t('BUSINESS_PHONE', 'Business Phone')}: ${order?.business?.cellphone}
137
- </br>
138
- ${!!order?.business?.phone
139
- ? `${t('BUSINESS_PHONE', 'Business Phone')}: ${order?.business?.phone
140
- } </br>`
141
- : ''
142
- }
143
-
144
- ${t('ADDRESS', 'Address')}: ${order?.business?.address}
145
- </br>
146
- ${!!order?.business?.address_notes
147
- ? `${t('SPECIAL_ADDRESS', 'Special Address')}: ${order?.business?.address_notes
148
- } `
149
- : ''
150
- }
151
- </p>
152
- <h1> ${t('ORDER_DETAILS', 'Order Details')}</h1>
153
-
154
- ${order?.products.length &&
155
- order?.products.map(
156
- (product: any, i: number) =>
157
- `<div style="display: flex;flexDirection:row;flex-wrap:wrap">
158
- <div style="display:flex;width:100%">
159
- <div style="display:flex; justify-content: flex-start; font-size: 26px; width: 70%">
160
- ${product?.quantity} ${product?.name}
161
- </div>
162
-
163
- <div style="display:flex; justify-content: flex-end; font-size: 26px; width: 30%">
164
- ${parsePrice(product.total ?? getProductPrice(product))}
165
- </div>
166
- </div>
167
-
168
- <div style="font-size: 26px;width:100%">
169
- <div style="width:90%;display:flex;justifyContent:center;margin:auto;">
170
- ${getOptions(product.options, product.comment)}
171
- </div>
172
- </div>
173
- </div>`
174
- )
175
- }
176
- <div style="display: flex;">
177
-
178
- <div style="display:flex; justify-content: flex-start; font-size: 26px; width: 70%">
179
- ${t('SUBTOTAL', 'Subtotal')}
180
- </div>
181
-
182
- <div style="display:flex; justify-content: flex-end; font-size: 26px; width: 30%">
183
- ${parsePrice(
184
- order.tax_type === 1
185
- ? order?.summary?.subtotal + order?.summary?.tax ?? 0
186
- : order?.summary?.subtotal ?? 0,
187
- )}
188
- </div>
189
-
190
- </div>
191
-
192
- <div style="display: flex">
193
- ${order?.summary?.discount > 0
194
- ? order?.offer_type === 1
195
- ? `<div style="display:flex; justify-content: flex-start; font-size: 26px; width: 70%">
196
- ${t('DISCOUNT', 'Discount')} (${verifyDecimals(
197
- order?.offer_rate,
198
- parsePrice,
199
- )}%)
200
- </div>`
201
- : `<div style="display:flex; justify-content: flex-start; font-size: 26px; width: 70%"> ${t(
202
- 'DISCOUNT',
203
- 'Discount',
204
- )}
205
- </div>`
206
- : ''
207
- }
208
- ${order?.summary?.discount > 0
209
- ? `<div style="display:flex; justify-content: flex-end; font-size: 26px; width: 30%">- ${parsePrice(
210
- order?.summary?.discount,
211
- )}
212
- </div>`
213
- : ''
214
- }
215
- </div>
216
-
217
- ${order?.tax_type !== 1
218
- ? `<div style="font-size: 25px">
219
- ${t('TAX', 'Tax')}
220
- ${verifyDecimals(order?.summary?.tax_rate, parseNumber)}%
221
- ${parsePrice(order?.summary?.tax ?? 0)}
222
- ${t('TAX', 'Tax')}
223
- ${verifyDecimals(order?.summary?.tax_rate, parseNumber)}%
224
- </div>`
225
- : ''
226
- }
227
-
228
- ${order?.summary?.delivery_price > 0
229
- ? `<div style="font-size: 25px;"> ${t(
230
- 'DELIVERY_FEE',
231
- 'Delivery Fee',
232
- )}
233
- </div>`
234
- : ''
235
- }
236
-
237
- <div style="display: flex">
238
-
239
- <div style="font-size: 26px; width: 70%; display: flex; justify-content: flex-start">
240
- ${t('DRIVER_TIP', 'Driver tip')}
241
- ${percentTip ? `(${percentTip}%)` : ''}
242
- </div>
243
-
244
- <div style="font-size: 26px; width: 30%; display: flex; justify-content: flex-end">
245
- ${parsePrice(order?.summary?.driver_tip ?? 0)}
246
- </div>
247
-
248
- </div>
249
-
250
- <div style="display: flex">
251
-
252
- <div style="font-size: 26px; width: 70%; display: flex; justify-content: flex-start">
253
- ${t('SERVICE_FEE', 'Service Fee')}
254
- (${verifyDecimals(order?.summary?.service_fee, parseNumber)}%)
255
- </div>
256
-
257
- <div style="font-size: 26px; width: 30%; display: flex; justify-content: flex-end">
258
- ${parsePrice(order?.summary?.service_fee ?? 0)}
259
- </div>
260
-
261
- </div>
262
-
263
- <div style="display: flex">
264
-
265
- <div style="font-size: 26px; width: 70%; display: flex; justify-content: flex-start; font-weight: bold">
266
- ${t('TOTAL', 'Total')}
267
- </div>
268
-
269
- <div style="font-size: 26px; width: 30%; display: flex; justify-content: flex-end">
270
- ${parsePrice(order?.summary?.total ?? 0)}
271
- </div>
272
-
273
- </div>
274
-
275
- </div>`;
276
- };
277
-
278
- const deliveryStatus: any = {
279
- 1: t('DELIVERY', 'Delivery'),
280
- 2: t('PICK_UP', 'Pick up'),
281
- 3: t('EAT_IN', 'Eat In'),
282
- 4: t('CURBSIDE', 'Curbside'),
283
- 5: t('DRIVER_THRU', 'Driver thru'),
284
- };
285
-
286
- // @NOTE iOS Only
287
- const selectPrinter = async () => {
288
- const selectedPrinter = await RNPrint.selectPrinter({ x: '100', y: '100' });
289
- setState({ selectedPrinter });
290
- };
291
-
292
- // @NOTE iOS Only
293
- const silentPrint = async () => {
294
- if (!state?.selectedPrinter) {
295
- Alert.alert('Must Select Printer First');
296
- }
297
-
298
- const jobName = await RNPrint.print({
299
- printerURL: state?.selectedPrinter?.url,
300
- html: orderSummary(),
301
- });
302
- };
10
+ View,
11
+ Text,
12
+ Button,
13
+ TextInput,
14
+ } from 'react-native';
303
15
 
304
- const printPDF = async () => {
305
- const results = await RNHTMLtoPDF.convert({
306
- html: orderSummary(),
307
- fileName: 'test',
308
- base64: true,
309
- });
310
16
 
311
- await RNPrint.print({
312
- filePath: results.filePath || '',
313
- jobName: `${t('ORDER_NO', `Order no. ${order.id}`)}`,
314
- });
315
- };
17
+ const HandleStarPrinter = () => {
316
18
 
317
- const styles = StyleSheet.create({
318
- btnBackArrow: {
319
- maxWidth: 40,
320
- height: 25,
321
- },
322
- textBold: {
323
- fontWeight: '600',
324
- },
19
+ const [printState, setPrintState] = useState({
20
+ interfaceType: InterfaceType.Bluetooth,
21
+ identifier: '00:11:62:00:00:00',
22
+ imageBase64: ''
325
23
  });
326
24
 
327
- const handlePrint = async () => {
328
- if (Platform.OS === 'ios') {
329
- silentPrint()
330
- return
25
+ const _onPressPrintButton = async () => {
26
+
27
+ let settings = new StarConnectionSettings();
28
+ settings.interfaceType = printState.interfaceType;
29
+ settings.identifier = printState.identifier;
30
+
31
+ let printer = new StarPrinter(settings);
32
+
33
+ try {
34
+ let builder = new StarXpandCommand.StarXpandCommandBuilder();
35
+ builder.addDocument(new StarXpandCommand.DocumentBuilder()
36
+ .addPrinter(new StarXpandCommand.PrinterBuilder()
37
+ .actionPrintImage(new StarXpandCommand.Printer.ImageParameter("logo_01.png", 406))
38
+ .styleInternationalCharacter(StarXpandCommand.Printer.InternationalCharacterType.Usa)
39
+ .styleCharacterSpace(0)
40
+ .styleAlignment(StarXpandCommand.Printer.Alignment.Center)
41
+ .actionPrintText("Star Clothing Boutique\n" +
42
+ "123 Star Road\n" +
43
+ "City, State 12345\n" +
44
+ "\n")
45
+ .styleAlignment(StarXpandCommand.Printer.Alignment.Left)
46
+ .actionPrintText("Date:MM/DD/YYYY Time:HH:MM PM\n" +
47
+ "--------------------------------\n" +
48
+ "\n")
49
+ .actionPrintText("SKU Description Total\n" +
50
+ "300678566 PLAIN T-SHIRT 10.99\n" +
51
+ "300692003 BLACK DENIM 29.99\n" +
52
+ "300651148 BLUE DENIM 29.99\n" +
53
+ "300642980 STRIPED DRESS 49.99\n" +
54
+ "300638471 BLACK BOOTS 35.99\n" +
55
+ "\n" +
56
+ "Subtotal 156.95\n" +
57
+ "Tax 0.00\n" +
58
+ "--------------------------------\n")
59
+ .actionPrintText("Total ")
60
+ .add(new StarXpandCommand.PrinterBuilder()
61
+ .styleMagnification(new StarXpandCommand.MagnificationParameter(2, 2))
62
+ .actionPrintText(" $156.95\n")
63
+ )
64
+ .actionPrintText("--------------------------------\n" +
65
+ "\n" +
66
+ "Charge\n" +
67
+ "156.95\n" +
68
+ "Visa XXXX-XXXX-XXXX-0123\n" +
69
+ "\n")
70
+ .add(new StarXpandCommand.PrinterBuilder()
71
+ .styleInvert(true)
72
+ .actionPrintText("Refunds and Exchanges\n")
73
+ )
74
+ .actionPrintText("Within ")
75
+ .add(new StarXpandCommand.PrinterBuilder()
76
+ .styleUnderLine(true)
77
+ .actionPrintText("30 days")
78
+ )
79
+ .actionPrintText(" with receipt\n")
80
+ .actionPrintText("And tags attached\n" +
81
+ "\n")
82
+ .styleAlignment(StarXpandCommand.Printer.Alignment.Center)
83
+ .actionPrintBarcode(new StarXpandCommand.Printer.BarcodeParameter('0123456',
84
+ StarXpandCommand.Printer.BarcodeSymbology.Jan8)
85
+ .setBarDots(3)
86
+ .setBarRatioLevel(StarXpandCommand.Printer.BarcodeBarRatioLevel.Level0)
87
+ .setHeight(5)
88
+ .setPrintHri(true))
89
+ .actionFeedLine(1)
90
+ .actionPrintQRCode(new StarXpandCommand.Printer.QRCodeParameter('Hello World.\n')
91
+ .setModel(StarXpandCommand.Printer.QRCodeModel.Model2)
92
+ .setLevel(StarXpandCommand.Printer.QRCodeLevel.L)
93
+ .setCellSize(8))
94
+ .actionCut(StarXpandCommand.Printer.CutType.Partial)
95
+ )
96
+ );
97
+
98
+ let commands = await builder.getCommands();
99
+
100
+ await printer.open();
101
+ await printer.print(commands);
102
+
103
+ console.log(`Success`);
331
104
  }
332
- const _permissions = await getPermissions()
333
-
334
- if (!isGrantedPermissions) {
335
- checkBluetoothPermission()
105
+ catch (error) {
106
+ console.log(`Error: ${String(error)}`);
336
107
  }
337
- if (isGrantedPermissions) {
338
- const response = await askBluetoothPermission();
339
- const isGranted = _permissions.reduce((allPermissions: boolean, _permission: string) => allPermissions && response?.[_permission] === 'granted', true)
340
- if (isGranted) {
341
- printPDF()
342
- }
108
+ finally {
109
+ await printer.close();
110
+ await printer.dispose();
343
111
  }
344
- };
345
-
346
- const openPrint = () => {
347
- navigation.navigate('HandleStarPrinter')
348
112
  }
349
113
 
350
114
  return (
351
- <>
352
- <Content>
353
- <OrderContent>
354
- <OrderHeader>
355
- <OIconButton
356
- icon={theme.images.general.arrow_left}
357
- iconStyle={{ width: 20, height: 20 }}
358
- borderColor={theme.colors.clear}
359
- style={{ maxWidth: 40, justifyContent: 'flex-end' }}
360
- onClick={() => handleArrowBack()}
361
- />
362
- <OText
363
- style={{ marginBottom: 5 }}
364
- size={15}
365
- color={theme.colors.textGray}
366
- weight="600">
367
- {t('INVOICE_ORDER_NO', 'Order No.')} {order.id}
368
- </OText>
369
-
370
- <OText
371
- style={{ marginBottom: 5 }}
372
- size={15}
373
- color={theme.colors.textGray}>
374
- {`${orderStatus}`}
375
- </OText>
376
-
377
- <OText style={{ marginBottom: 5 }}>
378
- {`${t('DELIVERY_TYPE', 'Delivery Type')}: ${deliveryStatus[order?.delivery_type]
379
- }`}
380
- </OText>
381
-
382
- <OText style={{ marginBottom: 5 }}>
383
- {`${t('DELIVERY_DATE', 'Delivery Date')}: ${order?.delivery_datetime_utc
384
- ? parseDate(order?.delivery_datetime_utc)
385
- : parseDate(order?.delivery_datetime, { utc: false })
386
- }`}
387
- </OText>
388
-
389
- <OText style={{ marginBottom: 5 }}>{`${t('PAYMENT_METHOD')}: ${t(
390
- order?.paymethod?.name.toUpperCase(),
391
- order?.paymethod?.name,
392
- )}`}</OText>
393
- </OrderHeader>
394
-
395
- <OrderCustomer>
396
- <OText
397
- style={{ marginBottom: 5 }}
398
- size={16}
399
- weight="600"
400
- color={theme.colors.textGray}>
401
- {t('CUSTOMER_DETAILS', 'Customer details')}
402
- </OText>
403
-
404
- <OText
405
- style={{ marginBottom: 5 }}
406
- size={14}
407
- numberOfLines={2}
408
- adjustsFontSizeToFit
409
- ellipsizeMode="tail"
410
- color={theme.colors.textGray}>
411
- {`${t('FULL_NAME', 'Full Name')}: ${customerName}`}
412
- </OText>
413
-
414
- <OText
415
- style={{ marginBottom: 5 }}
416
- size={14}
417
- numberOfLines={2}
418
- adjustsFontSizeToFit
419
- ellipsizeMode="tail"
420
- color={theme.colors.textGray}>
421
- {`${t('EMAIL', 'Email')}: ${order?.customer?.email}`}
422
- </OText>
423
-
424
- <OText
425
- style={{ marginBottom: 5 }}
426
- size={14}
427
- numberOfLines={2}
428
- adjustsFontSizeToFit
429
- ellipsizeMode="tail"
430
- color={theme.colors.textGray}>
431
- {`${t('MOBILE_PHONE', 'Mobile Phone')}: ${order?.customer?.cellphone
432
- }`}
433
- </OText>
434
-
435
- {!!order?.customer?.phone && (
436
- <OText
437
- style={{ marginBottom: 5 }}
438
- size={14}
439
- numberOfLines={2}
440
- adjustsFontSizeToFit
441
- ellipsizeMode="tail"
442
- color={theme.colors.textGray}>
443
- {`${t('MOBILE_PHONE', 'Mobile Phone')}: ${order?.customer?.phone
444
- }`}
445
- </OText>
446
- )}
447
-
448
- <OText
449
- style={{ marginBottom: 5 }}
450
- size={14}
451
- numberOfLines={2}
452
- adjustsFontSizeToFit
453
- ellipsizeMode="tail"
454
- color={theme.colors.textGray}>
455
- {`${t('ADDRESS', 'Address')}: ${order?.customer?.address}`}
456
- </OText>
457
-
458
- {!!order?.customer?.internal_number && (
459
- <OText numberOfLines={1} mBottom={4} ellipsizeMode="tail">
460
- {t('INTERNAL_NUMBER', 'Internal Number')}{' '}
461
- {order?.customer?.internal_number}
462
- </OText>
463
- )}
464
-
465
- {order?.customer?.address_notes && (
466
- <OText style={{ marginBottom: 5 }}>
467
- {`${t('NOTES', 'Notes')}: ${order?.customer?.address_notes}`}
468
- </OText>
469
- )}
470
-
471
- {!!order?.customer.zipcode && (
472
- <OText numberOfLines={1} mBottom={4} ellipsizeMode="tail">
473
- {t('ZIPCODE', 'Zipcode')}: {order?.customer?.zipcode}
474
- </OText>
475
- )}
476
- </OrderCustomer>
477
-
478
- <OrderBusiness>
479
- <OText
480
- style={{ marginBottom: 5 }}
481
- size={16}
482
- weight="600"
483
- color={theme.colors.textGray}>
484
- {t('BUSINESS_DETAILS', 'Business details')}
485
- </OText>
486
-
487
- <OText
488
- style={{ marginBottom: 5 }}
489
- size={14}
490
- numberOfLines={2}
491
- adjustsFontSizeToFit
492
- ellipsizeMode="tail"
493
- color={theme.colors.textGray}>
494
- {order?.business?.name}
495
- </OText>
496
-
497
- <OText
498
- style={{ marginBottom: 5 }}
499
- size={14}
500
- numberOfLines={2}
501
- adjustsFontSizeToFit
502
- ellipsizeMode="tail"
503
- color={theme.colors.textGray}>
504
- {order?.business?.email}
505
- </OText>
506
-
507
- {!!order?.business?.cellphone && (
508
- <OText
509
- style={{ marginBottom: 5 }}
510
- size={14}
511
- numberOfLines={2}
512
- ellipsizeMode="tail"
513
- color={theme.colors.textGray}>
514
- {`${t('BUSINESS_PHONE', 'Business Phone')}: ${order?.business?.cellphone
515
- }`}
516
- </OText>
517
- )}
518
-
519
- {!!order?.business?.phone && (
520
- <OText
521
- style={{ marginBottom: 5 }}
522
- size={14}
523
- numberOfLines={2}
524
- ellipsizeMode="tail"
525
- color={theme.colors.textGray}>
526
- {`${t('BUSINESS_PHONE', 'Business Phone')}: ${order?.business?.phone
527
- }`}
528
- </OText>
529
- )}
530
-
531
- {!!order?.business?.address && (
532
- <OText
533
- style={{ marginBottom: 5 }}
534
- size={14}
535
- adjustsFontSizeToFit
536
- ellipsizeMode="tail"
537
- color={theme.colors.textGray}>
538
- {`${t('ADDRESS', 'Address')}: ${order?.business?.address}`}
539
- </OText>
540
- )}
541
-
542
- {!!order?.business?.address_notes && (
543
- <OText
544
- style={{ marginBottom: 5 }}
545
- size={14}
546
- adjustsFontSizeToFit
547
- ellipsizeMode="tail"
548
- color={theme.colors.textGray}>
549
- {`${t('SPECIAL_ADDRESS', 'Special Address')}: ${order?.business?.address_notes
550
- }`}
551
- </OText>
552
- )}
553
- </OrderBusiness>
554
-
555
- <OrderProducts>
556
- <OText
557
- style={{ marginBottom: 5 }}
558
- size={16}
559
- weight="600"
560
- color={theme.colors.textGray}>
561
- {t('ORDER_DETAILS', 'Order Details')}
562
- </OText>
563
-
564
- {order?.products.length &&
565
- order?.products.map((product: any, i: number) => (
566
- <View key={i}>
567
- <ContentInfo>
568
- <ProductItemAccordion
569
- key={product?.id || i}
570
- product={product}
571
- isClickableEvent
572
- />
573
- </ContentInfo>
574
- </View>
575
- ))}
576
- </OrderProducts>
577
-
578
- <OrderBill>
579
- <Table>
580
- <OText style={{ marginBottom: 5 }}>
581
- {t('SUBTOTAL', 'Subtotal')}
582
- </OText>
583
-
584
- <OText style={{ marginBottom: 5 }}>
585
- {parsePrice(
586
- order.tax_type === 1
587
- ? order?.summary?.subtotal + order?.summary?.tax ?? 0
588
- : order?.summary?.subtotal ?? 0,
589
- )}
590
- </OText>
591
- </Table>
592
-
593
- {order?.tax_type !== 1 && (
594
- <Table>
595
- <OText style={{ marginBottom: 5 }}>
596
- {t('TAX', 'Tax')}
597
- {`(${verifyDecimals(
598
- order?.summary?.tax_rate,
599
- parseNumber,
600
- )}%)`}
601
- </OText>
602
-
603
- <OText style={{ marginBottom: 5 }}>
604
- {parsePrice(order?.summary?.tax ?? 0)}
605
- </OText>
606
- </Table>
607
- )}
608
-
609
- {order?.summary?.discount > 0 && (
610
- <Table>
611
- {order?.offer_type === 1 ? (
612
- <OText style={{ marginBottom: 5 }}>
613
- <OText>{t('DISCOUNT', 'Discount')}</OText>
614
-
615
- <OText>
616
- {`(${verifyDecimals(order?.offer_rate, parsePrice)}%)`}
617
- </OText>
618
- </OText>
619
- ) : (
620
- <OText style={{ marginBottom: 5 }}>
621
- {t('DISCOUNT', 'Discount')}
622
- </OText>
623
- )}
624
-
625
- <OText style={{ marginBottom: 5 }}>
626
- - {parsePrice(order?.summary?.discount)}
627
- </OText>
628
- </Table>
629
- )}
630
-
631
- {order?.summary?.delivery_price > 0 && (
632
- <Table>
633
- <OText style={{ marginBottom: 5 }}>
634
- {t('DELIVERY_FEE', 'Delivery Fee')}
635
- </OText>
636
-
637
- <OText>{parsePrice(order?.summary?.delivery_price)}</OText>
638
- </Table>
639
- )}
640
-
641
- <Table>
642
- <OText style={{ marginBottom: 5 }}>
643
- {t('DRIVER_TIP', 'Driver tip')}
644
- {order?.summary?.driver_tip > 0 &&
645
- parseInt(configs?.driver_tip_type?.value, 10) === 2 &&
646
- !parseInt(configs?.driver_tip_use_custom?.value, 10) &&
647
- `(${verifyDecimals(
648
- order?.summary?.driver_tip,
649
- parseNumber,
650
- )}%)`}
651
- </OText>
652
-
653
- <OText style={{ marginBottom: 5 }}>
654
- {parsePrice(order?.summary?.driver_tip ?? 0)}
655
- </OText>
656
- </Table>
657
-
658
- {order?.summary?.service_fee > 0 && (
659
- <Table>
660
- <OText style={{ marginBottom: 5 }}>
661
- {t('SERVICE_FEE', 'Service Fee')}
662
- {`(${verifyDecimals(
663
- order?.summary?.service_fee,
664
- parseNumber,
665
- )}%)`}
666
- </OText>
667
-
668
- <OText style={{ marginBottom: 5 }}>
669
- {parsePrice(order?.summary?.service_fee)}
670
- </OText>
671
- </Table>
672
- )}
673
-
674
- <Total>
675
- <Table>
676
- <OText style={styles.textBold}>{t('TOTAL', 'Total')}</OText>
677
- <OText style={styles.textBold} color={theme.colors.primary}>
678
- {parsePrice(order?.summary?.total ?? 0)}
679
- </OText>
680
- </Table>
681
- </Total>
682
- </OrderBill>
683
- </OrderContent>
684
- <View style={{ height: 40 }} />
685
- </Content>
686
-
687
- <View style={{ marginBottom: 0 }}>
688
- <FloatingButton
689
- firstButtonClick={() => openPrint()}
690
- btnText={t('PRINT', 'Print')}
691
- color={theme.colors.green}
692
- widthButton={'100%'}
693
- isPadding
115
+ <View style={{ margin: 50 }}>
116
+ <View style={{ flexDirection: 'row' }}>
117
+ <Text style={{ width: 100 }}>Interface</Text>
118
+ <Picker
119
+ style={{ width: 200, marginLeft: 20, justifyContent: 'center' }}
120
+ selectedValue={printState.interfaceType}
121
+ onValueChange={(value) => {
122
+ setPrintState({ interfaceType: value });
123
+ }}>
124
+ <Picker.Item label='LAN' value={InterfaceType.Lan} />
125
+ <Picker.Item label='Bluetooth' value={InterfaceType.Bluetooth} />
126
+ <Picker.Item label='Bluetooth LE' value={InterfaceType.BluetoothLE} />
127
+ <Picker.Item label='USB' value={InterfaceType.Usb} />
128
+ </Picker>
129
+ </View>
130
+ <View style={{ flexDirection: 'row', marginTop: 30 }}>
131
+ <Text style={{ width: 100 }}>Identifier</Text>
132
+ <TextInput
133
+ style={{ width: 200, marginLeft: 20 }}
134
+ value={printState.identifier}
135
+ onChangeText={(value) => {
136
+ setPrintState({ identifier: value });
137
+ }}
694
138
  />
695
139
  </View>
696
- </>
140
+ <View style={{ width: 100, marginTop: 20 }}>
141
+ <Button
142
+ title="Print"
143
+ onPress={_onPressPrintButton}
144
+ />
145
+ </View>
146
+ </View>
697
147
  );
698
148
  };
149
+
150
+ export default HandleStarPrinter;