<div class="row"> <div class="col-lg-6 offset-lg-3" ng-controller="IGReelController"> <div class="select__offer px-3 py-3 mb-4" ng-if="currentStep === 'igSelectProfile'"> <h2 class="text-center">Get Started</h2> <form name="orderSelect" ng-submit="goToShowProfile(true)"> <div class="mb-3 mt-3"> <label for="username" class="form-label">Enter username</label> <div class="package-container"> <input type="text" class="form-control ps-5" id="username" placeholder="Instagram username" ng-model="profile.username" ng-class="{'is-invalid': validation.username.length > 0}"> <i class="fab fa-{{ current_service.SocialNetwork | lower }}"></i> </div> </div> <div class="mb-3 mt-3"> <label for="package" class="form-label">Select package</label> <div class="package-container"> <select class="form-control ps-5" id="package" ng-model="order.IDService" ng-change="onOfferChange()"> <option ng-repeat="item in current_sub_service.offers" ng-value="item.IDService">[{(item.Offer + ' - ' + item.Quantity + ' ' + current_sub_service.Text)}]</option> </select> <i class="{{ icons[current_sub_service.Text] }}"></i> </div> </div> <button type="submit" class="btn btn-primary btn-lg d-block w-100" ng-disabled="loading" ng-class="{'loading': loading}"> <span ng-show="loading">Please wait [{countdown | number:2}]</span> <span ng-show="!loading">Continue</span> </button> </form> </div> <div ng-if="currentStep === 'igShowProfile'"> <div class="select__offer px-3 py-3 mb-3"> <div class="d-flex gap-3"> <div class="img-profile-container"> <div class="img-profile-preview" style="background-image: url([{profile.profile_pic_url}])"></div> </div> <div class="summary"> <p class="username mb-2"> [{profile.username}] <span class="float-end" style="font-size: 12px;color: var(--bs-indigo);text-decoration: underline; cursor: pointer" ng-click="goToSelectProfile()">Change</span> </p> <p class="package mb-0 d-flex"> <span style="flex: 1;text-align: start;line-height: 18px;font-size: 13px;">Followers<br /><b>[{profile.follower_count | megaNumber}]</b></span> <span style="flex: 1;text-align: center;line-height: 18px;font-size: 13px;">Following<br /><b>[{profile.following_count | megaNumber}]</b></span> <span style="flex: 1;text-align: end;line-height: 18px;font-size: 13px;">Medias<br /><b>[{profile.media_count | megaNumber}]</b></span> </p> </div> </div> <hr /> <div class="d-flex d-row gap-3 mt-4 align-items-center"> <span><i class="{{ icons[current_sub_service.Text] }}"></i></span> <span style="flex: auto;font-size: 16px;font-weight: bold;line-height: 18px;"> [{current_offer.Quantity}] [{current_sub_service.Text}] <br /> <em style="font-size: 13px;font-weight: normal;">[{current_offer.Quantity}] [{current_sub_service.Text}] / 1 profile</em> </span> <span style="font-size: 20px;font-weight: bold;"> <sub style="bottom: -2px;margin-right: 5px;color: red;" class="text-decoration-line-through"> [{truncateToTwoDecimals(current_offer.Price * (1 + (current_offer.Discount / 100)))}] </sub> {{get_currency()}}[{current_offer.Price}] </span> </div> </div> <div class="select__offer px-3 py-3 mb-3"> <h2 class="text-center">Select Posts</h2> <p class="text-center">Your package will be split evenly between your posts.</p> <div class="medias__list mb-3"> <div class="medias__list-item" style="background-image: url([{post.picture_url}]); aspect-ratio: 3/4;" ng-click="onPostClicked(post)" ng-repeat="post in profile.posts"> <div class="medias__list-item-selected" ng-if="isPostSelected(post.url)"> [{getQuantityPerPost()}] </div> </div> </div> <div class="d-flex flex-column flex-md-row gap-2"> <button class="btn btn-success btn-lg w-100" ng-if="tokenReels" ng-click="loadMoreMedias()" ng-disabled="isLoadingMedia" ng-class="{'loading': isLoadingMedia}"> <span ng-show="isLoadingMedia">Loading...</span> <span ng-show="!isLoadingMedia">Load More</span> </button> <button class="btn btn-primary btn-lg w-100" ng-click="goToCheckout()">Continue >> </button> </div> </div> </div> <div ng-if="currentStep === 'igCheckout'"> <div class="select__offer px-3 py-3 mb-3"> <div class="d-flex" style="justify-content: space-between;"> <h3 class="mb-0">Order summary</h3> </div> <hr /> <div class="d-flex gap-3"> <div class="img-profile-container"> <div class="img-profile-preview" style="background-image: url([{profile.profile_pic_url}])"></div> </div> <div class="summary"> <p class="username mb-2"> [{profile.username}] <span class="float-end" style="font-size: 12px;color: var(--bs-indigo);text-decoration: underline; cursor: pointer" ng-click="goToSelectProfile()">Change</span> </p> <p class="package mb-0 d-flex"> <span style="flex: 1;text-align: start;line-height: 18px;font-size: 13px;">Followers<br /><b>[{profile.follower_count | megaNumber}]</b></span> <span style="flex: 1;text-align: center;line-height: 18px;font-size: 13px;">Following<br /><b>[{profile.following_count | megaNumber}]</b></span> <span style="flex: 1;text-align: end;line-height: 18px;font-size: 13px;">Medias<br /><b>[{profile.media_count | megaNumber}]</b></span> </p> </div> </div> <hr /> <div class="d-flex d-row gap-3 mt-4 align-items-center"> <span><i class="{{ icons[current_sub_service.Text] }}"></i></span> <span style="flex: auto;font-size: 16px;font-weight: bold;line-height: 18px;"> [{current_offer.Quantity}] [{current_sub_service.Text}] <br /> <em style="font-size: 13px;font-weight: normal;">[{current_offer.Quantity}] [{current_sub_service.Text}] / 1 profile</em> </span> <span style="font-size: 20px;font-weight: bold;"> <sub style="bottom: -2px;margin-right: 5px;color: red;" class="text-decoration-line-through"> [{truncateToTwoDecimals(current_offer.Price * (1 + (current_offer.Discount / 100)))}] </sub> {{get_currency()}}[{current_offer.Price}] </span> </div> <hr /> <div class="d-flex flex-column gap-3 mt-3 align-items-center"> <p style="font-size: 20px;display: flex;align-items: center;width: 100%;justify-content: space-between;margin: 0; font-weight: bold"> Selected Posts <span class="float-end" style="font-size: 12px;color: var(--bs-indigo);text-decoration: underline; cursor: pointer" ng-click="goToShowProfile(false)">Change</span> </p> <div class="medias__list" style="grid-template-columns: auto auto auto auto auto; width: 100%"> <div class="medias__list-item" style="background-image: url([{post.picture_url}]); aspect-ratio: 3/4;" ng-repeat="post in profile.posts" ng-if="isPostSelected(post.url)"> <div class="medias__list-item-selected" style="background-color: #00000042; font-size: 15px;align-items: end;"> <div> <span>[{getQuantityPerPost()}]</span> <i class="{{ icons[current_sub_service.Text] }}"></i> </div> </div> </div> </div> </div> <hr /> {# <div class="input-group mb-3"> <input type="text" class="form-control" placeholder="Enter coupon code" aria-describedby="basic-addon2"> <span class="input-group-text" id="basic-addon2">Apply</span> </div> #} <div class="d-flex" style="justify-content: space-between;"> <h3 class="mb-0">Total to pay</h3> <b class="h3 mb-0">{{get_currency()}}[{current_offer.Price}]</b> </div> </div> <div class="select__offer px-3 py-3 mb-3"> <h2 class="text-center">Checkout</h2> <div class="mb-3"> <label for="email" class="form-label">Enter your e-mail to receive the confirmation order</label> <input type="text" class="form-control" id="email" placeholder="Enter your email" required ng-model="order.email" ng-class="{'is-invalid': validation.email.length > 0}"> </div> {# <div class="form-check mb-3"> <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault"> <label class="form-check-label" for="flexCheckDefault"> Send me special promotions and discounts </label> </div> #} <div class="mb-3"> {# <button class="btn btn-lg btn-primary d-block w-100" ng-click="proceedToCheckout()">Pay {{get_currency()}}[{current_offer.Price}]</button> #} <button class="btn btn-primary btn-lg d-block w-100" ng-click="proceedToCheckout()" ng-disabled="submitting" ng-class="{'loading': submitting}"> <span ng-show="submitting">Please wait while submitting your order</span> <span ng-show="!submitting">Pay {{get_currency()}}[{current_offer.Price}]</span> </button> </div> <div class="text-center"> <p> By completing your order, you agree to the <a href="/terms/terms" target="_blank">terms of services</a> and <a href="/terms/privacy" target="_blank">privacy policy</a>. </p> <p> <strong>All pricing is in {{get_currency()}}.</strong> If paying with a different currency, the billed amount is subject to exchange rates and additional fees. </p> </div> </div> </div> </div></div>