diff --git a/app/assets/icons/x-close.svg b/app/assets/icons/x-close.svg new file mode 100644 index 00000000..da30aadd --- /dev/null +++ b/app/assets/icons/x-close.svg @@ -0,0 +1,4 @@ + + + + diff --git a/app/assets/stylesheets/_forms.scss b/app/assets/stylesheets/_forms.scss index 5fd99062..95d9b5c5 100644 --- a/app/assets/stylesheets/_forms.scss +++ b/app/assets/stylesheets/_forms.scss @@ -32,20 +32,18 @@ background-color: #fefde5 !important; } -.profile-container, -.edit-card, -.edit-status { - input, - .react-date-picker__wrapper, - textarea, - select, - #stripe-elements { +.profile-container { + // , .edit-card { + input input { + border: none; + border-radius: 0; + } + .react-date-picker__wrapper { 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; } @@ -54,12 +52,4 @@ 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/application.scss b/app/assets/stylesheets/application.scss index de6a9070..42665271 100644 --- a/app/assets/stylesheets/application.scss +++ b/app/assets/stylesheets/application.scss @@ -114,3 +114,9 @@ p { ul { line-height: 2; } + +select option { + background: #ffffff; + color: #000000; + font-family: 'Libre Franklin', sans-serif !important; +} diff --git a/app/assets/stylesheets/base/button.scss b/app/assets/stylesheets/base/button.scss index f08ae858..f57b98bc 100644 --- a/app/assets/stylesheets/base/button.scss +++ b/app/assets/stylesheets/base/button.scss @@ -61,3 +61,10 @@ button:not(:disabled) { width: 100%; } } + +.btn-green { + background: #24ba9d; + border: solid 1px transparent; + border-radius: 8px; + color: #ffffff; +} diff --git a/app/assets/stylesheets/base/input.scss b/app/assets/stylesheets/base/input.scss new file mode 100644 index 00000000..7f8260e5 --- /dev/null +++ b/app/assets/stylesheets/base/input.scss @@ -0,0 +1,7 @@ +.input-green, +input[type='text'] { + background: rgba(91, 203, 181, 0.1); + border: 1px solid #219653; + box-sizing: border-box; + border-radius: 6px; +} diff --git a/app/assets/stylesheets/membership.scss b/app/assets/stylesheets/membership.scss index a0ea0af7..e02c267a 100644 --- a/app/assets/stylesheets/membership.scss +++ b/app/assets/stylesheets/membership.scss @@ -1,23 +1,15 @@ -.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; +.membership +// , .membership-edit-amount +{ + // .subscription-amount { + // background: rgba(91, 203, 181, 0.1); + // border: 1px solid #219653; + // // box-sizing: border-box; + // border-radius: 6px; + // } + // .update-status { + // background: #24ba9d; + // border: solid 1px transparent; + // border-radius: 8px; + // } } diff --git a/app/components/address_field_component.html.erb b/app/components/address_field_component.html.erb index f5af1d04..30bb1f62 100644 --- a/app/components/address_field_component.html.erb +++ b/app/components/address_field_component.html.erb @@ -3,25 +3,25 @@
<%= f.label :address_line1, class: "sr-only" %> - <%= f.text_field :address_line1, class: "focus:ring-lilac focus:border-lilac relative block w-full rounded-none rounded-t-md bg-transparent focus:z-10 sm:text-sm border-gray-300", placeholder: "Street" %> + <%= f.text_field :address_line1, class: "focus:ring-lilac focus:border-lilac relative block w-full focus:z-10 sm:text-sm", placeholder: "Street" %>
<%= f.label :address_city, class: "sr-only" %> - <%= f.text_field :address_city, class: "focus:ring-lilac focus:border-lilac relative block w-full rounded-none bg-transparent focus:z-10 sm:text-sm border-gray-300", placeholder: "City" %> + <%= f.text_field :address_city, class: "focus:ring-lilac focus:border-lilac relative block w-full focus:z-10 sm:text-sm", placeholder: "City" %>
<%= f.label :address_state, class: "sr-only" %> - <%= f.text_field :address_state, class: "focus:ring-lilac focus:border-lilac relative block w-full rounded-none bg-transparent focus:z-10 sm:text-sm border-gray-300", placeholder: "State" %> + <%= f.text_field :address_state, class: "focus:ring-lilac focus:border-lilac relative block w-full focus:z-10 sm:text-sm", placeholder: "State" %>
<%= f.label :address_zip, class: "sr-only" %> - <%= f.text_field :address_zip, class: "focus:ring-lilac focus:border-lilac relative block w-full rounded-none bg-transparent focus:z-10 sm:text-sm border-gray-300 border-l-0", placeholder: "Postal code" %> + <%= f.text_field :address_zip, class: "focus:ring-lilac focus:border-lilac relative block w-full focus:z-10 sm:text-sm", 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-lilac focus:border-lilac 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}) %> + <%= f.country_select(:address_country_code, {priority_countries: ['US', 'CA'], include_blank: "Select country"}, {class: 'input-green focus:ring-lilac focus:border-lilac relative block w-full focus:z-10 sm:text-sm', id: 'address-country-code-select', required: true}) %>
diff --git a/app/components/select_component.html.erb b/app/components/select_component.html.erb index b644f1b4..5899cee7 100644 --- a/app/components/select_component.html.erb +++ b/app/components/select_component.html.erb @@ -1,4 +1,4 @@
<%= f.label name, class: "block text-sm font-medium text-gray-700" %> - <%= f.select name, options, {include_blank: include_blank}, class: "mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-lilac focus:border-lilac sm:text-sm rounded-md" %> + <%= f.select name, options, {include_blank: include_blank}, class: "input-green mt-1 block w-full pl-3 pr-10 py-2 text-base focus:outline-none focus:ring-lilac focus:border-lilac sm:text-sm rounded-md" %>
diff --git a/app/components/text_area_component.rb b/app/components/text_area_component.rb index c0f7a631..8ce199ff 100644 --- a/app/components/text_area_component.rb +++ b/app/components/text_area_component.rb @@ -9,8 +9,8 @@ def initialize(name:, form:) end def input_classes - classes = "block w-full sm:text-sm" - normal_classes = "border-gray-300 rounded-md shadow-sm focus:ring-lilac focus:border-lilac" + classes = "input-green block w-full sm:text-sm" + normal_classes = "shadow-sm focus:ring-lilac focus:border-lilac" error_classes = "pr-10 text-red-900 placeholder-red-300 border-red-300 rounded-md focus:outline-none focus:ring-red-500 focus:border-red-500" if errors diff --git a/app/components/text_field_component.rb b/app/components/text_field_component.rb index 455e0f8e..86fc2468 100644 --- a/app/components/text_field_component.rb +++ b/app/components/text_field_component.rb @@ -10,7 +10,7 @@ def initialize(name:, form:) def input_classes classes = "block w-full sm:text-sm" - normal_classes = "border-gray-300 rounded-md shadow-sm focus:ring-lilac focus:border-lilac" + normal_classes = "shadow-sm focus:ring-lilac focus:border-lilac" error_classes = "pr-10 text-red-900 placeholder-red-300 border-red-300 rounded-md focus:outline-none focus:ring-red-500 focus:border-red-500" if errors diff --git a/app/controllers/memberships_controller.rb b/app/controllers/memberships_controller.rb index d23aa67c..21fcd7ff 100644 --- a/app/controllers/memberships_controller.rb +++ b/app/controllers/memberships_controller.rb @@ -24,7 +24,7 @@ def update_amount format.html do flash[:error] = "There were errors updating your membership" - render :edit_amount + render :index end end end diff --git a/app/javascript/components/UpdateCreditCardForm/BillingAddressField.jsx b/app/javascript/components/UpdateCreditCardForm/BillingAddressField.jsx index 1a634294..836c534b 100644 --- a/app/javascript/components/UpdateCreditCardForm/BillingAddressField.jsx +++ b/app/javascript/components/UpdateCreditCardForm/BillingAddressField.jsx @@ -2,11 +2,11 @@ import React from 'react' const BillingAddressField = ({ countryOptions = [] }) => { return ( -
- +
+ Address -
+
@@ -29,7 +29,7 @@ const BillingAddressField = ({ countryOptions = [] }) => { name='membership[address_city]' id='address_city' placeholder='City' - className='relative block w-full bg-transparent border-gray-300 rounded-none focus:ring-lilac focus:border-lilac focus:z-10 sm:text-sm' + className='relative block w-full focus:ring-lilac focus:border-lilac focus:z-10 sm:text-sm' required />
@@ -43,7 +43,7 @@ const BillingAddressField = ({ countryOptions = [] }) => { name='membership[address_state]' id='address_state' placeholder='State' - className='relative block w-full bg-transparent border-gray-300 rounded-none focus:ring-lilac focus:border-lilac focus:z-10 sm:text-sm' + className='relative block w-full focus:ring-lilac focus:border-lilac focus:z-10 sm:text-sm' required />
@@ -65,7 +65,7 @@ const BillingAddressField = ({ countryOptions = [] }) => { + const [open, setOpen] = React.useState(false) + const handleOpen = () => { + setOpen(true) + } + const handleClose = () => { + setOpen(false) + } -
-
-
-
-
- +
+
+ +
+
+
-
- + +
) } diff --git a/app/javascript/components/UpdateCreditCardForm/style.scss b/app/javascript/components/UpdateCreditCardForm/style.scss new file mode 100644 index 00000000..d0c74b37 --- /dev/null +++ b/app/javascript/components/UpdateCreditCardForm/style.scss @@ -0,0 +1,18 @@ +.update-cc-modal { + background-color: transparent; + box-shadow: 2px 2px 24px rgba(0, 0, 0, 0.25); + border-radius: 16px; + .modal-inner { + height: fit-content; + height: -moz-fit-content; + height: -webkit-fit-content; + box-shadow: 2px 2px 24px rgba(0, 0, 0, 0.25); + border-radius: 16px; + .close-button { + // position: absolute; + button { + font-weight: 900; + } + } + } +} diff --git a/app/javascript/stylesheets/application.scss b/app/javascript/stylesheets/application.scss index 4858322c..daf02c45 100644 --- a/app/javascript/stylesheets/application.scss +++ b/app/javascript/stylesheets/application.scss @@ -6,3 +6,4 @@ @import '../components/PhoneNumberField/style'; @import '../components/DatePickerField/style'; @import '../components/ButtonTout/style'; +@import '../components/UpdateCreditCardForm/style'; diff --git a/app/views/layouts/_header.html.erb b/app/views/layouts/_header.html.erb index fe4fc7f8..1c19999a 100644 --- a/app/views/layouts/_header.html.erb +++ b/app/views/layouts/_header.html.erb @@ -1,3 +1,3 @@ - - + + diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb index 2d2218f5..d310b75d 100644 --- a/app/views/layouts/application.html.erb +++ b/app/views/layouts/application.html.erb @@ -34,7 +34,7 @@
<%= render 'shared/sidebar' %>
-
+
<%= render 'shared/flash_messages'%> <%= yield %>
diff --git a/app/views/memberships/_edit_amount_form.html.erb b/app/views/memberships/_edit_amount_form.html.erb index 0f516029..c54bcf18 100644 --- a/app/views/memberships/_edit_amount_form.html.erb +++ b/app/views/memberships/_edit_amount_form.html.erb @@ -1,44 +1,35 @@ -<%= form_with(model: membership, url: update_membership_amount_path, builder: ApplicationFormBuilder, local: true, class: "space-y-8") do |f| %> +<%= form_with(model: membership, url: update_membership_amount_path, builder: ApplicationFormBuilder, local: true, class: "w-full sm:w-1/2") 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? %> +
+
+
+ +
-
-
-
-<% 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-lilac focus:border-lilac" %> +
+

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

+
+
    + <% membership.errors.full_messages.each do |message| %> +
  • <%= message %>
    • + <% end %> +
+
-
+ <% end %> -
-
- <%= 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 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-lilac" %> +
+ $ + <%= f.number_field :amount, name: 'membership[amount]', id: 'membership_amount', min: 0, step: 1, value: number_to_currency(f.object.amount.to_f, unit: '', precision: 0), + class: "w-full border-none bg-transparent text-4xl sm:text-5xl font-black h-full p-0 focus:ring-black focus:border-black", style: "" %> + + <%= f.submit 'Save', class: "btn-green ml-2 inline-flex justify-center py-2 px-4 border border-transparent shadow-sm font-bold rounded-md text-white hover:bg-gray-900 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-lilac" %>
-
<% end %> diff --git a/app/views/memberships/_edit_card.html.erb b/app/views/memberships/_edit_card.html.erb new file mode 100644 index 00000000..cd569532 --- /dev/null +++ b/app/views/memberships/_edit_card.html.erb @@ -0,0 +1,49 @@ +
+
+
+

Current payment method

+

+ Card ending in <%= @membership.card_last4%> +

+
+ + <% if membership.errors.any? %> +
+
+
+ + +
+
+

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

+
+
    + <% membership.errors.full_messages.each do |message| %> +
  • <%= message %>
    • + <% end %> +
+
+
+
+
+ <% end %> + + <%= react_component("UpdateCreditCardForm", { + action: update_membership_card_path, + method: 'put', + authenticityToken: form_authenticity_token, + countryOptions: country_options, + }, {class: 'w-full sm:w-1/2'}) %> +
+
+<% content_for :head do %> + +<% end %> diff --git a/app/views/memberships/_edit_card_form.html.erb b/app/views/memberships/_edit_card_form.html.erb deleted file mode 100644 index 6d711948..00000000 --- a/app/views/memberships/_edit_card_form.html.erb +++ /dev/null @@ -1,32 +0,0 @@ - -<% if membership.errors.any? %> -
-
-
- - -
-
-

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

-
-
    - <% membership.errors.full_messages.each do |message| %> -
  • <%= message %>
    • - <% end %> -
-
-
-
-
-<% end %> - -<%= react_component("UpdateCreditCardForm", { - action: update_membership_card_path, - method: 'put', - authenticityToken: form_authenticity_token, - countryOptions: country_options, -}) %> diff --git a/app/views/memberships/_pause_membership.html.erb b/app/views/memberships/_pause_membership.html.erb index 3d212314..d6ff7005 100644 --- a/app/views/memberships/_pause_membership.html.erb +++ b/app/views/memberships/_pause_membership.html.erb @@ -1,16 +1,12 @@ -
-
-

- 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: "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", +
+

Your membership is

+
+ + Active + + <%= form_with(model: @membership, url: pause_membership_path, builder: ApplicationFormBuilder, local: true, class: 'flex justify-end') do |f| %> + <%= f.submit 'Pause subscription', + class: "sm:max-w-max inline-flex bg-transparent border-none underline hover:no-underline justify-center py-4 text-md sm:text-lg font-thin focus:outline-none", 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 0e895a49..832b70d0 100644 --- a/app/views/memberships/_resume_membership.html.erb +++ b/app/views/memberships/_resume_membership.html.erb @@ -1,19 +1,13 @@ -
-
-

- 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: "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" +
+

Your membership is

+
+ + Inactive + + <%= form_with(model: @membership, url: resume_membership_path, builder: ApplicationFormBuilder, local: true, class: 'flex justify-end') do |f| %> + <%= f.submit 'Resume subscription', + class: "btn-green inline-flex px-2 py-2 font-bold text-md ml-2 sm:max-w-max hover:bg-gray-900", + data: { confirm: 'Are you sure?' } %> <% end %>
diff --git a/app/views/memberships/edit_amount.html.erb b/app/views/memberships/edit_amount.html.erb deleted file mode 100644 index 22f8cf0b..00000000 --- a/app/views/memberships/edit_amount.html.erb +++ /dev/null @@ -1,11 +0,0 @@ -
-
-

- Change membership amount -

-

Here you can change your amount

-
- - - <%= render 'edit_amount_form', membership: @membership %> -
diff --git a/app/views/memberships/edit_card.html.erb b/app/views/memberships/edit_card.html.erb deleted file mode 100644 index da7b13aa..00000000 --- a/app/views/memberships/edit_card.html.erb +++ /dev/null @@ -1,18 +0,0 @@ -
-
-

- 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 deleted file mode 100644 index d9a66c9f..00000000 --- a/app/views/memberships/edit_status.html.erb +++ /dev/null @@ -1,19 +0,0 @@ -
-
-

- 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 e7fcfc62..a5a68f81 100644 --- a/app/views/memberships/index.html.erb +++ b/app/views/memberships/index.html.erb @@ -1,4 +1,4 @@ -
+

Membership @@ -9,64 +9,36 @@ <% if @membership.present? %> -
-
-

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

-
-

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

+
+
+ <% if @membership.paused? %> + <%= render "resume_membership" %> + <% else %> + <%= render "pause_membership" %> + <% end %> +
+
-
- <%= 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" %> -
+
+
+
+

Your current monthly donation amount is

+ <%= render 'edit_amount_form', membership: @membership %>
+ <% if @membership.active? %>

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

<% end %> +
-
-
-

- Payment method -

-

- Card ending in <%= @membership.card_last4%> -

-
-
- <%= 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" %> -
-
+ <%= render 'edit_card', membership: @membership %> +
-
-
-
-
-

- Change membership status -

- <% if @membership.active? %> -

- Pause or cancel your membership -

- <% else %> -

- Resume your membership -

- <% end %> -
-
- <%= 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 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 %>
diff --git a/app/views/user_profiles/_form.html.erb b/app/views/user_profiles/_form.html.erb index 1f6ccd49..7a395a2a 100644 --- a/app/views/user_profiles/_form.html.erb +++ b/app/views/user_profiles/_form.html.erb @@ -80,8 +80,8 @@
-
- <%= f.submit 'Save', class: "ml-3 inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-bold text-base text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-lilac" %> +
+ <%= f.submit 'Save', class: "btn-green ml-3 inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-bold text-base text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-lilac" %>
diff --git a/config/routes.rb b/config/routes.rb index ffdf1d68..f8d81819 100644 --- a/config/routes.rb +++ b/config/routes.rb @@ -18,11 +18,8 @@ # User Membership match "/membership" => "memberships#index", :via => :get, :as => :user_membership - match "/membership/edit_amount" => "memberships#edit_amount", :via => :get, :as => :edit_membership_amount match "/membership/update_amount" => "memberships#update_amount", :via => [:put, :patch], :as => :update_membership_amount - match "/membership/edit_card" => "memberships#edit_card", :via => :get, :as => :edit_membership_card match "/membership/update_card" => "memberships#update_card", :via => [:put, :patch], :as => :update_membership_card - match "/membership/edit_status" => "memberships#edit_status", :via => :get, :as => :edit_membership_status match "/membership/pause" => "memberships#pause", :via => [:put, :patch], :as => :pause_membership match "/membership/resume" => "memberships#resume", :via => [:put, :patch], :as => :resume_membership diff --git a/cypress/integration/member-membership.spec.js b/cypress/integration/member-membership.spec.js index c79aa490..b43b7c9d 100644 --- a/cypress/integration/member-membership.spec.js +++ b/cypress/integration/member-membership.spec.js @@ -1,5 +1,13 @@ import faker from 'faker' +Cypress.Commands.add('getWithinIframe', (iframeSelector, targetElement) => + cy + .get(`#${iframeSelector} iframe`) + .iframeLoaded() + .its('document') + .getInDocument(targetElement) +) + describe('Member Membership', () => { beforeEach(() => { cy.request('/cypress_rails_reset_state') @@ -34,9 +42,9 @@ describe('Member Membership', () => { const [user] = records cy.forceLogin({ email: user.email }).then(result => { cy.visit('/membership') - cy.get('a') - .contains('Change amount', { matchCase: false }) - .click() + // cy.get('a') + // .contains('Change amount', { matchCase: false }) + // .click() // Name cy.get("input[name='membership[amount]']") @@ -64,9 +72,9 @@ describe('Member Membership', () => { const [user] = records cy.forceLogin({ email: user.email }).then(result => { cy.visit('/membership') - cy.get('a') - .contains('Change amount', { matchCase: false }) - .click() + // cy.get('a') + // .contains('Change amount', { matchCase: false }) + // .click() // Name cy.get("input[name='membership[amount]']") @@ -94,9 +102,9 @@ describe('Member Membership', () => { const [user] = records cy.forceLogin({ email: user.email }).then(result => { cy.visit('/membership') - cy.get('a') - .contains('Change amount', { matchCase: false }) - .click() + // cy.get('a') + // .contains('Change amount', { matchCase: false }) + // .click() // Name cy.get("input[name='membership[amount]']") @@ -128,8 +136,8 @@ describe('Member Membership', () => { const [user] = records cy.forceLogin({ email: user.email }).then(result => { cy.visit('/membership') - cy.get('a') - .contains('Update credit card', { matchCase: false }) + cy.get('button') + .contains('Update Card Info', { matchCase: false }) .click() // Name @@ -158,14 +166,18 @@ describe('Member Membership', () => { ) // Credit card - cy.getWithinIframe('[name="cardnumber"]').type('4242424242424242') - cy.getWithinIframe('[name="exp-date"]').type('1232') - cy.getWithinIframe('[name="cvc"]').type('987') - cy.getWithinIframe('[name="postal"]').type('12345') + cy.getWithinIframe('stripe-elements', '[name="cardnumber"]').type( + '4242424242424242' + ) + cy.getWithinIframe('stripe-elements', '[name="exp-date"]').type( + '1232' + ) + cy.getWithinIframe('stripe-elements', '[name="cvc"]').type('987') + cy.getWithinIframe('stripe-elements', '[name="postal"]').type('12345') // Submit - cy.get('button') - .contains('Save', { matchCase: false }) + cy.get('.modal-inner button') + .contains('Update Card Info', { matchCase: false }) .click() cy.contains( @@ -188,8 +200,8 @@ describe('Member Membership', () => { const [user] = records cy.forceLogin({ email: user.email }).then(result => { cy.visit('/membership') - cy.get('a') - .contains('Update credit card', { matchCase: false }) + cy.get('button') + .contains('Update Card Info', { matchCase: false }) .click() // Name @@ -218,14 +230,20 @@ describe('Member Membership', () => { ) // Credit card - cy.getWithinIframe('[name="cardnumber"]').type('4242424242424242') - cy.getWithinIframe('[name="exp-date"]').type('1232') - cy.getWithinIframe('[name="cvc"]').type('987') - cy.getWithinIframe('[name="postal"]').type('12345') + cy.getWithinIframe('stripe-elements', '[name="cardnumber"]').type( + '4242424242424242' + ) + cy.getWithinIframe('stripe-elements', '[name="exp-date"]').type( + '1232' + ) + cy.getWithinIframe('stripe-elements', '[name="cvc"]').type('987') + cy.getWithinIframe('stripe-elements', '[name="postal"]').type( + '12345' + ) // Submit - cy.get('button') - .contains('Save', { matchCase: false }) + cy.get('.modal-inner button') + .contains('Update Card Info', { matchCase: false }) .click() cy.contains( @@ -251,13 +269,7 @@ describe('Member Membership', () => { cy.forceLogin({ email: user.email }).then(result => { cy.visit('/membership') - cy.get('a') - .contains('Update status', { matchCase: false }) - .click() - cy.contains('Pause your membership') - - cy.on('window:confirm', () => true) - cy.get('input[type="submit"][value="Pause membership"]').click() + cy.get('input[type="submit"][value="Pause subscription"]').click() cy.contains('Your membership is now paused') }) @@ -281,13 +293,7 @@ describe('Member Membership', () => { cy.forceLogin({ email: user.email }).then(result => { cy.visit('/membership') - cy.get('a') - .contains('Update status', { matchCase: false }) - .click() - cy.contains('Resume your membership') - - cy.on('window:confirm', () => true) - cy.get('input[type="submit"][value="Resume membership"]').click() + cy.get('input[type="submit"][value="Resume subscription"]').click() cy.contains('Your membership is now active') }) diff --git a/dump.rdb b/dump.rdb index d7641fe7..fe744885 100644 Binary files a/dump.rdb and b/dump.rdb differ diff --git a/tailwind.config.js b/tailwind.config.js index 29c3cdfc..2dfcafbd 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -1,3 +1,5 @@ +const defaultTheme = require('tailwindcss/defaultTheme') + module.exports = { purge: { content: [ @@ -8,6 +10,10 @@ module.exports = { ], }, theme: { + screens: { + xs: '475px', + ...defaultTheme.screens, + }, extend: { colors: { lilac: '#D2C4F5',