ordering-ui-react-native 0.21.35-test → 0.21.36-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.
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "ordering-ui-react-native",
|
|
3
|
-
"version": "0.21.
|
|
3
|
+
"version": "0.21.36-test",
|
|
4
4
|
"description": "Reusable components made in react native",
|
|
5
5
|
"main": "src/index.tsx",
|
|
6
6
|
"author": "ordering.inc",
|
|
@@ -45,6 +45,7 @@
|
|
|
45
45
|
"@react-native-firebase/analytics": "^12.9.3",
|
|
46
46
|
"@react-native-firebase/app": "^12.9.3",
|
|
47
47
|
"@react-native-google-signin/google-signin": "^7.0.1",
|
|
48
|
+
"@react-native-picker/picker": "^2.4.10",
|
|
48
49
|
"@react-navigation/drawer": "^5.10.2",
|
|
49
50
|
"@react-navigation/material-bottom-tabs": "^5.3.14",
|
|
50
51
|
"@react-navigation/native": "^5.7.6",
|
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
import React, { useState } from 'react';
|
|
2
2
|
import { OText, OIconButton } from '../shared';
|
|
3
|
-
import {
|
|
3
|
+
import {
|
|
4
|
+
StyleSheet, View, Platform, Alert
|
|
5
|
+
} from 'react-native';
|
|
4
6
|
import {
|
|
5
7
|
Content,
|
|
6
8
|
OrderCustomer,
|
|
@@ -21,12 +23,6 @@ import RNHTMLtoPDF from 'react-native-html-to-pdf';
|
|
|
21
23
|
import RNPrint from 'react-native-print';
|
|
22
24
|
import { useTheme } from 'styled-components/native';
|
|
23
25
|
import { ProductItemAccordion } from '../ProductItemAccordion';
|
|
24
|
-
import {
|
|
25
|
-
InterfaceType,
|
|
26
|
-
StarConnectionSettings,
|
|
27
|
-
StarXpandCommand,
|
|
28
|
-
StarPrinter
|
|
29
|
-
} from 'react-native-star-io10';
|
|
30
26
|
|
|
31
27
|
|
|
32
28
|
export const OrderSummary = ({ order, navigation, orderStatus, askBluetoothPermission, getPermissions, isGrantedPermissions, checkBluetoothPermission }: any) => {
|
|
@@ -39,11 +35,7 @@ export const OrderSummary = ({ order, navigation, orderStatus, askBluetoothPermi
|
|
|
39
35
|
const [state, setState] = useState({
|
|
40
36
|
selectedPrinter: { url: undefined },
|
|
41
37
|
});
|
|
42
|
-
|
|
43
|
-
interfaceType: InterfaceType.Bluetooth,
|
|
44
|
-
identifier: '00:11:62:00:00:00',
|
|
45
|
-
imageBase64: ''
|
|
46
|
-
});
|
|
38
|
+
|
|
47
39
|
|
|
48
40
|
const getFormattedSubOptionName = ({ quantity, name, position, price }: any) => {
|
|
49
41
|
if (name !== 'No') {
|
|
@@ -351,93 +343,8 @@ export const OrderSummary = ({ order, navigation, orderStatus, askBluetoothPermi
|
|
|
351
343
|
}
|
|
352
344
|
};
|
|
353
345
|
|
|
354
|
-
const
|
|
355
|
-
|
|
356
|
-
let settings = new StarConnectionSettings();
|
|
357
|
-
settings.interfaceType = printState.interfaceType;
|
|
358
|
-
settings.identifier = printState.identifier;
|
|
359
|
-
|
|
360
|
-
let printer = new StarPrinter(settings);
|
|
361
|
-
|
|
362
|
-
try {
|
|
363
|
-
let builder = new StarXpandCommand.StarXpandCommandBuilder();
|
|
364
|
-
builder.addDocument(new StarXpandCommand.DocumentBuilder()
|
|
365
|
-
.addPrinter(new StarXpandCommand.PrinterBuilder()
|
|
366
|
-
.actionPrintImage(new StarXpandCommand.Printer.ImageParameter("logo_01.png", 406))
|
|
367
|
-
.styleInternationalCharacter(StarXpandCommand.Printer.InternationalCharacterType.Usa)
|
|
368
|
-
.styleCharacterSpace(0)
|
|
369
|
-
.styleAlignment(StarXpandCommand.Printer.Alignment.Center)
|
|
370
|
-
.actionPrintText("Star Clothing Boutique\n" +
|
|
371
|
-
"123 Star Road\n" +
|
|
372
|
-
"City, State 12345\n" +
|
|
373
|
-
"\n")
|
|
374
|
-
.styleAlignment(StarXpandCommand.Printer.Alignment.Left)
|
|
375
|
-
.actionPrintText("Date:MM/DD/YYYY Time:HH:MM PM\n" +
|
|
376
|
-
"--------------------------------\n" +
|
|
377
|
-
"\n")
|
|
378
|
-
.actionPrintText("SKU Description Total\n" +
|
|
379
|
-
"300678566 PLAIN T-SHIRT 10.99\n" +
|
|
380
|
-
"300692003 BLACK DENIM 29.99\n" +
|
|
381
|
-
"300651148 BLUE DENIM 29.99\n" +
|
|
382
|
-
"300642980 STRIPED DRESS 49.99\n" +
|
|
383
|
-
"300638471 BLACK BOOTS 35.99\n" +
|
|
384
|
-
"\n" +
|
|
385
|
-
"Subtotal 156.95\n" +
|
|
386
|
-
"Tax 0.00\n" +
|
|
387
|
-
"--------------------------------\n")
|
|
388
|
-
.actionPrintText("Total ")
|
|
389
|
-
.add(new StarXpandCommand.PrinterBuilder()
|
|
390
|
-
.styleMagnification(new StarXpandCommand.MagnificationParameter(2, 2))
|
|
391
|
-
.actionPrintText(" $156.95\n")
|
|
392
|
-
)
|
|
393
|
-
.actionPrintText("--------------------------------\n" +
|
|
394
|
-
"\n" +
|
|
395
|
-
"Charge\n" +
|
|
396
|
-
"156.95\n" +
|
|
397
|
-
"Visa XXXX-XXXX-XXXX-0123\n" +
|
|
398
|
-
"\n")
|
|
399
|
-
.add(new StarXpandCommand.PrinterBuilder()
|
|
400
|
-
.styleInvert(true)
|
|
401
|
-
.actionPrintText("Refunds and Exchanges\n")
|
|
402
|
-
)
|
|
403
|
-
.actionPrintText("Within ")
|
|
404
|
-
.add(new StarXpandCommand.PrinterBuilder()
|
|
405
|
-
.styleUnderLine(true)
|
|
406
|
-
.actionPrintText("30 days")
|
|
407
|
-
)
|
|
408
|
-
.actionPrintText(" with receipt\n")
|
|
409
|
-
.actionPrintText("And tags attached\n" +
|
|
410
|
-
"\n")
|
|
411
|
-
.styleAlignment(StarXpandCommand.Printer.Alignment.Center)
|
|
412
|
-
.actionPrintBarcode(new StarXpandCommand.Printer.BarcodeParameter('0123456',
|
|
413
|
-
StarXpandCommand.Printer.BarcodeSymbology.Jan8)
|
|
414
|
-
.setBarDots(3)
|
|
415
|
-
.setBarRatioLevel(StarXpandCommand.Printer.BarcodeBarRatioLevel.Level0)
|
|
416
|
-
.setHeight(5)
|
|
417
|
-
.setPrintHri(true))
|
|
418
|
-
.actionFeedLine(1)
|
|
419
|
-
.actionPrintQRCode(new StarXpandCommand.Printer.QRCodeParameter('Hello World.\n')
|
|
420
|
-
.setModel(StarXpandCommand.Printer.QRCodeModel.Model2)
|
|
421
|
-
.setLevel(StarXpandCommand.Printer.QRCodeLevel.L)
|
|
422
|
-
.setCellSize(8))
|
|
423
|
-
.actionCut(StarXpandCommand.Printer.CutType.Partial)
|
|
424
|
-
)
|
|
425
|
-
);
|
|
426
|
-
|
|
427
|
-
let commands = await builder.getCommands();
|
|
428
|
-
|
|
429
|
-
await printer.open();
|
|
430
|
-
await printer.print(commands);
|
|
431
|
-
|
|
432
|
-
console.log(`Success`);
|
|
433
|
-
}
|
|
434
|
-
catch (error) {
|
|
435
|
-
console.log(`Error: ${String(error)}`);
|
|
436
|
-
}
|
|
437
|
-
finally {
|
|
438
|
-
await printer.close();
|
|
439
|
-
await printer.dispose();
|
|
440
|
-
}
|
|
346
|
+
const openPrint = () => {
|
|
347
|
+
navigation.navigate('HandleStarPrinter')
|
|
441
348
|
}
|
|
442
349
|
|
|
443
350
|
return (
|
|
@@ -779,7 +686,7 @@ export const OrderSummary = ({ order, navigation, orderStatus, askBluetoothPermi
|
|
|
779
686
|
|
|
780
687
|
<View style={{ marginBottom: 0 }}>
|
|
781
688
|
<FloatingButton
|
|
782
|
-
firstButtonClick={() =>
|
|
689
|
+
firstButtonClick={() => openPrint()}
|
|
783
690
|
btnText={t('PRINT', 'Print')}
|
|
784
691
|
color={theme.colors.green}
|
|
785
692
|
widthButton={'100%'}
|
|
@@ -0,0 +1,698 @@
|
|
|
1
|
+
import React, { useState } from 'react';
|
|
2
|
+
import { OText, OIconButton } from '../shared';
|
|
3
|
+
import {
|
|
4
|
+
StyleSheet, View, Platform, Alert
|
|
5
|
+
} from 'react-native';
|
|
6
|
+
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 = ` ${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/> ${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
|
+
};
|
|
303
|
+
|
|
304
|
+
const printPDF = async () => {
|
|
305
|
+
const results = await RNHTMLtoPDF.convert({
|
|
306
|
+
html: orderSummary(),
|
|
307
|
+
fileName: 'test',
|
|
308
|
+
base64: true,
|
|
309
|
+
});
|
|
310
|
+
|
|
311
|
+
await RNPrint.print({
|
|
312
|
+
filePath: results.filePath || '',
|
|
313
|
+
jobName: `${t('ORDER_NO', `Order no. ${order.id}`)}`,
|
|
314
|
+
});
|
|
315
|
+
};
|
|
316
|
+
|
|
317
|
+
const styles = StyleSheet.create({
|
|
318
|
+
btnBackArrow: {
|
|
319
|
+
maxWidth: 40,
|
|
320
|
+
height: 25,
|
|
321
|
+
},
|
|
322
|
+
textBold: {
|
|
323
|
+
fontWeight: '600',
|
|
324
|
+
},
|
|
325
|
+
});
|
|
326
|
+
|
|
327
|
+
const handlePrint = async () => {
|
|
328
|
+
if (Platform.OS === 'ios') {
|
|
329
|
+
silentPrint()
|
|
330
|
+
return
|
|
331
|
+
}
|
|
332
|
+
const _permissions = await getPermissions()
|
|
333
|
+
|
|
334
|
+
if (!isGrantedPermissions) {
|
|
335
|
+
checkBluetoothPermission()
|
|
336
|
+
}
|
|
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
|
+
}
|
|
343
|
+
}
|
|
344
|
+
};
|
|
345
|
+
|
|
346
|
+
const openPrint = () => {
|
|
347
|
+
navigation.navigate('HandleStarPrinter')
|
|
348
|
+
}
|
|
349
|
+
|
|
350
|
+
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
|
|
694
|
+
/>
|
|
695
|
+
</View>
|
|
696
|
+
</>
|
|
697
|
+
);
|
|
698
|
+
};
|