-
Notifications
You must be signed in to change notification settings - Fork 28
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: design changes for subscriptions
- Loading branch information
1 parent
1ef0847
commit e3b5666
Showing
14 changed files
with
332 additions
and
28 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,48 @@ | ||
import React, { useEffect } from 'react'; | ||
import { injectIntl, intlShape } from '@edx/frontend-platform/i18n'; | ||
|
||
import Subscriptions from '../subscriptions'; | ||
import Payments from '../order-history'; | ||
|
||
import messages from './OrderAndSubscriptionsPage.messages'; | ||
|
||
const OrderAndSubscriptionsPage = ({ intl }) => { | ||
const isB2CSubsEnabled = true; | ||
|
||
const message = (id) => intl.formatMessage(messages[id]); | ||
|
||
useEffect(() => { | ||
if (isB2CSubsEnabled) { | ||
document.title = 'Orders and Subscriptions | edX'; | ||
} | ||
}, [isB2CSubsEnabled]); | ||
|
||
if (!isB2CSubsEnabled) { | ||
return ( | ||
<div className="page__order-and-subscriptions container-fluid py-5"> | ||
<Payments isB2CSubsEnabled={false} /> | ||
</div> | ||
); | ||
} | ||
|
||
return ( | ||
<div className="page__order-and-subscriptions container-fluid py-4.5"> | ||
<div className="section"> | ||
<h1 className="text-primary-700"> | ||
{message('ecommerce.order.history.main.heading')} | ||
</h1> | ||
<span className="text-dark-900"> | ||
{message('ecommerce.order.history.main.subtitle')} | ||
</span> | ||
</div> | ||
<Subscriptions /> | ||
<Payments isB2CSubsEnabled /> | ||
</div> | ||
); | ||
}; | ||
|
||
OrderAndSubscriptionsPage.propTypes = { | ||
intl: intlShape.isRequired, | ||
}; | ||
|
||
export default injectIntl(OrderAndSubscriptionsPage); |
17 changes: 17 additions & 0 deletions
17
src/order-and-subscriptions/OrderAndSubscriptionsPage.messages.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,17 @@ | ||
import { defineMessages } from '@edx/frontend-platform/i18n'; | ||
|
||
const messages = defineMessages({ | ||
'ecommerce.order.history.main.heading': { | ||
id: 'ecommerce.order.history.main.heading', | ||
defaultMessage: 'My orders and subscriptions', | ||
description: 'Heading for orders and subscriptions page.', | ||
}, | ||
'ecommerce.order.history.main.subtitle': { | ||
id: 'ecommerce.order.history.main.subtitle', | ||
defaultMessage: | ||
'Manage your program subscriptions and view your order history.', | ||
description: 'Subtitle of Heading for orders and subscriptions page.', | ||
}, | ||
}); | ||
|
||
export default messages; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,23 @@ | ||
.page__order-and-subscriptions { | ||
display: flex; | ||
flex-direction: column; | ||
gap: 2.5rem; | ||
|
||
section, .section { | ||
display: flex; | ||
flex-direction: column; | ||
gap: 1rem; | ||
|
||
.section-gap-sm { | ||
gap: 0.75rem; | ||
} | ||
|
||
h1, h2 { | ||
margin-bottom: 0; | ||
} | ||
} | ||
|
||
.subscription-scrollable { | ||
max-height: 295px; | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,2 @@ | ||
// eslint-disable-next-line import/prefer-default-export | ||
export { default as OrderAndSubscriptionsPage } from './OrderAndSubscriptionsPage'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,11 +1,7 @@ | ||
import ConnectedOrderHistoryPage from './OrderHistoryPage'; | ||
import OrderHistoryPage from './OrderHistoryPage'; | ||
import reducer from './reducer'; | ||
import saga from './saga'; | ||
import { storeName } from './selectors'; | ||
|
||
export { | ||
ConnectedOrderHistoryPage, | ||
reducer, | ||
saga, | ||
storeName, | ||
}; | ||
export default OrderHistoryPage; | ||
export { reducer, saga, storeName }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,61 @@ | ||
import React from 'react'; | ||
import PropTypes from 'prop-types'; | ||
|
||
import { Card, Badge, Scrollable } from '@edx/paragon'; | ||
|
||
const SubscriptionScrollView = ({ | ||
subscriptions = [ | ||
{ | ||
title: 'Blockchain Fundamentals', | ||
org: 'University of California, Berkeley', | ||
subscriptionStatus: 'trial', | ||
}, | ||
{ | ||
title: 'Critical Thinking', | ||
org: 'Simmons University', | ||
subscriptionStatus: 'active', | ||
}, | ||
{ | ||
title: 'Blockchain Fundamentals', | ||
org: 'University of California, Berkeley', | ||
subscriptionStatus: 'inActive', | ||
}, | ||
{ | ||
title: 'Critical Thinking', | ||
org: 'Simmons University', | ||
subscriptionStatus: 'inactive', | ||
}, | ||
], | ||
}) => ( | ||
<Scrollable className="subscription-scrollable mx-n1"> | ||
<div className="section mx-1"> | ||
{subscriptions.map(({ title, org, subscriptionStatus }) => ( | ||
<Card className="bg-light-200 p-3"> | ||
<div className="section flex-column-reverse flex-sm-row align-items-start align-items-sm-center"> | ||
<h3 className="text-info-500 m-0">{title}</h3> | ||
<Badge className="text-capitalize" variant="light"> | ||
{subscriptionStatus.toLowerCase()} | ||
</Badge> | ||
</div> | ||
<p className="small text-gray-500 m-0">{org}</p> | ||
</Card> | ||
))} | ||
</div> | ||
</Scrollable> | ||
); | ||
|
||
SubscriptionScrollView.propTypes = { | ||
subscriptions: PropTypes.arrayOf( | ||
PropTypes.shape({ | ||
title: PropTypes.string.isRequired, | ||
org: PropTypes.string.isRequired, | ||
subscriptionStatus: PropTypes.string.isRequired, | ||
}), | ||
), | ||
}; | ||
|
||
SubscriptionScrollView.defaultProps = { | ||
subscriptions: [], | ||
}; | ||
|
||
export default SubscriptionScrollView; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,52 @@ | ||
import React from 'react'; | ||
import { useMediaQuery } from 'react-responsive'; | ||
|
||
import { FormattedMessage } from '@edx/frontend-platform/i18n'; | ||
import { Alert, Badge, Button } from '@edx/paragon'; | ||
import { Search } from '@edx/paragon/icons'; | ||
|
||
const SubscriptionUpsell = () => ( | ||
<Alert | ||
className="bg-light-200" | ||
actions={[ | ||
<Button className="text-nowrap" iconBefore={Search}> | ||
<FormattedMessage | ||
id="ecommerce.order.history.subscription.upsell.button" | ||
defaultMessage="Explore subscription options" | ||
description="Button text for subscription upsell" | ||
/> | ||
</Button>, | ||
]} | ||
stacked={useMediaQuery({ query: '(max-width: 834px)' })} | ||
> | ||
<Alert.Heading | ||
as="h4" | ||
className="section section-gap-sm flex-sm-row align-items-start" | ||
> | ||
<Badge variant="warning"> | ||
<FormattedMessage | ||
id="ecommerce.order.history.subscription.upsell.badge" | ||
defaultMessage="New" | ||
description="'New' Badge for subscription upsell" | ||
/> | ||
</Badge> | ||
<FormattedMessage | ||
id="ecommerce.order.history.subscription.upsell.heading" | ||
defaultMessage="Monthly program subscriptions now available" | ||
description="Heading for subscription upsell" | ||
/> | ||
</Alert.Heading> | ||
<FormattedMessage | ||
tagName="p" | ||
id="ecommerce.order.history.subscription.upsell.message" | ||
defaultMessage="An easier way to access popular programs with more control over how much you spend. Starting at {minSubscriptionPrice} per month after a {trialLength}-day free trial. Cancel anytime." | ||
description="Message body for subscription upsell" | ||
values={{ | ||
minSubscriptionPrice: '$39', | ||
trialLength: 7, | ||
}} | ||
/> | ||
</Alert> | ||
); | ||
|
||
export default SubscriptionUpsell; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,55 @@ | ||
import React from 'react'; | ||
import { injectIntl, intlShape } from '@edx/frontend-platform/i18n'; | ||
import { Button } from '@edx/paragon'; | ||
import { Launch } from '@edx/paragon/icons'; | ||
|
||
import messages from './Subscriptions.messages'; | ||
import SubscriptionUpsell from './SubscriptionUpsell'; | ||
import SubscriptionScrollView from './SubscriptionScrollView'; | ||
|
||
const Subscriptions = ({ intl }) => { | ||
const hasSubscriptions = true; | ||
|
||
const message = (id, values = {}) => intl.formatMessage(messages[id], values); | ||
const buttonLabel = message( | ||
'ecommerce.order.history.subscriptions.manage.button', | ||
); | ||
|
||
const renderEmpty = () => ( | ||
<> | ||
<span className="text-dark-900"> | ||
{message('ecommerce.order.history.subscriptions.subtitle.empty')} | ||
</span> | ||
<SubscriptionUpsell /> | ||
</> | ||
); | ||
|
||
const renderSubscriptions = () => ( | ||
<> | ||
<div className="section flex-md-row align-items-start align-items-md-center justify-content-between"> | ||
<span className="text-dark-900"> | ||
{message('ecommerce.order.history.subscriptions.subtitle', { | ||
buttonLabel: <i>{buttonLabel}</i>, | ||
})} | ||
</span> | ||
<Button className="text-nowrap" size="sm" iconAfter={Launch}> | ||
{buttonLabel} | ||
</Button> | ||
</div> | ||
<SubscriptionScrollView /> | ||
</> | ||
); | ||
|
||
return ( | ||
<section> | ||
<h2>{message('ecommerce.order.history.subscriptions.heading')}</h2> | ||
{hasSubscriptions ? renderSubscriptions() : renderEmpty()} | ||
</section> | ||
); | ||
}; | ||
|
||
Subscriptions.propTypes = { | ||
intl: intlShape.isRequired, | ||
}; | ||
|
||
export default injectIntl(Subscriptions); |
Oops, something went wrong.