<commit_before><template>
  <div class="row">
    <div class="col-12">
      <form id="DuesRequiredInfoForm" v-on:submit.prevent="submit">
        <h4>Additional Information</h4>
        <p>Providing RoboJackets with this optional information enables the RoboJackets leadership to better serve you.</p>

        <div class="form-group row">
          <label for="user-preferredname" class="col-sm-2 col-form-label">Preferred Name</label>
          <div class="col-sm-10 col-lg-4">
            <input
              v-model="localUser.preferred_first_name"
              type="text"
              class="form-control"
              id="user-preferredname"
              :class="{ 'is-invalid': $v.localUser.preferred_first_name.$error }"
              @input="$v.localUser.preferred_first_name.$touch()">
          </div>
        </div>

        <div class="form-group row">
          <label for="user-personalemail" class="col-sm-2 col-form-label">Personal Email</label>
          <div class="col-sm-10 col-lg-4">
            <input
              v-model="localUser.personal_email"
              type="email"
              class="form-control"
              id="user-personalemail"
              :class="{ 'is-invalid': $v.localUser.personal_email.$error }"
              @input="$v.localUser.personal_email.$touch()">
          </div>
          <div class="invalid-feedback" v-if="!$v.localUser.personal_email.notGTEmail">
            Personal email cannot be a GT email address
          </div>
          <div class="invalid-feedback" v-if="!$v.localUser.personal_email.email">
            Must be a valid email address
          </div>
        </div>

        <div class="form-group row">
          <label for="user-uid" class="col-sm-2 col-form-label">Phone Number</label>
          <div class="col-sm-10 col-lg-4">
            <input
              v-model="localUser.phone"
              type="tel"
              class="form-control"
              id="user-uid"
              maxlength="15"
              :class="{ 'is-invalid': $v.localUser.phone.$error }"
              @input="$v.localUser.phone.$touch()">
            <div class="invalid-feedback">
              Must be a valid phone number with no punctuation
            </div>
          </div>
        </div>

        <h4>Emergency Contact Information</h4>
        <p>You may optionally provide information on who to contact in the event of an emergency. This information is required should you go on any RoboJackets trips.</p>

        <div class="form-group row">
          <label for="user-emergencycontactname" class="col-sm-2 col-form-label">Contact Name</label>
          <div class="col-sm-10 col-lg-4">
            <input
              v-model="localUser.emergency_contact_name"
              type="text"
              class="form-control"
              id="user-emergencycontactname"
              :class="{ 'is-invalid': $v.localUser.emergency_contact_name.$error }"
              @input="$v.localUser.emergency_contact_name.$touch()">
          </div>
        </div>
        <div class="form-group row">
          <label for="user-emergencycontactphone" class="col-sm-2 col-form-label">Contact Phone Number</label>
          <div class="col-sm-10 col-lg-4">
            <input
              v-model="localUser.emergency_contact_phone"
              type="tel"
              class="form-control"
              id="user-emergencycontactphone"
              maxlength="15"
              :class="{ 'is-invalid': $v.localUser.emergency_contact_phone.$error }"
              @input="$v.localUser.emergency_contact_phone.$touch()">
              <div class="invalid-feedback">
                Must be a valid phone number with no punctuation
              </div>
          </div>
        </div>

        <div class="row">
          <div class="col-lg-3 col-6">
            <button @click.prevent="$emit('back')" class="btn btn-secondary float-left">Back</button>
          </div>
          <div class="col-lg-3 col-6">
            <button type="submit" class="btn btn-primary float-right">Continue</button>
            <button @click.prevent="$emit('next')" class="btn btn-secondary float-right mx-2">Skip</button>
          </div>
        </div>

      </form>
    </div>
  </div>
</template>

<script>
import { required, alpha, email, minLength, maxLength } from 'vuelidate/lib/validators';
import notGTEmail from '../../customValidators/notGTEmail';

