зеркало из https://github.com/mozilla/fxa.git
fix(fxa-payments-server): redirects to and from payments form
- refs #1358 - cleaned up buttons on 123done for demo
This commit is contained in:
dave justice
Родитель
94a0ba9eeb
Коммит
970b4cd5e1
|
|
@ -34,10 +34,57 @@ h6 {
|
|||
font-weight: lighter;
|
||||
}
|
||||
|
||||
/* Reset `button` default styles */
|
||||
button {
|
||||
-webkit-box-sizing: content-box;
|
||||
-moz-box-sizing: content-box;
|
||||
box-sizing: content-box;
|
||||
background: none;
|
||||
border: 0;
|
||||
color: inherit;
|
||||
font: inherit;
|
||||
line-height: normal;
|
||||
overflow: visible;
|
||||
padding: 0;
|
||||
-webkit-user-select: none; /* for button */
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
}
|
||||
|
||||
button::-moz-focus-inner {
|
||||
border: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.banner {
|
||||
background: #304050;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
padding: 20px;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.banner .btn {
|
||||
background: #eef2f0;
|
||||
border-radius: 2px;
|
||||
margin: 10px;
|
||||
padding: 10px;
|
||||
color: black;
|
||||
}
|
||||
|
||||
.banner .btn:hover {
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
#splash {
|
||||
display: none;
|
||||
font-family: 'Alegreya Sans', sans-serif;
|
||||
margin-bottom: 60px;
|
||||
margin-top: 150px;
|
||||
}
|
||||
|
||||
#splash header {
|
||||
|
|
|
|||
|
|
@ -18,6 +18,33 @@
|
|||
</head>
|
||||
|
||||
<body>
|
||||
<div class="banner">
|
||||
<button class="btn btn-persona sign-choose" type="submit">
|
||||
Choose my sign-in flow for me
|
||||
</button>
|
||||
<a href="//127.0.0.1:3030/subscriptions/products/123doneProProduct" class="btn btn-persona btn-subscribe">Subscribe for Pro</a>
|
||||
|
||||
<button
|
||||
class="btn btn-large btn-info btn-persona signin-pkce"
|
||||
type="submit"
|
||||
>
|
||||
Sign In with PKCE
|
||||
</button>
|
||||
<div class="pkce-data"></div>
|
||||
<button
|
||||
class="btn btn-large btn-info btn-persona email-first-button email-first"
|
||||
type="submit"
|
||||
>
|
||||
Email first
|
||||
</button>
|
||||
<button
|
||||
class="btn btn-large btn-info btn-persona two-step-authentication"
|
||||
type="submit"
|
||||
>
|
||||
Sign In (Require 2FA)
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div id="splash">
|
||||
<header>
|
||||
<img
|
||||
|
|
@ -28,28 +55,6 @@
|
|||
height="70"
|
||||
/>
|
||||
<h1>123done</h1>
|
||||
<button class="btn btn-persona sign-choose" type="submit">
|
||||
Choose my sign-in flow for me
|
||||
</button>
|
||||
<button
|
||||
class="btn btn-large btn-info btn-persona signin-pkce"
|
||||
type="submit"
|
||||
>
|
||||
Sign In with PKCE
|
||||
</button>
|
||||
<div class="pkce-data"></div>
|
||||
<button
|
||||
class="btn btn-large btn-info btn-persona email-first-button email-first"
|
||||
type="submit"
|
||||
>
|
||||
Email first
|
||||
</button>
|
||||
<button
|
||||
class="btn btn-large btn-info btn-persona two-step-authentication"
|
||||
type="submit"
|
||||
>
|
||||
Sign In (Require 2FA)
|
||||
</button>
|
||||
|
||||
<button
|
||||
class="btn btn-large btn-info btn-persona sign-in-button signup"
|
||||
|
|
@ -170,5 +175,20 @@
|
|||
<script src="/js/state.js"></script>
|
||||
<script src="/js/123done.js"></script>
|
||||
<script src="/js/pkce.js"></script>
|
||||
<script type="text/javascript">
|
||||
let paymentURL;
|
||||
switch (window.location.host) {
|
||||
case '123done-latest.dev.lcip.org':
|
||||
paymentURL = 'https://latest.dev.lcip.org/subscriptions/products/prod_Ex9Z1q5yVydhyk';
|
||||
break;
|
||||
case '123done-stage.dev.lcip.org':
|
||||
paymentURL = 'TBD';
|
||||
break;
|
||||
default:
|
||||
paymentURL = '//127.0.0.1:3030/subscriptions/products/123doneProProduct';
|
||||
break;
|
||||
}
|
||||
document.querySelector('.btn-subscribe').setAttribute('href', paymentURL);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,25 @@
|
|||
import React, { useEffect } from 'react';
|
||||
import { SubscriptionRedirectProps } from './index';
|
||||
|
||||
export const RedirectDev = ({
|
||||
navigateToUrl,
|
||||
plan: {
|
||||
plan_name
|
||||
}
|
||||
}: SubscriptionRedirectProps) => {
|
||||
const redirectUrl = 'https://123done-latest.dev.lcip.org/';
|
||||
|
||||
useEffect(() => {
|
||||
navigateToUrl(redirectUrl);
|
||||
}, [ navigateToUrl, redirectUrl ]);
|
||||
|
||||
return (
|
||||
<div className="subscription-ready">
|
||||
<h2>Your subscription is ready</h2>
|
||||
<p>Hang on for a moment while we send you to the {plan_name} download page.</p>
|
||||
<a href={redirectUrl}>Click here if you're not automatically redirected</a>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default RedirectDev;
|
||||
|
|
@ -14,9 +14,9 @@ type availableRedirectsType = {
|
|||
};
|
||||
const availableRedirects: availableRedirectsType = {
|
||||
// Examples:
|
||||
// '123doneProProduct': React.lazy(() => import('./Redirect123donePro')),
|
||||
'123doneProProduct': React.lazy(() => import('./Redirect123donePro')),
|
||||
// '321doneProProduct': React.lazy(() => import('./Redirect321donePro')),
|
||||
'plan_F4bof27uz71Vk7': React.lazy(() => import('./Redirect123DonePro')),
|
||||
'prod_Ex9Z1q5yVydhyk': React.lazy(() => import('./RedirectDev')),
|
||||
};
|
||||
const defaultRedirect = React.lazy(() => import('./RedirectDefault'));
|
||||
|
||||
|
|
@ -24,8 +24,8 @@ export const SubscriptionRedirect = ({
|
|||
plan,
|
||||
navigateToUrl,
|
||||
}: SubscriptionRedirectProps) => {
|
||||
const SubRedirect = plan.plan_id in availableRedirects
|
||||
? availableRedirects[plan.plan_id]
|
||||
const SubRedirect = plan.product_id in availableRedirects
|
||||
? availableRedirects[plan.product_id]
|
||||
: defaultRedirect;
|
||||
return <SubRedirect {...{ plan, navigateToUrl }} />;
|
||||
};
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче