sprint-asia-custom-component 0.1.83 → 0.1.84
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/dist/index.js +48 -6
- package/package.json +1 -1
- package/src/components/customphone/index.js +285 -239
- package/src/components/description/index.js +39 -22
- package/src/templates/index.js +13 -6
package/dist/index.js
CHANGED
|
@@ -23858,7 +23858,8 @@
|
|
|
23858
23858
|
textColor = "default",
|
|
23859
23859
|
subtitle,
|
|
23860
23860
|
linkSubtitle,
|
|
23861
|
-
onClickSubtitle
|
|
23861
|
+
onClickSubtitle,
|
|
23862
|
+
image
|
|
23862
23863
|
}) => {
|
|
23863
23864
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
23864
23865
|
className: "w-full"
|
|
@@ -23878,7 +23879,15 @@
|
|
|
23878
23879
|
}, subtitle), linkSubtitle && /*#__PURE__*/React__default["default"].createElement("p", {
|
|
23879
23880
|
className: "m-0 text-sm font-semibold text-primary500 cursor-pointer",
|
|
23880
23881
|
onClick: onClickSubtitle
|
|
23881
|
-
}, linkSubtitle))
|
|
23882
|
+
}, linkSubtitle)), image && (typeof image === "string" ? /*#__PURE__*/React__default["default"].createElement("img", {
|
|
23883
|
+
src: image,
|
|
23884
|
+
alt: "voucher-img",
|
|
23885
|
+
className: "w-52 h-52 object-contain rounded-lg mt-1"
|
|
23886
|
+
}) : /*#__PURE__*/React__default["default"].createElement("img", {
|
|
23887
|
+
src: URL.createObjectURL(image),
|
|
23888
|
+
alt: "voucher-img",
|
|
23889
|
+
className: "w-52 h-52 object-contain rounded-lg mt-1"
|
|
23890
|
+
})));
|
|
23882
23891
|
};
|
|
23883
23892
|
|
|
23884
23893
|
const DescriptionFile = ({
|
|
@@ -48168,7 +48177,11 @@
|
|
|
48168
48177
|
|
|
48169
48178
|
const CustomPhone = ({
|
|
48170
48179
|
mode = "Empty",
|
|
48171
|
-
data
|
|
48180
|
+
data,
|
|
48181
|
+
voucherTitle = "Happy Birthday, Congratulation!",
|
|
48182
|
+
voucherMessage = "You've won a Voucher Belanja MAP Rp100.000 as a special birthday gift from us. Enjoy your day with extra joy!",
|
|
48183
|
+
voucherBackgroundType = "color",
|
|
48184
|
+
voucherBackground
|
|
48172
48185
|
}) => {
|
|
48173
48186
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
48174
48187
|
style: {
|
|
@@ -48306,8 +48319,37 @@
|
|
|
48306
48319
|
style: {
|
|
48307
48320
|
height: "450px"
|
|
48308
48321
|
}
|
|
48322
|
+
}, voucherBackgroundType === "color" && /*#__PURE__*/React__default["default"].createElement("div", {
|
|
48323
|
+
className: "w-full h-54 pt-6 pb-4",
|
|
48324
|
+
style: {
|
|
48325
|
+
background: voucherBackground || "black"
|
|
48326
|
+
}
|
|
48309
48327
|
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
48310
|
-
className: "
|
|
48328
|
+
className: "bg-white rounded-md p-3 mx-3 mt-12"
|
|
48329
|
+
}, /*#__PURE__*/React__default["default"].createElement("p", {
|
|
48330
|
+
className: "font-semibold text-sm"
|
|
48331
|
+
}, "Voucher Belanja MAP"), /*#__PURE__*/React__default["default"].createElement("p", {
|
|
48332
|
+
className: "font-semibold text-sm"
|
|
48333
|
+
}, "Rp 100.000"), /*#__PURE__*/React__default["default"].createElement("p", {
|
|
48334
|
+
className: "font-normal text-neutral100 mt-1 text-xs",
|
|
48335
|
+
style: {
|
|
48336
|
+
fontSize: "10px"
|
|
48337
|
+
}
|
|
48338
|
+
}, "Order ID: 12345"), /*#__PURE__*/React__default["default"].createElement("div", {
|
|
48339
|
+
className: "flex justify-between items-center"
|
|
48340
|
+
}, /*#__PURE__*/React__default["default"].createElement("p", {
|
|
48341
|
+
className: "text-xs",
|
|
48342
|
+
style: {
|
|
48343
|
+
fontSize: "10px"
|
|
48344
|
+
}
|
|
48345
|
+
}, "21 Jan 2022 - 22 Mar 2023"), /*#__PURE__*/React__default["default"].createElement("div", {
|
|
48346
|
+
className: "w-12 h-12 rounded-full bg-primary500"
|
|
48347
|
+
})))), voucherBackgroundType === "image" && /*#__PURE__*/React__default["default"].createElement("div", {
|
|
48348
|
+
className: "w-full h-54 pt-6 pb-4",
|
|
48349
|
+
style: {
|
|
48350
|
+
backgroundImage: `url(${voucherBackground})`,
|
|
48351
|
+
backgroundSize: "cover"
|
|
48352
|
+
}
|
|
48311
48353
|
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
48312
48354
|
className: "bg-white rounded-md p-3 mx-3 mt-12"
|
|
48313
48355
|
}, /*#__PURE__*/React__default["default"].createElement("p", {
|
|
@@ -48332,12 +48374,12 @@
|
|
|
48332
48374
|
className: "bg-white p-3"
|
|
48333
48375
|
}, /*#__PURE__*/React__default["default"].createElement("p", {
|
|
48334
48376
|
className: "text-md font-semibold"
|
|
48335
|
-
},
|
|
48377
|
+
}, voucherTitle), /*#__PURE__*/React__default["default"].createElement("p", {
|
|
48336
48378
|
className: "text-neutral300",
|
|
48337
48379
|
style: {
|
|
48338
48380
|
fontSize: "10px"
|
|
48339
48381
|
}
|
|
48340
|
-
},
|
|
48382
|
+
}, voucherMessage)), /*#__PURE__*/React__default["default"].createElement("div", {
|
|
48341
48383
|
className: "bg-neutral20 p-3 pb-16"
|
|
48342
48384
|
}, /*#__PURE__*/React__default["default"].createElement("p", {
|
|
48343
48385
|
className: "text-xs font-semibold"
|
package/package.json
CHANGED
|
@@ -1,262 +1,308 @@
|
|
|
1
|
-
import React from
|
|
1
|
+
import React from "react";
|
|
2
2
|
import { IoIosBatteryFull, IoIosWifi, IoMdVolumeHigh } from "react-icons/io";
|
|
3
|
-
import LogoPrezentHidden from "../../assets/images/logo_prezent_hidden.png"
|
|
4
|
-
import LogoEmptyVoucher from "../../assets/images/logo_empty_voucher.png"
|
|
5
|
-
import {
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
IoStarOutline,
|
|
17
|
-
IoReturnUpBackSharp,
|
|
18
|
-
IoChevronDownOutline,
|
|
19
|
-
IoReturnUpForwardSharp ,
|
|
20
|
-
IoAdd
|
|
3
|
+
import LogoPrezentHidden from "../../assets/images/logo_prezent_hidden.png";
|
|
4
|
+
import LogoEmptyVoucher from "../../assets/images/logo_empty_voucher.png";
|
|
5
|
+
import { IoIosCamera, IoIosAppstore, IoIosMic, IoIosArrowBack } from "react-icons/io";
|
|
6
|
+
import {
|
|
7
|
+
IoMailOutline,
|
|
8
|
+
IoTrashOutline,
|
|
9
|
+
IoEllipsisHorizontal,
|
|
10
|
+
IoArchiveOutline,
|
|
11
|
+
IoStarOutline,
|
|
12
|
+
IoReturnUpBackSharp,
|
|
13
|
+
IoChevronDownOutline,
|
|
14
|
+
IoReturnUpForwardSharp,
|
|
15
|
+
IoAdd,
|
|
21
16
|
} from "react-icons/io5";
|
|
22
17
|
import { PiMicrophone } from "react-icons/pi";
|
|
23
18
|
import { MdOutlineLabelImportant } from "react-icons/md";
|
|
24
19
|
import { PiCamera } from "react-icons/pi";
|
|
25
20
|
import { BsSticky } from "react-icons/bs";
|
|
26
21
|
import { BsTelephonePlus } from "react-icons/bs";
|
|
27
|
-
import BackgroundWA from "../../assets/images/background_whatsapp.png"
|
|
28
|
-
import PrimaryButton from
|
|
22
|
+
import BackgroundWA from "../../assets/images/background_whatsapp.png";
|
|
23
|
+
import PrimaryButton from "../button/primarybutton";
|
|
29
24
|
|
|
30
|
-
const CustomPhone = ({
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
25
|
+
const CustomPhone = ({
|
|
26
|
+
mode = "Empty",
|
|
27
|
+
data,
|
|
28
|
+
voucherTitle = "Happy Birthday, Congratulation!",
|
|
29
|
+
voucherMessage = "You've won a Voucher Belanja MAP Rp100.000 as a special birthday gift from us. Enjoy your day with extra joy!",
|
|
30
|
+
voucherBackgroundType = "color",
|
|
31
|
+
voucherBackground,
|
|
32
|
+
}) => {
|
|
34
33
|
return (
|
|
35
|
-
<div
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
34
|
+
<div
|
|
35
|
+
style={{ width: "250px", height: "500px", border: "10px solid #000", position: "relative", borderRadius: "25px" }}
|
|
36
|
+
>
|
|
37
|
+
<div className="flex justify-between">
|
|
38
|
+
<p className="absolute left-0 pt-1 pl-2 text-xs text-black ml-2">09.41</p>
|
|
39
|
+
<div
|
|
40
|
+
style={{
|
|
41
|
+
width: "110px",
|
|
42
|
+
height: "20px",
|
|
43
|
+
borderRadius: "0px 0px 10px 10px",
|
|
44
|
+
backgroundColor: "#000",
|
|
45
|
+
position: "absolute",
|
|
46
|
+
top: "0px",
|
|
47
|
+
left: "calc(50% - 55px)",
|
|
48
|
+
zIndex: 1,
|
|
49
|
+
}}
|
|
50
|
+
/>
|
|
51
|
+
<div className="absolute right-0 pt-1 pr-2">
|
|
52
|
+
<div className="flex">
|
|
53
|
+
<IoMdVolumeHigh className="w-3 h-3 text-black my-1" />
|
|
54
|
+
<IoIosWifi className="w-3 h-3 text-black m-1" />
|
|
55
|
+
<IoIosBatteryFull className="w-3 h-3 text-black my-1" />
|
|
56
|
+
</div>
|
|
57
|
+
</div>
|
|
58
|
+
</div>
|
|
59
|
+
<div className="w-full h-full bg-white rounded-xl overflow-hidden">
|
|
60
|
+
{mode === "Empty" && (
|
|
61
|
+
<div className="h-full w-full bg-white flex justify-center items-center text-center">
|
|
62
|
+
<div>
|
|
63
|
+
<div className="flex justify-center">
|
|
64
|
+
<img src={LogoEmptyVoucher} className="w-16 h-16 mb-2" />
|
|
65
|
+
</div>
|
|
66
|
+
<div className="w-32">
|
|
67
|
+
<p className="font-semibold text-xs">Please click voucher!</p>
|
|
68
|
+
<p style={{ fontSize: "8px" }} className="text-neutral300 p-1">
|
|
69
|
+
Click on any voucher in the table to preview how it will appear when you use it.
|
|
70
|
+
</p>
|
|
71
|
+
</div>
|
|
72
|
+
</div>
|
|
73
|
+
</div>
|
|
74
|
+
)}
|
|
75
|
+
{mode === "Whatsapp" && (
|
|
76
|
+
<div className="h-screen">
|
|
77
|
+
<div className="w-full bg-neutral20 pt-6 px-2 pb-1 flex justify-between items-center">
|
|
78
|
+
<div className="flex items-center">
|
|
79
|
+
<IoIosArrowBack className="w-4 h-4 text-info500 mr-1" />
|
|
80
|
+
<img src={LogoPrezentHidden} className="rounded-full w-5 h-5 bg-white mx-2 p-0.5" />
|
|
81
|
+
<div>
|
|
82
|
+
<p className="text-xs text-bold">Prezent</p>
|
|
83
|
+
<p className="text-neutral80" style={{ fontSize: "8px" }}>
|
|
84
|
+
Online
|
|
85
|
+
</p>
|
|
55
86
|
</div>
|
|
87
|
+
</div>
|
|
88
|
+
<BsTelephonePlus className="w-4 h-4 text-info500" />
|
|
56
89
|
</div>
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
<
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
<div className='w-32'>
|
|
67
|
-
<p className='font-semibold text-xs'>Please click voucher!</p>
|
|
68
|
-
<p style={{fontSize:"8px"}} className='text-neutral300 p-1'>Click on any voucher in the table to preview how it will appear when you use it.</p>
|
|
69
|
-
</div>
|
|
70
|
-
</div>
|
|
90
|
+
<div className="relative w-full h-screen">
|
|
91
|
+
<img src={BackgroundWA} className="absolute top-0 left-0 w-full h-full object-cover" />
|
|
92
|
+
<div className="relative z-10 px-3 py-2">
|
|
93
|
+
<div className="flex justify-center">
|
|
94
|
+
<div className="bg-info50 px-6 rounded w-fit">
|
|
95
|
+
<p style={{ fontSize: "8px" }} className="text-neutral900">
|
|
96
|
+
Today
|
|
97
|
+
</p>
|
|
98
|
+
</div>
|
|
71
99
|
</div>
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
100
|
+
<div className="bg-warning100 p-1.5 rounded mx-6 my-2 text-center">
|
|
101
|
+
<p style={{ fontSize: "8px" }} className="text-neutral900">
|
|
102
|
+
Messages and call are end-to-end encrypted. No one outside of this chat, not even Whatsapp, can read
|
|
103
|
+
or listen to them. Tap to learn more.
|
|
104
|
+
</p>
|
|
105
|
+
</div>
|
|
106
|
+
<div className="bg-white py-1 px-2 rounded-md w-32 drop-shadow-2xl">
|
|
107
|
+
<p style={{ fontSize: "8px", wordBreak: "break-word" }} className="text-neutral5">
|
|
108
|
+
{data}
|
|
109
|
+
</p>
|
|
110
|
+
<div className="flex justify-end">
|
|
111
|
+
<p style={{ fontSize: "8px" }} className="text-neutral80">
|
|
112
|
+
9.41 AM
|
|
113
|
+
</p>
|
|
114
|
+
</div>
|
|
115
|
+
</div>
|
|
116
|
+
</div>
|
|
117
|
+
</div>
|
|
118
|
+
<div className="w-full bg-neutral20 absolute bottom-0 p-2 rounded-md-lb rounded-b-xl">
|
|
119
|
+
<div className="flex justify-between mb-2 items-center">
|
|
120
|
+
<IoAdd className="w-5 h-5 text-info500" />
|
|
121
|
+
<div className="w-32 py-1 border border-neutral80 rounded-full flex justify-between items-center px-2">
|
|
122
|
+
<p className="text-xs text-neutral50"></p>
|
|
123
|
+
<BsSticky className="w-3 h-3 text-info500" />
|
|
124
|
+
</div>
|
|
125
|
+
<PiCamera className="w-5 h-5 text-info500" />
|
|
126
|
+
<PiMicrophone className="w-5 h-5 text-info500" />
|
|
127
|
+
</div>
|
|
128
|
+
<div className="flex justify-center mt-1">
|
|
129
|
+
<div className="w-32 h-1 bg-black rounded-full"></div>
|
|
130
|
+
</div>
|
|
131
|
+
</div>
|
|
132
|
+
</div>
|
|
133
|
+
)}
|
|
134
|
+
{mode === "Voucher" && (
|
|
135
|
+
<div className="h-screen">
|
|
136
|
+
<div className="overflow-y-auto no-scrollbar" style={{ height: "450px" }}>
|
|
137
|
+
{voucherBackgroundType === "color" && (
|
|
138
|
+
<div className="w-full h-54 pt-6 pb-4" style={{ background: voucherBackground || "black" }}>
|
|
139
|
+
<div className="bg-white rounded-md p-3 mx-3 mt-12">
|
|
140
|
+
<p className="font-semibold text-sm">Voucher Belanja MAP</p>
|
|
141
|
+
<p className="font-semibold text-sm">Rp 100.000</p>
|
|
142
|
+
<p className="font-normal text-neutral100 mt-1 text-xs" style={{ fontSize: "10px" }}>
|
|
143
|
+
Order ID: 12345
|
|
144
|
+
</p>
|
|
145
|
+
<div className="flex justify-between items-center">
|
|
146
|
+
<p className="text-xs" style={{ fontSize: "10px" }}>
|
|
147
|
+
21 Jan 2022 - 22 Mar 2023
|
|
148
|
+
</p>
|
|
149
|
+
<div className="w-12 h-12 rounded-full bg-primary500"></div>
|
|
122
150
|
</div>
|
|
151
|
+
</div>
|
|
123
152
|
</div>
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
<div
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
<p className='text-neutral300' style={{ fontSize:"10px"}}>You`ve won a Voucher Belanja MAP Rp100.000 as a special birthday gift from us. Enjoy your day with extra joy!</p>
|
|
143
|
-
</div>
|
|
144
|
-
<div className='bg-neutral20 p-3 pb-16'>
|
|
145
|
-
<p className='text-xs font-semibold'>Description</p>
|
|
146
|
-
<p className='text-neutral300 mt-2' style={{ fontSize:"10px"}}>
|
|
147
|
-
MAP Gift Voucher is the official gift voucher of PT Mitra Adiperkasa Tbk. Accepted in2 retail stores managed under MAP Group Indonesia, with a wide range of product brands. It is a perfect gift for Birthdays, Annivesaries, Valentines, Holidays, Festivals
|
|
148
|
-
</p>
|
|
149
|
-
</div>
|
|
150
|
-
<div className='w-12 h-12 rounded-full bg-primary500 absolute bottom-0 right-0 mb-12 mr-2'>
|
|
151
|
-
</div>
|
|
152
|
-
<div className='w-full bg-white absolute bottom-0 p-2 rounded-md-lb rounded-b-xl'>
|
|
153
|
-
<PrimaryButton title='Redeem Voucher' type='full' size='small'/>
|
|
154
|
-
</div>
|
|
153
|
+
)}
|
|
154
|
+
|
|
155
|
+
{voucherBackgroundType === "image" && (
|
|
156
|
+
<div
|
|
157
|
+
className="w-full h-54 pt-6 pb-4"
|
|
158
|
+
style={{ backgroundImage: `url(${voucherBackground})`, backgroundSize: "cover" }}
|
|
159
|
+
>
|
|
160
|
+
<div className="bg-white rounded-md p-3 mx-3 mt-12">
|
|
161
|
+
<p className="font-semibold text-sm">Voucher Belanja MAP</p>
|
|
162
|
+
<p className="font-semibold text-sm">Rp 100.000</p>
|
|
163
|
+
<p className="font-normal text-neutral100 mt-1 text-xs" style={{ fontSize: "10px" }}>
|
|
164
|
+
Order ID: 12345
|
|
165
|
+
</p>
|
|
166
|
+
<div className="flex justify-between items-center">
|
|
167
|
+
<p className="text-xs" style={{ fontSize: "10px" }}>
|
|
168
|
+
21 Jan 2022 - 22 Mar 2023
|
|
169
|
+
</p>
|
|
170
|
+
<div className="w-12 h-12 rounded-full bg-primary500"></div>
|
|
155
171
|
</div>
|
|
172
|
+
</div>
|
|
173
|
+
</div>
|
|
174
|
+
)}
|
|
175
|
+
<div className="bg-white p-3">
|
|
176
|
+
<p className="text-md font-semibold">{voucherTitle}</p>
|
|
177
|
+
<p className="text-neutral300" style={{ fontSize: "10px" }}>
|
|
178
|
+
{voucherMessage}
|
|
179
|
+
</p>
|
|
180
|
+
</div>
|
|
181
|
+
<div className="bg-neutral20 p-3 pb-16">
|
|
182
|
+
<p className="text-xs font-semibold">Description</p>
|
|
183
|
+
<p className="text-neutral300 mt-2" style={{ fontSize: "10px" }}>
|
|
184
|
+
MAP Gift Voucher is the official gift voucher of PT Mitra Adiperkasa Tbk. Accepted in2 retail stores
|
|
185
|
+
managed under MAP Group Indonesia, with a wide range of product brands. It is a perfect gift for
|
|
186
|
+
Birthdays, Annivesaries, Valentines, Holidays, Festivals
|
|
187
|
+
</p>
|
|
188
|
+
</div>
|
|
189
|
+
<div className="w-12 h-12 rounded-full bg-primary500 absolute bottom-0 right-0 mb-12 mr-2"></div>
|
|
190
|
+
<div className="w-full bg-white absolute bottom-0 p-2 rounded-md-lb rounded-b-xl">
|
|
191
|
+
<PrimaryButton title="Redeem Voucher" type="full" size="small" />
|
|
192
|
+
</div>
|
|
193
|
+
</div>
|
|
194
|
+
</div>
|
|
195
|
+
)}
|
|
196
|
+
{mode === "Email" && (
|
|
197
|
+
<div className="h-screen">
|
|
198
|
+
<div className="overflow-y-auto no-scrollbar" style={{ height: "450px" }}>
|
|
199
|
+
<div className="w-full bg-white pt-6 px-2 flex justify-between">
|
|
200
|
+
<IoIosArrowBack className="w-4 h-4 text-neutral200 mt-2" />
|
|
201
|
+
<div className="flex">
|
|
202
|
+
<IoArchiveOutline className="w-3 h-3 text-neutral200 mt-2 mr-3" />
|
|
203
|
+
<IoTrashOutline className="w-3 h-3 text-neutral200 mt-2 mr-3" />
|
|
204
|
+
<IoMailOutline className="w-3 h-3 text-black mt-2 mr-3" />
|
|
205
|
+
<IoEllipsisHorizontal className="w-3 h-3 text-neutral200 mt-2" />
|
|
206
|
+
</div>
|
|
207
|
+
</div>
|
|
208
|
+
<div className="w-full bg-white pt-2 px-2 flex justify-between">
|
|
209
|
+
<div className="flex items-center ml-1">
|
|
210
|
+
<p className="text-sm">Title Email</p>
|
|
211
|
+
<MdOutlineLabelImportant className="w-4 h-4 text-primary400 ml-2" />
|
|
212
|
+
<div className="py-0.5 px-2 bg-neutral30 rounded-sm ml-1">
|
|
213
|
+
<p style={{ fontSize: "8px" }}>Inbox</p>
|
|
214
|
+
</div>
|
|
156
215
|
</div>
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
<div className=
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
<div className='w-full bg-white pt-2 px-2 flex justify-between'>
|
|
172
|
-
<div className='flex items-center ml-1'>
|
|
173
|
-
<p className='text-sm'>Title Email</p>
|
|
174
|
-
<MdOutlineLabelImportant className='w-4 h-4 text-primary400 ml-2'/>
|
|
175
|
-
<div className='py-0.5 px-2 bg-neutral30 rounded-sm ml-1'>
|
|
176
|
-
<p style={{fontSize:"8px"}}>Inbox</p>
|
|
177
|
-
</div>
|
|
178
|
-
</div>
|
|
179
|
-
<IoStarOutline className='w-4 h-4 text-neutral80 mr-2'/>
|
|
180
|
-
</div>
|
|
181
|
-
<div className='w-full bg-white pt-2 px-2 flex justify-between items-center'>
|
|
182
|
-
<div className='flex items-center ml-1'>
|
|
183
|
-
<img src={LogoPrezentHidden} className='rounded-full w-5 h-5 bg-white'/>
|
|
184
|
-
<div className='ml-1'>
|
|
185
|
-
<p className="font-semibold" style={{fontSize:"10px"}}>Prezent@sprint.id</p>
|
|
186
|
-
<div className='flex items-center'>
|
|
187
|
-
<p className="text-neutral80" style={{fontSize:"8px"}}>to me</p>
|
|
188
|
-
<IoChevronDownOutline className='w-3 h-3 text-neutral80 ml-0.5'/>
|
|
189
|
-
</div>
|
|
190
|
-
</div>
|
|
191
|
-
</div>
|
|
192
|
-
<div className='flex items-center mr-3'>
|
|
193
|
-
<IoReturnUpBackSharp className='w-3 h-3 text-black mr-3'/>
|
|
194
|
-
<IoEllipsisHorizontal className='w-3 h-3 text-neutral200'/>
|
|
195
|
-
</div>
|
|
196
|
-
</div>
|
|
197
|
-
<div className='w-full bg-white px-2'>
|
|
198
|
-
<div className="p-4" style={{fontSize:"8px"}}>
|
|
199
|
-
<p>{data}</p>
|
|
200
|
-
</div>
|
|
201
|
-
</div>
|
|
202
|
-
<div className='w-full bg-white absolute bottom-0 p-2 rounded-md-lb rounded-b-xl'>
|
|
203
|
-
<div>
|
|
204
|
-
<div className='flex justify-center'>
|
|
205
|
-
<div className='border border-neutral300 flex justify-center items-center w-24 py-1 m-1 rounded-sm'>
|
|
206
|
-
<IoReturnUpBackSharp className='w-3 h-3 text-neutral300'/>
|
|
207
|
-
<p className='ml-1 text-neutral300' style={{fontSize:"10px"}}>Reply</p>
|
|
208
|
-
</div>
|
|
209
|
-
<div className='border flex justify-center items-center w-24 py-1 m-1 rounded-sm'>
|
|
210
|
-
<p className='mr-1 text-neutral300' style={{fontSize:"10px"}}>Forward</p>
|
|
211
|
-
<IoReturnUpForwardSharp className='w-3 h-3 text-neutral300'/>
|
|
212
|
-
</div>
|
|
213
|
-
</div>
|
|
214
|
-
</div>
|
|
215
|
-
<div className='flex justify-center'>
|
|
216
|
-
<div className='w-32 h-1 bg-black rounded-full'></div>
|
|
217
|
-
</div>
|
|
218
|
-
</div>
|
|
216
|
+
<IoStarOutline className="w-4 h-4 text-neutral80 mr-2" />
|
|
217
|
+
</div>
|
|
218
|
+
<div className="w-full bg-white pt-2 px-2 flex justify-between items-center">
|
|
219
|
+
<div className="flex items-center ml-1">
|
|
220
|
+
<img src={LogoPrezentHidden} className="rounded-full w-5 h-5 bg-white" />
|
|
221
|
+
<div className="ml-1">
|
|
222
|
+
<p className="font-semibold" style={{ fontSize: "10px" }}>
|
|
223
|
+
Prezent@sprint.id
|
|
224
|
+
</p>
|
|
225
|
+
<div className="flex items-center">
|
|
226
|
+
<p className="text-neutral80" style={{ fontSize: "8px" }}>
|
|
227
|
+
to me
|
|
228
|
+
</p>
|
|
229
|
+
<IoChevronDownOutline className="w-3 h-3 text-neutral80 ml-0.5" />
|
|
219
230
|
</div>
|
|
231
|
+
</div>
|
|
232
|
+
</div>
|
|
233
|
+
<div className="flex items-center mr-3">
|
|
234
|
+
<IoReturnUpBackSharp className="w-3 h-3 text-black mr-3" />
|
|
235
|
+
<IoEllipsisHorizontal className="w-3 h-3 text-neutral200" />
|
|
236
|
+
</div>
|
|
237
|
+
</div>
|
|
238
|
+
<div className="w-full bg-white px-2">
|
|
239
|
+
<div className="p-4" style={{ fontSize: "8px" }}>
|
|
240
|
+
<p>{data}</p>
|
|
220
241
|
</div>
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
<div className=
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
<img src={LogoPrezentHidden} className='rounded-full w-8 h-8 bg-white'/>
|
|
231
|
-
</div>
|
|
232
|
-
<p className='mb-1' style={{fontSize:"10px"}}>Prezent</p>
|
|
233
|
-
</div>
|
|
234
|
-
<IoIosArrowBack className='w-5 h-5 text-neutral20 mt-2'/>
|
|
235
|
-
</div>
|
|
236
|
-
<div className='w-full bg-white px-2 py-4'>
|
|
237
|
-
<div className='w-40 bg-neutral30 rounded-lg p-2' style={{fontSize:"8px"}}>
|
|
238
|
-
<p>{data}</p>
|
|
239
|
-
</div>
|
|
240
|
-
</div>
|
|
241
|
-
<div className='w-full bg-white absolute bottom-0 p-2 rounded-md-lb rounded-b-xl'>
|
|
242
|
-
<div className='flex justify-between mb-2 items-center'>
|
|
243
|
-
<IoIosCamera className='w-5 h-5 text-neutral80'/>
|
|
244
|
-
<IoIosAppstore className='w-5 h-5 text-neutral80'/>
|
|
245
|
-
<div className='w-40 py-1 border border-neutral80 rounded-full flex justify-between items-center px-2'>
|
|
246
|
-
<p className='text-xs text-neutral50'>iMessage</p>
|
|
247
|
-
<IoIosMic className='w-4 h-4 text-neutral80'/>
|
|
248
|
-
</div>
|
|
249
|
-
</div>
|
|
250
|
-
<div className='flex justify-center'>
|
|
251
|
-
<div className='w-32 h-1 bg-black rounded-full'></div>
|
|
252
|
-
</div>
|
|
253
|
-
</div>
|
|
242
|
+
</div>
|
|
243
|
+
<div className="w-full bg-white absolute bottom-0 p-2 rounded-md-lb rounded-b-xl">
|
|
244
|
+
<div>
|
|
245
|
+
<div className="flex justify-center">
|
|
246
|
+
<div className="border border-neutral300 flex justify-center items-center w-24 py-1 m-1 rounded-sm">
|
|
247
|
+
<IoReturnUpBackSharp className="w-3 h-3 text-neutral300" />
|
|
248
|
+
<p className="ml-1 text-neutral300" style={{ fontSize: "10px" }}>
|
|
249
|
+
Reply
|
|
250
|
+
</p>
|
|
254
251
|
</div>
|
|
252
|
+
<div className="border flex justify-center items-center w-24 py-1 m-1 rounded-sm">
|
|
253
|
+
<p className="mr-1 text-neutral300" style={{ fontSize: "10px" }}>
|
|
254
|
+
Forward
|
|
255
|
+
</p>
|
|
256
|
+
<IoReturnUpForwardSharp className="w-3 h-3 text-neutral300" />
|
|
257
|
+
</div>
|
|
258
|
+
</div>
|
|
255
259
|
</div>
|
|
256
|
-
|
|
257
|
-
|
|
260
|
+
<div className="flex justify-center">
|
|
261
|
+
<div className="w-32 h-1 bg-black rounded-full"></div>
|
|
262
|
+
</div>
|
|
263
|
+
</div>
|
|
264
|
+
</div>
|
|
265
|
+
</div>
|
|
266
|
+
)}
|
|
267
|
+
{mode === "SMS" && (
|
|
268
|
+
<div className="h-screen">
|
|
269
|
+
<div className="overflow-y-auto no-scrollbar" style={{ height: "450px" }}>
|
|
270
|
+
<div className="w-full bg-neutral20 border-b border-neutral30 border pt-6 px-2 flex justify-between">
|
|
271
|
+
<IoIosArrowBack className="w-5 h-5 text-primary300 mt-2" />
|
|
272
|
+
<div>
|
|
273
|
+
<div className="flex justify-center mt-2">
|
|
274
|
+
<img src={LogoPrezentHidden} className="rounded-full w-8 h-8 bg-white" />
|
|
275
|
+
</div>
|
|
276
|
+
<p className="mb-1" style={{ fontSize: "10px" }}>
|
|
277
|
+
Prezent
|
|
278
|
+
</p>
|
|
279
|
+
</div>
|
|
280
|
+
<IoIosArrowBack className="w-5 h-5 text-neutral20 mt-2" />
|
|
281
|
+
</div>
|
|
282
|
+
<div className="w-full bg-white px-2 py-4">
|
|
283
|
+
<div className="w-40 bg-neutral30 rounded-lg p-2" style={{ fontSize: "8px" }}>
|
|
284
|
+
<p>{data}</p>
|
|
285
|
+
</div>
|
|
286
|
+
</div>
|
|
287
|
+
<div className="w-full bg-white absolute bottom-0 p-2 rounded-md-lb rounded-b-xl">
|
|
288
|
+
<div className="flex justify-between mb-2 items-center">
|
|
289
|
+
<IoIosCamera className="w-5 h-5 text-neutral80" />
|
|
290
|
+
<IoIosAppstore className="w-5 h-5 text-neutral80" />
|
|
291
|
+
<div className="w-40 py-1 border border-neutral80 rounded-full flex justify-between items-center px-2">
|
|
292
|
+
<p className="text-xs text-neutral50">iMessage</p>
|
|
293
|
+
<IoIosMic className="w-4 h-4 text-neutral80" />
|
|
294
|
+
</div>
|
|
295
|
+
</div>
|
|
296
|
+
<div className="flex justify-center">
|
|
297
|
+
<div className="w-32 h-1 bg-black rounded-full"></div>
|
|
298
|
+
</div>
|
|
299
|
+
</div>
|
|
300
|
+
</div>
|
|
301
|
+
</div>
|
|
302
|
+
)}
|
|
303
|
+
</div>
|
|
258
304
|
</div>
|
|
259
305
|
);
|
|
260
|
-
}
|
|
306
|
+
};
|
|
261
307
|
|
|
262
|
-
export default CustomPhone
|
|
308
|
+
export default CustomPhone;
|
|
@@ -1,33 +1,50 @@
|
|
|
1
|
-
import React from
|
|
1
|
+
import React from "react";
|
|
2
2
|
|
|
3
3
|
const Description = ({
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
4
|
+
title = "Title",
|
|
5
|
+
value = "Description",
|
|
6
|
+
textColor = "default",
|
|
7
|
+
subtitle,
|
|
8
|
+
linkSubtitle,
|
|
9
|
+
onClickSubtitle,
|
|
10
|
+
image,
|
|
10
11
|
}) => {
|
|
11
12
|
return (
|
|
12
|
-
<div className=
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
13
|
+
<div className="w-full">
|
|
14
|
+
{title && <p className="text-sm font-normal text-black mb-1">{title}</p>}
|
|
15
|
+
<div className="py-1">
|
|
16
|
+
<p
|
|
17
|
+
className={`
|
|
16
18
|
${textColor == "default" && "text-black font-semibold text-base"}
|
|
17
19
|
${textColor == "success" && "text-success500 font-semibold text-base"}
|
|
18
|
-
`}
|
|
20
|
+
`}
|
|
21
|
+
>
|
|
22
|
+
{value}
|
|
23
|
+
</p>
|
|
24
|
+
</div>
|
|
25
|
+
{subtitle && (
|
|
26
|
+
<div className="flex items-center mt-1">
|
|
27
|
+
<p className="text-sm font-normal text-black mr-1">{subtitle}</p>
|
|
28
|
+
{linkSubtitle && (
|
|
29
|
+
<p className="m-0 text-sm font-semibold text-primary500 cursor-pointer" onClick={onClickSubtitle}>
|
|
30
|
+
{linkSubtitle}
|
|
31
|
+
</p>
|
|
32
|
+
)}
|
|
19
33
|
</div>
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
34
|
+
)}
|
|
35
|
+
|
|
36
|
+
{image &&
|
|
37
|
+
(typeof image === "string" ? (
|
|
38
|
+
<img src={image} alt="voucher-img" className="w-52 h-52 object-contain rounded-lg mt-1" />
|
|
39
|
+
) : (
|
|
40
|
+
<img
|
|
41
|
+
src={URL.createObjectURL(image)}
|
|
42
|
+
alt="voucher-img"
|
|
43
|
+
className="w-52 h-52 object-contain rounded-lg mt-1"
|
|
44
|
+
/>
|
|
45
|
+
))}
|
|
29
46
|
</div>
|
|
30
47
|
);
|
|
31
48
|
};
|
|
32
49
|
|
|
33
|
-
export default Description;
|
|
50
|
+
export default Description;
|
package/src/templates/index.js
CHANGED
|
@@ -839,11 +839,19 @@ const Templates = () => {
|
|
|
839
839
|
</div>
|
|
840
840
|
|
|
841
841
|
<div className="flex my-4 justify-center">
|
|
842
|
-
<CustomPhone mode="Empty"/>
|
|
843
|
-
<CustomPhone mode="Whatsapp" data="Ini message"/>
|
|
844
|
-
<CustomPhone mode="SMS"
|
|
845
|
-
<CustomPhone mode="Email"
|
|
846
|
-
<CustomPhone
|
|
842
|
+
<CustomPhone mode="Empty" />
|
|
843
|
+
<CustomPhone mode="Whatsapp" data="Ini message" />
|
|
844
|
+
<CustomPhone mode="SMS" data="Ini message" />
|
|
845
|
+
<CustomPhone mode="Email" data="Ini message" />
|
|
846
|
+
<CustomPhone
|
|
847
|
+
mode="Voucher"
|
|
848
|
+
voucherBackgroundType="image"
|
|
849
|
+
voucherBackground={
|
|
850
|
+
"https://static.promediateknologi.id/crop/0x0:0x0/0x0/webp/photo/jawapos/2022/09/one-piece-red.jpeg"
|
|
851
|
+
}
|
|
852
|
+
voucherTitle="One Piece Special Edition!"
|
|
853
|
+
voucherMessage="This is One Piece special edition card"
|
|
854
|
+
/>
|
|
847
855
|
</div>
|
|
848
856
|
|
|
849
857
|
<div>
|
|
@@ -1824,7 +1832,6 @@ const Templates = () => {
|
|
|
1824
1832
|
</tbody>
|
|
1825
1833
|
</table>
|
|
1826
1834
|
</div>
|
|
1827
|
-
|
|
1828
1835
|
);
|
|
1829
1836
|
};
|
|
1830
1837
|
|