Skip to content

Commit 930dd92

Browse files
mnapolimnapoli
authored
Merge pull request #1933 from brefphp/xray
Add the X-Ray integration - bref.sh/xray
2 parents 55258b3 + d7f3b35 commit 930dd92

16 files changed

+733
-1
lines changed

‎docs/_meta.json‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,10 @@
3636
"title": "Sentry integration",
3737
"href": "/sentry"
3838
},
39+
"xray": {
40+
"title": "X-Ray integration",
41+
"href": "/xray"
42+
},
3943
"-- Cloud": {
4044
"type": "separator",
4145
"title": "Bref Cloud"

‎website/public/xray.png‎

143 KB
Loading

‎website/src/components/xray/XRayCheckout.jsx‎

Lines changed: 128 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,128 @@
1+
import { Fragment, useRef, useState } from 'react'
2+
import { Dialog, Switch, Transition } from '@headlessui/react';
3+
import { ArrowPathIcon } from '@heroicons/react/24/outline'
4+
5+
function classNames(...classes) {
6+
return classes.filter(Boolean).join(' ')
7+
}
8+
9+
export default function XRayCheckout({ open, setOpen, price, linkSingle, linkSubscription }) {
10+
const [renewalEnabled, setRenewalEnabled] = useState(false);
11+
const cancelButtonRef = useRef(null);
12+
13+
return (
14+
<Transition.Root show={open} as={Fragment}>
15+
<Dialog as="div" className="relative z-10" initialFocus={cancelButtonRef} onClose={setOpen}>
16+
<Transition.Child
17+
as={Fragment}
18+
enter="ease-out duration-300"
19+
enterFrom="opacity-0"
20+
enterTo="opacity-100"
21+
leave="ease-in duration-200"
22+
leaveFrom="opacity-100"
23+
leaveTo="opacity-0"
24+
>
25+
<div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
26+
</Transition.Child>
27+
28+
<div className="fixed inset-0 z-10 w-screen overflow-y-auto">
29+
<div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
30+
<Transition.Child
31+
as={Fragment}
32+
enter="ease-out duration-300"
33+
enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
34+
enterTo="opacity-100 translate-y-0 sm:scale-100"
35+
leave="ease-in duration-200"
36+
leaveFrom="opacity-100 translate-y-0 sm:scale-100"
37+
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
38+
>
39+
<Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-xl">
40+
<div className="bg-white px-4 pb-4 pt-5 sm:p-6 sm:pb-4">
41+
<div className="sm:flex sm:items-start">
42+
<div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10">
43+
<ArrowPathIcon className="h-6 w-6 text-blue-600" aria-hidden="true" />
44+
</div>
45+
<div className="mt-3 text-center sm:ml-4 sm:mt-0 sm:text-left">
46+
<Dialog.Title as="h3" className="text-base font-semibold leading-6 text-gray-900">
47+
Enable yearly license renewal?
48+
</Dialog.Title>
49+
<div className="mt-2">
50+
<div className="text-sm text-gray-500">
51+
Do you want to enable automatic license renewal every year?
52+
</div>
53+
<div className="mt-2 text-sm text-gray-500">
54+
Without license renewal, you will stop receiving updates after 1
55+
year.
56+
</div>
57+
<div className="mt-2 text-sm text-gray-500">
58+
With license renewal, the license renews automatically every year so <strong>you always get the latest updates</strong>. You also get a 10% discount on the price. Renewal can be cancelled at any time.
59+
</div>
60+
</div>
61+
<Switch.Group as="div" className="mt-5 flex items-center">
62+
<Switch
63+
checked={renewalEnabled}
64+
onChange={setRenewalEnabled}
65+
className={classNames(
66+
renewalEnabled ? '!bg-blue-500' : '!bg-gray-200',
67+
'relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2'
68+
)}
69+
>
70+
<span
71+
aria-hidden="true"
72+
className={classNames(
73+
renewalEnabled ? 'translate-x-5' : 'translate-x-0',
74+
'pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out'
75+
)}
76+
/>
77+
</Switch>
78+
<Switch.Label as="span" className="ml-3 text-sm cursor-pointer">
79+
<span className="font-medium text-gray-900">Automatic license renewal</span>{' '}
80+
<span className="text-gray-500">(every year)</span>
81+
</Switch.Label>
82+
</Switch.Group>
83+
{renewalEnabled ? (
84+
<div className="mt-5 text-sm text-gray-500">
85+
{price[1]}€ per year, cancel anytime,{" "}
86+
<span className="text-gray-900 font-medium">
87+
{" "}all future updates
88+
</span>
89+
</div>
90+
) : (
91+
<div className="mt-5 text-sm text-gray-500">
92+
{price[0]}€ one-time payment,{" "}
93+
<span className="text-gray-900 font-medium">
94+
{" "}no updates after 1 year
95+
</span>
96+
</div>
97+
)}
98+
</div>
99+
</div>
100+
</div>
101+
<div className="bg-gray-50 px-4 py-3 sm:flex sm:flex-row-reverse sm:px-6">
102+
<button
103+
type="button"
104+
className="inline-flex w-full justify-center rounded-md !bg-blue-500 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:!bg-blue-600 sm:ml-3 sm:w-auto"
105+
onClick={() => {
106+
setOpen(false);
107+
window.open(renewalEnabled ? linkSubscription : linkSingle, "_blank");
108+
}}
109+
>
110+
Continue to checkout
111+
</button>
112+
<button
113+
type="button"
114+
className="mt-3 inline-flex w-full justify-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 sm:mt-0 sm:w-auto"
115+
onClick={() => setOpen(false)}
116+
ref={cancelButtonRef}
117+
>
118+
Cancel
119+
</button>
120+
</div>
121+
</Dialog.Panel>
122+
</Transition.Child>
123+
</div>
124+
</div>
125+
</Dialog>
126+
</Transition.Root>
127+
)
128+
}

‎website/src/pages/_meta.json‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,15 @@
5050
},
5151
"sentry": {
5252
"type": "page",
53-
"title": "Sentry integration for AWS Lambda",
53+
"title": "Sentry integration for PHP on AWS Lambda",
54+
"display": "hidden",
55+
"theme": {
56+
"layout": "raw"
57+
}
58+
},
59+
"xray": {
60+
"type": "page",
61+
"title": "X-Ray integration for PHP",
5462
"display": "hidden",
5563
"theme": {
5664
"layout": "raw"

0 commit comments

Comments
 (0)