puntorosso

solid_affiliate/assets/Views/AffiliatePortal/DashboardView.php

Oct 18th, 2021 (edited)
277
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
PHP 35.78 KB | None | 0 0
  1. <?php
  2.  
  3. namespace SolidAffiliate\Views\AffiliatePortal;
  4.  
  5. use SolidAffiliate\Controllers\AffiliatePortalController;
  6. use SolidAffiliate\Lib\Formatters;
  7. use SolidAffiliate\Lib\FormBuilder;
  8. use SolidAffiliate\Lib\GlobalTypes;
  9. use SolidAffiliate\Lib\Settings;
  10. use SolidAffiliate\Lib\VO\AffiliatePortalViewInterface;
  11. use SolidAffiliate\Models\Affiliate;
  12. use SolidAffiliate\Models\AffiliatePortal;
  13. use SolidAffiliate\Models\Creative;
  14. use SolidAffiliate\Views\AffiliatePortal\AffiliatePortalTabsView;
  15. use SolidAffiliate\Views\Shared\SimpleTableView;
  16.  
  17. // wp_enquue_script
  18. // -> wp_enqueue_style for frontend things (not admin)
  19.  
  20. // patterns woocommerce uses.
  21. //     - you use a shortcode
  22. //     - you also define which page is your checkout page (in woocomerce admin settings)
  23. // this way they can load special shit on their checkout pages like css and js
  24.  
  25. /**
  26.  * @psalm-import-type PaginationArgs from \SolidAffiliate\Lib\GlobalTypes
  27.  */
  28. class DashboardView
  29. {
  30.  
  31.     /**
  32.      *
  33.      * @param AffiliatePortalViewInterface $i
  34.      *
  35.      * @return string
  36.      */
  37.     public static function render($i)
  38.     {
  39.  
  40.         $should_show_logout_link_on_affiliate_portal = (bool)Settings::get(Settings::KEY_IS_LOGOUT_LINK_ON_AFFILIATE_PORTAL);
  41.  
  42.         if ($i->affiliate->status != 'approved' && (bool)Settings::get(Settings::KEY_IS_HIDE_AFFILIATE_PORTAL_FROM_UNAPPROVED_AFFILIATES)) {
  43.             return (string)Settings::get(Settings::KEY_UNAPPROVED_AFFILIATES_CONTENT);
  44.         }
  45.  
  46.  
  47.         $maybe_perma_link = get_permalink();
  48.         $logout_url = $maybe_perma_link ? wp_logout_url($maybe_perma_link) : '/logout';
  49.  
  50.         //Get the active tab from the $_GET param
  51.         $default_tab = null;
  52.         $current_tab = isset($_GET['tab']) ? (string)$_GET['tab'] : $default_tab;
  53.  
  54.         ob_start();
  55. ?>
  56.         <?php echo (self::render_js($i)) ?>
  57.         <?php echo (self::render_css()) ?>
  58.  
  59.  
  60.  
  61.         <div id='<?php echo (GlobalTypes::AFFILIATE_PORTAL_HTML_ID) ?>'>
  62.             <div class="sld-ap-grid_container">
  63.                 <div class="sld-ap-header">
  64.                     <div class="sld-ap-heading">
  65.                         <h2>Affiliate Portal</h2>
  66.                     </div>
  67.                     <div class="sld-ap-login">
  68.                         <?php echo get_avatar(wp_get_current_user()->ID) ?>
  69.                         <div class="sld-ap-login-user">
  70.                             <span>Logged in as</span>
  71.                             <div class="sld-ap-login-user_name">
  72.                                 <?php echo (wp_get_current_user()->user_nicename) ?>
  73.                             </div>
  74.                         </div>
  75.                         <?php if ($should_show_logout_link_on_affiliate_portal) { ?>
  76.                             <a href="<?php echo ($logout_url) ?>" class="sld-ap-login-user_logout">
  77.                                 <svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
  78.                                     <path d="M1.75 2.875C1.75 2.25368 2.25366 1.75 2.875 1.75H12.875C13.4963 1.75 14 2.25368 14 2.875V3.875H15.75V2.875C15.75 1.28719 14.4628 0 12.875 0H2.875C1.28723 0 0 1.28719 0 2.875V13.875C0 15.4628 1.28723 16.75 2.875 16.75H12.875C14.4628 16.75 15.75 15.4628 15.75 13.875V11.875H14V13.875C14 14.4963 13.4963 15 12.875 15H2.875C2.25366 15 1.75 14.4963 1.75 13.875V2.875Z" />
  79.                                     <path d="M1.75 2.875C1.75 2.25368 2.25366 1.75 2.875 1.75H12.875C13.4963 1.75 14 2.25368 14 2.875V3.875H15.75V2.875C15.75 1.28719 14.4628 0 12.875 0H2.875C1.28723 0 0 1.28719 0 2.875V13.875C0 15.4628 1.28723 16.75 2.875 16.75H12.875C14.4628 16.75 15.75 15.4628 15.75 13.875V11.875H14V13.875C14 14.4963 13.4963 15 12.875 15H2.875C2.25366 15 1.75 14.4963 1.75 13.875V2.875Z" />
  80.                                     <path d="M10.4713 3.875L9.21301 5.16071L11.5135 7.51155H3.875V9.32982H11.4242L9.21313 11.5893L10.4713 12.875L14.875 8.375L10.4713 3.875Z" />
  81.                                     <path d="M10.4713 3.875L9.21301 5.16071L11.5135 7.51155H3.875V9.32982H11.4242L9.21313 11.5893L10.4713 12.875L14.875 8.375L10.4713 3.875Z" />
  82.                                 </svg>
  83.                             </a>
  84.                         <?php }; ?>
  85.                     </div>
  86.                 </div>
  87.                 <div class="sld-ap-info">
  88.                     <div class="sld-ap-info_col">
  89.                         <div class="sld-ap-info-box sld-ap-mr20">
  90.                             <span class="sld-ap-info-box-top">
  91.                                 Affiliate Status
  92.                             </span>
  93.                             <p class="sld-ap-info-box-bottom sld-ap-affiliate-status-<?php echo ($i->affiliate->status) ?>">
  94.                                 <?php echo (ucfirst((string)$i->affiliate->status)) ?>
  95.                             </p>
  96.                         </div>
  97.                         <div class="sld-ap-info-box sld-ap-mr20">
  98.                             <span class="sld-ap-info-box-top">
  99.                                 Payment email
  100.                             </span>
  101.                             <p class="sld-ap-info-box-bottom">
  102.                                 <?php echo ($i->affiliate->payment_email) ?>
  103.                                 <!-- <a class="sld-ap-info-box_edit">
  104.                                     <a href="edit-email.html" class="sld-ap-info-box_edit">
  105.                                         <svg width="12" height="11" viewBox="0 0 12 11" fill="none" xmlns="http://www.w3.org/2000/svg">
  106.                                             <path d="M0.666992 8.8125L7.12012 2.35938L9.30762 4.54688L2.85449 11H0.666992V8.8125ZM11.0029 2.85156L9.93652 3.91797L7.74902 1.73047L8.81543 0.664062C8.9248 0.554688 9.06152 0.5 9.22559 0.5C9.38965 0.5 9.52637 0.554688 9.63574 0.664062L11.0029 2.03125C11.1123 2.14062 11.167 2.27734 11.167 2.44141C11.167 2.60547 11.1123 2.74219 11.0029 2.85156Z" fill="#757575" />
  107.                                         </svg>
  108.                                     </a>
  109.                                 </a> -->
  110.                             </p>
  111.                         </div>
  112.                         <div class="sld-ap-info-box">
  113.                             <span class="sld-ap-info-box-top">
  114.                                 Account Email
  115.                             </span>
  116.                             <p class="sld-ap-info-box-bottom">
  117.                                 <?php echo ($i->account_email) ?>
  118.                             </p>
  119.                         </div>
  120.                     </div>
  121.                     <div class="sld-ap-info_col">
  122.                         <div class="sld-ap-info-box sld-ap-mr20">
  123.                             <span class="sld-ap-info-box-top">
  124.                                 Affiliate ID
  125.                             </span>
  126.                             <p class="sld-ap-info-box-bottom">
  127.                                 <?php echo ($i->affiliate->id) ?>
  128.                             </p>
  129.                         </div>
  130.                         <div class="sld-ap-info-box">
  131.                             <span class="sld-ap-info-box-top">
  132.                                 Your Affiliate Link
  133.                             </span>
  134.                             <p class="sld-ap-info-box-bottom sld-ap-affiliate-link"><a href="<?php echo ($i->affiliate_link) ?>"><?php echo ($i->affiliate_link) ?></a></p>
  135.                         </div>
  136.                     </div>
  137.                 </div>
  138.                 <?php echo AffiliatePortalTabsView::render(
  139.                     [
  140.                         ['referrals', 'Referrals'],
  141.                         ['visits', 'Visits'],
  142.                         ['payouts', 'Payouts'],
  143.                         ['coupons', 'Coupons'],
  144.                         ['creatives', 'Creatives'],
  145.                         ['urls', 'Affiliate Links'],
  146.                         ['settings', 'Settings'],
  147.                     ],
  148.                     $current_tab,
  149.                     GlobalTypes::AFFILIATE_PORTAL_HTML_ID
  150.                 ); ?>
  151.  
  152.                 <div class="sld-ap-main sld-ap-main_<?php echo ($current_tab) ?>">
  153.                     <?php switch ($current_tab):
  154.                         case 'settings':
  155.                             echo self::render_account_settings($i);
  156.                             break;
  157.                         case 'referrals':
  158.                             echo self::render_referrals($i);
  159.                             break;
  160.                         case 'payouts':
  161.                             echo self::render_payouts($i);
  162.                             break;
  163.                         case 'visits':
  164.                             echo self::render_visits($i);
  165.                             break;
  166.                         case 'coupons':
  167.                             echo self::render_coupons($i);
  168.                             break;
  169.                         case 'urls':
  170.                             echo self::render_urls($i);
  171.                             break;
  172.                         case 'creatives':
  173.                             echo self::render_creatives($i);
  174.                             break;
  175.                         default:
  176.                             echo self::render_referrals($i);
  177.                             break;
  178.                     endswitch; ?>
  179.                 </div>
  180.                 <!-- <div class="sld-ap-footer">
  181.                     <div class="sld-ap-footer_notice">If you have any questions or concerns, please <a href="#">Contact us</a>.</div>
  182.                 </div> -->
  183.             </div>
  184.         </div>
  185.  
  186.  
  187.         <?php
  188.         $res = ob_get_clean();
  189.         if ($res) {
  190.             return $res;
  191.         } else {
  192.             return "Error rendering Affiliate Portal Dashboard.";
  193.         }
  194.     }
  195.  
  196.     /**
  197.      * Undocumented function
  198.      *
  199.      * @param AffiliatePortalViewInterface $i
  200.      *
  201.      * @return string
  202.      */
  203.     private static function render_account_settings_old($i)
  204.     {
  205.         ob_start();
  206.         ?>
  207.         <div class='solid-affiliate-affiliate-portal_account_settings'>
  208.             <h5>Account Settings</h5>
  209.             <?php
  210.             $form_id = 'solid-affiliate-affiliate-portal_update_settings';
  211.             $schema = AffiliatePortal::affiliate_settings_schema();
  212.             $nonce = AffiliatePortalController::NONCE_SUBMIT_UPDATE_SETTINGS;
  213.             $submit_action = AffiliatePortalController::POST_PARAM_SUBMIT_UPDATE_SETTINGS;
  214.  
  215.             $item = (object)$i->affiliate->attributes;
  216.             ?>
  217.             <form action="/" method="post" id="<?php echo $form_id ?>">
  218.                 <table class="form-table">
  219.                     <tbody>
  220.                         <?php echo FormBuilder::build_form($schema, 'edit', $item) ?>
  221.                     </tbody>
  222.                 </table>
  223.  
  224.                 <input type="hidden" name="field_id" value="<?php echo (string)$item->id; ?>">
  225.  
  226.                 <?php wp_nonce_field($nonce); ?>
  227.                 <?php submit_button(__("Update Settings", 'solid-affiliate'), 'primary', $submit_action); ?>
  228.             </form>
  229.         </div>
  230.  
  231.     <?php
  232.         $res = ob_get_clean();
  233.         return $res;
  234.     }
  235.  
  236.     /**
  237.      * Undocumented function
  238.      *
  239.      * @param AffiliatePortalViewInterface $i
  240.      *
  241.      * @return string
  242.      */
  243.     private static function render_account_settings($i)
  244.     {
  245.         $form_id = 'solid-affiliate-affiliate-portal_update_settings';
  246.         $nonce = AffiliatePortalController::NONCE_SUBMIT_UPDATE_SETTINGS;
  247.         $submit_action = AffiliatePortalController::POST_PARAM_SUBMIT_UPDATE_SETTINGS;
  248.  
  249.         $item = (object)$i->affiliate->attributes;
  250.         ob_start();
  251.     ?>
  252.         <div class='solid-affiliate-affiliate-portal_account_settings'>
  253.             <h3 class="sld-ap-title">
  254.                 Payment email
  255.             </h3>
  256.             <p class="sld-ap-description">Update your payment email.</p>
  257.             <div class="sld-ap-edit-email">
  258.                 <form action="/" method="post" id="<?php echo $form_id ?>">
  259.                     <input type="text" name="payment_email" id="payment_email" class="regular-text" placeholder="Payment Email" value="" required="">
  260.                     <input type="hidden" name="field_id" value="<?php echo (string)$item->id; ?>">
  261.                     <?php wp_nonce_field($nonce); ?>
  262.                     <input type="submit" name="<?php echo ($submit_action) ?>" id="<?php echo ($submit_action) ?>" class="sld-ap-edit-email_button" value="Update Settings">
  263.                 </form>
  264.             </div>
  265.         </div>
  266.  
  267.     <?php
  268.         $res = ob_get_clean();
  269.         return $res;
  270.     }
  271.  
  272.     /**
  273.      * Undocumented function
  274.      *
  275.      * @param AffiliatePortalViewInterface $i
  276.      *
  277.      * @return string
  278.      */
  279.     private static function render_referrals($i)
  280.     {
  281.         // Referrals data
  282.         // $referrals_table_headers = ['ID', 'Date', 'Source', 'Amount', 'Description', 'Status'];
  283.         $referrals_table_headers = ['ID', 'Date', 'Source', 'Amount', 'Status'];
  284.         $referrals_table_rows = array_map(
  285.             /** @param \SolidAffiliate\Models\Referral $referral */
  286.             function ($referral) {
  287.                 $formatted_date = date('F j, Y', strtotime($referral->created_at));
  288.                 $formatted_commission_amount = Formatters::money($referral->commission_amount);
  289.                 $formatted_status = Formatters::status($referral->status);
  290.                 $formatted_referral_source = ucfirst((string)$referral->referral_source);
  291.                 // return [$referral->id, $formatted_date, $formatted_referral_source, $formatted_commission_amount, $referral->description, $formatted_status];
  292.                 return [$referral->id, $formatted_date, $formatted_referral_source, $formatted_commission_amount, $formatted_status];
  293.             },
  294.             $i->referrals
  295.         );
  296.         ob_start();
  297.     ?>
  298.         <h3 class="sld-ap-title">
  299.             Referrals
  300.         </h3>
  301.         <p class="sld-ap-description">Purchases or conversions that have been attributed back to your links and coupons.</p>
  302.         <?php echo (SimpleTableView::render($referrals_table_headers, $referrals_table_rows, ['total_count' => $i->referrals_count], 'No data to display.', 'sld-ap-table')) ?>
  303.  
  304.  
  305.  
  306.     <?php
  307.         $res = ob_get_clean();
  308.         return $res;
  309.     }
  310.  
  311.     /**
  312.      * Undocumented function
  313.      *
  314.      * @param AffiliatePortalViewInterface $i
  315.      *
  316.      * @return string
  317.      */
  318.     private static function render_payouts($i)
  319.     {
  320.         // Payouts data
  321.         $payouts_table_headers = ['ID', 'Date', 'Amount', 'Status'];
  322.         $payouts_table_rows = array_map(
  323.             function ($payout) {
  324.                 $formatted_date = date('F j, Y', strtotime($payout->created_at));
  325.                 $formatted_amount = Formatters::money($payout->amount);
  326.                 $formatted_status = Formatters::status($payout->status);
  327.                 return [$payout->id, $formatted_date, $formatted_amount, $formatted_status];
  328.             },
  329.             $i->payouts
  330.         );
  331.  
  332.         ob_start();
  333.     ?>
  334.         <h3 class="sld-ap-title">
  335.             Payouts
  336.         </h3>
  337.         <p class="sld-ap-description">Payouts which have been paid to you.</p>
  338.         <?php echo (SimpleTableView::render($payouts_table_headers, $payouts_table_rows, ['total_count' => $i->payouts_count], 'No data to display.', 'sld-ap-table')) ?>
  339.  
  340.     <?php
  341.         $res = ob_get_clean();
  342.         return $res;
  343.     }
  344.  
  345.     /**
  346.      * Undocumented function
  347.      *
  348.      * @param AffiliatePortalViewInterface $i
  349.      *
  350.      * @return string
  351.      */
  352.     private static function render_visits($i)
  353.     {
  354.         // Visits data
  355.         $visits_table_headers = ['ID', 'Date', 'Referral ID', 'Referring Page', 'Landing URL'];
  356.         $visits_table_rows = array_map(
  357.             function ($visit) {
  358.                 $formatted_date = date('F j, Y', strtotime($visit->created_at));
  359.                 return [$visit->id, $formatted_date, $visit->referral_id, $visit->http_referrer, $visit->landing_url];
  360.             },
  361.             $i->visits
  362.         );
  363.  
  364.         ob_start();
  365.     ?>
  366.  
  367.         <h3 class="sld-ap-title">
  368.             Visits
  369.         </h3>
  370.         <p class="sld-ap-description">Visits which you've sent using your links.</p>
  371.         <?php echo (SimpleTableView::render($visits_table_headers, $visits_table_rows, ['total_count' => $i->visits_count], 'No data to display.', 'sld-ap-table')) ?>
  372.     <?php
  373.         $res = ob_get_clean();
  374.         return $res;
  375.     }
  376.  
  377.     /**
  378.      * Undocumented function
  379.      *
  380.      * @param AffiliatePortalViewInterface $i
  381.      *
  382.      * @return string
  383.      */
  384.     private static function render_coupons($i)
  385.     {
  386.         // Coupons data
  387.         $coupons_table_headers = ['Code', 'Type', '# of Referrals'];
  388.         $coupons_table_rows = $i->coupon_data;
  389.  
  390.         ob_start();
  391.     ?>
  392.         <h3 class="sld-ap-title">
  393.             Coupons
  394.         </h3>
  395.         <p class="sld-ap-description">Coupons which have been linked to your account. You'll receive a referral for any purchases that use these coupons</p>
  396.         <?php echo (SimpleTableView::render($coupons_table_headers, $coupons_table_rows, null, 'No data to display.', 'sld-ap-table')) ?>
  397.  
  398.     <?php
  399.         $res = ob_get_clean();
  400.         return $res;
  401.     }
  402.  
  403.     /**
  404.      * Undocumented function
  405.      *
  406.      * @param AffiliatePortalViewInterface $i
  407.      *
  408.      * @return string
  409.      */
  410.     private static function render_creatives($i)
  411.     {
  412.         ob_start();
  413.     ?>
  414.         <h3 class="sld-ap-title">
  415.             Creatives
  416.         </h3>
  417.         <p class="sld-ap-description">Use these creatives on your site or social media to generate Referrals.</p>
  418.         <div class="sld-ap-creatives_wrapper">
  419.  
  420.             <?php
  421.             foreach ($i->creatives as $creative) {
  422.                 echo Creative::render_affiliate_portal_creative($creative, $i->affiliate->id);
  423.             }
  424.             ?>
  425.         </div>
  426.     <?php
  427.         $res = ob_get_clean();
  428.         return $res;
  429.     }
  430.  
  431.     /**
  432.      * Undocumented function
  433.      *
  434.      * @param AffiliatePortalViewInterface $i
  435.      *
  436.      * @return string
  437.      */
  438.     private static function render_account_details($i)
  439.     {
  440.         ob_start();
  441.     ?>
  442.         <div class='solid-affiliate-affiliate-portal_account_details'>
  443.             <h5>Account Details</h5>
  444.             <p>Account Email: <strong><?php echo ($i->account_email) ?></strong></p>
  445.             <p>Payments Email: <strong><?php echo ($i->affiliate->payment_email) ?></strong></p>
  446.             <p>Affiliate Status: <strong><?php echo ($i->affiliate->status) ?></strong></p>
  447.         </div>
  448.     <?php
  449.         $res = ob_get_clean();
  450.         return $res;
  451.     }
  452.  
  453.     /**
  454.      * Undocumented function
  455.      *
  456.      * @param AffiliatePortalViewInterface $i
  457.      *
  458.      * @return string
  459.      */
  460.     private static function render_urls($i)
  461.     {
  462.         ob_start();
  463.     ?>
  464.         <div class='solid-affiliate-affiliate-portal_urls'>
  465.             <h3 class="sld-ap-title">Affiliate Links</h3>
  466.             <p class="sld-ap-description">To create an affiliate link to any page on this site, simply add <mark><strong>?<?php echo (string)Settings::get(Settings::KEY_REFERRAL_VARIABLE); ?>=<?php echo $i->affiliate->id ?></strong></mark> to the url. You can also use the URL generator below.</p>
  467.             <hr>
  468.  
  469.             <p class="sld-ap-description">1) Enter any page URL from our site</p>
  470.             <input style="width: 100%" id="sld-ap-page_url" name="page_url" type="text" value="<?php echo get_home_url() ?>">
  471.  
  472.             <br/><br/>
  473.  
  474.             <p class="sld-ap-description">2) Use your generated affiliate link</p>
  475.             <mark>
  476.                 <span id="sld-ap-generated_affiliate_url"><?php echo ($i->affiliate_link) ?></span>
  477.             </mark>
  478.  
  479.             <br/><br/>
  480.  
  481.             <p class="sld-ap-description">3) Use your QR</p>
  482.             <mark>
  483.                 <span id="sld-ap-generated_affiliate_qr"><img src="https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=<?php echo ($i->affiliate_link) ?>"/></span>
  484.             </mark>
  485.  
  486.         </div>
  487.     <?php
  488.         $res = ob_get_clean();
  489.         return $res;
  490.     }
  491.  
  492.     /**
  493.      * Undocumented function
  494.      *
  495.      * @param AffiliatePortalViewInterface $i
  496.      * @return string
  497.      */
  498.     private static function render_js($i)
  499.     {
  500.         ob_start();
  501.     ?>
  502.  
  503.         <script>
  504.             window.sldShowCreativeModal = function(creative_id) {
  505.                 var modal = document.getElementById("sld-ap-modal-" + creative_id);
  506.                 modal.style.display = "block";
  507.             }
  508.  
  509.             window.sldHideCreativeModal = function(creative_id) {
  510.                 var modal = document.getElementById("sld-ap-modal-" + creative_id);
  511.                 modal.style.display = "none";
  512.             }
  513.  
  514.             /**
  515.              * Add a URL parameter (or changing it if it already exists)
  516.              * @param {search} string  this is typically document.location.search
  517.              * @param {key}    string  the key to set
  518.              * @param {val}    string  value
  519.              */
  520.             window.sldAddUrlParam = function(search, key, val) {
  521.                 try {
  522.                     var url = new URL(search);
  523.  
  524.                     url.searchParams.append(key, val);
  525.                     return url;
  526.  
  527.                 } catch (e) {
  528.                     return '<small>Invalid URL. Be sure to include the <code>https://</code> prefix.</small>';
  529.                 }
  530.             };
  531.  
  532.             window.sldGenerateURLForCurrentAffiliate = function(search) {
  533.                 return window.sldAddUrlParam(search, <?php echo json_encode((string)Settings::get(Settings::KEY_REFERRAL_VARIABLE)) ?>, <?php echo ($i->affiliate->id) ?>);
  534.             };
  535.  
  536.             window.sldMountURLGeneratorEvents = function() {
  537.                 const source = document.getElementById('sld-ap-page_url');
  538.                 const target = document.getElementById('sld-ap-generated_affiliate_url');
  539.                 const inputHandler = function(e) {
  540.                     const val = e.target.value;
  541.                     const generatedAffiliateURL = window.sldGenerateURLForCurrentAffiliate(val);
  542.                     target.innerHTML = generatedAffiliateURL;
  543.                 }
  544.                 source.addEventListener('input', inputHandler);
  545.             };
  546.  
  547.             window.addEventListener('load',
  548.                 function() {
  549.                     window.sldMountURLGeneratorEvents();
  550.                 }, false);
  551.         </script>
  552.  
  553.     <?php
  554.         $res = ob_get_clean();
  555.         return $res;
  556.     }
  557.  
  558.     /**
  559.      * Undocumented function
  560.      *
  561.      * @return string
  562.      */
  563.     private static function render_css()
  564.     {
  565.         ob_start();
  566.     ?>
  567.  
  568.         <style>
  569.             :root {
  570.                 /* Global container color */
  571.                 --sld-ap-background: #fff;
  572.                 /* Shading background : Used for hovers and tables */
  573.                 --sld-ap-shading: #fafafa;
  574.  
  575.                 /* Color scheme */
  576.                 --sld-ap-primary-color: #474747;
  577.                 --sld-ap-secondary-color: #757575;
  578.                 --sld-ap-accent-color: #4285F4;
  579.                 --sld-ap-border-color: #DADCE0;
  580.                 --sld-ap-border-radius: 10px;
  581.                 --sld-ap-font-size: 14px;
  582.                 --sld-ap-font-family: inherit;
  583.  
  584.                 /* Font sizes */
  585.                 --sld-ap-font-size-xs: 12px;
  586.                 --sld-ap-font-size-m: 14px;
  587.                 --sld-ap-font-size-l: 20px;
  588.                 --sld-ap-font-size-xl: 22px;
  589.             }
  590.  
  591.             /* Global layout/grid  */
  592.             .sld-ap {
  593.                 width: 100%;
  594.                 margin-left: auto;
  595.                 margin-right: auto;
  596.                 font-size: 1rem;
  597.                 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  598.             }
  599.  
  600.             .sld-ap-header {
  601.                 grid-area: header;
  602.             }
  603.  
  604.             .sld-ap-info {
  605.                 grid-area: subheader;
  606.             }
  607.  
  608.             .sld-ap-nav {
  609.                 grid-area: menu;
  610.             }
  611.  
  612.             .sld-ap-main {
  613.                 grid-area: main;
  614.             }
  615.  
  616.             .sld-ap-footer {
  617.                 grid-area: footer;
  618.             }
  619.  
  620.             .sld-ap-grid_container {
  621.                 display: grid;
  622.                 grid-template-areas: 'header header header header header header''subheader subheader subheader subheader subheader subheader''menu main main main main main''menu footer footer footer footer footer';
  623.                 grid-gap: 0;
  624.                 background: var(--sld-ap-background);
  625.                 border: 1px solid var(--sld-ap-border-color);
  626.                 border-radius: var(--sld-ap-border-radius);
  627.             }
  628.  
  629.  
  630.             /* Menu Styling */
  631.  
  632.             ul.sld-ap-nav_menu {
  633.                 padding-top: 20px;
  634.                 text-align: left;
  635.             }
  636.  
  637.             .sld-ap-nav ul {
  638.                 list-style: none;
  639.                 margin: 10px 0;
  640.                 padding-left: 0px;
  641.             }
  642.  
  643.             ul.sld-ap-nav_menu>li a {
  644.                 display: block;
  645.                 font-size: var(--sld-ap-font-size-m);
  646.                 color: var(--sld-ap-primary-color);
  647.                 padding: 15px 25px;
  648.                 text-decoration: none !important;
  649.                 background: transparent;
  650.                 border-radius: 0 50px 50px 0;
  651.                 border-width: 1px 1px 1px 0;
  652.                 border-style: solid;
  653.                 border-color: transparent;
  654.             }
  655.  
  656.             ul.sld-ap-nav_menu>li a:hover {
  657.                 background: var(--sld-ap-shading);
  658.             }
  659.  
  660.             ul.sld-ap-nav_menu>li a.active {
  661.                 color: var(--sld-ap-accent-color);
  662.                 border-color: var(--sld-ap-border-color);
  663.             }
  664.  
  665.             svg.sld-ap-nav_menu-icon {
  666.                 display: inline-block;
  667.                 width: 1.5em;
  668.                 height: 1.5em;
  669.                 vertical-align: middle;
  670.                 margin-right: 20px;
  671.                 color: var(--sld-ap-secondary-color);
  672.             }
  673.  
  674.             ul.sld-ap-nav_menu>li a svg.sld-ap-nav_menu-icon {
  675.                 fill: var(--sld-ap-secondary-color);
  676.             }
  677.  
  678.             ul.sld-ap-nav_menu>li a.active svg.sld-ap-nav_menu-icon {
  679.                 fill: var(--sld-ap-accent-color);
  680.             }
  681.  
  682.             @media screen and (max-width: 760px) {
  683.                 ul.sld-ap-nav_menu>li span.sld-ap-nav_menu-title {
  684.                     display: none
  685.                 }
  686.  
  687.                 svg.sld-ap-nav_menu-icon {
  688.                     margin-right: 0;
  689.                 }
  690.             }
  691.  
  692.  
  693.             /* Main Area styling */
  694.  
  695.             .sld-ap-main {
  696.                 padding: 20px;
  697.             }
  698.  
  699.             h3.sld-ap-title {
  700.                 font-size: var(--sld-ap-font-size-l);
  701.                 font-weight: 600;
  702.                 margin-bottom: 10px;
  703.             }
  704.  
  705.             p.sld-ap-description {
  706.                 color: var(--sld-ap-secondary-color);
  707.                 font-size: var(--sld-ap-font-size-m);
  708.             }
  709.  
  710.             table.sld-ap-table {
  711.                 width: 100%;
  712.                 margin-top: 20px;
  713.                 font-size: var(--sld-ap-font-size-m);
  714.             }
  715.  
  716.             table.sld-ap-table th {
  717.                 color: var(--sld-ap-secondary-color);
  718.                 text-transform: capitalize;
  719.             }
  720.  
  721.             table.sld-ap-table td {
  722.                 color: var(--sld-ap-primary-color);
  723.                 max-width: 150px;
  724.                 min-width: 50px;
  725.                 word-wrap: break-word;
  726.             }
  727.  
  728.             table.sld-ap-table td,
  729.             table.sld-ap-table th {
  730.                 border: 1px solid var(--sld-ap-border-color);
  731.                 text-align: left;
  732.                 padding: 10px;
  733.             }
  734.  
  735.             table.sld-ap-table tr:nth-child(even) {
  736.                 background: var(--sld-ap-shading);
  737.             }
  738.  
  739.             .sld-ap-creatives_wrapper {
  740.                 margin-top: 20px;
  741.                 display: flex;
  742.                 flex-wrap: wrap;
  743.                 gap: 20px;
  744.             }
  745.  
  746.             .sld-ap-creative_wrapper-card {
  747.                 flex-grow: 1;
  748.                 justify-content: space-between;
  749.                 width: 45%;
  750.             }
  751.  
  752.             @media screen and (max-width: 760px) {
  753.                 .sld-ap-creative_wrapper-card {
  754.                     width: 100%
  755.                 }
  756.             }
  757.  
  758.             .sld-ap-creative_wrapper-card_box {
  759.                 border: 1px solid var(--sld-ap-border-color);
  760.             }
  761.  
  762.             .sld-ap-creative_wrapper-card_box img {
  763.                 height: 160px;
  764.                 width: 100%;
  765.                 margin: 0;
  766.                 object-fit: cover;
  767.                 object-position: right bottom;
  768.             }
  769.  
  770.             .sld-ap-creative_wrapper-card_box-text {
  771.                 padding: 20px;
  772.                 word-wrap: break-word;
  773.             }
  774.  
  775.             .sld-ap-creative_wrapper-card_box-text span {
  776.                 font-size: var(--sld-ap-font-size-xs);
  777.                 color: var(--sld-ap-secondary-color);
  778.             }
  779.  
  780.             .sld-ap-creative_wrapper-card_box-text p {
  781.                 font-size: var(--sld-ap-font-size-m);
  782.                 color: var(--sld-ap-primary-color);
  783.                 margin-top: 4px;
  784.                 font-weight: 600
  785.             }
  786.  
  787.             a.sld-ap-creative_wrapper-card_box-copy {
  788.                 background: var(--sld-ap-accent-color);
  789.                 text-decoration: none;
  790.                 color: #fff;
  791.                 width: auto;
  792.                 text-align: center;
  793.                 display: block;
  794.                 padding: 15px 20px;
  795.                 margin-top: 20px;
  796.                 font-size: var(--sld-ap-font-size-m);
  797.             }
  798.  
  799.  
  800.             .sld-ap-edit-email {
  801.                 margin-top: 20px;
  802.             }
  803.  
  804.             .sld-ap-edit-email input {
  805.                 padding: 10px;
  806.                 border: 1px solid var(--sld-ap-border-color);
  807.             }
  808.  
  809.             .sld-ap-edit-email input[type=text] {
  810.                 width: 50%;
  811.                 display: inline-block;
  812.             }
  813.  
  814.             .sld-ap-edit-email .sld-ap-edit-email_button {
  815.                 background: var(--sld-ap-accent-color);
  816.                 border: transparent;
  817.                 color: #fff;
  818.             }
  819.  
  820.             /* Subheader Styling */
  821.  
  822.             .sld-ap-info {
  823.                 border-color: var(--sld-ap-border-color);
  824.                 border-width: 1px 0 1px 0;
  825.                 border-style: solid;
  826.                 padding: 15px 20px;
  827.                 display: flex;
  828.                 flex-flow: row wrap;
  829.                 justify-content: space-between;
  830.             }
  831.  
  832.             .sld-ap-info_col {
  833.                 display: flex;
  834.                 flex-flow: row wrap;
  835.             }
  836.  
  837.             .sld-ap-mr20 {
  838.                 margin-right: 20px;
  839.             }
  840.  
  841.             @media screen and (max-width: 800px) {
  842.                 .sld-ap-info {
  843.                     justify-content: start
  844.                 }
  845.  
  846.                 .sld-ap-info_col {
  847.                     flex-direction: column;
  848.                 }
  849.  
  850.                 .sld-ap-mr20 {
  851.                     margin-right: 30px;
  852.                     margin-bottom: 10px;
  853.                 }
  854.             }
  855.  
  856.  
  857.             span.sld-ap-info-box-top {
  858.                 font-size: var(--sld-ap-font-size-xs);
  859.                 display: block;
  860.                 margin-bottom: 5px;
  861.                 color: var(--sld-ap-secondary-color);
  862.             }
  863.  
  864.             p.sld-ap-info-box-bottom,
  865.             .sld-ap-info-box-bottom a {
  866.                 font-size: var(--sld-ap-font-size-m);
  867.                 color: var(--sld-ap-primary-color);
  868.                 font-weight: 600;
  869.                 text-decoration: none;
  870.             }
  871.  
  872.  
  873.             /* Header styling */
  874.  
  875.             .sld-ap-header {
  876.                 padding: 15px 20px;
  877.                 display: flex;
  878.                 flex-flow: row wrap;
  879.                 justify-content: space-between;
  880.                 align-items: center;
  881.             }
  882.  
  883.             .sld-ap-header h2 {
  884.                 font-size: var(--sld-ap-font-size-xl);
  885.                 font-weight: 600;
  886.             }
  887.  
  888.             .sld-ap-header .sld-ap-login {
  889.                 display: flex;
  890.                 align-items: center;
  891.             }
  892.  
  893.             .sld-ap-header .sld-ap-login img {
  894.                 width: 35px;
  895.                 height: 35px;
  896.                 display: inline-block;
  897.                 vertical-align: top;
  898.                 border-radius: 50%;
  899.             }
  900.  
  901.             .sld-ap-header .sld-ap-login-user {
  902.                 display: inline-block;
  903.                 vertical-align: middle;
  904.                 margin-left: 10px;
  905.             }
  906.  
  907.             .sld-ap-header .sld-ap-login-user span {
  908.                 font-size: var(--sld-ap-font-size-xs);
  909.                 color: var(--sld-ap-secondary-color);
  910.             }
  911.  
  912.             .sld-ap-header .sld-ap-login-user .sld-ap-login-user_name {
  913.                 margin-top: 3px;
  914.                 font-size: var(--sld-ap-font-size-m);
  915.                 color: var(--sld-ap-primary-color);
  916.                 font-weight: 600;
  917.             }
  918.  
  919.             a.sld-ap-login-user_logout {
  920.                 display: inline-block;
  921.                 margin-top: 5px;
  922.                 color: var(--sld-ap-accent-color);
  923.             }
  924.  
  925.             .sld-ap-login-user_logout svg {
  926.                 fill: var(--sld-ap-primary-color);
  927.                 margin-left: 10px;
  928.             }
  929.  
  930.  
  931.             /* Footer styling */
  932.  
  933.             .sld-ap-footer {
  934.                 padding: 12px 20px;
  935.                 border: 1px solid var(--sld-ap-border-color);
  936.                 margin: 0 20px 20px;
  937.                 height: 15px;
  938.             }
  939.  
  940.             .sld-ap-footer_notice {
  941.                 font-size: var(--sld-ap-font-size-xs);
  942.             }
  943.  
  944.             .sld-ap-affiliate-status-approved {
  945.                 color: #0F9D58 !important;
  946.             }
  947.  
  948.             .sld-ap .sld_pagination {
  949.                 margin-top: 20px;
  950.                 font-size: --sld-ap-font-size-xs;
  951.             }
  952.  
  953.             /* Modal styling */
  954.             /* The Modal (background) */
  955.             .sld-ap-modal {
  956.                 display: none;
  957.                 /* Hidden by default */
  958.                 position: fixed;
  959.                 /* Stay in place */
  960.                 z-index: 1;
  961.                 /* Sit on top */
  962.                 padding-top: 100px;
  963.                 /* Location of the box */
  964.                 left: 0;
  965.                 top: 0;
  966.                 width: 100%;
  967.                 /* Full width */
  968.                 height: 100%;
  969.                 /* Full height */
  970.                 overflow: auto;
  971.                 /* Enable scroll if needed */
  972.                 background-color: rgb(0, 0, 0);
  973.                 /* Fallback color */
  974.                 background-color: rgba(0, 0, 0, 0.4);
  975.                 /* Black w/ opacity */
  976.             }
  977.  
  978.             /* Modal Content */
  979.             .sld-ap-modal-content {
  980.                 background-color: #fefefe;
  981.                 margin: auto;
  982.                 padding: 20px;
  983.                 border: 1px solid #888;
  984.                 width: 80%;
  985.             }
  986.  
  987.             /* The Close Button */
  988.             .sld-ap-close-modal {
  989.                 color: #aaaaaa;
  990.                 float: right;
  991.                 font-size: 28px;
  992.                 font-weight: bold;
  993.             }
  994.  
  995.             .sld-ap-close-modal:hover,
  996.             .sld-ap-close-modal:focus {
  997.                 color: #000;
  998.                 text-decoration: none;
  999.                 cursor: pointer;
  1000.             }
  1001.         </style>
  1002.  
  1003. <?php
  1004.         $res = ob_get_clean();
  1005.         return $res;
  1006.     }
  1007. }
  1008.  
Add Comment
Please, Sign In to add comment