Rebel can switch between being a supporter and being a rebel

[mhulet]

Is your feature request related to a problem? Please describe. Some local groups add all registered rebels to their internal communication platform. Then they have requests from some rebels asking to be removed, because they just wanted to be updated about the next actions and overall activity. They don't want to be active rebels.

Describe the solution you'd like When registering or updating their profile, a rebel would switch on/off "I want to be an active rebel" or "I want to support Extinction Rebellion".

Not for now but keep it for later: Being a supporter would hide some fields and make the registration easier.

On the admin side, it must be clear that some rebels are not active rebels. The activity status must be sent to Mailtrain so that coordinators can send emailings to active rebels only, and newsletters to all.

Describe alternatives you've considered Asking each rebel and tagging those who don't want to be active.

[mhulet]

Let's add segmented selectors for this feature.

In config/initializers/simple_form.rb:

  config.wrappers :segmented_selector, class: 'field' do |b|
    b.use :html5
    b.optional :pattern
    b.optional :readonly

    b.wrapper tag: :label do |ba|
      ba.use :label_text, wrap_with: { tag: :span, class: 'label-text' }
      ba.wrapper tag: :ul, class: 'segmented-control' do |segmented_control|
        segmented_control.use :input
      end
      ba.use :error, wrap_with: { tag: :small, class: 'form-error animated fadeInDown' }
      ba.use :hint, wrap_with: { tag: :p, class: 'help-text' }
    end
  end

In app/inputs/segmented_radio_buttons.rb:

class SegmentedRadioButtonsInput < SimpleForm::Inputs::CollectionRadioButtonsInput
  def input(_wrapper_options = nil)
    label_method, value_method = detect_collection_methods
    input_options[:item_wrapper_tag] = "li"
    input_options[:item_wrapper_class] = "segmented-control-item"
    @builder.send("collection_radio_buttons",
                  attribute_name,
                  collection,
                  value_method,
                  label_method,
                  input_options,
                  input_html_options,
                  &collection_block_for_nested_boolean_style)
  end

  def item_wrapper_class
    ""
  end
end

In app/javascript/css/components/segmented_selector.scss:

@mixin xr-segmented-selector {
  .segmented-control {
    display: table;
    margin: 0 0 2rem;
    padding: 0;
    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.07);
    border: 1px solid $color-light-gray;
    border-radius: 1rem;

    .segmented-control-item {
      display: table-cell;
      margin: 0;
      padding: 0;
      list-style-type: none;

      label {
        position: relative;
        display: block !important;
        margin: -1px 0;
        padding: 1em 2rem;
        text-align: center;
        cursor: pointer;
        color: $color-dark-gray;
        font-weight: 500;
        transition: all .25s ease-in-out;

        svg {
          position: absolute;
          height: 1.5rem;
          top: calc(50% - .75rem);
          stroke: $dark-gray;

          ~ span {
            margin-left: 2rem;
          }
        }

        &:hover {
          color: $white;
          background: $color-dark-gray;

          svg {
            stroke: $white;
          }
        }
      }

      &:not(:first-of-type) {
        border-left: 1px solid $color-light-gray;
      }

      &:first-of-type {
        label {
          margin-left: -1px;
          border-radius: 1rem 0 0 1rem;
        }
      }

      &:last-of-type {
        label {
          margin-right: -1px;
          border-radius: 0 1rem 1rem 0;
        }
      }

      input {
        position: absolute;
        visibility: hidden;

        &:checked {
          + label {
            background: $black;
            color: $white;

            svg {
              stroke: $white;
            }
          }
        }
      }
    }
  }
}

In view:

    = f.input :active,
              label: "How do you want to get involved?",
              wrapper: :segmented_selector,
              as: :segmented_radio_buttons,
              collection: [["Being an active rebel", true], ["Supporting Extinction Rebellion", false]],
              required: true