| 1 |
<?php |
| 2 |
|
| 3 |
namespace Metaboxes; |
| 4 |
|
| 5 |
abstract class DynamicPackagesData { |
| 6 |
|
| 7 |
public static function add( $item, $screens = [] ) { |
| 8 |
$screens = ! is_array( $screens ) ? [ $screens ] : $screens; |
| 9 |
add_meta_box( MBE_ESHIP_ID . '_dynamic_packages_data_form_meta_box', |
| 10 |
' ', |
| 11 |
[ self::class, 'html' ], |
| 12 |
$screens, |
| 13 |
'normal', |
| 14 |
'default', |
| 15 |
$item |
| 16 |
); |
| 17 |
} |
| 18 |
|
| 19 |
public static function html( $orderIds ) { |
| 20 |
$helper = new \Mbe_Shipping_Helper_Data(); |
| 21 |
|
| 22 |
if ( count( $orderIds ) === 1 ) { |
| 23 |
$orderPackagesData = array_values(json_decode( $helper->getOrderDynamicPackageData( $orderIds[0] ), ARRAY_A )??[]); |
| 24 |
} |
| 25 |
|
| 26 |
// Default data if none is found |
| 27 |
if ( empty( $orderPackagesData ) ) { |
| 28 |
$orderPackagesData = [ |
| 29 |
0 => [ |
| 30 |
'weight' => '1.00', |
| 31 |
'length' => '0.00', |
| 32 |
'width' => '0.00', |
| 33 |
'height' => '0.00', |
| 34 |
'parcels' => '1', |
| 35 |
] |
| 36 |
]; |
| 37 |
} |
| 38 |
|
| 39 |
?> |
| 40 |
<div class="mbe-dynamic-packages-wrapper"> |
| 41 |
<table class="form-table"> |
| 42 |
<tbody> |
| 43 |
<tr class="form-field"> |
| 44 |
<th scope="row"> |
| 45 |
<label for="address"><?php esc_html_e( 'Order list', 'mail-boxes-etc' ) ?></label> |
| 46 |
</th> |
| 47 |
<td> |
| 48 |
<div class="mbe-order-list-container"> |
| 49 |
<?php foreach ( $orderIds as $order ) : ?> |
| 50 |
<span class="mbe-order-tag"> |
| 51 |
<?php echo esc_html( $order ) ?> |
| 52 |
</span> |
| 53 |
<?php endforeach; ?> |
| 54 |
</div> |
| 55 |
</td> |
| 56 |
</tr> |
| 57 |
<tr class="mbe-packages-row-separator"> |
| 58 |
<td colspan="2"> |
| 59 |
<div id="mbe-dynamic-packages-container"> |
| 60 |
<div class="mbe-section-title"><?php esc_html_e( 'Parcels', 'mail-boxes-etc' ) ?></div> |
| 61 |
<table class="mbe-dynamic-packages-table"> |
| 62 |
<thead> |
| 63 |
<tr> |
| 64 |
<th><?php esc_html_e( 'Template name', 'mail-boxes-etc' ) ?></th> |
| 65 |
<th><?php esc_html_e( 'Weight', 'mail-boxes-etc' ) ?> (Kg)</th> |
| 66 |
<th><?php esc_html_e( 'Length', 'mail-boxes-etc' ) ?> (Cm)</th> |
| 67 |
<th><?php esc_html_e( 'Width', 'mail-boxes-etc' ) ?> (Cm)</th> |
| 68 |
<th><?php esc_html_e( 'Height', 'mail-boxes-etc' ) ?> (Cm)</th> |
| 69 |
<th style="width: 5%"><?php esc_html_e( 'Parcels', 'mail-boxes-etc' ) ?></th> |
| 70 |
<th style="width: 1%;"></th> |
| 71 |
</tr> |
| 72 |
</thead> |
| 73 |
<tbody id="mbe-packages-body"> |
| 74 |
<?php foreach ( $orderPackagesData as $packageId => $packageData ) : ?> |
| 75 |
<?php self::render_package_row( $packageId, $packageData ); ?> |
| 76 |
<?php endforeach; ?> |
| 77 |
</tbody> |
| 78 |
</table> |
| 79 |
|
| 80 |
<div class="mbe-actions-container"> |
| 81 |
<button type="button" id="mbe-add-package" class="button"> |
| 82 |
+ <?php esc_html_e( 'Add package', 'mail-boxes-etc' ) ?> |
| 83 |
</button> |
| 84 |
</div> |
| 85 |
|
| 86 |
<div class="mbe-submit-container"> |
| 87 |
<button type="submit" class="button button-primary" id="submit-save"> |
| 88 |
<?php esc_html_e( 'Update packages list', 'mail-boxes-etc' ) ?> |
| 89 |
</button> |
| 90 |
</div> |
| 91 |
</div> |
| 92 |
|
| 93 |
<template id="mbe-package-row-template"> |
| 94 |
<?php self::render_package_row( '{{INDEX}}' ); ?> |
| 95 |
</template> |
| 96 |
|
| 97 |
<script type="text/javascript"> |
| 98 |
document.addEventListener('DOMContentLoaded', function () { |
| 99 |
const container = document.getElementById('mbe-packages-body'); |
| 100 |
const addButton = document.getElementById('mbe-add-package'); |
| 101 |
const rowTemplate = document.getElementById('mbe-package-row-template').innerHTML; |
| 102 |
|
| 103 |
let rowCount = container.getElementsByClassName('mbe-package-row').length; |
| 104 |
|
| 105 |
addButton.addEventListener('click', function () { |
| 106 |
const newRowHtml = rowTemplate.replace(/{{INDEX}}/g, rowCount++); |
| 107 |
container.insertAdjacentHTML('beforeend', newRowHtml); |
| 108 |
}); |
| 109 |
|
| 110 |
container.addEventListener('click', function (e) { |
| 111 |
const removeBtn = e.target.closest('.mbe-remove-package'); |
| 112 |
if (removeBtn) { |
| 113 |
const rows = container.getElementsByClassName('mbe-package-row'); |
| 114 |
if (rows.length > 0) { |
| 115 |
removeBtn.closest('tr').remove(); |
| 116 |
rowCount-- |
| 117 |
} |
| 118 |
} |
| 119 |
}); |
| 120 |
|
| 121 |
container.addEventListener('change', function (e) { |
| 122 |
const select = e.target.closest('.mbe-package-package-template-selection'); |
| 123 |
if (!select) return; |
| 124 |
|
| 125 |
if (!select.value) return; // "Select package" option |
| 126 |
|
| 127 |
const selectedOption = JSON.parse(select.value); |
| 128 |
|
| 129 |
let selectId = "mbe_packages[" + parseInt(selectedOption[0]) + "]"; |
| 130 |
|
| 131 |
document.getElementsByName(selectId + '[length]')[0].value = selectedOption[1]; |
| 132 |
document.getElementsByName(selectId + '[width]')[0].value = selectedOption[2]; |
| 133 |
document.getElementsByName(selectId + '[height]')[0].value = selectedOption[3]; |
| 134 |
}); |
| 135 |
|
| 136 |
}); |
| 137 |
</script> |
| 138 |
<style> |
| 139 |
.mbe-dynamic-packages-wrapper { width: 100%; } |
| 140 |
.mbe-order-list-container { width: 95%; height: auto; } |
| 141 |
.mbe-order-tag { |
| 142 |
font-size: smaller; |
| 143 |
float: left; |
| 144 |
color: #0a4b78; |
| 145 |
border: solid 1px #0a4b78; |
| 146 |
padding: 4px; |
| 147 |
text-align: center; |
| 148 |
border-radius: 5px; |
| 149 |
margin: 3px; |
| 150 |
} |
| 151 |
.mbe-packages-row-separator { border-top: 1px solid #c6c6c6; } |
| 152 |
#mbe-dynamic-packages-container { |
| 153 |
background-color: #ffffff; |
| 154 |
padding: 20px; |
| 155 |
margin-top: 10px; |
| 156 |
} |
| 157 |
.mbe-section-title { font-weight: bold; margin-bottom: 10px; } |
| 158 |
.mbe-dynamic-packages-table { |
| 159 |
width: 100%; |
| 160 |
border-spacing: 10px; |
| 161 |
border-collapse: separate; |
| 162 |
} |
| 163 |
.mbe-dynamic-packages-table th { |
| 164 |
text-align: center; |
| 165 |
font-size: 12px; |
| 166 |
font-weight: bold; |
| 167 |
color: #333; |
| 168 |
} |
| 169 |
.mbe-dynamic-packages-table td { padding: 0; } |
| 170 |
.mbe-package-row input, |
| 171 |
.mbe-package-row select { |
| 172 |
width: 100%; |
| 173 |
text-align: center; |
| 174 |
padding: 10px; |
| 175 |
border: 1px solid #ddd; |
| 176 |
} |
| 177 |
.mbe-remove-package { |
| 178 |
background: black !important; |
| 179 |
color: white !important; |
| 180 |
border: none !important; |
| 181 |
padding: 10px 15px !important; |
| 182 |
cursor: pointer; |
| 183 |
line-height: 1 !important; |
| 184 |
height: auto !important; |
| 185 |
} |
| 186 |
.mbe-actions-container { text-align: center; margin-top: 20px; } |
| 187 |
#mbe-add-package { |
| 188 |
background: #555; |
| 189 |
color: white; |
| 190 |
border: none; |
| 191 |
padding: 10px 20px; |
| 192 |
text-transform: uppercase; |
| 193 |
font-weight: bold; |
| 194 |
height: auto; |
| 195 |
} |
| 196 |
.mbe-submit-container { text-align: right; margin-top: 20px; } |
| 197 |
#submit-save { |
| 198 |
background: #e66b55; |
| 199 |
border-color: #e66b55; |
| 200 |
padding: 10px 20px; |
| 201 |
height: auto; |
| 202 |
font-weight: bold; |
| 203 |
text-transform: uppercase; |
| 204 |
} |
| 205 |
</style> |
| 206 |
</td> |
| 207 |
</tr> |
| 208 |
</tbody> |
| 209 |
</table> |
| 210 |
</div> |
| 211 |
<?php |
| 212 |
} |
| 213 |
|
| 214 |
private static function render_package_row( $index, $data = [] ) { |
| 215 |
$csv_package_model = new \Mbe_Shipping_Model_Csv_Package(); |
| 216 |
$data = wp_parse_args( $data, [ |
| 217 |
'weight' => '1.00', |
| 218 |
'length' => '0.00', |
| 219 |
'width' => '0.00', |
| 220 |
'height' => '0.00', |
| 221 |
'parcels' => '1', |
| 222 |
] ); |
| 223 |
?> |
| 224 |
<tr class="mbe-package-row"> |
| 225 |
<td><select id="mbe-package-package-template-selection-<?php echo esc_attr( $index ) ?>" class="mbe-package-package-template-selection"> |
| 226 |
<option value=""><?php esc_html_e( 'Select package', 'mail-boxes-etc' ) ?></option> |
| 227 |
<?php foreach ( $csv_package_model->getStandardPackagesFullData() as $option ) : ?> |
| 228 |
<option value="<?php echo esc_attr( json_encode([$index, $option['length'], $option['width'], $option['height']]) ) ?>"><?php echo esc_html( $option['package_label'] ) ?></option> |
| 229 |
<?php endforeach; ?> |
| 230 |
</select> |
| 231 |
</td> |
| 232 |
<td><input type="number" name="mbe_packages[<?php echo esc_attr( $index ) ?>][weight]" step="0.01" required min="0.01" value="<?php echo esc_attr( $data['weight'] ) ?>"></td> |
| 233 |
<td><input type="number" name="mbe_packages[<?php echo esc_attr( $index ) ?>][length]" step="0.01" required min="0.01" value="<?php echo esc_attr( $data['length'] ) ?>"></td> |
| 234 |
<td><input type="number" name="mbe_packages[<?php echo esc_attr( $index ) ?>][width]" step="0.01" required min="0.01" value="<?php echo esc_attr( $data['width'] ) ?>"></td> |
| 235 |
<td><input type="number" name="mbe_packages[<?php echo esc_attr( $index ) ?>][height]" step="0.01" required min="0.01" value="<?php echo esc_attr( $data['height'] ) ?>"></td> |
| 236 |
<td><input type="number" name="mbe_packages[<?php echo esc_attr( $index ) ?>][parcels]" step="1" required min="1" value="<?php echo esc_attr( $data['parcels'] ) ?>"></td> |
| 237 |
<td> |
| 238 |
<button type="button" class="mbe-remove-package">X</button> |
| 239 |
</td> |
| 240 |
</tr> |
| 241 |
<?php |
| 242 |
} |
| 243 |
|
| 244 |
} |
