-
Notifications
You must be signed in to change notification settings - Fork 0
/
CDEKWidget.tsx
92 lines (81 loc) · 2.79 KB
/
CDEKWidget.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
'use client';
import { useEffect, useRef, useCallback } from 'react';
import { Button } from '../shared/ui/button';
interface CDEKWidgetType {
open: () => void; // Method to open the widget
}
const CdekWidget = (): JSX.Element => {
// Create a ref to store the widget instance
const widget = useRef<CDEKWidgetType | null>(null);
// Function to log errors
const logError = (message: string, error: any) => {
console.error(message, error);
};
// Function to initialize the CDEK widget
const initializeWidget = useCallback(() => {
if (window.CDEKWidget) {
try {
widget.current = new window.CDEKWidget(getWidgetConfig());
} catch (error) {
logError('Error initializing CDEK Widget:', error);
}
} else {
logError('CDEK Widget is not available', null);
}
}, []);
// Widget configuration
const getWidgetConfig = () => ({
apiKey: process.env.NEXT_PUBLIC_YANDEX_MAPS_API_KEY, // API key for Yandex Maps
canChoose: true, // Ability to choose the pickup point
servicePath: 'http://localhost:8000/service.php', // Path to the PHP file
hideFilters: {
have_cashless: false, // Control visibility of the "Cashless Payment" filter
have_cash: false, // Control visibility of the "Cash Payment" filter
is_dressing_room: false, // Control visibility of the "Dressing Room Available" filter
type: false, // Display the "Pickup Point Type" filter
},
debug: true, // Enable debug information output
defaultLocation: 'Moscow, Sh. Staromaryinskoye, 6, Bldg. 1', // Default address
lang: 'rus', // Widget language
hideDeliveryOptions: {
office: false, // Ability to choose delivery to the pickup point
door: true, // Hide delivery to the door
},
popup: true, // Open the widget in a modal window
// Function called after the widget finishes loading
onReady: () => console.log('Widget is ready'),
// Function called after the customer selects a pickup point
onChoose: (delivery: string, rate: string, address: string) => {
console.log(delivery, rate, address);
},
});
useEffect(() => {
if (document.readyState === 'complete') {
initializeWidget();
} else {
window.addEventListener('load', initializeWidget);
}
return () => {
window.removeEventListener('load', initializeWidget);
};
}, [initializeWidget]);
return (
<div className="widget-container">
<Button
className="font-medium text-base"
onClick={() => {
if (widget.current) {
try {
widget.current.open();
} catch (error) {
logError('Error opening CDEK Widget:', error);
}
}
}}
>
Open CDEK widget
</Button>
</div>
);
};
export default CdekWidget;