From 589c2a150065a04c6f306e2dd617cc8ec01b0ef3 Mon Sep 17 00:00:00 2001 From: Rob Harrington Date: Mon, 31 Jul 2017 17:26:56 +1000 Subject: [PATCH] Add a modal to handle explanation of user's responsibilities before redirecting to Stripe --- .../admin/openfoodnetwork.css.scss | 7 +++++ .../form/_stripe_connect.html.haml | 12 +++------ .../stripe_connect/_confirm_modal.html.haml | 27 +++++++++++++++++++ config/locales/en.yml | 9 ++++++- 4 files changed, 46 insertions(+), 9 deletions(-) create mode 100644 app/views/admin/enterprises/form/stripe_connect/_confirm_modal.html.haml diff --git a/app/assets/stylesheets/admin/openfoodnetwork.css.scss b/app/assets/stylesheets/admin/openfoodnetwork.css.scss index df55d3065b..4c520108a9 100644 --- a/app/assets/stylesheets/admin/openfoodnetwork.css.scss +++ b/app/assets/stylesheets/admin/openfoodnetwork.css.scss @@ -43,6 +43,13 @@ input.red { margin-right: 5px; } +a.button.red { + &:not(:hover) { + color: #fff; + background-color: #DA5354; + } +} + input.orange { background-color: #FF9848; margin-right: 5px; diff --git a/app/views/admin/enterprises/form/_stripe_connect.html.haml b/app/views/admin/enterprises/form/_stripe_connect.html.haml index b1ed3802e6..be0f4dd157 100644 --- a/app/views/admin/enterprises/form/_stripe_connect.html.haml +++ b/app/views/admin/enterprises/form/_stripe_connect.html.haml @@ -1,3 +1,5 @@ += render 'admin/enterprises/form/stripe_connect/confirm_modal' + - if @stripe_account = @enterprise.stripe_account .stripe-info .row @@ -7,13 +9,7 @@ - else .row.stripe-info .six.columns.alpha - -# Recommended info to impart (from Stripe Connect docs): - -# indicate to the user what you’re responsible for and what they’ll be expected to do. It’s particularly important to communicate: - -# That they’ll need to create and maintain their Stripe account. - -# That they’ll need to handle chargebacks and all customer service issues. - -# Who is responsible for paying the Stripe fees. - -# What, if any, fees the platform charges. - =t('.stripe_connect_info') + =t('.stripe_connect_intro') .five.columns.omega.text-right - %a.stripe-connect{ href: main_app.connect_admin_stripe_accounts_path(enterprise_id: @enterprise) } + %a.stripe-connect.help-modal{ template: 'admin/modals/stripe_connect_confirm.html' } %span= t('.connect_with_stripe') diff --git a/app/views/admin/enterprises/form/stripe_connect/_confirm_modal.html.haml b/app/views/admin/enterprises/form/stripe_connect/_confirm_modal.html.haml new file mode 100644 index 0000000000..ac16e619a5 --- /dev/null +++ b/app/views/admin/enterprises/form/stripe_connect/_confirm_modal.html.haml @@ -0,0 +1,27 @@ +%script{ type: "text/ng-template", id: "admin/modals/stripe_connect_confirm.html" } + -# Recommended info to impart (from Stripe Connect docs): + -# indicate to the user what you’re responsible for and what they’ll be expected to do. It’s particularly important to communicate: + -# That they’ll need to create and maintain their Stripe account. + -# That they’ll need to handle chargebacks and all customer service issues. + -# Who is responsible for paying the Stripe fees. + -# What, if any, fees the platform charges. + + #stripe-connect-confirm + .margin-bottom-30.text-center + .text-big + = t('.title') + + .margin-bottom-30 + %p= t('.part1') + + .margin-bottom-30 + %p= t('.part2') + + .margin-bottom-30 + %p= t('.part3') + + .text-center + %a.button.icon-ok{ href: main_app.connect_admin_stripe_accounts_path(enterprise_id: @enterprise) } + = t('.i_agree') + %a.button.red.icon-remove{ href: 'javascript:void(0)', ng: { click: 'close()' } } + = t('.cancel') diff --git a/config/locales/en.yml b/config/locales/en.yml index e5d630e4cb..79b375c34e 100644 --- a/config/locales/en.yml +++ b/config/locales/en.yml @@ -525,9 +525,16 @@ en: twitter_placeholder: eg. @the_prof stripe_connect: connect_with_stripe: "Connect with Stripe" - stripe_connect_info: "Connect your Stripe account by clicking the button below. This will allow Open Food Network to charge your customers on your behalf. You will need to maintain your Stripe account, pay Stripe fees and handle any chargebacks and customer service." + stripe_connect_intro: "To accept payments using credit card, you will need to connect your stripe account to the Open Food Network. Use the button to the right to get started." stripe_account_connected: "Stripe account connected." disconnect: "Disconnect account" + confirm_modal: + title: Connect with Stripe + part1: Stripe is a payment processing service that allows shops on the OFN to accept credit card payments from customers. + part2: To use this feature, you must connect your Stripe account the OFN. Clicking 'I Agree' below will redirect to you the Stripe website where you can connect an existing Stripe account to your OFN, or create a new one if you don't already have one. + part3: This will allow the Open Food Network to accept credit card payments from customers on your behalf. Please note that you will need to maintain your own Stripe account, pay the fees Stripe charges and handle any chargebacks and customer service yourself. + i_agree: I Agree + cancel: Cancel tag_rules: default_rules: by_default: By Default