gaf-mobile/app/views/upgrade-project.html

GAF mobile Web site

<!-- Project upgrades -->
<div class="upgrade-project scroll-container" fl-analytics-section="ProjectUpgrades">
    <section class="section-inner" ng-switch="ctrl.viewState">
        <section ng-switch-when="upgradeProject">
            <div class="upgrade-project-header">
                <h1>Upgrades (optional)</h1>
                <p>Get the most from your project!</p>
            </div>


            <section class="Card upgrade-project-tags" fl-analytics-subsection="UpgradeProjectTags">
                <div class="upgrade-project-list">
                    <div class="upgrade-project-tag" ng-if="!ctrl.project.get().upgrades.assisted">
                        <h3 class="promotion-tag promotion-tag-assisted upgrade-project-promotion-tag">Recruiter</h3>
                        <span class="upgrade-project-tag-price">{{ ctrl.projectFees.currency.sign }}{{ (ctrl.projectFees.assisted_price || 0)|number:2 }}</span>
                        <div class="upgrade-project-info">
                            <label class="upgrade-label" for="checkbox-assisted">Our recruiters personally review your proposals saving you time vetting freelancers.
                              Let us find you the right person for the job.</label>
                            <input class="upgrade-checkbox" id="checkbox-assisted" type="checkbox" ng-model="ctrl.upgrades.assisted">
                        </div>
                    </div>
                    <div class="upgrade-project-tag" ng-if="!ctrl.project.get().upgrades.featured">
                        <h3 class="promotion-tag promotion-tag-featured upgrade-project-promotion-tag">Featured</h3>
                        <span class="upgrade-project-tag-price">{{ ctrl.projectFees.currency.sign }}{{ (ctrl.projectFees.featured_price || 0)|number:2 }}</span>
                        <div class="upgrade-project-info">
                            <label class="upgrade-label" for="checkbox-featured">Featured projects attract more, higher-quality bids and are displayed prominently in the 'Featured Jobs and Contests' page.</label>
                            <input class="upgrade-checkbox" id="checkbox-featured" type="checkbox" ng-model="ctrl.upgrades.featured" fl-analytics="UpgradeFeatured">
                        </div>
                    </div>
                    <div ng-if="ctrl.showAllUpgrades || (ctrl.project.get().upgrades.assisted && ctrl.project.get().upgrades.featured)" class="fadein">
                        <div class="upgrade-project-tag" ng-if="ctrl.newProject && !ctrl.project.get().upgrades.urgent">
                            <h3 class="promotion-tag promotion-tag-urgent upgrade-project-promotion-tag">Urgent</h3>
                            <span class="upgrade-project-tag-price">{{ ctrl.projectFees.currency.sign }}{{ (ctrl.projectFees.urgent_price || 0)|number:2 }}</span>
                            <div class="upgrade-project-info">
                                <label class="upgrade-label" for="checkbox-urgent">I want my project to be marked as an urgent project. Receive a faster response from freelancers to get your project started within 24 hours!
                                </label>
                                <input class="upgrade-checkbox" id="checkbox-urgent" type="checkbox" ng-model="ctrl.upgrades.urgent" fl-analytics="UpgradeUrgent">
                            </div>
                        </div>
                        <div class="upgrade-project-tag" ng-if="!ctrl.newProject">
                            <h3 class="promotion-tag promotion-tag-extend upgrade-project-promotion-tag">Extend</h3>
                            <span class="upgrade-project-tag-price" ng-if="!ctrl.projectFees.free_extend">{{ ctrl.projectFees.currency.sign }}{{ (ctrl.projectFees.extend_price || 0)|number:2 }}</span>
                            <span class="upgrade-project-tag-price" ng-if="ctrl.projectFees.free_extend">Free with membership</span>
                            <div class="upgrade-project-info">
                                <label class="upgrade-label" for="checkbox-extend">
                                    By extending your project's bidding period by 7 days, you increase the amount of time to receive more bids on your project.
                                </label>
                                <input class="upgrade-checkbox" id="checkbox-extend" type="checkbox" ng-model="ctrl.upgrades.extend" fl-analytics="UpgradeExtend">
                            </div>
                        </div>
                        <div class="upgrade-project-tag" ng-if="!ctrl.project.get().upgrades.sealed">
                            <h3 class="promotion-tag promotion-tag-sealed upgrade-project-promotion-tag">Sealed</h3>
                            <span class="upgrade-project-tag-price" ng-if="!ctrl.projectFees.free_sealed">{{ ctrl.projectFees.currency.sign }}{{ (ctrl.projectFees.sealed_price || 0)|number:2 }}</span>
                            <span class="upgrade-project-tag-price" ng-if="ctrl.projectFees.free_sealed">Free with membership</span>
                            <div class="upgrade-project-info">
                                <label class="upgrade-label" for="checkbox-sealed">I want all bids to be sealed so that freelancers cannot see what others are bidding,
                                  leading to more accurate, higher quality proposals.</label>
                                <input class="upgrade-checkbox" id="checkbox-sealed" type="checkbox" ng-model="ctrl.upgrades.sealed" fl-analytics="UpgradeSealed">
                            </div>
                        </div>
                        <div class="upgrade-project-tag" ng-if="!ctrl.project.get().upgrades.fulltime">
                            <h3 class="promotion-tag promotion-tag-full-time upgrade-project-promotion-tag">Full Time</h3>
                            <span class="upgrade-project-tag-price">{{ ctrl.projectFees.currency.sign }}{{ (ctrl.projectFees.fulltime_price || 0)|number:2 }}</span>
                            <div class="upgrade-project-info">
                                <label class="upgrade-label" for="checkbox-fulltime">This project is for hiring a full time or commission-based position (e.g. Sales) and you will save money if you have ongoing work.</label>
                                <input class="upgrade-checkbox" id="checkbox-fulltime" type="checkbox" ng-model="ctrl.upgrades.fulltime" fl-analytics="UpgradeFulltime">
                            </div>
                        </div>
                        <div class="upgrade-project-tag" ng-if="!ctrl.project.get().upgrades.nonpublic">
                            <h3 class="promotion-tag promotion-tag-private upgrade-project-promotion-tag">Private</h3>
                            <span class="upgrade-project-tag-price">{{ ctrl.projectFees.currency.sign }}{{ (ctrl.projectFees.nonpublic_price || 0)|number:2 }}</span>
                            <div class="upgrade-project-info">
                                <label class="upgrade-label" for="checkbox-private">I want to hide project details from search engines and users that are not logged in.
                                  This feature is recommended for projects where confidentiality is a must.</label>
                                <input class="upgrade-checkbox" id="checkbox-private" type="checkbox" ng-model="ctrl.upgrades.nonpublic" fl-analytics="UpgradePrivate">
                            </div>
                        </div>
                        <div class="upgrade-project-tag" ng-if="!ctrl.project.get().upgrades.NDA">
                            <h3 class="promotion-tag promotion-tag-nda upgrade-project-promotion-tag">NDA</h3>
                            <span class="upgrade-project-tag-price" ng-if="!ctrl.projectFees.free_nda">{{ ctrl.projectFees.currency.sign }}{{ (ctrl.projectFees.nda_price || 0)|number:2 }}</span>
                            <span class="upgrade-project-tag-price" ng-if="ctrl.projectFees.free_nda">Free with membership</span>
                            <div class="upgrade-project-info">
                                <label class="upgrade-label" for="checkbox-nda">Freelancers must sign a Non-disclosure Agreement to work on your project.</label>
                                <input class="upgrade-checkbox" id="checkbox-nda" type="checkbox" ng-model="ctrl.upgrades.nda" fl-analytics="UpgradeNDA">
                            </div>
                        </div>
                    </div>
                </div>

                <footer class="Card-footer" ng-if="!ctrl.showAllUpgrades && !ctrl.project.get().upgrades.assisted && !ctrl.project.get().upgrades.featured">
                    <button class="Card-btn btn btn-link upgrade-project-btn-link" ng-click="ctrl.showAllUpgrades = true" fl-analytics="ShowMoreProjectUpgrades">
                        View all upgrades
                    </button>
                </footer>
            </section>

            <div class="upgrade-project-total"> Total: {{ ctrl.projectFees.currency.sign }}{{ ctrl.calculateTotal() |number:2 }} {{ ctrl.projectFees.currency.code }}</div>

            <button class="btn btn-primary upgrade-project-button" ng-if="ctrl.isUpgradeChecked()" ng-click="ctrl.viewState = 'confirmUpgrade'" fl-analytics="UpgradeProject"> Continue </button>
            <a class="btn upgrade-project-button" href="/projects/{{ ctrl.project.get().seo_url }}" fl-analytics="SkipUpgrade"> Skip to Project </a>
        </section>

        <!--   MODAL  -->
        <!-- Displayed to confirm fees for upgrading project -->
        <section class="upgrade-project-confirm" ng-switch-when="confirmUpgrade">
            <h2>Authorise Payment</h2>
            <p>Confirm to upgrade <strong>{{ ctrl.project.get().title }}</strong>. You will be charged
                <strong>
                    {{ ctrl.projectFees.currency.sign }}{{ ctrl.calculateTotal() |number:2 }} {{ ctrl.projectFees.currency.code }}
                </strong> once you have authorised this payment.
            </p>
            <span class="validation validation-error" ng-if="ctrl.error.unknownError">
                <span class="icon-notification"> </span>
                Internal error: {{ ctrl.error.message }}
            </span>
            <fl-button action="ctrl.upgrade(ctrl.upgrades)" class="upgrade-project-confirm-btn btn btn-primary" fl-analytics="ConfirmUpgrade"> Confirm Payment </fl-button>
            <button ng-click="ctrl.error = {}; ctrl.viewState = 'upgradeProject'" class="upgrade-project-cancel-btn btn btn-default" fl-analytics="CancelUpgrade">
                Cancel
            </button>
        </section>
    </section>
</div>