templates/order/partials/tk_pictures.html.twig line 1

Open in your IDE?
  1. <div class="row">
  2.     <div class="col-lg-6 offset-lg-3" ng-controller="TkPicturesController">
  3.         <div class="select__offer px-3 py-3 mb-4" ng-if="currentStep === 'igSelectProfile'">
  4.             <h2 class="text-center">Get Started</h2>
  6.             <form name="orderSelect" ng-submit="goToShowProfile(true)" id="enter-profile-anshore">
  8.                 <div class="mb-3 mt-3">
  9.                     <label for="username" class="form-label">Enter username</label>
  10.                     <div class="package-container">
  11.                         <input type="text" class="form-control ps-5" id="username" placeholder="TikTok username" ng-model="profile.username" ng-class="{'is-invalid': validation.username.length > 0}">
  12.                         <i class="fab fa-{{ current_service.SocialNetwork | lower }}"></i>
  13.                     </div>
  14.                 </div>
  16.                 <div class="mb-3 mt-3">
  17.                     <label for="package" class="form-label">Select package</label>
  18.                     <div class="package-container">
  19.                         <select class="form-control ps-5" id="package" ng-model="order.IDService" ng-change="onOfferChange()">
  20.                             <option ng-repeat="item in current_sub_service.offers" ng-value="item.IDService">[{(item.Offer + ' - ' + item.Quantity + ' ' + current_sub_service.Text)}]</option>
  21.                         </select>
  22.                         <i class="{{ icons[current_sub_service.Text] }}"></i>
  23.                     </div>
  24.                 </div>
  26.                 <button type="submit" class="btn btn-primary btn-lg d-block w-100" ng-disabled="loading" ng-class="{'loading': loading}">
  27.                     <span ng-show="loading">Please wait [{countdown | number:2}]</span>
  28.                     <span ng-show="!loading">Continue</span>
  29.                 </button>
  30.             </form>
  32.         </div>
  34.         <div ng-if="currentStep === 'igShowProfile'">
  35.             <div class="select__offer px-3 py-3 mb-3" id="posts-list-anshore">
  36.                 <div class="d-flex gap-3">
  37.                     <div class="img-profile-container">
  38.                         <div class="img-profile-preview" style="background-image: url([{profile.profile_pic_url}]); background-size: cover;"></div>
  39.                     </div>
  40.                     <div class="summary">
  41.                         <p class="username mb-2">
  42.                             [{profile.username}] 
  43.                             <span class="float-end" style="font-size: 12px;color: var(--bs-indigo);text-decoration: underline; cursor: pointer"  ng-click="goToSelectProfile()">Change</span>
  44.                         </p>
  45.                         <p class="package mb-0 d-flex">
  46.                             <span style="flex: 1;text-align: start;line-height: 18px;font-size: 13px;">Followers<br /><b>[{profile.follower_count | megaNumber}]</b></span>
  47.                             <span style="flex: 1;text-align: center;line-height: 18px;font-size: 13px;">Following<br /><b>[{profile.following_count | megaNumber}]</b></span>
  48.                             <span style="flex: 1;text-align: end;line-height: 18px;font-size: 13px;">Medias<br /><b>[{profile.media_count | megaNumber}]</b></span>
  49.                         </p>
  50.                     </div>
  51.                 </div>
  53.                 <hr />
  55.                 <div class="d-flex d-row gap-3 mt-4 align-items-center">
  56.                     <span><i class="{{ icons[current_sub_service.Text] }}"></i></span>
  57.                     <span style="flex: auto;font-size: 16px;font-weight: bold;line-height: 18px;">
  58.                         [{current_offer.Quantity}] [{current_sub_service.Text}]
  59.                         <br />
  60.                         <em style="font-size: 13px;font-weight: normal;">[{current_offer.Quantity}] [{current_sub_service.Text}] / 1 profile</em>
  61.                     </span>
  62.                     <span style="font-size: 20px;font-weight: bold;">
  63.                         <sub style="bottom: -2px;margin-right: 5px;color: red;" class="text-decoration-line-through">
  64.                             [{truncateToTwoDecimals(current_offer.Price * (1 + (current_offer.Discount / 100)))}]
  65.                         </sub> 
  66.                         {{get_currency()}}[{current_offer.Price}]
  67.                     </span>
  68.                 </div>
  69.             </div>
  71.             <div class="select__offer px-3 py-3 mb-3">
  72.                 <h2 class="text-center">Select Posts</h2>
  74.                 <p class="text-center">Your package will be split evenly between your posts.</p>
  76.                 <div class="medias__list mb-3">
  77.                     <div class="medias__list-item" style="background-image: url([{post.cover}]); aspect-ratio: 3/5;" ng-click="onPostClicked(post)" ng-repeat="post in profile.posts">
  78.                         <div class="medias__list-item-selected" ng-if="isPostSelected(post.url)">
  79.                             [{getQuantityPerPost()}]
  80.                         </div>
  81.                     </div>
  82.                 </div>
  84.                 <button class="btn btn-primary btn-lg d-block w-100" ng-click="goToCheckout()">Continue</button>
  85.             </div>
  86.         </div>
  88.         <div ng-if="currentStep === 'igCheckout'">
  89.             <div class="select__offer px-3 py-3 mb-3" id="checkout-anshore">
  90.             
  91.                 <div class="d-flex" style="justify-content: space-between;">
  92.                     <h3 class"mb-0">Order summary</h3>
  93.                 </div>
  95.                 <hr />
  97.                 <div class="d-flex gap-3">
  98.                     <div class="img-profile-container">
  99.                         <div class="img-profile-preview" style="background-image: url([{profile.profile_pic_url}]); background-size: cover;"></div>
  100.                     </div>
  101.                     <div class="summary">
  102.                         <p class="username mb-2">
  103.                             [{profile.username}] 
  104.                             <span class="float-end" style="font-size: 12px;color: var(--bs-indigo);text-decoration: underline; cursor: pointer"  ng-click="goToSelectProfile()">Change</span>
  105.                         </p>
  106.                         <p class="package mb-0 d-flex">
  107.                             <span style="flex: 1;text-align: start;line-height: 18px;font-size: 13px;">Followers<br /><b>[{profile.follower_count | megaNumber}]</b></span>
  108.                             <span style="flex: 1;text-align: center;line-height: 18px;font-size: 13px;">Following<br /><b>[{profile.following_count | megaNumber}]</b></span>
  109.                             <span style="flex: 1;text-align: end;line-height: 18px;font-size: 13px;">Medias<br /><b>[{profile.media_count | megaNumber}]</b></span>
  110.                         </p>
  111.                     </div>
  112.                 </div>
  114.                 <hr />
  116.                 <div class="d-flex d-row gap-3 mt-4 align-items-center">
  117.                     <span><i class="{{ icons[current_sub_service.Text] }}"></i></span>
  118.                     <span style="flex: auto;font-size: 16px;font-weight: bold;line-height: 18px;">
  119.                         [{current_offer.Quantity}] [{current_sub_service.Text}]
  120.                         <br />
  121.                         <em style="font-size: 13px;font-weight: normal;">[{current_offer.Quantity}] [{current_sub_service.Text}] / 1 profile</em>
  122.                     </span>
  123.                     <span style="font-size: 20px;font-weight: bold;">
  124.                         <sub style="bottom: -2px;margin-right: 5px;color: red;" class="text-decoration-line-through">
  125.                             [{truncateToTwoDecimals(current_offer.Price * (1 + (current_offer.Discount / 100)))}]
  126.                         </sub> 
  127.                         {{get_currency()}}[{current_offer.Price}]
  128.                     </span>
  129.                 </div>
  131.                 <hr />
  133.                 <div class="d-flex flex-column gap-3 mt-3 align-items-center">
  134.                     <p style="font-size: 20px;display: flex;align-items: center;width: 100%;justify-content: space-between;margin: 0; font-weight: bold">
  135.                         Selected Posts
  136.                         <span class="float-end" style="font-size: 12px;color: var(--bs-indigo);text-decoration: underline; cursor: pointer" ng-click="goToShowProfile(false)">Change</span>
  137.                     </p>
  139.                     <div class="medias__list" style="grid-template-columns: auto auto auto auto auto; width: 100%">
  140.                         <div class="medias__list-item" style="background-image: url([{post.cover}]); aspect-ratio: 4/4;" ng-repeat="post in profile.posts" ng-if="isPostSelected(post.url)">
  141.                             <div class="medias__list-item-selected" style="background-color: #00000042; font-size: 15px;align-items: end;">
  142.                                 <div>
  143.                                     <span>[{getQuantityPerPost()}]</span>
  144.                                     <i class="{{ icons[current_sub_service.Text] }}"></i>
  145.                                 </div>
  146.                             </div>
  147.                         </div>
  148.                     </div>
  149.                 </div>
  151.                 <hr />
  153.                 {# <div class="input-group mb-3">
  154.                     <input type="text" class="form-control" placeholder="Enter coupon code" aria-describedby="basic-addon2">
  155.                     <span class="input-group-text" id="basic-addon2">Apply</span>
  156.                 </div> #}
  158.                 <div class="d-flex" style="justify-content: space-between;">
  159.                     <h3 class"mb-0">Total to pay</h3>
  160.                     <b class="h3 mb-0">{{get_currency()}}[{current_offer.Price}]</b>
  161.                 </div>
  162.             </div>
  164.             <div class="select__offer px-3 py-3 mb-3">
  165.                 <h2 class="text-center">Checkout</h2>
  167.                 <div class="mb-3">
  168.                     <label for="email" class="form-label">Enter your e-mail to receive the confirmation order</label>
  169.                     <input type="text" class="form-control" id="email" placeholder="Enter your email" ng-model="order.email" ng-class="{'is-invalid': validation.email.length > 0}">
  170.                 </div>
  172.                 {# <div class="form-check mb-3">
  173.                     <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
  174.                     <label class="form-check-label" for="flexCheckDefault">
  175.                         Send me special promotions and discounts
  176.                     </label>
  177.                 </div> #}
  179.                 <div class="mb-3">
  180.                     {# <button class="btn btn-lg btn-primary d-block w-100" ng-click="proceedToCheckout()">Pay {{get_currency()}}[{current_offer.Price}]</button> #}
  181.                     <button class="btn btn-primary btn-lg d-block w-100" ng-click="proceedToCheckout()" ng-disabled="submitting" ng-class="{'loading': submitting}">
  182.                         <span ng-show="submitting">Please wait while submitting your order</span>
  183.                         <span ng-show="!submitting">Pay {{get_currency()}}[{current_offer.Price}]</span>
  184.                     </button>
  185.                 </div>
  187.                 <div class="text-center">
  188.                     <p>
  189.                         By completing your order, you agree to the <a href="/terms/terms" target="_blank">terms of services</a> 
  190.                         and <a href="/terms/privacy" target="_blank">privacy policy</a>.
  191.                     </p>
  192.                             
  193.                     <p>
  194.                         <strong>All pricing is in {{get_currency()}}.</strong> If paying with a different currency, the billed amount is 
  195.                         subject to exchange rates and additional fees.
  196.                     </p>
  197.                 </div>
  199.             </div>
  200.         </div>
  201.     </div>
  202. </div>