basic-details-step.hbs

<form class="ui form {{if isLoading 'loading'}}" autocomplete="off" {{action 'moveForward' on='submit' preventDefault=true}} novalidate>
  <div class="field">
    <label class="required" for="name">{{t 'Name'}}</label>
    {{input type='text' id='name' value=data.event.name}}
  </div>
  <div class="field">
    <label for="location">{{t 'Location'}}</label>
    {{#widgets/forms/location-input
      inputId='location'
      lat=data.event.latitude
      lng=data.event.longitude
      placeName=data.event.locationName
      searchableName=data.event.searchableLocationName
      zoom=15
      placeholder=(t 'Location is required to make this event live')}}
      <div class="inline field">
        <div class="ui slider checkbox">
          {{input id='show_map' type='checkbox' id='show_map' checked=data.event.isMapShown}}
          <label for="show_map">{{t 'Show map on event page'}}</label>
        </div>
      </div>
    {{/widgets/forms/location-input}}
  </div>
  <div class="fields">
    <div class="five wide field">
      <label class="required" for="start_date">{{t 'Starts'}}</label>
      {{widgets/forms/date-picker type='text'
                                  inputId='start_date'
                                  placeholder='MM/DD/YYYY'
                                  rangePosition='start'
                                  value=data.event.startsAtDate
                                  onChange=(action 'updateSalesEndDate')}}
    </div>
    <div class="three wide field">
      <label for="start_time">&nbsp;</label>
      {{widgets/forms/time-picker type='text'
                                  inputId='start_time'
                                  placeholder='HH:MM'
                                  rangePosition='start'
                                  value=data.event.startsAtTime}}
    </div>
    <div class="five wide field">
      <label class="required" for="end_date">{{t 'Ends'}}</label>
      {{widgets/forms/date-picker type='text'
                                  inputId='end_date'
                                  placeholder='MM/DD/YYYY'
                                  rangePosition='end'
                                  value=data.event.endsAtDate}}
    </div>
    <div class="three wide field">
      <label for="end_time">&nbsp;</label>
      {{widgets/forms/time-picker type='text'
                                  inputId='end_time'
                                  placeholder='HH:MM'
                                  rangePosition='end'
                                  value=data.event.endsAtTime}}
    </div>
    <div class="five wide field">
      <label class="required" for="timezone">{{t 'Timezone'}}</label>
      {{#ui-dropdown class='search selection' selected=data.event.timezone onChange=(action 'updateDates') forceSelection=false fullTextSearch=true}}
        {{input type='hidden' id='timezone' value=data.event.timezone}}
        <i class="dropdown icon"></i>
        <div class="default text">{{t 'Select timezone'}}</div>
        <div class="menu">
          {{#each timezones as |timezone|}}
            <div class="item" data-value="{{timezone}}">{{timezone}}</div>
          {{/each}}
        </div>
      {{/ui-dropdown}}
    </div>
  </div>
  <div class="field">
    <label for="description">{{t 'Description'}}</label>
    {{widgets/forms/rich-text-editor textareaId='description' value=data.event.description}}
  </div>

  <div class="fields">
    <div class="ten wide field">
      {{widgets/forms/image-upload
        imageUrl=data.event.logoUrl
        label=(t 'Logo')
        id='event_logo'
        icon='image'
        hint=(t 'Select Logo')
        maxSizeInKb=1000}}
    </div>
    <div class="ten wide field">
      {{widgets/forms/image-upload
        imageUrl=data.event.originalImageUrl
        needsCropper=true
        label=(t 'Event Image')
        id='event_image'
        icon='camera'
        hint=(t 'Select Event Image')
        maxSizeInKb=10000
        helpText=(t 'We recommend using at least a 2160x1080px (2:1 ratio) image')
        requiresDivider=true}}
    </div>
  </div>

  <div class="ui section divider"></div>
  <div class="field">
    <div class="ui slider checkbox">
      {{input type='checkbox' checked=data.event.hasOrganizerInfo id='add_organizer_information'}}
      <label for="add_organizer_information">{{t 'Add organizer information'}}</label>
    </div>
  </div>

  {{#if data.event.hasOrganizerInfo}}
    <div class="field">
      <label for="organizer_name">{{t 'Organizer Name'}}</label>
      {{input type='text' id='organizer_name' value=data.event.organizerName}}
    </div>
    <div class="field">
      <label for="organizer_description">{{t 'Organizer Description'}}</label>
      {{widgets/forms/rich-text-editor id='organizer_description' value=data.event.organizerDescription}}
    </div>
  {{/if}}
  <div class="ui section divider"></div>
  <div class="grouped fields" id="social-links">
    <label>{{t 'Links & Social Media'}}</label>
    {{widgets/forms/link-input
      hasLinkName=true
      fixedName=true
      linkName=(t 'External event URL')
      inputId='external_event_url'
      segmentedLink=data.event.segmentedExternalEventUrl
      isChild=(unless data.event.socialLinks true)
      canRemoveItem=false
      addItem=(action 'addItem' 'socialLinks' 'social-link')
    }}

    {{#each socialLinks as |socialLink|}}
      {{widgets/forms/link-input
        hasLinkName=true
        linkName=socialLink.name
        inputId=socialLink.identifier
        segmentedLink=socialLink.segmentedLink
        isChild=true
        addItem=(action 'addItem' 'socialLinks' 'social-link')
        removeItem=(action 'removeItem' socialLink 'socialLinks')
      }}
    {{/each}}
  </div>
  {{#if data.module.ticketInclude}}
    <div class="ui section divider"></div>
    {{!-- Hiding toggle ticket feature temporarily
      <div class="field">
        <div class="ui slider checkbox">
          {{input type='checkbox' checked=data.event.isTicketingEnabled id='use_ticketing_system'}}
          <label for="use_ticketing_system">{{t 'Use ticketing system'}}</label>
        </div>
      </div>
    --}}
    <div class="field">
      <label class="required">{{t 'Ticketing System'}}</label>
      {{!-- {{#if data.event.isTicketingEnabled}} --}}
      <div class="ui attached segment {{unless data.event.tickets 'center aligned'}}">
        {{#if data.event.tickets}}
          <div class="ui stackable celled five column grid ticket-header">
            <div class="row weight-600">
              <div class="six wide column">
                <label class="required">{{t 'Ticket Name'}}</label>
              </div>
              <div class="two wide column">
                <label class="required">{{t 'Price'}}</label>
              </div>
              <div class="four wide column">
                <label class="required">{{t 'Quantity'}}</label>
              </div>
              <div class="column">
                <label>{{t 'Options'}}</label>
              </div>
            </div>
          </div>
          {{#each tickets as |ticket index|}}
            {{widgets/forms/ticket-input ticket=ticket
                                        timezone=data.event.timezone
                                        canMoveUp=(not-eq index 0)
                                        canMoveDown=(not-eq ticket.position (dec data.event.tickets.length))
                                        moveTicketUp=(action 'moveTicket' ticket 'up')
                                        moveTicketDown=(action 'moveTicket' ticket 'down')
                                        removeTicket=(confirm 'Are you sure you wish to delete this ticket ?' (action 'removeTicket' ticket))}}
          {{/each}}
        {{else}}
          <h3 class="text muted weight-500">
            {{t 'You don\'t have any tickets added. Please add atleast one ticket to publish your event.'}}
          </h3>
        {{/if}}
      </div>
      <button type="button" class="ui blue small button" {{action 'addTicket' 'free' data.event.tickets.length}}>
        <i class="large icons basic-details">
          <i class="smile icon"></i>
          <i class="inverted corner add icon"></i>
        </i>
        {{t 'Free Ticket'}}
      </button>
      <button type="button" class="ui blue small button" {{action 'addTicket' 'paid' data.event.tickets.length}}>
        <i class="large icons basic-details">
          <i class="dollar icon"></i>
          <i class="inverted corner add icon"></i>
        </i>
        {{t 'Paid Ticket'}}
      </button>
      {{!-- {{else}}
        <div class="field">
          <label for="ticket_url">{{t 'Ticket URL'}}</label>
          {{widgets/forms/link-input inputId='ticket_url' segmentedLink=data.event.segmentedTicketUrl}}
        </div>
      {{/if}} --}}
    </div>
    <button type="button" class="ui blue small button" {{action 'addTicket' 'donation' data.event.tickets.length}}>
      <i class="large icons basic-details">
        <i class="heart icon"></i>
        <i class="inverted corner add icon"></i>
      </i>
      {{t 'Donation Ticket'}}
    </button>
  {{else}}
    <div class="field">
      <label for="ticket_url">{{t 'Ticket URL'}}</label>
      {{widgets/forms/link-input inputId='ticket_url' segmentedLink=data.event.segmentedTicketUrl}}
    </div>
  {{/if}}
  {{#if hasPaidTickets}}
    {{!-- Hiding discount code temporarily, till we get this feature ready to apply discount codes for events.
    <div class="ui section divider"></div>
    <div class="field">
      <label for="discount_code">{{t 'Redeem Discount Code'}}</label>
      {{#if data.event.discountCode}}
        <div class="ui labeled action input">
          <a class="ui right pointing teal basic label">
            {{t 'Code Applied'}}
          </a>
          <input title="applied"
                 value="{{discountCode.type}}: {{t 'Discount of'}} {{discountCode.value}} {{t
                   'over a period of'}} {{discountCode.maxQuantity}} {{t 'month(s)'}}"
                 readonly>
          <button
            type="button"
            class="ui red {{unless device.isMobile 'right labeled'}} icon button"
            {{action
              (confirm (t 'Are you sure you wish to remove the discount applied ?') (action 'removeDiscountCode'))}}>
            <i class="remove icon"></i>
            {{unless device.isMobile (t 'Remove')}}
          </button>
        </div>
      {{else}}
        <div class="ui action input">
          {{input type='text' id='discount_code' placeholder=(t 'Discount code') value=data.event.discountCode.code disabled=validatingDiscountCode}}
          <button type="button"
                  class="ui teal {{unless device.isMobile 'right labeled'}} icon button {{if validatingDiscountCode 'loading'}}" {{action
            'redeemDiscountCode'}}>
            <i class="check icon"></i>
            {{unless device.isMobile (t 'Redeem')}}
          </button>
        </div>
      {{/if}}
    </div>
    --}}

    <div class="ui section divider"></div>
    <div class="field">
      <h4>{{t 'Add Payment Details'}}</h4>
      <div class="two fields">
        <div class="field">
          <label class="required">{{t 'Select country'}}</label>
          {{#ui-dropdown class='search selection' selected=data.event.paymentCountry forceSelection=false
                         fullTextSearch=true}}
            {{input type='hidden' id='payment_country' value=data.event.paymentCountry}}
            <i class="dropdown icon"></i>
            <div class="default text">{{t 'Select country'}}</div>
            <div class="menu">
              {{#each paymentCountries as |paymentCountry|}}
                <div class="item" data-value="{{paymentCountry.name}}">
                  <i class="{{lowercase paymentCountry.code}} flag"></i>
                  {{paymentCountry.name}}
                </div>
              {{/each}}
            </div>
          {{/ui-dropdown}}
        </div>
        <div class="field">
          <label class="required">{{t 'Select currency'}}</label>
          {{#ui-dropdown class='search selection' selected=data.event.paymentCurrency forceSelection=false
                         fullTextSearch=true}}
            {{input type='hidden' id='payment_currency' value=data.event.paymentCurrency}}
            <i class="dropdown icon"></i>
            <div class="default text">{{t 'Select currency'}}</div>
            <div class="menu">
              {{#each paymentCurrencies as |paymentCurrency|}}
                <div class="item" data-value="{{paymentCurrency.code}}">
                  {{paymentCurrency.code}} -
                  {{paymentCurrency.name}}
                  ({{paymentCurrency.symbol}})
                </div>
              {{/each}}
            </div>
          {{/ui-dropdown}}
        </div>
      </div>
    </div>
    <div class="ui section divider"></div>
    <div class="field">
      <h4>{{t 'Choose payment methods'}}</h4>
      {{#if canAcceptPayPal}}
        <label>{{t 'Payment by PayPal'}}</label>
        <div class="field payments">
          <div class="ui checkbox">
            {{input type='checkbox' id='payment_by_paypal' checked=data.event.canPayByPaypal}}
            <label for="payment_by_paypal">
              <span>{{t 'YES, accept payment through PayPal'}}</span>
              <br>
              <span class="text muted">
                {{t 'Paypal accepts credit card, debit card and PayPal payments. To learn how it works '}}
                <a href="https://www.paypal.com/us/webapps/mpp/popup/about-payment-methods" target="_blank" rel="noopener noreferrer">
                  {{t 'click here'}}
                </a>.
              </span>
            </label>
          </div>
        </div>
        {{#if data.event.canPayByPaypal}}
          <div class="field">
            <label class="required">PayPal Email</label>
            {{input type='email' id='paypal_email' value=data.event.paypalEmail}}
          </div>
        {{/if}}
      {{/if}}
      {{#if canAcceptAliPay}}
        <label>{{t 'Payment with AliPay'}}</label>
        <div class="field payments">
          <div class="ui checkbox">
            {{input type='checkbox' id='payment_by_alipay' checked=data.event.canPayByAliPay}}
            <label for="payment_by_alipay">
              {{t 'Yes, accept payment through AliPay Gateway'}}
              <div class="ui hidden divider"></div>
              <span class="text muted">
                {{t 'AliPay can accept Credit and Debit Cards , Net-Banking and AliPay. Find more details '}}
                <a href="https://stripe.com/docs/sources/alipay" target="_blank" rel="noopener noreferrer">{{t 'here'}}</a>.
              </span>
            </label>
          </div>
        </div>
        {{#if data.event.canPayByAliPay}}
          <label>{{t 'AliPay Gateway has been successfully activated'}}</label>
        {{/if}}
      {{/if}}
      {{#if canAcceptOmise}}
        <label>{{t 'Payment with Omise'}}</label>
        <div class="field payments">
          <div class="ui checkbox">
            {{input type='checkbox' id='payment_by_omise' checked=data.event.canPayByOmise}}
            <label for="payment_by_omise">
              {{t 'Yes, accept payment through Omise Gateway'}}
              <div class="ui hidden divider"></div>
              <span class="text muted">
                {{t 'Omise can accept Credit and Debit Cards , Net-Banking and AliPay. Find more details '}}
                <a href="https://www.omise.co/payment-methods" target="_blank" rel="noopener noreferrer">{{t 'here'}}</a>.
              </span>
            </label>
          </div>
        </div>
        {{#if data.event.canPayByOmise}}
          <label>{{t 'Omise Gateway has been successfully activated'}}</label>
        {{/if}}
      {{/if}}
      {{#if canAcceptStripe}}
        <label>{{t 'Payment by Stripe'}}</label>
        <div class="field payments">
          <div class="ui checkbox">
            {{input type='checkbox' id='payment_by_stripe' checked=data.event.canPayByStripe}}
            <label for="payment_by_stripe">
              <span>{{t 'YES, accept payment through Stripe'}}</span>
              <div class="ui hidden divider"></div>
              <span class="text muted">
                {{t 'Stripe accepts Visa, Master and Amex. Find out more about Stripe '}}
                <a href="https://stripe.com/docs" target="_blank" rel="noopener noreferrer">{{t 'here'}}</a>.
              </span>
            </label>
          </div>
        </div>
        {{#if data.event.canPayByStripe}}
          <div class="field">
            {{#if (or data.event.stripeAuthorization.stripeAuthCode data.event.stripeAuthorization.stripePublishableKey)}}
              <label class="required">{{t 'You have linked your Stripe account successfully. Click Here to Disconnect you account.'}}</label>
              <a class="stripe-connect" role="button" {{action 'disconnectStripe'}}><span>{{t 'Disconnect Stripe Account'}}</span></a>
            {{else}}
              <label class="required">{{t 'Connect to your Stripe account'}}</label>
              <a class="stripe-connect" role="button" {{action 'connectStripe'}}><span>{{t 'Connect with Stripe'}}</span></a>
            {{/if}}
          </div>
        {{/if}}
      {{/if}}
      <label>{{t 'Offline Payments'}}</label>
      <div class="field payments">
        <div class="ui checkbox">
          {{input type='checkbox' id='payment_by_cheque' checked=data.event.canPayByCheque}}
          <label for="payment_by_cheque">
            {{t 'YES, accept payment by Cheque'}}
          </label>
        </div>
      </div>
      {{#if data.event.canPayByCheque}}
        <div class="field payments">
          <label class="required">
            {{t 'Enter you account name and other required details/instructions to ticket buyers'}}
          </label>
          {{textarea id='cheque_details' value=data.event.chequeDetails}}
        </div>
      {{/if}}

      <div class="field payments">
        <div class="ui checkbox">
          {{input type='checkbox' id='payment_by_bank' checked=data.event.canPayByBank}}
          <label for="payment_by_bank">
            {{t 'YES, accept payment by Telegraphic Transfer(TT) / Bank Transfer '}}
          </label>
        </div>
      </div>

      {{#if data.event.canPayByBank}}
        <div class="field">
          <label class="required">
            {{t 'Enter your bank details and other required details/instructions to ticket buyers'}}
          </label>
          {{textarea id='bank_details' value=data.event.bankDetails}}
        </div>
      {{/if}}

      <div class="field payments">
        <div class="ui checkbox">
          {{input type='checkbox' id='payment_onsite' checked=data.event.canPayOnsite}}
          <label for="payment_onsite">
            {{t 'YES, accept payment at the event (on site) '}}
          </label>
        </div>
      </div>

      {{#if data.event.canPayOnsite}}
        <div class="field">
          <label class="required">
            {{t 'Enter your payment instructions and other required details/instructions to ticket buyers'}}
          </label>
          {{textarea id='on_site_details' value=data.event.onsiteDetails}}
        </div>
      {{/if}}

      <div class="ui section divider"></div>

      <div class="field">
        {{#if data.event.isTaxEnabled}}
          <div class="ui card">
            <div class="content tax-info">
              <div class="meta">
                {{t 'Tax Information'}}
              </div>
            </div>
            <div class="content">
              <div class="header">{{data.event.tax.name}}</div>
              {{#if data.event.tax.shouldSendInvoice}}
                <div class="description">
                  {{t 'Company Name '}}{{data.event.tax.registeredCompany}}
                </div>
              {{/if}}
              <div class="description">
                {{data.event.tax.taxId}}<br>
                {{data.event.tax.rate}}% - {{if data.event.tax.isTaxIncludedInPrice 'Included in ticket price'
                                                    'Extra fee on ticket price'}}
              </div>
            </div>
            <div class="ui bottom attached small buttons">
              <button class="ui button" type="button" {{action 'openTaxModal' false}}>
                <i class="pencil icon"></i>
                {{t 'Edit'}}
              </button>

              <button class="ui red button" type="button" {{action 'deleteTaxInformation'}}>
                <i class="trash icon"></i>
                {{t 'Remove'}}
              </button>
            </div>
          </div>
        {{else}}
          <button type="button" class="ui right labeled icon button" {{action 'openTaxModal' true}}>
            <i class="percent icon"></i>
            {{t 'Add Tax Information'}}
          </button>
        {{/if}}
      </div>

    </div>

  {{/if}}
  <div class="ui section divider"></div>
  <div class="grouped fields">
    <label for="privacy">{{t 'Listing Privacy'}}</label>
    <div class="field">
      <div class="ui radio checkbox">
        {{widgets/forms/radio-button value name='privacy' id='privacy_public' value='public'
                                     checked=data.event.privacy}}
        <label for="privacy_public">
          <strong>{{t 'Public event'}}:</strong>
          {{t 'list this event on this site and search engines'}}
        </label>
      </div>
    </div>
    <div class="field">
      <div class="ui radio checkbox">
        {{widgets/forms/radio-button value name='privacy' id='privacy_private' value='private'
                                     checked=data.event.privacy}}
        <label for="privacy_private">
          <strong>{{t 'Private event'}}:</strong>
          {{t 'do not list this event publicly'}}
        </label>
      </div>
    </div>
  </div>

  <div class="field">
    <label>{{t 'Event Type'}}</label>
    {{#ui-dropdown class='search selection' selected=data.event.type.name onChange=(action (mut data.event.type)) as |execute mapper|}}
      <i class="dropdown icon"></i>
      <div class="default text">{{t 'Select Event Type'}}</div>
      <div class="menu">
        {{#each data.types as |type|}}
          <div class="item" data-value="{{map-value mapper type}}">{{sanitize type.name}}</div>
        {{/each}}
      </div>
    {{/ui-dropdown}}
  </div>
  <div class="field">
    <label>{{t 'Event Topic'}}</label>
    {{#ui-dropdown class='search selection' selected=(sanitize data.event.topic.name) onChange=(action (mut data.event.topic)) as |execute mapper|}}
      <i class="dropdown icon"></i>
      <div class="default text">{{t 'Select Event Topic'}}</div>
      <div class="menu">
        {{#each data.topics as |topic|}}
          <div class="item" data-value="{{map-value mapper topic}}">{{sanitize topic.name}}</div>
        {{/each}}
      </div>
    {{/ui-dropdown}}
  </div>
  <div class="field">
    <label>{{t 'Event Sub-topic'}}</label>
    {{#ui-dropdown class='search selection' selected=data.event.subTopic.name onChange=(action (mut data.event.subTopic)) as |execute mapper|}}
      <i class="dropdown icon"></i>

      <div class="default text">{{t 'Select Event Sub-Topic'}}</div>
      <div class="menu">
        {{#each subTopics as |subTopic|}}
          <div class="item" data-value="{{map-value mapper subTopic}}">{{sanitize subTopic.name}}</div>
        {{/each}}
      </div>
    {{/ui-dropdown}}
  </div>
  <div class="ui section divider"></div>
  <div class="field">
    <div class="ui slider checkbox">
      {{input type='checkbox' checked=hasCodeOfConduct id='add_code_of_conduct'}}
      <label for="add_code_of_conduct">{{t 'Add Code of Conduct'}}</label>
    </div>
  </div>

  {{#if hasCodeOfConduct}}
    <div class="field">
      <label for="code_of_conduct">{{t 'Code of Conduct'}}</label>
      {{widgets/forms/rich-text-editor textareaId='code_of_conduct' value=data.event.codeOfConduct}}
    </div>
  {{/if}}
  <div class="ui section divider"></div>
  <div class="field">
    <label for="license">
      {{t 'License of Event Data & Content'}}
      ( <i class="fitted help icon link has popup"></i> )
      <div class="ui flowing popup top left transition hidden">
        <div class="ui one column divided grid">
          <div class="column">
            <strong>{{t 'Licenses'}}</strong>
            <div class="ui bulleted list">
              {{#each licenses as |license|}}
                <div class="item">
                  <a href="{{license.link}}" target="_blank" rel="noopener noreferrer">
                    {{license.name}}
                  </a>
                </div>
              {{/each}}
            </div>
          </div>
        </div>
      </div>
    </label>
    {{#ui-dropdown class='search selection' selected=data.event.copyright.licence onChange=(action 'updateCopyright') forceSelection=false fullTextSearch=true}}
      {{input type='hidden' id='license' value=data.event.copyright.licence}}
      <i class="dropdown icon"></i>
      <div class="default text">{{t 'Select License'}}</div>
      <div class="menu">
        {{#each licenses as |license|}}
          <div class="item" data-value="{{license.name}}">{{license.name}}</div>
        {{/each}}
      </div>
    {{/ui-dropdown}}
  </div>
  <br>
  <div class="{{unless device.isMobile 'right floated large' 'mini three'}} ui fields {{if isUserUnverified 'disabled'}} buttons">
    <button class="ui three field right labeled icon button {{if isLoading 'disabled'}}" type="button" {{action 'moveForward'}}>
      {{t 'Forward'}}
      <i class="right chevron icon"></i>
    </button>
    {{#if showDraftButton}}
      <button class="blue ui three field right labeled icon button {{if isLoading 'disabled'}}" type="button" {{action 'saveDraft'}}>
        {{t 'Save draft'}}
        <i class="save icon"></i>
      </button>
    {{/if}}
    {{#if data.event.locationName}}
      <button class="green ui three field right labeled icon button {{if isLoading 'disabled'}}" type="button" {{action 'publish'}}>
        {{t 'Publish'}}
        <i class="check icon"></i>
      </button>
    {{/if}}
  </div>
</form>

{{modals/tax-info-modal isOpen=taxModalIsOpen tax=data.event.tax hasTaxInfo=data.event.isTaxEnabled}}