closes https://github.com/TryGhost/members.js/issues/72
- Portal previously user publication logo as header image on logged out pages
- Replaces `logo` setting with publication `icon` for header image
no issue
- Adds new mode check util for dev, preview and test, cleaned up manual checks
- Extracts Pages setup to its own file allowing common use
- Extracts action handling to its own file for neater structure
- Breaks up main App.js into proper methods for data fetching across usecases
- Adds better handling for App context through state
- Fixed trigger button test
no issue
- Fetching member for preview or dev mode was overwtiting member as null for prod
- Fixes by returning default member state for non preview/dev mode
closes https://github.com/TryGhost/members.js/issues/68
Signup screen can have any combination of available plans out of 3 currently allowed - free, monthly, yearly. This fix
- Always sets a default plan on screen based on which plans are available
- Uses `Free` as default if all plans are available, falls back to first plan in list otherwise
no issue
- Site url might be added with trailing slash, which causes site apis to be called with double slash
- Removes trailing slash from siteUrl if present
no issue
- By default, we have guards to allow pages based on logged in state
- For preview mode, we switch off this guard to allow signin/signup pages to open
no issue
- Adds guard to open right page based on member logged in state from data attribute
- Updated data attribute name to `data-portal` and values same as link handling
no issue
- Handles new look feel settings for portal icon button
- Adds auto width calculation for portal button based on text
- Adds new link page for portal links and data attributes
- Added contrast color calculation for accent color complimentary text
- Added copy text utility for allowing copy to clipboard
no issue
- CSS was added as part of App initialization and not used in project
- Top-level css leaks through on the page when script is added unlike the frame's css/inline-style
no issue
- Previously, the settings used for customization were `show_beacon`, `show_signup_name` and `allowed_plans`
- These settings were renamed to `portal_button`, `portal_name` and `portal_plans` respectively
- Updates usage of settings to new names
no issue
- Uses `show_beacon` setting to show/hide the default beacon
- Uses `show_signup_name` setting to show/hide the signup name
- Uses `allowed_plans` to show/hide the plans
no issue
- So far, we had to specify fixed height to iframe based on content of page, but this was not dynamic
- Calculates height of popup dynamically with refs and assigns to iframe to allow dynamic updates as content changes
- Allows configuration and different case handling for popup without worrying about proper height
closes https://github.com/TryGhost/members.js/issues/39
- Script needs correct ghost site url to initialize correct API endpoints for fetching site/members data
- `window.location.origin` won't work as correct ghost site url in all cases, specially for sites using subdirectory setup
- New meta tag `ghost:site` is inserted on themes with correct `siteUrl`, which is used to initialize api
no issue
- Moved `ParentContainer.js` to redundant empty top level `App.js` to remove extra nesting and improved naming
- Renamed `ParentContext` to `AppContext` and exported as default
- Fixed imports in all the components and test-utils with new structure
- Passed `siteUrl` to api setup from main App to allow easier configuration
- Updated App tests
closes https://github.com/TryGhost/members.js/issues/45
- Allows multiple trigger buttons on the page with data attribute `data-members-trigger-button`
- Allows passing page value to custom trigger button to show the popup on specified page, like signup
- Removes event handlers on unmount
closes https://github.com/TryGhost/members.js/issues/43
- Handle plans/payment flow based on new `isStripeConfigured` flag in members site data - Added in 82cf095600
- Hides plan update/subscribe/paid-signup flows if stripe is not setup
closes https://github.com/TryGhost/members.js/issues/38
- Added error state to signup action button in case of action failure like checkout session rejection
- Checkout session rejection was previously incorrectly timing out and returning 200
closes https://github.com/TryGhost/members.js/issues/34
- Updates save state handling for button to show intermediary Saved state before resetting
- Updates labels based on action running state
no issue
- This was disabled before last release to not overlap with existing member's script in latest version
- Enabled again to handle data attributes in a theme same as existing script
no issue
- Disables data attribute handling(existing members.js functionality) as it can attach handlers twice if loaded together with existing members.js
- Can be easily enabled once the new script is loaded from core
no issue
- Extract root div id so its easy to change it in one place in future
- Add stripe load method
- Extract all initial non-ui handling to setup method
no issue
- Load Stripe script if not already loaded on page
- Many members.js features rely on Stripe script to be loaded on the page to allow checkout/billing updates etc.
refs https://github.com/TryGhost/members.js/issues/32
- Inits data attribute handling from the copied over members.js file from core
- Uses `window.location.origin` as site url for api calls in data attribute handling
refs https://github.com/TryGhost/members.js/issues/32
- Copies over existing members.js script from core
- Handles members functionality in a theme using data-attributes assinged
- Only modification is tto use `siteUrl` value passed to the function for API calls
no issue
- Renames update plan action to update subscription as it can be also used to cancel current subscription
- Pass cancelAtPeriodEnd option to update subscription API call
no issue
- Updates profile page for free/paid member to render newsletter based on context
- Disable editing email field till we have the full flow for it
refs https://github.com/TryGhost/members.js/issues/20
- Allows paid/free member to update their newsletter subscription status
- Newsletter subscription status is immediately updated on toggle
refs https://github.com/TryGhost/members.js/issues/20
- Uses new member update endpoint to update logged-in member's profile info
- Member can update their name, email and newsletter subscription status
refs https://github.com/TryGhost/members.js/issues/29
- Create stripe checkout session in Ghost now supports passing metadata for custom info like name
- This allows storing member name post-signup after payment through stripe checkout is completed
no issue
- Adding default margin for action button can cause unwanted behavior where margin needs to be avoided.
- Allow higher level components to directly add margin if needed
refs https://github.com/TryGhost/members.js/issues/20
- Adds default page handling for paid member to open paid account area
- Refactors dev mode default page to be picked from env file if available
no issue
- Fixes custom trigger button not getting close class through any other way other than trigger
- Updates class name for open and close state by adding `gh-members-` namespace
refs https://github.com/TryGhost/members.js/issues/25
- No dependency on adminUrl anymore as endpoints exist on site url
- Members.js script is auto initialized, no need for explicit init in themes anymore
- No local .env values need to be set for development as script loads data from fixtures directly
closes https://github.com/TryGhost/members.js/issues/25
- Remove dependency on admin url for initialization as member endpoints now exist on site directly
- Auto initializes the script on load as need not wait on any external dependency
- API fetch cleanup in parent container
- Updates tests
refs https://github.com/TryGhost/members.js/issues/25
- Members endpoints were refactored in core to exist directly on site as `<SITE>/members/api/<RESOURCE>`
- All endpoints needed are now directly on SITE and removes the need for AdminURL
- Init method is updated to read site data from fixtures for local development, as no admin endpoint exists now
Core Refs:
0cba02b370fa4dfa1b21c70c49258e
no issue
- By default, CRA's webpack bundle combines and appends the main css at root level, so they are not applied inside any iframe.
- JSX Styles don't work for `:hover` and other similar selectors which is needed to style certain components like checkboxes
- This uses a hack where we append `<style> </style>` tag with all CSS inside the head of iframe dynamically as string
- We can create separate variables to keep styles grouped logically, and export them as one appended style string to apply styles in iframe.
no issue
- Updates `yarn script` to use same consistent format we use across org
- Removes use of `npm` in publish
- Adds `preship` to run lint - ideally should run tests but react tests run in interactive mode and are very slow atm, need to sort that out first.
refs https://github.com/TryGhost/members.js/issues/20
Updates trigger default icon to use member's gravatar if logged in via common component, which fallbacks to user icon when gravatar is blank.
refs https://github.com/TryGhost/members.js/issues/20
- Adds a common component to render member gravatar with backup of user icon where gravatar is not available or is blank.
- Used in both Trigger component for logged in member as well as account areas.
no issue
The members-js package is published on npm and this ensures `yarn ship` attempts to push to correct registry instead of yarn registry in case not set globally.
refs https://github.com/TryGhost/members.js/issues/10
- Takes advantage of change here - 24b83bdc49 - to pre-fill customer email in anonymous checkout flow
- Member cannot change their email in this checkout session, allowing consistency and correct linking post checkout
refs https://github.com/TryGhost/membersjs/issues/10
We use stripe query param `?stripe=<state>` for redirects from checkout session, this handles the magic link popup for checkout success state on redirect.
refs https://github.com/TryGhost/members.js/issues/10
We want to use the common UI component for rendering the plans section. Also fixes the weird dom sync problem with checkboxes by adding a timeout for small lag to keep the state in sync.
refs https://github.com/TryGhost/members.js/issues/10
Adds happy path flow for triggering anonymous checkout from signup page when monthly or yearly plan is selected. Opens the stripe checkout session with empty email, and currently doesn't handle the success or failure redirect.
refs https://github.com/TryGhost/members.js/issues/5
Switched to using absolute path for default test-utils setup file as relative imports become too messy when we keep tests for a component next to it. This setup allows using absolute path for common test-utils file which is used in almost all tests for initial setup.
refs https://github.com/TryGhost/members.js/issues/5
- We want to allow .env in source control mainly to use react-testing-library's recommended setup for common test-utils. It uses .env file to define NODE_PATH, which helps in avoiding relative imports in tests as we keep test files next to UI components.
- CRA also by default suggests committing .env files to source control
refs https://github.com/TryGhost/members.js/issues/5
- Streamlined data init flow
- Streamlined development mode initialization
- Moved fixtures to utils
- Removed unused or redundant methods
ref https://github.com/TryGhost/members.js/issues/5
React context allows us cleaner setup in codebase with shared data and methods across components at different nesting levels. This should allow faster iteration and easier development going forward.
- Uses Parent context for shared data and methods across different components instead of passed down props
- Uses new `init` method in API for data initialization
- Removes `PopupMenu` component in favor of `PopupModal`
- Adds new test util for custom render for easier base setup - https://testing-library.com/docs/react-testing-library/setup#custom-render
- Updates tests to use new test util for easier test setup
refs https://github.com/TryGhost/members.js/issues/5
- Adds new parent context with default values for all common context data we want to pass through
This adds base for using contexts (https://reactjs.org/docs/context.html) in our application as that allows easier overall base data and method sharing between different components instead of passing them down
refs https://github.com/TryGhost/members.js/issues/5
- renamed default function name
- Adds `init` method to api for fetching site data and member session data together
- Update site url from site data to remove window.location.origin dependency in case of iframe
no issue
- Updates Signin page to use common ActionButton and Input component
- Updates Signup page to use common ActionButton and Input component
- Updates MagicLink page to use common ActionButton component
closes https://github.com/TryGhost/members.js/issues/16
This fix sends magic link to member when they choose free plan to signup using name and email.
Note: We are not storing `name` atm in magic link, so it gets ignored in actual member data on signup atm.
closes https://github.com/TryGhost/members.js/issues/14
This adds handling of url update when signing-in with magic link by removing the token query param, which can cause accidental re-login on refresh.
Unpkg recommends tagging exact version in the url to avoid redirects and faster load times. Also ensures the init script is in sync with the unpkg version being picked up in case of any changes.
refs https://github.com/TryGhost/members.js/issues/10
- Added `/page` in components to structure all UI page flows for the app
- Renamed components to highlight just actual purpose/utility
- Cleaned up data loading flow
no issue
Firefox doesn't allow adding content to iframe body without passing `srcDoc={`<!DOCTYPE html>` to the iframe, this allows iframe to load properly
no issue
Previously, we expected theme to include an empty div with id as `root` where we loaded our widget. This change automatically adds a root div to the document and renders widget inside it.
refs https://github.com/TryGhost/members.js/issues/12
- Updates package name and add umd/unpkg setup in `package.json`
- Updated webpack config to publish minified bundle at `umd/memebrs.min.js`
- Updated .gitignore to remove build folders
refs https://github.com/TryGhost/members.js/issues/6
Use member identity and public site data admin API to fetch site data which was previously being passed down from the theme. This change allows us to be directly fetch all relevant site data except adminUrl and use it to initialize the flows.
Also adds a basic loading behavior till we finish fetching site and member logged-in data from API.
refs https://github.com/TryGhost/members.js/issues/6
To self-contain all the data needs for members.js, we load the site data and member's logged in state using available APIs instead of passing them down the theme
- Member Identity API uses member cookie and `/ssr` endpoint to identify if a member is currently logged in or not
- Site data API is the public admin API endpoint for fetching public site data like title, description, logo, brand etc.
Added new pages for different UI flows
- Sign-in Page: Allow member to signin with magic link
- Signup Page: Allow member to signup with name + email, also allow choosing plan in checkout
- Signed-in Page: Default account page if member is signed in
- Magic Link Page: Info page which shows magic link is sent to inbox
- Use local dev config only for development mode
- `.env.local` by default gets triggered for production builds as well, unlike `.env.development.local`
- added eslint-plugin-ghost, extended ghost/browser config & fixed all the issues
- did this because basic things like indent, quotes and semi-colons weren't being enforced resulting in inconsistencies
- we can customise this or create a ghost/react if desired
refs https://github.com/TryGhost/membersjs/issues/8
This allows theme developers to use a custom trigger button in their theme instead of default UI created by script by marking the custom button with data attribute - `data-members-trigger-button` .
In case of a custom trigger button, CRA doesn't render the default trigger button and attaches click event handling to the custom button to control the popup UI. Script also adds new custom class `popup-open` and `popup-close` based on popup state to allow theme developers to handle button UI based on popup state.
refs https://github.com/TryGhost/membersjs/issues/3
Adds signup/signin flow to theme when no member is logged in, uses api utils to send magic-link to member's email which can be used to signup/signin
no issue
We need to initialize members script with data passed down from the theme atm, the default initialization is only useful for quick local testing and UI development but not when script is used directly inside a theme.
refs https://github.com/TryGhost/membersjs/issues/2
We need to make requests to members Admin API and SSR endpoints to handle member's session on theme, send magic-link on email and also for using stripe checkout. This adds a small util that wraps all such external requests for use in CRA UI based on user action
Note: The util setup needs `blogUrl` and `adminUrl` values to setup the API endpoints, which we currently pass from the theme. This might change in immediate future based on how we decide to get these values in CRA script.
no refs.
- added icon for trigger button open/close state to indicate account menu
- updated style of trigger button for better contrast
- updated base font style and size for html and body to access global typographic styles
no issue
- Wraps the react rendering initialisation in a function which is accessed by theme to render the members UI as needed
- Uses site logo and logged in member email for rendering
no issue
- Adds new FrameComponent which allows encapsulating any React Component inside Iframe directly
- Wraps the Popup and Trigger components inside frame components to be rendered inside iframe
no issue
- Adds new components for membersJs trigger button and popup menu with style
- Adds basic trigger interaction between trigger button and popup menu
- Uses hardcoded member values
- Adds `prop-types` dependency
no issue
By default, CRAs build process creates chunked script files and adds them to default index.html. The updated build process uses `rewire` and `webpack` to -
- Tweak CRAs default behavior by switching off chunking, which leads to a single script
- Uses webpack locally to combine JS and CSS built by above step into a single `bundle.min.js`
