sprint-asia-custom-component 0.1.83 → 0.1.85
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
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 = ({
|
|
@@ -28979,8 +28988,10 @@
|
|
|
28979
28988
|
${isFocused && mode === "default" && "bg-neutral20 border-primary500"}
|
|
28980
28989
|
${mode === "disable" && "bg-neutral30 border-neutral50"}
|
|
28981
28990
|
${mode === "danger" && "bg-danger50 border-danger500 focus:outline-2 outline-danger500"}
|
|
28982
|
-
${leftIcon ? "pl-8" : "pl-3"}
|
|
28983
|
-
${
|
|
28991
|
+
${leftIcon || leftAdornment ? "pl-8" : "pl-3"}
|
|
28992
|
+
${leftIcon && leftAdornment ? "pl-16" : "pl-3"}
|
|
28993
|
+
${rightIcon || rightAdornment ? "pr-8" : "pr-3"}
|
|
28994
|
+
${rightIcon && rightAdornment ? "pr-16" : "pr-3"}`,
|
|
28984
28995
|
placeholder: placeholder,
|
|
28985
28996
|
"data-mask": "000.000.000-00",
|
|
28986
28997
|
disabled: mode === "disable",
|
|
@@ -48168,7 +48179,11 @@
|
|
|
48168
48179
|
|
|
48169
48180
|
const CustomPhone = ({
|
|
48170
48181
|
mode = "Empty",
|
|
48171
|
-
data
|
|
48182
|
+
data,
|
|
48183
|
+
voucherTitle = "Happy Birthday, Congratulation!",
|
|
48184
|
+
voucherMessage = "You've won a Voucher Belanja MAP Rp100.000 as a special birthday gift from us. Enjoy your day with extra joy!",
|
|
48185
|
+
voucherBackgroundType = "color",
|
|
48186
|
+
voucherBackground
|
|
48172
48187
|
}) => {
|
|
48173
48188
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
48174
48189
|
style: {
|
|
@@ -48306,8 +48321,37 @@
|
|
|
48306
48321
|
style: {
|
|
48307
48322
|
height: "450px"
|
|
48308
48323
|
}
|
|
48324
|
+
}, voucherBackgroundType === "color" && /*#__PURE__*/React__default["default"].createElement("div", {
|
|
48325
|
+
className: "w-full h-54 pt-6 pb-4",
|
|
48326
|
+
style: {
|
|
48327
|
+
background: voucherBackground || "black"
|
|
48328
|
+
}
|
|
48309
48329
|
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
48310
|
-
className: "
|
|
48330
|
+
className: "bg-white rounded-md p-3 mx-3 mt-12"
|
|
48331
|
+
}, /*#__PURE__*/React__default["default"].createElement("p", {
|
|
48332
|
+
className: "font-semibold text-sm"
|
|
48333
|
+
}, "Voucher Belanja MAP"), /*#__PURE__*/React__default["default"].createElement("p", {
|
|
48334
|
+
className: "font-semibold text-sm"
|
|
48335
|
+
}, "Rp 100.000"), /*#__PURE__*/React__default["default"].createElement("p", {
|
|
48336
|
+
className: "font-normal text-neutral100 mt-1 text-xs",
|
|
48337
|
+
style: {
|
|
48338
|
+
fontSize: "10px"
|
|
48339
|
+
}
|
|
48340
|
+
}, "Order ID: 12345"), /*#__PURE__*/React__default["default"].createElement("div", {
|
|
48341
|
+
className: "flex justify-between items-center"
|
|
48342
|
+
}, /*#__PURE__*/React__default["default"].createElement("p", {
|
|
48343
|
+
className: "text-xs",
|
|
48344
|
+
style: {
|
|
48345
|
+
fontSize: "10px"
|
|
48346
|
+
}
|
|
48347
|
+
}, "21 Jan 2022 - 22 Mar 2023"), /*#__PURE__*/React__default["default"].createElement("div", {
|
|
48348
|
+
className: "w-12 h-12 rounded-full bg-primary500"
|
|
48349
|
+
})))), voucherBackgroundType === "image" && /*#__PURE__*/React__default["default"].createElement("div", {
|
|
48350
|
+
className: "w-full h-54 pt-6 pb-4",
|
|
48351
|
+
style: {
|
|
48352
|
+
backgroundImage: `url(${voucherBackground})`,
|
|
48353
|
+
backgroundSize: "cover"
|
|
48354
|
+
}
|
|
48311
48355
|
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
48312
48356
|
className: "bg-white rounded-md p-3 mx-3 mt-12"
|
|
48313
48357
|
}, /*#__PURE__*/React__default["default"].createElement("p", {
|
|
@@ -48332,12 +48376,12 @@
|
|
|
48332
48376
|
className: "bg-white p-3"
|
|
48333
48377
|
}, /*#__PURE__*/React__default["default"].createElement("p", {
|
|
48334
48378
|
className: "text-md font-semibold"
|
|
48335
|
-
},
|
|
48379
|
+
}, voucherTitle), /*#__PURE__*/React__default["default"].createElement("p", {
|
|
48336
48380
|
className: "text-neutral300",
|
|
48337
48381
|
style: {
|
|
48338
48382
|
fontSize: "10px"
|
|
48339
48383
|
}
|
|
48340
|
-
},
|
|
48384
|
+
}, voucherMessage)), /*#__PURE__*/React__default["default"].createElement("div", {
|
|
48341
48385
|
className: "bg-neutral20 p-3 pb-16"
|
|
48342
48386
|
}, /*#__PURE__*/React__default["default"].createElement("p", {
|
|
48343
48387
|
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;
|
|
@@ -67,8 +67,10 @@ const TextInput = ({
|
|
|
67
67
|
${isFocused && mode === "default" && "bg-neutral20 border-primary500"}
|
|
68
68
|
${mode === "disable" && "bg-neutral30 border-neutral50"}
|
|
69
69
|
${mode === "danger" && "bg-danger50 border-danger500 focus:outline-2 outline-danger500"}
|
|
70
|
-
${leftIcon ? "pl-8" : "pl-3"}
|
|
71
|
-
${
|
|
70
|
+
${leftIcon || leftAdornment ? "pl-8" : "pl-3"}
|
|
71
|
+
${leftIcon && leftAdornment ? "pl-16" : "pl-3"}
|
|
72
|
+
${rightIcon || rightAdornment ? "pr-8" : "pr-3"}
|
|
73
|
+
${rightIcon && rightAdornment ? "pr-16" : "pr-3"}`}
|
|
72
74
|
placeholder={placeholder}
|
|
73
75
|
data-mask="000.000.000-00"
|
|
74
76
|
disabled={mode === "disable"}
|
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>
|
|
@@ -1422,8 +1430,12 @@ const Templates = () => {
|
|
|
1422
1430
|
leftIcon
|
|
1423
1431
|
rightIcon
|
|
1424
1432
|
placeholder="With both icons..."
|
|
1425
|
-
value={
|
|
1433
|
+
value={
|
|
1434
|
+
"asiodjaoidjaosidjasdjasoidjsaodjoiasjodjasojdoiasjdoiasodiasiodjoasijdiasiodjaoidjaosidjasdjasoidjsaodjoiasjodjasojdoiasjdoiasodiasiodjoasijdiasiodjaoidjaosidjasdjasoidjsaodjoiasjodjasojdoiasjdoiasodiasiodjoasijdi"
|
|
1435
|
+
}
|
|
1426
1436
|
onChange={setInputValue}
|
|
1437
|
+
leftAdornment={<p>Rp</p>}
|
|
1438
|
+
rightAdornment={<p>Rp</p>}
|
|
1427
1439
|
/>
|
|
1428
1440
|
|
|
1429
1441
|
<TextInput
|
|
@@ -1824,7 +1836,6 @@ const Templates = () => {
|
|
|
1824
1836
|
</tbody>
|
|
1825
1837
|
</table>
|
|
1826
1838
|
</div>
|
|
1827
|
-
|
|
1828
1839
|
);
|
|
1829
1840
|
};
|
|
1830
1841
|
|