diff --git a/.standard.yml b/.standard.yml index 60dd3769..c6feb9bf 100644 --- a/.standard.yml +++ b/.standard.yml @@ -1,11 +1,12 @@ -fix: true # default: false -parallel: true # default: false -format: progress # default: Standard::Formatter -ruby_version: 2.3.3 # default: RUBY_VERSION -default_ignores: false # default: true +fix: true # default: false +parallel: true # default: false +format: progress # default: Standard::Formatter +ruby_version: 2.3.3 # default: RUBY_VERSION +default_ignores: false # default: true -ignore: # default: [] +ignore: # default: [] - 'db/schema.rb' - 'vendor/**/*' + - 'app/views/memberships/edit_card.html.erb' - 'spec/**/*': - - Metrics/BlockLength + - Metrics/BlockLength diff --git a/app/assets/icons/membership.svg b/app/assets/icons/membership.svg new file mode 100644 index 00000000..5d983dd7 --- /dev/null +++ b/app/assets/icons/membership.svg @@ -0,0 +1,3 @@ + + + diff --git a/app/assets/icons/my-debt.svg b/app/assets/icons/my-debt.svg new file mode 100644 index 00000000..387118e7 --- /dev/null +++ b/app/assets/icons/my-debt.svg @@ -0,0 +1,3 @@ + + + diff --git a/app/assets/icons/my-disputes.svg b/app/assets/icons/my-disputes.svg new file mode 100644 index 00000000..66923a1e --- /dev/null +++ b/app/assets/icons/my-disputes.svg @@ -0,0 +1,3 @@ + + + diff --git a/app/assets/icons/profile.svg b/app/assets/icons/profile.svg new file mode 100644 index 00000000..df21c605 --- /dev/null +++ b/app/assets/icons/profile.svg @@ -0,0 +1,3 @@ + + + diff --git a/app/assets/icons/union-hub.svg b/app/assets/icons/union-hub.svg new file mode 100644 index 00000000..492353a0 --- /dev/null +++ b/app/assets/icons/union-hub.svg @@ -0,0 +1,3 @@ + + + diff --git a/app/assets/images/cancel_student_debt.jpg b/app/assets/images/cancel_student_debt.jpg new file mode 100644 index 00000000..9210eaea Binary files /dev/null and b/app/assets/images/cancel_student_debt.jpg differ diff --git a/app/assets/images/you_are_not_a_loan.png b/app/assets/images/you_are_not_a_loan.png new file mode 100644 index 00000000..929a5c6e Binary files /dev/null and b/app/assets/images/you_are_not_a_loan.png differ diff --git a/app/assets/stylesheets/_forms.scss b/app/assets/stylesheets/_forms.scss index 2aa39405..5fd99062 100644 --- a/app/assets/stylesheets/_forms.scss +++ b/app/assets/stylesheets/_forms.scss @@ -31,3 +31,35 @@ .StripeElement--webkit-autofill { background-color: #fefde5 !important; } + +.profile-container, +.edit-card, +.edit-status { + input, + .react-date-picker__wrapper, + textarea, + select, + #stripe-elements { + background: rgba(91, 203, 181, 0.1); + border: 1px solid #219653; + box-sizing: border-box; + border-radius: 6px; + input { + // background: rgba(91, 203, 181, 0.1); + border: none; + border-radius: 0; + } + } + .react-date-picker__wrapper { + width: 68%; + min-width: 150px; + } + .submit-btn-container input, + button.submit-btn, + .pause-membership-btn, + .resume-membership-btn { + background: #24ba9d; + border: solid 1px transparent; + border-radius: 8px; + } +} diff --git a/app/assets/stylesheets/_sidebar.scss b/app/assets/stylesheets/_sidebar.scss new file mode 100644 index 00000000..a6944547 --- /dev/null +++ b/app/assets/stylesheets/_sidebar.scss @@ -0,0 +1,21 @@ +nav { + .sidebar-item { + color: rgb(67, 67, 67); + box-shadow: 1px 1px 3px rgba(34, 34, 34, 0.2); + + // height: 4rem; + // font-weight: 300; + + // font-size: 1rem; + // justify-content: space-between; + // padding: 1rem 1.5rem; + // border-radius: 0px 4px 4px 0px; + &.current-path { + background: #434343; + color: #ffffff; + svg path { + fill: #ffffff; + } + } + } +} diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss index 2779893e..7e397733 100644 --- a/app/assets/stylesheets/application.scss +++ b/app/assets/stylesheets/application.scss @@ -15,14 +15,14 @@ *= require_self */ -@import "base/globals.scss"; +@import 'base/globals.scss'; html, body { font-size: 100%; margin: 0; padding: 0; - font-family: "Libre Franklin", sans-serif; + font-family: 'Libre Franklin' !important; height: 100vh; } diff --git a/app/assets/stylesheets/membership.scss b/app/assets/stylesheets/membership.scss new file mode 100644 index 00000000..a0ea0af7 --- /dev/null +++ b/app/assets/stylesheets/membership.scss @@ -0,0 +1,23 @@ +.membership, +.membership-edit-amount { + .subscription-amount, + input { + background: rgba(91, 203, 181, 0.1); + border: 1px solid #219653; + box-sizing: border-box; + border-radius: 6px; + } + .update-cc-link, + .change-amount-link, + .update-status-link, + .edit-amount-button { + background: #24ba9d; + border: solid 1px transparent; + border-radius: 8px; + } +} + +.membership h3 { + // font-size: 4rem; + // line-height: 1; +} diff --git a/app/components/address_field_component.html.erb b/app/components/address_field_component.html.erb index f331d607..a15554f0 100644 --- a/app/components/address_field_component.html.erb +++ b/app/components/address_field_component.html.erb @@ -1,27 +1,27 @@
Address -
-
+
+
<%= f.label :address_line1, class: "sr-only" %> <%= f.text_field :address_line1, class: "focus:ring-indigo-500 focus:border-indigo-500 relative block w-full rounded-none rounded-t-md bg-transparent focus:z-10 sm:text-sm border-gray-300", placeholder: "Street" %>
-
+
<%= f.label :address_city, class: "sr-only" %> <%= f.text_field :address_city, class: "focus:ring-indigo-500 focus:border-indigo-500 relative block w-full rounded-none bg-transparent focus:z-10 sm:text-sm border-gray-300", placeholder: "City" %>
-
-
+
+
<%= f.label :address_state, class: "sr-only" %> <%= f.text_field :address_state, class: "focus:ring-indigo-500 focus:border-indigo-500 relative block w-full rounded-none bg-transparent focus:z-10 sm:text-sm border-gray-300", placeholder: "State" %>
-
+
<%= f.label :address_zip, class: "sr-only" %> <%= f.text_field :address_zip, class: "focus:ring-indigo-500 focus:border-indigo-500 relative block w-full rounded-none bg-transparent focus:z-10 sm:text-sm border-gray-300 border-l-0", placeholder: "Postal code" %>
-
+
<%= f.label :address_country_code, class: "sr-only" %> <%= f.country_select(:address_country_code, {priority_countries: ['US', 'CA'], include_blank: "Select country"}, {class: 'focus:ring-indigo-500 focus:border-indigo-500 relative block w-full rounded-none rounded-b-md bg-transparent focus:z-10 sm:text-sm border-gray-300', id: 'address-country-code-select', required: true}) %>
-
+ \ No newline at end of file diff --git a/app/controllers/user_profiles_controller.rb b/app/controllers/user_profiles_controller.rb index 8130c8fb..02cffc8f 100644 --- a/app/controllers/user_profiles_controller.rb +++ b/app/controllers/user_profiles_controller.rb @@ -40,6 +40,8 @@ def user_profile_params :address_zip, :address_country, :address_country_code, + :about_me, + :why_joined, :facebook, :twitter, :instagram, diff --git a/app/helpers/svg_helper.rb b/app/helpers/svg_helper.rb new file mode 100644 index 00000000..bdc15f65 --- /dev/null +++ b/app/helpers/svg_helper.rb @@ -0,0 +1,7 @@ +module SvgHelper + def show_svg(path) + File.open("app/assets/icons/#{path}", "rb") do |file| + raw file.read + end + end +end diff --git a/app/javascript/bundles/Admin/components/Dashboard/Metric.jsx b/app/javascript/bundles/Admin/components/Dashboard/Metric.jsx index 50510af1..4020ff32 100644 --- a/app/javascript/bundles/Admin/components/Dashboard/Metric.jsx +++ b/app/javascript/bundles/Admin/components/Dashboard/Metric.jsx @@ -11,14 +11,14 @@ const useStyles = makeStyles(theme => ({ marginRight: theme.spacing(2), padding: theme.spacing(2), flex: 1, - textAlign: 'center' + textAlign: 'center', }, text: { - fontSize: '3rem' + fontSize: '3rem', }, description: { - fontSize: '1rem' - } + fontSize: '1rem', + }, })) export const Metric = ({ description, text }) => { @@ -34,5 +34,5 @@ export const Metric = ({ description, text }) => { Metric.propTypes = { description: PropTypes.string.isRequired, - text: PropTypes.string.isRequired + text: PropTypes.string.isRequired, } diff --git a/app/javascript/bundles/Admin/components/Dashboard/index.jsx b/app/javascript/bundles/Admin/components/Dashboard/index.jsx index 7c5310d5..5493fd72 100644 --- a/app/javascript/bundles/Admin/components/Dashboard/index.jsx +++ b/app/javascript/bundles/Admin/components/Dashboard/index.jsx @@ -9,8 +9,8 @@ const useStyles = makeStyles(theme => ({ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', - flexWrap: 'wrap' - } + flexWrap: 'wrap', + }, })) const transformToMoneyFormat = number => numeral(number).format('$0,0.00') @@ -19,7 +19,7 @@ const DashboardView = ({ activeSubsctiptions, amountFromSubscriptions, donationsCount, - amountFromDonations + amountFromDonations, }) => { const classes = useStyles() @@ -52,7 +52,7 @@ DashboardView.propTypes = { activeSubsctiptions: PropTypes.number.isRequired, amountFromSubscriptions: PropTypes.number.isRequired, donationsCount: PropTypes.number.isRequired, - amountFromDonations: PropTypes.number.isRequired + amountFromDonations: PropTypes.number.isRequired, } export const Dashboard = props => diff --git a/app/javascript/bundles/Admin/components/Donations/Table.jsx b/app/javascript/bundles/Admin/components/Donations/Table.jsx index 273952fe..d5f844d8 100644 --- a/app/javascript/bundles/Admin/components/Donations/Table.jsx +++ b/app/javascript/bundles/Admin/components/Donations/Table.jsx @@ -14,16 +14,16 @@ const useStyles = makeStyles(theme => ({ root: { width: '100%', marginTop: theme.spacing(3), - overflowX: 'auto' + overflowX: 'auto', }, table: { - minWidth: 650 - } + minWidth: 650, + }, })) const DONATION_TYPES = { ONE_OFF: 'One time Contribution', - SUBSCRIPTION: 'Monthly Subscription' + SUBSCRIPTION: 'Monthly Subscription', } export default function DonationsTable ({ donations }) { @@ -66,9 +66,9 @@ export default function DonationsTable ({ donations }) { } DonationsTable.propTypes = { - donations: PropTypes.array + donations: PropTypes.array, } DonationsTable.defaultTypes = { - donations: [] + donations: [], } diff --git a/app/javascript/bundles/Admin/components/Drawer.jsx b/app/javascript/bundles/Admin/components/Drawer.jsx index dfc58fd0..ac311f1f 100644 --- a/app/javascript/bundles/Admin/components/Drawer.jsx +++ b/app/javascript/bundles/Admin/components/Drawer.jsx @@ -25,38 +25,38 @@ const drawerWidth = 240 const useStyles = makeStyles(theme => ({ root: { - display: 'flex' + display: 'flex', }, drawer: { [theme.breakpoints.up('sm')]: { width: drawerWidth, - flexShrink: 0 - } + flexShrink: 0, + }, }, appBar: { marginLeft: drawerWidth, [theme.breakpoints.up('sm')]: { - width: `calc(100% - ${drawerWidth}px)` - } + width: `calc(100% - ${drawerWidth}px)`, + }, }, menuButton: { marginRight: theme.spacing(2), [theme.breakpoints.up('sm')]: { - display: 'none' - } + display: 'none', + }, }, toolbar: theme.mixins.toolbar, drawerPaper: { - width: drawerWidth + width: drawerWidth, }, content: { flexGrow: 1, - padding: theme.spacing(3) + padding: theme.spacing(3), }, rootLink: { padding: '0.25rem 0.5rem 0', - display: 'block' - } + display: 'block', + }, })) function ResponsiveDrawer (props) { @@ -135,10 +135,10 @@ function ResponsiveDrawer (props) { open={mobileOpen} onClose={handleDrawerToggle} classes={{ - paper: classes.drawerPaper + paper: classes.drawerPaper, }} ModalProps={{ - keepMounted: true // Better open performance on mobile. + keepMounted: true, // Better open performance on mobile. }} > {drawer(logoUrl)} @@ -147,7 +147,7 @@ function ResponsiveDrawer (props) { diff --git a/app/javascript/bundles/Admin/components/Funds/Table.jsx b/app/javascript/bundles/Admin/components/Funds/Table.jsx index 7d7946b5..9d348626 100644 --- a/app/javascript/bundles/Admin/components/Funds/Table.jsx +++ b/app/javascript/bundles/Admin/components/Funds/Table.jsx @@ -13,11 +13,11 @@ const useStyles = makeStyles(theme => ({ root: { width: '100%', marginTop: theme.spacing(3), - overflowX: 'auto' + overflowX: 'auto', }, table: { - minWidth: 650 - } + minWidth: 650, + }, })) export default function FundsTable ({ funds }) { @@ -62,9 +62,9 @@ export default function FundsTable ({ funds }) { } FundsTable.propTypes = { - funds: PropTypes.array + funds: PropTypes.array, } FundsTable.defaultTypes = { - funds: [] + funds: [], } diff --git a/app/javascript/bundles/Admin/components/Subscriptions/Table.jsx b/app/javascript/bundles/Admin/components/Subscriptions/Table.jsx index e13cde6e..5bb4cfa5 100644 --- a/app/javascript/bundles/Admin/components/Subscriptions/Table.jsx +++ b/app/javascript/bundles/Admin/components/Subscriptions/Table.jsx @@ -13,11 +13,11 @@ const useStyles = makeStyles(theme => ({ root: { width: '100%', marginTop: theme.spacing(3), - overflowX: 'auto' + overflowX: 'auto', }, table: { - minWidth: 650 - } + minWidth: 650, + }, })) export default function SubcriptionsTable ({ subscriptions }) { @@ -81,9 +81,9 @@ export default function SubcriptionsTable ({ subscriptions }) { } SubcriptionsTable.propTypes = { - subscriptions: PropTypes.array + subscriptions: PropTypes.array, } SubcriptionsTable.defaultTypes = { - subscriptions: [] + subscriptions: [], } diff --git a/app/javascript/bundles/Admin/components/Users/Table.jsx b/app/javascript/bundles/Admin/components/Users/Table.jsx index 546410e1..59235d8c 100644 --- a/app/javascript/bundles/Admin/components/Users/Table.jsx +++ b/app/javascript/bundles/Admin/components/Users/Table.jsx @@ -12,11 +12,11 @@ const useStyles = makeStyles(theme => ({ root: { width: '100%', marginTop: theme.spacing(3), - overflowX: 'auto' + overflowX: 'auto', }, table: { - minWidth: 650 - } + minWidth: 650, + }, })) export default function UsersTable ({ users }) { @@ -54,9 +54,9 @@ export default function UsersTable ({ users }) { } UsersTable.propTypes = { - users: PropTypes.array + users: PropTypes.array, } UsersTable.defaultTypes = { - users: [] + users: [], } diff --git a/app/javascript/bundles/User/components/DonationsHistory.jsx b/app/javascript/bundles/User/components/DonationsHistory.jsx index fce457ab..5a441fb8 100644 --- a/app/javascript/bundles/User/components/DonationsHistory.jsx +++ b/app/javascript/bundles/User/components/DonationsHistory.jsx @@ -15,19 +15,19 @@ const useStyles = makeStyles(theme => ({ width: '100%', marginTop: theme.spacing(3), padding: theme.spacing(4), - overflowX: 'auto' + overflowX: 'auto', }, table: { - minWidth: 650 + minWidth: 650, }, link: { - color: 'blue' - } + color: 'blue', + }, })) const DONATION_TYPES = { ONE_OFF: 'One time Contribution', - SUBSCRIPTION: 'Monthly Subscription' + SUBSCRIPTION: 'Monthly Subscription', } const calcDonationTotal = donations => { @@ -104,7 +104,7 @@ function DonationsView ({ donations }) { } DonationsView.propTypes = { - donations: PropTypes.array + donations: PropTypes.array, } export const DonationsHistory = props => diff --git a/app/javascript/bundles/User/components/Drawer.jsx b/app/javascript/bundles/User/components/Drawer.jsx index e04e3925..60f5169c 100644 --- a/app/javascript/bundles/User/components/Drawer.jsx +++ b/app/javascript/bundles/User/components/Drawer.jsx @@ -22,38 +22,38 @@ const drawerWidth = 240 const useStyles = makeStyles(theme => ({ root: { - display: 'flex' + display: 'flex', }, drawer: { [theme.breakpoints.up('sm')]: { width: drawerWidth, - flexShrink: 0 - } + flexShrink: 0, + }, }, appBar: { marginLeft: drawerWidth, [theme.breakpoints.up('sm')]: { - width: `calc(100% - ${drawerWidth}px)` - } + width: `calc(100% - ${drawerWidth}px)`, + }, }, menuButton: { marginRight: theme.spacing(2), [theme.breakpoints.up('sm')]: { - display: 'none' - } + display: 'none', + }, }, toolbar: theme.mixins.toolbar, drawerPaper: { - width: drawerWidth + width: drawerWidth, }, content: { flexGrow: 1, - padding: theme.spacing(3) + padding: theme.spacing(3), }, rootLink: { padding: '0.25rem 0.5rem 0', - display: 'block' - } + display: 'block', + }, })) function ResponsiveDrawer (props) { @@ -134,10 +134,10 @@ function ResponsiveDrawer (props) { open={mobileOpen} onClose={handleDrawerToggle} classes={{ - paper: classes.drawerPaper + paper: classes.drawerPaper, }} ModalProps={{ - keepMounted: true // Better open performance on mobile. + keepMounted: true, // Better open performance on mobile. }} > {drawer(logoUrl)} @@ -146,7 +146,7 @@ function ResponsiveDrawer (props) { diff --git a/app/javascript/bundles/User/components/SubscriptionCancel.jsx b/app/javascript/bundles/User/components/SubscriptionCancel.jsx index 11e63e6e..471622ab 100644 --- a/app/javascript/bundles/User/components/SubscriptionCancel.jsx +++ b/app/javascript/bundles/User/components/SubscriptionCancel.jsx @@ -11,7 +11,7 @@ import { DialogContent, DialogContentText, DialogTitle, - Paper + Paper, } from '@material-ui/core' const SUBSCRIPTION_CANCEL_URL = userID => `/users/${userID}/subscription` @@ -22,11 +22,11 @@ const useStyles = makeStyles(theme => ({ marginTop: theme.spacing(3), overflowX: 'auto', padding: theme.spacing(4), - width: '100%' + width: '100%', }, table: { - minWidth: 650 - } + minWidth: 650, + }, })) const NoSubscriptionView = ({ user }) => { @@ -48,7 +48,7 @@ const NoSubscriptionView = ({ user }) => { function SubscriptionCancelView ({ user, subscription, - isSubscriptionChanging + isSubscriptionChanging, }) { const classes = useStyles() const isSubscriptionActive = subscription && subscription.active @@ -71,8 +71,8 @@ function SubscriptionCancelView ({ credentials: 'include', headers: { Accept: 'application/json', - 'Content-Type': 'application/json' - } + 'Content-Type': 'application/json', + }, } ) diff --git a/app/javascript/bundles/User/components/UserShow.jsx b/app/javascript/bundles/User/components/UserShow.jsx index 806cc43b..ef120449 100644 --- a/app/javascript/bundles/User/components/UserShow.jsx +++ b/app/javascript/bundles/User/components/UserShow.jsx @@ -8,8 +8,8 @@ const useStyles = makeStyles(theme => ({ width: '100%', marginTop: theme.spacing(3), padding: theme.spacing(4), - overflowX: 'auto' - } + overflowX: 'auto', + }, })) function UserShowView ({ user, subscription, streak }) { @@ -42,7 +42,7 @@ function UserShowView ({ user, subscription, streak }) { UserShowView.propTypes = { user: PropTypes.object.isRequired, streak: PropTypes.number, - subscription: PropTypes.object.isRequired + subscription: PropTypes.object.isRequired, } export const UserShow = props => diff --git a/app/javascript/components/ButtonTout/index.jsx b/app/javascript/components/ButtonTout/index.jsx new file mode 100644 index 00000000..f9b8aec0 --- /dev/null +++ b/app/javascript/components/ButtonTout/index.jsx @@ -0,0 +1,16 @@ +import React, { useState } from 'react' + +const ButtonTout = (props = {}) => { + const { title, text, link } = props + + return ( + <> + +
{title}
+

{text}

+ + + ) +} + +export default ButtonTout diff --git a/app/javascript/components/ButtonTout/style.scss b/app/javascript/components/ButtonTout/style.scss new file mode 100644 index 00000000..bef6b99c --- /dev/null +++ b/app/javascript/components/ButtonTout/style.scss @@ -0,0 +1,36 @@ +div.button-tout-container { + display: flex; + flex-direction: column; + margin-bottom: 2rem; + flex-direction: row; + flex-wrap: wrap; + div.button-tout:nth-child(1) { + background-color: #ff4630; + } + div.button-tout.two-line-title h6 { + padding: 2.45rem 1rem 0.455rem; + } + div.button-tout { + background-color: #20a78c; + color: #ffffff; + height: 413px; + font-size: 22px; + margin: 1rem 0; + @media (min-width: 640px) { + max-width: 287px; + &.odd { + margin: 1rem 2rem 1rem 0; + } + } + h6 { + text-decoration: underline; + font-weight: 800; + padding: 2.5rem 1rem; + letter-spacing: 0.5px; + } + p { + font-weight: 200; + padding: 0 1rem; + } + } +} diff --git a/app/javascript/components/PhoneNumberField/style.scss b/app/javascript/components/PhoneNumberField/style.scss index 7e495a4d..aab6def8 100644 --- a/app/javascript/components/PhoneNumberField/style.scss +++ b/app/javascript/components/PhoneNumberField/style.scss @@ -1,30 +1,61 @@ .PhoneInput { - @apply flex rounded-md shadow-sm; - - .PhoneInputCountry { - @apply inline-flex items-center rounded-l-md border border-r-0 border-gray-300 bg-gray-50 text-gray-500 sm:text-sm; - } - - .PhoneInputCountrySelect { - @apply focus:ring-indigo-500 focus:border-indigo-500 h-full py-0 pl-3 pr-7 border-transparent bg-transparent text-gray-500 sm:text-sm rounded-md; + display: flex; + flex-direction: column; + @media (min-width: 640px) { + flex-direction: row; + justify-content: space-between; } - - .PhoneInputCountryIcon, - .PhoneInputCountrySelectArrow { - @apply hidden; + .PhoneInputCountrySelect, + .PhoneInputInput { + width: 100%; + background: rgba(91, 203, 181, 0.1); + border: 1px solid #219653; + box-sizing: border-box; + border-radius: 6px; + &:focus { + // border-color: #ff4630; + } } - + .PhoneInputCountry, .PhoneInputInput { - @apply flex-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full min-w-0 rounded-none rounded-r-md sm:text-sm border-gray-300; + @media (min-width: 640px) { + max-width: 49%; + min-width: 49%; + } + } + .PhoneInputCountryIconImg { + height: 0; } } -.PhoneInput.error { - .PhoneInputCountry { - @apply text-red-900 placeholder-red-300 border-red-300 focus:outline-none focus:ring-red-500 focus:border-red-500; +@layer components { + .PhoneInput { + @apply flex rounded-md shadow-sm; + .PhoneInputCountry { + @apply inline-flex items-center rounded-l-md text-gray-500 sm:text-sm; + } + + .PhoneInputCountrySelect { + @apply focus:ring-indigo-500 focus:border-indigo-500 h-full py-0 pl-3 pr-7 border-transparent bg-transparent text-gray-500 sm:text-sm rounded-md; + } + + .PhoneInputCountryIcon, + .PhoneInputCountrySelectArrow { + @apply hidden; + } + + .PhoneInputInput { + @apply flex-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full min-w-0 rounded-none rounded-r-md sm:text-sm border-gray-300 sm:w-1/2; + } } - .PhoneInputInput { - @apply pr-10 text-red-900 placeholder-red-300 border-red-300 focus:outline-none focus:ring-red-500 focus:border-red-500; + .PhoneInput.error { + .PhoneInputCountry { + @apply text-red-900 placeholder-red-300 border-red-300 focus:outline-none focus:ring-red-500 focus:border-red-500; + } + + .PhoneInputInput { + @apply pr-10 text-red-900 placeholder-red-300 border-red-300 focus:outline-none focus:ring-red-500 focus:border-red-500; + } } } diff --git a/app/javascript/components/UpdateCreditCardForm/BillingAddressField.jsx b/app/javascript/components/UpdateCreditCardForm/BillingAddressField.jsx index 902246cd..b71249ec 100644 --- a/app/javascript/components/UpdateCreditCardForm/BillingAddressField.jsx +++ b/app/javascript/components/UpdateCreditCardForm/BillingAddressField.jsx @@ -6,8 +6,8 @@ const BillingAddressField = ({ countryOptions = [] }) => { Address -
-
+
+
@@ -20,7 +20,7 @@ const BillingAddressField = ({ countryOptions = [] }) => { required />
-
+
@@ -33,8 +33,8 @@ const BillingAddressField = ({ countryOptions = [] }) => { required />
-
-
+
+
@@ -47,7 +47,7 @@ const BillingAddressField = ({ countryOptions = [] }) => { required />
-
+
diff --git a/app/javascript/components/UpdateCreditCardForm/index.jsx b/app/javascript/components/UpdateCreditCardForm/index.jsx index c8fe0fef..30349091 100644 --- a/app/javascript/components/UpdateCreditCardForm/index.jsx +++ b/app/javascript/components/UpdateCreditCardForm/index.jsx @@ -7,7 +7,7 @@ import { CardElement, Elements, useStripe, - useElements + useElements, } from '@stripe/react-stripe-js' import BillingAddressField from './BillingAddressField' @@ -38,7 +38,7 @@ const SubmitButton = ({ isLoading }) => { return ( -
-
- <%= render 'shared/flash_messages'%> - <%= yield %> -
+ <%= render 'shared/analytics_scripts'%> + + + + <%= render 'shared/header' %> + +
+ <%= render 'shared/sidebar' %> +
+
+
+
+ <%= render 'shared/flash_messages'%> + <%= yield %> +
- - +
+ + + \ No newline at end of file diff --git a/app/views/layouts/backoffice.html.erb b/app/views/layouts/backoffice.html.erb index 1a5ec35c..e3eab45c 100644 --- a/app/views/layouts/backoffice.html.erb +++ b/app/views/layouts/backoffice.html.erb @@ -1,38 +1,40 @@ - - Membership - - <%= csrf_meta_tags %> - <%= csp_meta_tag %> - <%= content_for?(:head) ? yield(:head) : '' %> - <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> - - + + Membership + + <%= csrf_meta_tags %> + <%= csp_meta_tag %> + <%= content_for?(:head) ? yield(:head) : '' %> - - - - - - - + <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> + + - <%= render 'layouts/sentry' %> + + + + + + + - <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %> - <%= javascript_include_tag 'https://checkout.stripe.com/checkout.js' %> - <%= javascript_include_tag 'https://js.stripe.com/v3/' %> - <%= javascript_pack_tag 'user-bundle' %> - + <%= render 'layouts/sentry' %> - - <%= react_component("Drawer", props: {pageTitle: @current_page_title, user: @user, logoUrl: asset_path('logo-light.svg')}) %> -
-
- <%= yield %> -
-
- - + <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %> + <%= javascript_include_tag 'https://checkout.stripe.com/checkout.js' %> + <%= javascript_include_tag 'https://js.stripe.com/v3/' %> + <%= javascript_pack_tag 'user-bundle' %> + + + + <%= react_component("Drawer", props: {pageTitle: @current_page_title, user: @user, logoUrl: asset_path('logo-light.svg')}) %> +
+
+ <%= yield %> +
+
+ + + \ No newline at end of file diff --git a/app/views/layouts/minimal.html.erb b/app/views/layouts/minimal.html.erb index 8bc0bbef..44a7b293 100644 --- a/app/views/layouts/minimal.html.erb +++ b/app/views/layouts/minimal.html.erb @@ -1,31 +1,33 @@ - - Membership - - <%= csrf_meta_tags %> - <%= csp_meta_tag %> - <%= content_for?(:head) ? yield(:head) : '' %> - <%= javascript_pack_tag 'application' %> - <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> - <%= stylesheet_link_tag 'minimal', media: 'all', 'data-turbolinks-track': 'reload' %> - - - - - - - - + + Membership + + <%= csrf_meta_tags %> + <%= csp_meta_tag %> + <%= content_for?(:head) ? yield(:head) : '' %> + <%= javascript_pack_tag 'application' %> + <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> + <%= stylesheet_link_tag 'minimal', media: 'all', 'data-turbolinks-track': 'reload' %> + - <%= render 'layouts/sentry' %> - <%= render 'shared/analytics_scripts'%> - + + + + + + + - -
- <%= yield %> -
- - + <%= render 'layouts/sentry' %> + <%= render 'shared/analytics_scripts'%> + + + +
+ <%= yield %> +
+ + + \ No newline at end of file diff --git a/app/views/memberships/_edit_amount_form.html.erb b/app/views/memberships/_edit_amount_form.html.erb index 4fe37ca3..9623adbb 100644 --- a/app/views/memberships/_edit_amount_form.html.erb +++ b/app/views/memberships/_edit_amount_form.html.erb @@ -1,44 +1,44 @@ <%= form_with(model: membership, url: update_membership_amount_path, builder: ApplicationFormBuilder, local: true, class: "space-y-8") do |f| %> - - <% if membership.errors.any? %> -
-
-
- - -
-
-

- <%= pluralize(membership.errors.count, "error") %> with your submission -

-
-
    - <% membership.errors.full_messages.each do |message| %> -
  • <%= message %>
    • - <% end %> -
-
-
+ +<% if membership.errors.any? %> +
+
+
+ + +
+
+

+ <%= pluralize(membership.errors.count, "error") %> with your submission +

+
+
    + <% membership.errors.full_messages.each do |message| %> +
  • <%= message %>
    • + <% end %> +
- <% end %> +
+
+<% end %> -
-
-
- <%= f.label :amount, class: "block text-sm font-medium text-gray-700" %> -
- <%= f.number_field :amount, name: 'membership[amount]', id: 'membership_amount', min: 0, step: 1, class: "block w-full sm:text-sm border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500" %> -
+
+
+
+ <%= f.label :amount, class: "block text-sm font-medium text-gray-700" %> +
+ <%= f.number_field :amount, name: 'membership[amount]', id: 'membership_amount', min: 0, step: 1, class: "block w-full sm:text-sm border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500" %>
+
-
-
- <%= f.submit 'Save', class: "ml-3 inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500" %> -
+
+
+ <%= f.submit 'Save', class: "edit-amount-button ml-3 inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500" %>
-<% end %> +
+<% end %> \ No newline at end of file diff --git a/app/views/memberships/_pause_membership.html.erb b/app/views/memberships/_pause_membership.html.erb index 320b2fda..3d212314 100644 --- a/app/views/memberships/_pause_membership.html.erb +++ b/app/views/memberships/_pause_membership.html.erb @@ -1,16 +1,16 @@ -
-
-

+

+
+

Pause your membership

-

+

You won't be charged again until you resume your subscription.

-
+
<%= form_with(model: @membership, url: pause_membership_path, builder: ApplicationFormBuilder, local: true) do |f| %> <%= f.submit 'Pause membership', - class: "inline-flex justify-center px-4 py-2 text-sm font-medium text-white bg-gray-800 border border-transparent rounded-md shadow-sm hover:bg-gray-900 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-900", + class: "w-full sm:max-w-max inline-flex justify-center px-4 py-2 text-lg sm:text-sm font-medium text-white bg-gray-800 border border-transparent rounded-md shadow-sm hover:bg-gray-900 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-900", data: { confirm: 'Are you sure?' } %> <% end %> diff --git a/app/views/memberships/_resume_membership.html.erb b/app/views/memberships/_resume_membership.html.erb index 57f33b42..0e895a49 100644 --- a/app/views/memberships/_resume_membership.html.erb +++ b/app/views/memberships/_resume_membership.html.erb @@ -1,19 +1,19 @@ -
-
-

+

+
+

Resume your membership

-

+

You will be charged to your current card.

<%= link_to "Update your card", edit_membership_card_path, class: "font-medium text-blue-700 hover:text-blue-600" %>

-
+
<%= form_with(model: @membership, url: resume_membership_path, builder: ApplicationFormBuilder, local: true) do |f| %> <%= f.submit 'Resume membership', - class: "inline-flex justify-center px-4 py-2 text-sm font-medium text-white bg-gray-800 border border-transparent rounded-md shadow-sm hover:bg-gray-900 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-900" + class: "w-full sm:max-w-max inline-flex justify-center px-4 py-2 text-lg sm:text-sm font-medium text-white bg-gray-800 border border-transparent rounded-md shadow-sm hover:bg-gray-900 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-900" %> <% end %>
diff --git a/app/views/memberships/edit_amount.html.erb b/app/views/memberships/edit_amount.html.erb index bd777ff5..22f8cf0b 100644 --- a/app/views/memberships/edit_amount.html.erb +++ b/app/views/memberships/edit_amount.html.erb @@ -1,9 +1,11 @@ -
-

- Change membership amount -

-

Here you can change your amount

-
+
+
+

+ Change membership amount +

+

Here you can change your amount

+
- -<%= render 'edit_amount_form', membership: @membership %> + + <%= render 'edit_amount_form', membership: @membership %> +
diff --git a/app/views/memberships/edit_card.html.erb b/app/views/memberships/edit_card.html.erb index 8c73dbde..da7b13aa 100644 --- a/app/views/memberships/edit_card.html.erb +++ b/app/views/memberships/edit_card.html.erb @@ -1,17 +1,18 @@ -
-

- Change membership card -

-

Here you can change your card

-
- - -<%= render 'edit_card_form', membership: @membership %> +
+
+

+ Change membership card +

+

Update your card info.

+
+ + <%= render 'edit_card_form', membership: @membership %> +
<% content_for :head do %> - + <% end %> diff --git a/app/views/memberships/edit_status.html.erb b/app/views/memberships/edit_status.html.erb index aa79cbfb..d9a66c9f 100644 --- a/app/views/memberships/edit_status.html.erb +++ b/app/views/memberships/edit_status.html.erb @@ -1,17 +1,19 @@ -
-

- Change your membership status -

-

Your membership is <%= @membership.status %>

-
- -
-
-
- <% if @membership.paused? %> - <%= render "resume_membership" %> - <% else %> - <%= render "pause_membership" %> - <% end %> +
+
+

+ Change your membership status +

+

Your membership is <%= @membership.status %>

-
+ +
+
+
+ <% if @membership.paused? %> + <%= render "resume_membership" %> + <% else %> + <%= render "pause_membership" %> + <% end %> +
+
+
diff --git a/app/views/memberships/index.html.erb b/app/views/memberships/index.html.erb index e9e3dbac..1c8b9844 100644 --- a/app/views/memberships/index.html.erb +++ b/app/views/memberships/index.html.erb @@ -1,36 +1,39 @@ -
-

- My membership -

-

Here you can change your membership preferences.

-
+
+
+

+ Membership +

+

Update your membership preferences here. Need further support? Email us at: + +

+
- -<% if @membership.present? %> + + <% if @membership.present? %>
-

Your membership is <%= @membership&.status %>

+

Your membership is <%= @membership&.status %>

-

+

$<%= @membership&.amount.to_i %> / month

- <%= link_to "Change amount", edit_membership_amount_path, class: "inline-flex justify-center px-4 py-2 text-sm font-medium text-white bg-gray-800 border border-transparent rounded-md shadow-sm hover:bg-gray-900 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-900" %> + <%= link_to "Change amount", edit_membership_amount_path, class: "change-amount-link inline-flex justify-center px-4 py-2 text-sm font-bold text-white bg-gray-800 border border-transparent rounded-md shadow-sm hover:bg-gray-900 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-900" %> +
-
- <% if @membership.active? %> + <% if @membership.active? %>

Your next payment is due on <%= @membership&.next_payment_due_at.strftime("%b, %e") %>

- <% end %> + <% end %>
-

+

Payment method

@@ -38,9 +41,9 @@

- <%= link_to "Update credit card", edit_membership_card_path, class: "inline-flex justify-center px-4 py-2 text-sm font-medium text-white bg-gray-800 border border-transparent rounded-md shadow-sm hover:bg-gray-900 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-900" %> + <%= link_to "Update credit card", edit_membership_card_path, class: "update-cc-link min-w-max inline-flex justify-center px-4 py-2 text-sm font-bold text-white bg-gray-800 border border-transparent rounded-md shadow-sm hover:bg-gray-900 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-900" %> +
-
@@ -51,24 +54,25 @@ Change membership status

<% if @membership.active? %> -

- Pause or cancel your membership -

+

+ Pause or cancel your membership +

<% else %> -

- Resume your membership -

+

+ Resume your membership +

<% end %>
- <%= link_to "Update status", edit_membership_status_path, class: "inline-flex justify-center px-4 py-2 text-sm font-medium text-white bg-gray-800 border border-transparent rounded-md shadow-sm hover:bg-gray-900 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-900" %> + <%= link_to "Update status", edit_membership_status_path, class: "update-status-link min-w-max inline-flex justify-center px-4 py-2 text-sm font-bold text-white bg-gray-800 border border-transparent rounded-md shadow-sm hover:bg-gray-900 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-900" %> +
-
-<% else %> + <% else %>

You haven't started your membership. ">Click here to start one.

-<% end %> + <% end %> +
diff --git a/app/views/shared/_sidebar.html.erb b/app/views/shared/_sidebar.html.erb index 2c38ca09..308e6b43 100644 --- a/app/views/shared/_sidebar.html.erb +++ b/app/views/shared/_sidebar.html.erb @@ -1,40 +1,14 @@ -