276 lines
18 KiB
PHP
276 lines
18 KiB
PHP
<div class="formipay-screen-menu">
|
|
<?php // phpcs:ignore PluginCheck.CodeAnalysis.ImageFunctions.NonEnqueuedImage -- This image is a plugin asset and not a WordPress attachment. ?>
|
|
<img src="<?php echo esc_html( FORMIPAY_URL . 'admin/assets/img/formipay-logo-circle-white_256.png' ); ?>" alt="Formipay"> <!-- phpcs:ignore PluginCheck.CodeAnalysis.ImageFunctions.NonEnqueuedImage -->
|
|
<div class="screen-title">
|
|
<h1>
|
|
<?php echo
|
|
// translators: %d is the current order ID.
|
|
sprintf( esc_html__( 'Order %d', 'formipay'), intval(isset($_GET['order_id']) ? $_GET['order_id'] : 0) )
|
|
?>
|
|
</h1>
|
|
</div>
|
|
</div>
|
|
<div class="wrap">
|
|
<input type="hidden" id="order_id" value="<?php echo intval(isset($_GET['order_id']) ? $_GET['order_id'] : 0); ?>">
|
|
<div class="container-fluid">
|
|
<div class="row">
|
|
<div class="col-lg-7">
|
|
<div class="order-detail-card items-card">
|
|
<div class="card-title mt-3 mb-0"><?php echo esc_html__( 'Items', 'formipay' ); ?></div>
|
|
<div class="card mt-1 border-0 rounded-4 shadow-sm">
|
|
<div class="card-body p-0">
|
|
<table class="table placeholder-glow mb-0" id="order-items-table">
|
|
<tbody>
|
|
<tr>
|
|
<th><span class="placeholder col-6"></span></th>
|
|
<td><span class="placeholder col-4"></span></td>
|
|
</tr>
|
|
<tr>
|
|
<th><span class="placeholder col-6"></span></th>
|
|
<td><span class="placeholder col-4"></span></td>
|
|
</tr>
|
|
<tr>
|
|
<th><span class="placeholder col-6"></span></th>
|
|
<td><span class="placeholder col-4"></span></td>
|
|
</tr>
|
|
</tbody>
|
|
<tfoot>
|
|
<tr class="border-bottom-0">
|
|
<th class="border-bottom-0"><?php echo esc_html__( 'Total Order Value', 'formipay' ); ?></th>
|
|
<td id="order-total" class="border-bottom-0"><span class="placeholder col-4"></span></td>
|
|
</tr>
|
|
</tfoot>
|
|
</table>
|
|
</div>
|
|
<div class="card-footer bg-white d-flex justify-content-between align-items-center px-0" style="padding: .5rem!important;">
|
|
<?php echo esc_html__( 'Order Status', 'formipay' ); ?>
|
|
<select name="order_status" id="order_status" class="form-select rounded border border-secondary-subtle" data-order-id="<?php echo intval(isset($_GET['order_id']) ? $_GET['order_id'] : 0); ?>">
|
|
<?php
|
|
$order_statuses = formipay_order_status_list();
|
|
foreach($order_statuses as $key => $status) {
|
|
echo '<option value='. esc_html($key) .'>'. esc_html($status) .'</option>';
|
|
}
|
|
?>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="order-detail-card form-data-card">
|
|
<div class="card-title mt-3 w-100 mb-0 d-flex justify-content-between align-items-center">
|
|
<?php echo esc_html__( 'Form Data', 'formipay' ); ?>
|
|
<button type="button" class="btn btn-secondary btn-sm edit-transaction-data rounded-4 px-3" data-loaded-button-text="<?php echo esc_html__( 'Edit Data', 'formipay' ); ?>" disabled>
|
|
<span class="spinner-border spinner-border-sm" aria-hidden="true"></span>
|
|
<span class="visually-hidden" role="status"></span>
|
|
</button>
|
|
<div class="update-transaction-buttons d-none">
|
|
<button type="button" class="btn btn-secondary btn-sm cancel-transaction-data rounded-4 px-3"><?php echo esc_html__( 'Cancel', 'formipay' ); ?></button>
|
|
<button type="button" class="btn btn-primary btn-sm update-transaction-data rounded-4 px-3"><?php echo esc_html__( 'Save Changes', 'formipay' ); ?></button>
|
|
</div>
|
|
</div>
|
|
<div class="card mt-1 border-0 rounded-4 shadow-sm">
|
|
<div class="card-body p-0 placeholder-glow">
|
|
<ul class="list-group list-group-flush" id="form-data-list">
|
|
<li class="list-group-item">
|
|
<b><span class="placeholder col-3"></span></b>
|
|
<p class="mb-0"><span class="placeholder col-8"></span></p>
|
|
</li>
|
|
<li class="list-group-item">
|
|
<b><span class="placeholder col-3"></span></b>
|
|
<p class="mb-0"><span class="placeholder col-8"></span></p>
|
|
</li>
|
|
<li class="list-group-item">
|
|
<b><span class="placeholder col-3"></span></b>
|
|
<p class="mb-0"><span class="placeholder col-8"></span></p>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="order-detail-card transaction-card">
|
|
<div class="card-title mt-3 mb-0">
|
|
<?php echo esc_html__( 'Transactions', 'formipay' ); ?>
|
|
</div>
|
|
<div class="card mt-1 border-0 rounded-4 shadow-sm">
|
|
<div class="card-body p-0">
|
|
<div class="rb-container">
|
|
<ul class="rb" id="transaction-list">
|
|
<li class="rb-item placeholder-glow">
|
|
<span class="placeholder col-3"></span>
|
|
<span class="placeholder col-10"></span>
|
|
</li>
|
|
<li class="rb-item placeholder-glow">
|
|
<span class="placeholder col-3"></span>
|
|
<span class="placeholder col-10"></span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="order-detail-card notification-card">
|
|
<div class="card-title mt-3 mb-0"><?php echo esc_html__( 'Notification', 'formipay' ); ?></div>
|
|
<div class="card mt-1 border-0 rounded-4 shadow-sm">
|
|
<div class="card-body p-0 placeholder-glow">
|
|
<ul class="list-group list-group-flush" id="notification-list">
|
|
<li class="list-group-item">
|
|
<b><span class="placeholder col-3"></span></b>
|
|
<p class="mb-0"><span class="placeholder col-8"></span></p>
|
|
</li>
|
|
<li class="list-group-item">
|
|
<b><span class="placeholder col-3"></span></b>
|
|
<p class="mb-0"><span class="placeholder col-8"></span></p>
|
|
</li>
|
|
<li class="list-group-item">
|
|
<b><span class="placeholder col-3"></span></b>
|
|
<p class="mb-0"><span class="placeholder col-8"></span></p>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-5">
|
|
<div class="order-detail-card submission-detail-card">
|
|
<div class="card-title mt-3 mb-0"><?php echo esc_html__( 'Submission Details', 'formipay' ); ?></div>
|
|
<div class="card mt-1 border-0 rounded-4 shadow-sm">
|
|
<div class="card-body p-0 placeholder-glow">
|
|
<ul class="list-group list-group-flush" id="submission-detail-list">
|
|
<li class="list-group-item">
|
|
<b><span class="placeholder col-3"></span></b>
|
|
<p class="mb-0"><span class="placeholder col-8"></span></p>
|
|
</li>
|
|
<li class="list-group-item">
|
|
<b><span class="placeholder col-3"></span></b>
|
|
<p class="mb-0"><span class="placeholder col-8"></span></p>
|
|
</li>
|
|
<li class="list-group-item">
|
|
<b><span class="placeholder col-3"></span></b>
|
|
<p class="mb-0"><span class="placeholder col-8"></span></p>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="order-detail-card product-access-card">
|
|
<div class="card-title mt-3 w-100 mb-0 d-flex justify-content-between align-items-center">
|
|
<?php echo esc_html__( 'Product Access', 'formipay' ); ?>
|
|
<button type="button" class="btn btn-secondary btn-sm edit-access-data rounded-4 px-3" data-loaded-button-text="<?php echo esc_html__( 'Edit Data', 'formipay' ); ?>" disabled>
|
|
<span class="spinner-border spinner-border-sm" aria-hidden="true"></span>
|
|
<span class="visually-hidden" role="status"></span>
|
|
</button>
|
|
<div class="update-access-buttons d-none">
|
|
<button type="button" class="btn btn-secondary btn-sm cancel-access-data rounded-4 px-3"><?php echo esc_html__( 'Cancel', 'formipay' ); ?></button>
|
|
<button type="button" class="btn btn-primary btn-sm update-access-data rounded-4 px-3"><?php echo esc_html__( 'Save Changes', 'formipay' ); ?></button>
|
|
</div>
|
|
</div>
|
|
<div class="card mt-1 border-0 rounded-4 shadow-sm">
|
|
<form class="card-body p-0 placeholder-glow">
|
|
<ul class="list-group list-group-flush" id="access-detail-list">
|
|
<li class="list-group-item">
|
|
<b><span class="placeholder col-3"></span></b>
|
|
<p class="mb-0"><span class="placeholder col-8"></span></p>
|
|
</li>
|
|
<li class="list-group-item">
|
|
<b><span class="placeholder col-3"></span></b>
|
|
<p class="mb-0"><span class="placeholder col-8"></span></p>
|
|
</li>
|
|
<li class="list-group-item">
|
|
<b><span class="placeholder col-3"></span></b>
|
|
<p class="mb-0"><span class="placeholder col-8"></span></p>
|
|
</li>
|
|
</ul>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal" id="image-ligthbox">
|
|
<div class="modal-dialog modal-dialog-centered">
|
|
<div class="modal-content">
|
|
<div class="modal-body p-0">
|
|
<?php // phpcs:ignore PluginCheck.CodeAnalysis.ImageFunctions.NonEnqueuedImage -- This image is a placeholder for image lightbox. ?>
|
|
<img src="" style="width: 100%;">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script id="order-item-row-template" type="text/x-handlebars-template">
|
|
{{#each items}}
|
|
<tr>
|
|
<th class="item-name fw-normal">{{item}}{{#if qty}}<br><span class="d-flex align-items-center gap-1"><span style="font-size: 10px;">✕</span>{{qty}}{{/if}}</span></th>
|
|
<td class="item-subtotal">{{subtotal_formatted}}</td>
|
|
</tr>
|
|
{{/each}}
|
|
</script>
|
|
<script id="form-data-item-template" type="text/x-handlebars-template">
|
|
{{#each datas as |data|}}
|
|
<li class="list-group-item px-0">
|
|
<b class="field-name">{{data.label}}</b>
|
|
<p class="field-value mt-1 mb-0" data-field-name="{{data.name}}">
|
|
{{data.value}}
|
|
</p>
|
|
</li>
|
|
{{/each}}
|
|
</script>
|
|
<script id="notification-data-template" type="text/x-handlebars-template">
|
|
{{#each datas as |row|}}
|
|
<li class="list-group-item d-flex justify-content-between align-items-center px-0 py-3">
|
|
<div class="notification-title">
|
|
<p class="mb-0"><b class="notification-title">{{row.title}}</b> <?php echo esc_html__('to', 'formipay'); ?> <span class="recipient-type">{{row.recipient_type}}</span> <?php echo esc_html__('at', 'formipay'); ?> <b class="notification-date">{{row.meta_data.request_date}}</b></p>
|
|
<span class="recipient badge text-bg-secondary rounded-pill me-1">
|
|
{{#ifEquals row.media "email"}}
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24">
|
|
<g fill="#fff">
|
|
<path d="M22 7.535V17a3 3 0 0 1-2.824 2.995L19 20H5a3 3 0 0 1-2.995-2.824L2 17V7.535l9.445 6.297l.116.066a1 1 0 0 0 .878 0l.116-.066z" />
|
|
<path d="M19 4c1.08 0 2.027.57 2.555 1.427L12 11.797l-9.555-6.37a3 3 0 0 1 2.354-1.42L5 4z" />
|
|
</g>
|
|
</svg>
|
|
{{/ifEquals}}
|
|
{{#ifEquals row.media "whatsapp"}}
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24">
|
|
<path fill="#fff" d="M18.497 4.409a10 10 0 0 1-10.36 16.828l-.223-.098l-4.759.849l-.11.011a1 1 0 0 1-.11 0l-.102-.013l-.108-.024l-.105-.037l-.099-.047l-.093-.058l-.014-.011l-.012-.007l-.086-.073l-.077-.08l-.067-.088l-.056-.094l-.034-.07l-.04-.108l-.028-.128l-.012-.102a1 1 0 0 1 0-.125l.012-.1l.024-.11l.045-.122l1.433-3.304l-.009-.014A10 10 0 0 1 5.056 4.83l.215-.203a10 10 0 0 1 13.226-.217M9.5 7.5A1.5 1.5 0 0 0 8 9v1a6 6 0 0 0 6 6h1a1.5 1.5 0 0 0 0-3h-1l-.144.007a1.5 1.5 0 0 0-1.128.697l-.042.074l-.022-.007a4.01 4.01 0 0 1-2.435-2.435l-.008-.023l.075-.041A1.5 1.5 0 0 0 11 10V9a1.5 1.5 0 0 0-1.5-1.5" />
|
|
</svg>
|
|
{{/ifEquals}}
|
|
<span class="recipient-text">{{row.recipient}}<span>
|
|
</span>
|
|
</div>
|
|
<span class="badge text-bg-primary rounded-pill notification-status">{{row.status}}</span>
|
|
</li>
|
|
{{/each}}
|
|
</script>
|
|
<script id="transaction-timeline-item" type="text/x-handlebars-template">
|
|
{{#each datas as |row|}}
|
|
<li class="rb-item" ng-repeat="itembx">
|
|
<div class="timestamp">
|
|
{{row.time}}
|
|
</div>
|
|
<div class="item-title">{{row.activity}}</div>
|
|
{{#ifEquals row.attachment "none"}}
|
|
{{else}}
|
|
<div class="item-thumbnail">
|
|
<?php // phpcs:ignore PluginCheck.CodeAnalysis.ImageFunctions.NonEnqueuedImage -- This image is a placeholder to show payment receipt. ?>
|
|
<img src="{{row.attachment}}" alt="payment-receipt" width="250" class="timeline-item-image border border-2 border-secondary shadow-sm rounded-3">
|
|
</div>
|
|
{{/ifEquals}}
|
|
</li>
|
|
{{/each}}
|
|
</script>
|
|
<script id="thankyou-access-template" type="text/x-handlebars-template">
|
|
<li class="list-group-item px-0 access-link">
|
|
<b><?php echo esc_html__('Access Link', 'formipay'); ?></b>
|
|
<div class="input-group mb-0 access-link-wrapper">
|
|
<input type="text" class="form-control rounded-start border border-secondary-subtle" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="copy-link-access" value="{{data.link}}" readonly>
|
|
<button class="btn btn-outline-secondary rounded-end border border-secondary-subtle formipay-copy-button" type="button" id="copy-link-access" data-copy-value="{{data.link}}" data-copied-text="<?php echo esc_html__( 'Copied', 'formipay' ); ?>" data-copy-text="<?php echo esc_html__( 'Copy', 'formipay' ); ?>" data-not-copied-text="<?php echo esc_html__( 'Failed', 'formipay' ); ?>"><i class="bi bi-copy"></i> <?php echo esc_html__( 'Copy', 'formipay' ); ?></button>
|
|
</div>
|
|
</li>
|
|
<li class="list-group-item px-0 access-method" data-access-method="{{data.pass_method}}">
|
|
<b><?php echo esc_html__('Access Method', 'formipay'); ?></b>
|
|
<p class="mb-0">{{data.pass_method_label}}</p>
|
|
</li>
|
|
<li class="list-group-item px-0 access-password d-none" data-access-password="{{data.pass_word}}">
|
|
<b><?php echo esc_html__('Access Password', 'formipay'); ?></b>
|
|
<p class="mb-0">******</p>
|
|
</li>
|
|
</script>
|