PluginProbe
Ultimate Store Kit – Store Builder Addons for Elementor, WooCommerce Store Builder, EDD Store Builder / 3.1.4
Ultimate Store Kit – Store Builder Addons for Elementor, WooCommerce Store Builder, EDD Store Builder v3.1.4
3.1.4 3.0.8 3.0.9 3.1.0 3.1.2 3.1.3 3.0.7 3.0.5 3.0.4 3.0.3 3.0.2 trunk 1.5.0 1.5.1 1.5.2 1.6.1 1.6.2 1.6.3 1.6.4 2.0.0 2.0.1 2.0.2 2.0.3 2.0.4 2.0.5 All 93 releases
ultimate-store-kit / src / admin / pages / AboutInfo.js

AboutInfo.js in Ultimate Store Kit – Store Builder Addons for Elementor, WooCommerce Store Builder, EDD Store Builder 3.1.4, at src/admin/pages/AboutInfo.js

255 lines 8.3 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 import { __ } from '@wordpress/i18n';
2 import {
3 BookIcon,
4 EditIcon,
5 FacebookIcon,
6 GlobeIcon,
7 MessageIcon,
8 StarIcon,
9 UserIcon,
10 UskLogo,
11 VideoPanelIcon,
12 } from '../icons';
13
14 const adminData = window.ultimateStoreKitAdminData || {};
15
16 const linkStrong =
17 'font-semibold text-uks-brand no-underline transition hover:underline';
18
19 const InfoCard = ({ icon, label, children }) => (
20 <div className="group flex items-center gap-4 rounded-lg border border-solid border-gray-200 bg-white p-4">
21 <div
22 className="flex h-11 w-11 shrink-0 items-center justify-center rounded-lg bg-uks-brand/10 text-uks-brand transition group-hover:bg-uks-brand/15"
23 aria-hidden="true"
24 >
25 {icon}
26 </div>
27 <div className="min-w-0 flex-1">
28 <h3 className="m-0 mb-1 text-[11px] font-semibold uppercase tracking-wider text-slate-400">
29 {label}
30 </h3>
31 <div className="text-sm font-semibold text-slate-800">{children}</div>
32 </div>
33 </div>
34 );
35
36 const UsefulLinkCard = ({ icon, title, desc, href }) => (
37 <a
38 href={href}
39 target="_blank"
40 rel="noopener noreferrer"
41 className="group flex items-center gap-4 rounded-lg border border-solid border-gray-200 bg-white p-4 text-inherit no-underline transition hover:border-uks-brand/25"
42 >
43 <div
44 className="flex h-11 w-11 shrink-0 items-center justify-center rounded-lg bg-uks-brand/10 text-uks-brand transition group-hover:bg-uks-brand/15"
45 aria-hidden="true"
46 >
47 {icon}
48 </div>
49 <div className="min-w-0 flex-1">
50 <div className="text-sm font-semibold text-slate-800">{title}</div>
51 <p className="m-0 mt-0.5 text-[12px] leading-snug text-slate-500">{desc}</p>
52 </div>
53 </a>
54 );
55
56 const AboutInfo = () => {
57 const isPro = Boolean(adminData.isPro);
58 const version = adminData.version || '';
59
60 return (
61 <div className="space-y-6">
62 <div className="overflow-hidden rounded-usk border border-slate-200 bg-white">
63 <div className="bg-white p-4 sm:p-5 border border-solid border-gray-100">
64 <div className="flex max-w-3xl flex-col items-start gap-4 text-left sm:flex-row">
65 <div className="">
66 <UskLogo className="w-12 h-12 block" />
67 </div>
68 <div className="min-w-0 flex-1">
69 <div className="mb-2 flex flex-wrap items-center justify-start gap-2">
70 <h3 className="m-0 text-[22px] font-extrabold leading-none text-slate-900">
71 {__('Ultimate Store Kit', 'ultimate-store-kit')}
72 </h3>
73 <span className="inline-flex items-center rounded-full bg-uks-brand px-2.5 py-0.5 text-xs font-semibold text-white">
74 v{version}
75 </span>
76 <span
77 className={`inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-semibold ${isPro
78 ? 'bg-emerald-100 text-emerald-800'
79 : 'bg-slate-200 text-slate-700'
80 }`}
81 >
82 {isPro
83 ? __('Pro', 'ultimate-store-kit')
84 : __('Free', 'ultimate-store-kit')}
85 </span>
86 </div>
87 <p className="mb-4 text-[13px] leading-relaxed text-slate-600">
88 {__(
89 'Build online stores in WordPress with the powerful store builder addon for Elementor. Enjoy a wide range of customizations and easily build product grids, carousels, single product/page elements, checkouts and more.',
90 'ultimate-store-kit'
91 )}
92 </p>
93 <ul className="m-0 flex list-none flex-wrap justify-start gap-3 p-0">
94 <li className="rounded-full py-1 px-2 border border-solid border-slate-200 bg-white/80 text-xs font-medium text-slate-600">
95 {__('Elementor widgets', 'ultimate-store-kit')}
96 </li>
97 <li className="rounded-full py-1 px-2 border border-solid border-slate-200 bg-white/80 text-xs font-medium text-slate-600">
98 {__('WooCommerce ready', 'ultimate-store-kit')}
99 </li>
100 <li className="rounded-full py-1 px-2 border border-solid border-slate-200 bg-white/80 text-xs font-medium text-slate-600">
101 {__('Store-focused UI', 'ultimate-store-kit')}
102 </li>
103 </ul>
104 </div>
105 </div>
106 </div>
107
108 <div className="grid grid-cols-1 gap-px border-t border-slate-200 sm:grid-cols-3">
109 <div className="bg-gray-100 px-4 py-3 text-center sm:text-left">
110 <p className="m-0 mb-0.5 text-[11px] font-semibold uppercase tracking-wide text-slate-400">
111 {__('Current version', 'ultimate-store-kit')}
112 </p>
113 <p className="m-0 text-sm font-bold text-slate-800">v{version}</p>
114 </div>
115 <div className="bg-gray-100 px-4 py-3 text-center sm:text-left">
116 <p className="m-0 mb-0.5 text-[11px] font-semibold uppercase tracking-wide text-slate-400">
117 {__('License', 'ultimate-store-kit')}
118 </p>
119 <p className="m-0 text-sm font-bold text-slate-800">
120 {isPro
121 ? __('Pro (active)', 'ultimate-store-kit')
122 : __('Free', 'ultimate-store-kit')}
123 </p>
124 </div>
125 <div className="bg-gray-100 px-4 py-3 text-center sm:text-left">
126 <p className="m-0 mb-0.5 text-[11px] font-semibold uppercase tracking-wide text-slate-400">
127 {__('Built for', 'ultimate-store-kit')}
128 </p>
129 <p className="m-0 text-sm font-bold text-slate-800">
130 {__('WordPress + WooCommerce', 'ultimate-store-kit')}
131 </p>
132 </div>
133 </div>
134 </div>
135
136 <div className="rounded-usk border border-solid border-gray-100 bg-white p-4 sm:p-5">
137 <h3 className="m-0 mb-3 text-base font-bold text-slate-800">
138 {__('Product & support', 'ultimate-store-kit')}
139 </h3>
140 <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 2xl:grid-cols-4">
141 <InfoCard
142 label={__('Author', 'ultimate-store-kit')}
143 icon={<UserIcon />}
144 >
145 <a
146 href="https://bdthemes.com/"
147 target="_blank"
148 rel="noopener noreferrer"
149 className={linkStrong}
150 >
151 BdThemes
152 </a>
153 </InfoCard>
154 <InfoCard
155 label={__('Website', 'ultimate-store-kit')}
156 icon={<GlobeIcon />}
157 >
158 <a
159 href="https://storekit.pro/"
160 target="_blank"
161 rel="noopener noreferrer"
162 className={linkStrong}
163 >
164 storekit.pro
165 </a>
166 </InfoCard>
167 <InfoCard
168 label={__('Documentation', 'ultimate-store-kit')}
169 icon={<BookIcon />}
170 >
171 <a
172 href="https://bdthemes.com/knowledge-base/ultimate-store-kit/"
173 target="_blank"
174 rel="noopener noreferrer"
175 className={linkStrong}
176 >
177 {__('Knowledge Base', 'ultimate-store-kit')}
178 </a>
179 </InfoCard>
180 <InfoCard
181 label={__('Support', 'ultimate-store-kit')}
182 icon={<MessageIcon />}
183 >
184 <a
185 href="https://bdthemes.com/support/"
186 target="_blank"
187 rel="noopener noreferrer"
188 className={linkStrong}
189 >
190 {__('Get Support', 'ultimate-store-kit')}
191 </a>
192 </InfoCard>
193 </div>
194 </div>
195
196 <div className="rounded-usk border border-solid border-gray-100 bg-white p-4 sm:p-5">
197 <h3 className="m-0 mb-3 text-base font-bold text-slate-800">
198 {__('Useful links', 'ultimate-store-kit')}
199 </h3>
200 <ul className="m-0 grid list-none grid-cols-1 gap-3 p-0 sm:grid-cols-2 2xl:grid-cols-4">
201 {[
202 [
203 'https://www.youtube.com/c/bdthemes',
204 __('Video tutorials', 'ultimate-store-kit'),
205 __(
206 'Step-by-step YouTube tutorials for setup, widgets, and customization.',
207 'ultimate-store-kit'
208 ),
209 <VideoPanelIcon />,
210 ],
211 [
212 'https://feedback.bdthemes.com/b/6vr2250l/feature-requests/',
213 __('Request a feature', 'ultimate-store-kit'),
214 __(
215 'Share ideas and vote on what we build next.',
216 'ultimate-store-kit'
217 ),
218 <EditIcon />,
219 ],
220 [
221 'https://wordpress.org/plugins/ultimate-store-kit/',
222 __('Rate us on WordPress.org', 'ultimate-store-kit'),
223 __(
224 'Help others discover the plugin with a review.',
225 'ultimate-store-kit'
226 ),
227 <StarIcon className="h-5 w-5" />,
228 ],
229 [
230 'https://www.facebook.com/groups/358290584725185',
231 __('Facebook community', 'ultimate-store-kit'),
232 __(
233 'Join our Facebook community to connect with other users and the team.',
234 'ultimate-store-kit'
235 ),
236 <FacebookIcon />,
237 ],
238 ].map(([href, title, desc, icon]) => (
239 <li key={href}>
240 <UsefulLinkCard
241 href={href}
242 title={title}
243 desc={desc}
244 icon={icon}
245 />
246 </li>
247 ))}
248 </ul>
249 </div>
250 </div>
251 );
252 };
253
254 export default AboutInfo;
255