frontend/src/templates/PromotionForm.html

<div layout="row" layout-align=" stretch" flex ng-cloak>
    <div layout-padding style="border-right: 1px solid #BBB; overflow: auto" layout-align="stretch" flex="campaignGroup !== 'membership' && promotion.landingPage?50:100">
        <form name="promotionForm" novalidate ng-submit="promotionForm.$valid && ctrl.save(promotion)">
            <div layout="column">
                <h3>Promotion Details</h3>
                <md-input-container>
                    <label>Campaign</label><input ng-disabled="true" type="text" value="{{ promotion.campaignCode }} — {{ promotion.campaignName }}"/>
                </md-input-container>
                <md-input-container>
                    <label>Name</label><input name="name" ng-model="promotion.name" ng-required="true"/>
                    <div ng-messages="promotionForm.name.$error" role="alert">
                        <ng-message when="required">Please enter a name</ng-message>
                    </div>
                </md-input-container>
                <md-input-container class="md-block">
                    <label>Description for checkout page summary and showcase page promotional copy</label>
                    <input ng-model="promotion.description" name="description" required/>
                    <div ng-messages="promotionForm.description.$error" role="alert">
                        <ng-message when="required">Please enter a description</ng-message>
                    </div>
                </md-input-container>
                <multi-promotion-type promotion="promotion" campaign-group="campaignGroup"></multi-promotion-type>
                <rate-plan-list
                        product-rate-plan-ids="promotion.appliesTo.productRatePlanIds"
                        campaign-group="campaignGroup"
                        discount="promotion.promotionType.amount || promotion.promotionType.a.amount || promotion.promotionType.b.amount"
                        length="promotion.promotionType.durationMonths || promotion.promotionType.a.durationMonths || promotion.promotionType.b.durationMonths">
                </rate-plan-list>
                <available-countries countries="promotion.appliesTo.countries"></available-countries>
                <promotion-dates promotion="promotion"></promotion-dates>
                <channel-codes codes="promotion.codes"></channel-codes>
                <landing-page promotion="promotion" campaign-group="campaignGroup"></landing-page>

                <section layout="row" layout-align="end center" layout-wrap>
                    <div layout="row" layout-align="center center">
                        <md-button type="submit" class="md-raised md-primary">Save</md-button>
                        <md-button class="md-raised md-primary" ng-click="ctrl.close(promotion)">Save & Close</md-button>
                        <div class="small-error" ng-show="promotionForm.$submitted && promotionForm.$invalid">
                            This form has errors
                        </div>
                    </div>
                </section>

                <div class="server-error" ng-if="serverErrors.length">
                    There was an error while saving the promotion:
                    <ul><li ng-repeat="err in serverErrors">{{err}}</li></ul>
                    Please send this report to a developer.
                </div>
            </div>
        </form>
    </div>
    <preview-promotion ng-show="false" flex layout="column" promotion="promotion" validity="promotionForm.$valid"></preview-promotion>
</div>