export default {
  props: ['user', 'packageid'],
  data() {
    return {};
  },
  methods: {
    submit() {
      if (this.$v.$invalid) {
        this.$v.$touch();
        return;
      }

      var baseUrl = '/api/v1/users/';
      var dataUrl = baseUrl + this.localUser.uid;

      delete this.localUser.dues;

      axios
        .put(dataUrl, this.localUser)
        .then(response => {
          this.$emit('next');
        })
        .catch(response => {
          console.log(response);
          Swal.fire(
            'Connection Error',
            'Unable to save data. Check your internet connection or try refreshing the page.',
            'error'
          );
        });
    },
  },
  computed: {
    localUser: function() {
      return this.user;
    },<commit_msg>Finish removing merch from additional info screen<commit_after><template>
  <div class="row">
    <div class="col-12">
      <form id="DuesRequiredInfoForm" v-on:submit.prevent="submit">
        <h4>Additional Information</h4>
        <p>Providing RoboJackets with this optional information enables the RoboJackets leadership to better serve you.</p>

        <div class="form-group row">
          <label for="user-preferredname" class="col-sm-2 col-form-label">Preferred Name</label>
          <div class="col-sm-10 col-lg-4">
            <input
              v-model="localUser.preferred_first_name"
              type="text"
              class="form-control"
              id="user-preferredname"
              :class="{ 'is-invalid': $v.localUser.preferred_first_name.$error }"
              @input="$v.localUser.preferred_first_name.$touch()">
          </div>
        </div>

        <div class="form-group row">
          <label for="user-personalemail" class="col-sm-2 col-form-label">Personal Email</label>
          <div class="col-sm-10 col-lg-4">
            <input
              v-model="localUser.personal_email"
              type="email"
              class="form-control"
              id="user-personalemail"
              :class="{ 'is-invalid': $v.localUser.personal_email.$error }"
              @input="$v.localUser.personal_email.$touch()">
          </div>
          <div class="invalid-feedback" v-if="!$v.localUser.personal_email.notGTEmail">
            Personal email cannot be a GT email address
          </div>
          <div class="invalid-feedback" v-if="!$v.localUser.personal_email.email">
            Must be a valid email address
          </div>
        </div>

        <div class="form-group row">
          <label for="user-uid" class="col-sm-2 col-form-label">Phone Number</label>
          <div class="col-sm-10 col-lg-4">
            <input
              v-model="localUser.phone"
              type="tel"
              class="form-control"
              id="user-uid"
              maxlength="15"
              :class="{ 'is-invalid': $v.localUser.phone.$error }"
              @input="$v.localUser.phone.$touch()">
            <div class="invalid-feedback">
              Must be a valid phone number with no punctuation
            </div>
          </div>
        </div>

        <h4>Emergency Contact Information</h4>
        <p>You may optionally provide information on who to contact in the event of an emergency. This information is required should you go on any RoboJackets trips.</p>

        <div class="form-group row">
          <label for="user-emergencycontactname" class="col-sm-2 col-form-label">Contact Name</label>
          <div class="col-sm-10 col-lg-4">
            <input
              v-model="localUser.emergency_contact_name"
              type="text"
              class="form-control"
              id="user-emergencycontactname"
              :class="{ 'is-invalid': $v.localUser.emergency_contact_name.$error }"
              @input="$v.localUser.emergency_contact_name.$touch()">
          </div>
        </div>
        <div class="form-group row">
          <label for="user-emergencycontactphone" class="col-sm-2 col-form-label">Contact Phone Number</label>
          <div class="col-sm-10 col-lg-4">
            <input
              v-model="localUser.emergency_contact_phone"
              type="tel"
              class="form-control"
              id="user-emergencycontactphone"
              maxlength="15"
              :class="{ 'is-invalid': $v.localUser.emergency_contact_phone.$error }"
              @input="$v.localUser.emergency_contact_phone.$touch()">
              <div class="invalid-feedback">
                Must be a valid phone number with no punctuation
              </div>
          </div>
        </div>

        <div class="row">
          <div class="col-lg-3 col-6">
            <button @click.prevent="$emit('back')" class="btn btn-secondary float-left">Back</button>
          </div>
          <div class="col-lg-3 col-6">
            <button type="submit" class="btn btn-primary float-right">Continue</button>
            <button @click.prevent="$emit('next')" class="btn btn-secondary float-right mx-2">Skip</button>
          </div>
        </div>

      </form>
    </div>
  </div>
</template>

<script>
import { alpha, email, minLength, maxLength } from 'vuelidate/lib/validators';
import notGTEmail from '../../customValidators/notGTEmail';

export default {
  props: ['user'],
  methods: {
    submit() {
      if (this.$v.$invalid) {
        this.$v.$touch();
        return;
      }

      var baseUrl = '/api/v1/users/';
      var dataUrl = baseUrl + this.localUser.uid;

      delete this.localUser.dues;

      axios
        .put(dataUrl, this.localUser)
        .then(response => {
          this.$emit('next');
        })
        .catch(response => {
          console.log(response);
          Swal.fire(
            'Connection Error',
            'Unable to save data. Check your internet connection or try refreshing the page.',
            'error'
          );
        });
    },
  },
  computed: {
    localUser: function() {
      return this.user;
    },
{'fraction_non_alphanumeric': 0.14285714285714285, 'fraction_numerical': 0.006931074316519061, 'mean_word_length': 1.9117152466367713, 'pattern_counts': {'":': 0, '<': 147, '<?xml version=': 0, '>': 151, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '7243965', 'n_tokens_mistral': 3068, 'n_tokens_neox': 2970, 'n_words': 618}