first commit

admin/assets/css/admin-customers.css

@@ -0,0 +1,3 @@
+.table-toolbar {
+    justify-content: flex-end;
+}

admin/assets/css/admin-editor.css

@@ -0,0 +1,267 @@
+input.formipay-post-shortcode-input {
+    padding: 0.5em;
+    background-color: #efefef;
+    color: #2c3338;
+    border: 1px solid #2c3338;
+    border-radius: .5em;
+}
+.pointer {
+    cursor: pointer;
+}
+#titlediv #title-prompt-text {
+    padding: 3px 10px;
+}
+.editor-styles-wrapper h1 {
+    font-size: 24px!important;
+    margin: unset!important;
+    width: 100%;
+    max-width: 100%!important;
+    border: 1px solid #ccc;
+    padding: .25rem 1rem;
+    border-radius: .5rem;
+}
+#sidebar_panel {
+    background-color: #2c3e50;
+    flex: 0 0 273px;
+}
+#fields_panel {
+    background-color: #f0f3f5;
+    flex: 1 1 calc(100% - 273px);
+}
+#preview-wrapper {
+    border: 3px dashed #ccc;
+    padding: 1.8rem 1rem;
+    max-width: 500px;
+    margin: auto;
+    border-radius: 1rem
+}
+#add_field_form {
+    position: sticky;
+    top: 140px;
+}
+#add_field_form input[type=text], 
+#add_field_form select,
+div#preview-wrapper input:not([type=checkbox],[type=radio]), 
+div#preview-wrapper select {
+    border-radius: 5px;
+    border: 1px solid #bec5cb;
+    background-color: #ffffff;
+    height: 40px;
+    padding: 6px 16px;
+    line-height: 1.4em;
+}
+.label-divider, .label-page_break {
+    font-size: larger;
+    font-weight: bold;
+}
+span.divider-line {
+    border-top: 1px dashed #ccc;
+    display: block;
+}
+.preview-field{
+    position: relative;
+}
+[data-field-type="page_break"] {
+    border-top: 2px dashed #a3a3a3;
+    padding-top: .5em;
+}
+span.grab {
+    cursor: grab;
+}
+.the_buttons > button {
+    padding: .15rem!important;
+}
+.the_buttons svg {
+    margin-bottom: 1px;
+}
+#preview-wrapper .the_buttons svg path {
+    fill: #ccc!important;
+    stroke: #ccc!important;
+}
+.the_buttons > button svg {
+    margin-bottom: 1px;
+}
+#preview-wrapper .the_buttons > button:hover svg path {
+    fill: #666!important;
+    stroke: #666!important;
+}
+span.scissors {
+    position: absolute;
+    display: inline-block;
+    top: -10px;
+}
+.field-icons.the_buttons button {
+    border: 1px solid #ccc;
+    border-radius: 50%;
+    color: #ccc!important;
+    margin-bottom: .5em;
+}
+.field-icons.the_buttons button:hover {
+    border: 1px solid #666;
+    border-radius: 50%;
+    color: #666!important;
+    margin-bottom: .5em;
+    background-color: #ffffff;
+}
+.field-icons i {
+    color: #666;
+    cursor: pointer;
+}
+.field-icons i:hover {
+    color: #555;
+}
+.form-check.form-switch {
+    display: flex;
+    align-items: center;
+}
+.form-switch .form-check-input {
+    background-repeat: no-repeat;
+}
+.wp-core-ui.wp-editor-wrap {
+    margin-top: -2.5em;
+}
+.form-check.formipay-radio-group {
+    display: flex;
+    align-items: center;
+    gap: .5em;
+}
+.form-check.formipay-radio-group > input::before {
+    background-color: white;
+}
+.stm_metaboxes_grid__inner #appearance {
+    padding-right: 0!important;
+}
+.stm_metaboxes_grid__inner #appearance .row {
+    margin-left: 0!important;
+}
+.stm_metaboxes_grid__inner #appearance .column {
+    padding: 1.8rem!important;
+}
+.wpcfto-tab.active {
+    padding-right: 0!important;
+}
+.wpcfto-tab.active > .container > .row {
+    margin: 0!important;
+}
+.wpcfto-repeater-single:not(:first-child) {
+    border-top: 1px solid #ccc!important;
+}
+.wpcfto_settings_head+.stm_metaboxes_grid .stm_metaboxes_grid__inner .row .column {
+    padding-right: 1.8rem!important;
+}
+.wpcfto_group_started .wpcfto_generic_field_editor {
+    padding: 0!important;
+}
+#formipay .inside, #formipay_canvas .inside {
+    padding: 0!important;
+    margin: 0!important;
+}
+#payments .wpcfto-field-content .wpcfto_multi_checkbox {
+    display: flex;
+    flex-direction: column;
+}
+#payments .wpcfto-field-content .wpcfto_multi_checkbox > label {
+    width: 100%;
+}
+.formipay-checkbox-wrapper {
+    display: grid;
+}
+.trumbowyg-textarea {
+    min-height: 14em !important;
+    height: unset!important;
+}
+.wpcfto-editor span.ql-formats:nth-last-child(3) {
+    display: none!important;
+}
+.stm_metaboxes_grid__inner, .wpcfto_settings_head {
+    max-width: unset!important;
+}
+.wpcfto-box-child.repeater {
+    padding-top: 0;
+    padding-right: calc(var(--bs-gutter-x) * .5);
+    padding-left: calc(var(--bs-gutter-x) * .5);
+    padding-bottom: 0;
+}
+#inactive.wpcfto_sorter_single > h6 {
+    background-color: #999999;
+}
+.dropzone {
+    border: 2px dashed #0073aa;
+    border-radius: 5px;
+    padding: 20px;
+    text-align: center;
+    transition: background-color 0.3s;
+    margin-bottom: 20px;
+}
+
+.dropzone-area {
+    cursor: pointer;
+}
+
+.dropzone-area:hover {
+    background-color: #f0f8ff;
+}
+
+#thumbnailPreview {
+    margin-top: 10px;
+}
+
+#previewImage {
+    max-width: 100%;
+    height: auto;
+    margin-top: 10px;
+}
+
+#uploadStatus {
+    font-size: 16px;
+    color: #333;
+}
+.child-field-title {
+    border-radius: 10px;
+}
+.child-field-title.option-detail-opened {
+    border-radius: 10px 10px 0 0;
+}
+.child-field-wrapper {
+    border-top: unset;
+    background-color: #666;
+    border-bottom-left-radius: 10px;
+    border-bottom-right-radius: 10px;
+}
+.table>:not(caption)>*>* {
+    background-color: unset!important;
+    vertical-align: middle;
+}
+.table.child-field-input-table tr:last-child th,
+.table.child-field-input-table tr:last-child td {
+    border-bottom: unset!important;
+}
+.child-field-image-wrapper {
+    border: 4px dashed #cccccc;
+    padding: 10px;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: .5em;
+    border-radius: 10px;
+}
+.the_buttons button {
+    font-size: 10px;
+    width: 24px;
+    height: 24px;
+    border-radius: 50%;
+}
+.child-fields-wrapper table th {
+    vertical-align: top;
+}
+.trumbowyg-modal.trumbowyg-fixed-top {
+    display: none;
+}
+.top-40 {
+    top: 40px!important;
+}
+.sortable {
+    touch-action: none;
+}

admin/assets/css/admin-global.css

@@ -0,0 +1,52 @@
+li#toplevel_page_formipay .wp-menu-image img {
+    width: 18px;
+}
+li#toplevel_page_formipay a[href^="admin.php?page=formipay-orders"]:before,
+li#toplevel_page_formipay a[href^="admin.php?page=formipay-settings"]:before{
+    border-bottom: 1px solid hsla(0, 0%, 100%, .2);
+    display: block;
+    float: left;
+    margin: 8px -15px 13px;
+    content: "";
+    width: calc(100% + 26px);
+}
+/** CHOICES */
+.category > .choices {
+    min-width: 200px;
+}
+.choices__inner {
+    max-width: 100%;
+    width: unset;
+    display: block;
+    min-height: unset!important;
+    padding: 2px!important;
+    border: 1px solid #b7b7b7!important;
+    border-radius: .5em!important;
+    background-color: #ffffff;
+}
+.choices__list {
+    display: block;
+}
+.choices__list:not(.choices__list--dropdown) {
+    padding: 10px 14px;
+}
+.choices__list.choices__list--dropdown {
+    margin-top: .5em;
+    border-radius: .5em;
+}
+.choices__list.choices__list--dropdown > .choices__list {
+    padding: 0;
+}
+.choices__item.choices__item--choice.is-selected.choices__item--selectable.is-highlighted {
+    background-color: #277aff25!important;
+}
+/** END CHOICES */
+
+.wp-submenu-wrap li:has(a[href="edit-tags.php?taxonomy=formipay-product-category&post_type=formipay-product"]) {
+    display: none;
+}
+.wp-submenu-wrap li:has(a[href="admin.php?page=formipay-products"]).current ~ li:has(a[href="edit-tags.php?taxonomy=formipay-product-category&post_type=formipay-product"]),
+.wp-submenu-wrap li:has(a[href="admin.php?page=formipay-products"]):hover ~ li:has(a[href="edit-tags.php?taxonomy=formipay-product-category&post_type=formipay-product"]),
+.wp-submenu-wrap li:has(a[href="edit-tags.php?taxonomy=formipay-product-category&post_type=formipay-product"]).current {
+    display: block;
+}

admin/assets/css/admin-order-details.css

@@ -0,0 +1,93 @@
+table#order-items-table th {
+    width: 60%;
+}
+table#order-items-table td {
+    width: 40%;
+    text-align: right
+}
+table#order-items-table #order-total {
+    color: #277aff!important;
+    font-size: larger;
+    font-weight: bold
+}
+.card {
+    max-width: unset!important;
+}
+.card-header {
+    font-size: 17px;
+    font-weight: bold;
+}
+b.field-name {
+    text-transform: capitalize;
+    font-size: smaller;
+}
+.media, .recipient-type, .notification-status {
+    text-transform: capitalize;
+}
+
+/** Timeline Trx Tracking **/
+.rb-container {
+    width: 50%;
+    display: block;
+    position: relative;
+}
+  
+.rb-container ul.rb {
+    margin: 2.5em 0 0;
+    padding: 0;
+    display: block;
+}
+  
+.rb-container ul.rb li {
+    list-style: none;
+    margin: auto;
+    min-height: 50px;
+    border-left: 1px dashed #000;
+    padding: 0 0 50px 30px;
+    position: relative;
+}
+  
+.rb-container ul.rb li:last-child {
+    border-left: 0;
+}
+  
+.rb-container ul.rb li::before {
+    position: absolute;
+    left: -10px;
+    top: 0;
+    content: " ";
+    border: 10px solid rgba(0, 0, 0, 1);
+    border-radius: 500%;
+    background: #277aff;
+    height: 20px;
+    width: 20px;
+    transition: all 500ms ease-in-out;
+}
+  
+.rb-container ul.rb li:hover::before {
+    border-width: 0;
+}
+  
+ul.rb li .timestamp {
+    color: #277aff;
+    position: relative;
+    font-size: smaller;
+}
+input, select, .form-control, .form-select {
+    height: 40px;
+}
+#order_status {
+    width: 200px;
+}
+.access-link-wrapper {
+    display: flex!important;
+}
+.access-link-wrapper > input {
+    flex: 0 0 calc(100% - 100px)!important;
+}
+.access-link-wrapper > button {
+    flex: 0 0 100px!important;
+}
+.top-40 {
+    top: 40px!important;
+}

admin/assets/css/admin-orders.css

@@ -0,0 +1,43 @@
+#formipay-orders table td {
+    vertical-align: top;
+}
+th.gridjs-th[data-column-id=id], 
+th.gridjs-th[data-column-id=date], 
+th.gridjs-th[data-column-id=total], 
+th.gridjs-th[data-column-id=paymentGateway], 
+th.gridjs-th[data-column-id=status] {
+    text-align: center;
+}
+td.gridjs-td[data-column-id=id], 
+td.gridjs-td[data-column-id=paymentGateway], 
+td.gridjs-td[data-column-id=date],
+td.gridjs-td[data-column-id=status] {
+    text-align: center;
+}
+span.grand_total {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+span.grand_total img {
+    margin-bottom: -4px;
+}
+span:has(.status-label) {
+    width: 100%;
+    display: block;
+    text-align: center;
+    padding-top: 5px;
+}
+span.status-label {
+    padding: 5px 10px;
+    border-radius: 5px;
+    text-transform: capitalize;
+    background-color: #999999;
+    color: white;
+}
+span.status-label.Completed {
+    background-color: #277aff;
+}
+.top-40 {
+    top: 40px!important;
+}

admin/assets/css/admin-pages.css

@@ -0,0 +1,217 @@
+body {
+    background-color: #f0f0f1!important;
+}
+#screen-meta-links:not(:has(button.screen-meta-active)), #screen-meta {
+    margin-top: -2em;
+}
+/** Header **/
+div#wpbody-content {
+    position: relative;
+}
+.formipay-screen-menu {
+    margin-left: -20px;
+    margin-bottom: 2em;
+    padding: 10px 20px 10px 50px;
+    background-color: white;
+    display: flex;
+    gap: 1em;
+    align-items: center;
+    position: sticky;
+    top: 32px;
+    left: 0;
+    z-index: 999;
+    box-shadow: 0 10px 20px #d2d2d2
+}
+.formipay-screen-menu h1 {
+    font-size: 24px!important;
+    color: #1d2327;
+    margin: .67em 0;
+}
+.screen-title {
+    display: flex;
+    align-items: center;
+    gap: 1em;
+}
+.formipay-screen-menu > img {
+    width: 56px;
+}
+/** END Header **/
+
+/** Metabox */
+.stm_metaboxes_grid__inner .wpcfto-tab {
+    padding: 0!important;
+}
+.stm_metaboxes_grid__inner #appearance {
+    padding-right: 0!important;
+}
+.stm_metaboxes_grid__inner #appearance .row {
+    margin-left: 0!important;
+}
+.stm_metaboxes_grid__inner #appearance .column {
+    padding: 1.8rem!important;
+}
+.wpcfto-tab.active {
+    padding-right: 0!important;
+}
+.wpcfto-tab.active > .container > .row {
+    margin: 0!important;
+}
+.wpcfto-repeater-single:not(:first-child) {
+    border-top: 1px solid #ccc!important;
+}
+.wpcfto_settings_head+.stm_metaboxes_grid .stm_metaboxes_grid__inner .row .column {
+    padding-right: 1.8rem!important;
+}
+.wpcfto_group_started .wpcfto_generic_field_editor {
+    padding: 0!important;
+}
+.trumbowyg-textarea {
+    min-height: 14em !important;
+    height: unset!important;
+}
+.wpcfto-editor span.ql-formats:nth-last-child(3) {
+    display: none!important;
+}
+.stm_metaboxes_grid__inner, .wpcfto_settings_head {
+    max-width: unset!important;
+}
+.wpcfto-box-child.repeater {
+    padding-top: 0;
+    padding-right: calc(var(--bs-gutter-x) * .5);
+    padding-left: calc(var(--bs-gutter-x) * .5);
+    padding-bottom: 0;
+}
+#inactive.wpcfto_sorter_single > h6 {
+    background-color: #999999;
+}
+.wpcfto_sorter .list-group-item.disable {
+    color: #8c99a5;
+    background-color: #efefef;
+}
+.wpcfto_sorter .list-group-item.disable:hover {
+    color: #f72657;
+}
+.wpcfto_sorter .list-group-item i {
+    float: right;
+    margin-top: 2px;
+}
+
+.choices {
+    overflow: visible!important;
+    margin-right: .5rem;
+}
+/** Table **/
+.post-action a {
+    text-decoration: none;
+}
+button#formipay-delete-selected {
+    min-height: 44px;
+    margin-bottom: 0!important;
+    border-radius: .5rem;
+    color: #58151c;
+    font-size: 16px;
+    padding: 5px 10px;
+    text-decoration: none;
+    border-radius: .5em;
+    border: 1px solid #58151c;
+    background-color: #f1aeb5;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    gap: 5px;
+}
+.table-toolbar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 20px;
+    margin-bottom: 1em;
+}
+.post-status-wrapper {
+    display: flex;
+    gap: .5rem;
+    align-items: center;
+}
+.post-status-wrapper a {
+    color: #999999;
+    cursor: pointer;
+}
+.post-status-wrapper a[data-active=true] {
+    color: #277aff;
+    font-weight: bold;
+}
+table.gridjs-table th, button.gridjs-currentPage {
+    background: #277aff!important;
+    color: #ffffff;
+}
+table.gridjs-table tr *:is(th, td):first-child {
+    padding-left: 1rem;
+    padding-right: 1rem;
+}
+.gridjs-pagination button:hover {
+    background-color: #277aff!important;
+    color: white!important;
+}
+.gridjs-head {
+    display: none;
+}
+#reset-filter {
+    color: #277aff;
+    font-weight: bold;
+    cursor: pointer;
+}
+.filter-bar {
+    display: flex;
+    gap: .5em;
+    justify-content: flex-end;
+    align-items: center;
+}
+.filter-bar select, .filter-bar input{
+    padding: .5em 1em;
+    border-radius: .5em;
+    color: #666666 !important;
+    border: 1px solid #b7b7b7 !important;
+    min-height: 44px !important;
+}
+.filter-bar select {
+    padding-right: 1.75em;
+}
+.gridjs-pages > * {
+    padding: 1em 1.5em!important;
+}
+/** END Table **/
+
+/** SweetAlert2 **/
+button.swal2-confirm.swal2-styled {
+    background-color: rgb(39, 122, 255)!important;
+}
+div:where(.swal2-container) button:where(.swal2-styled).swal2-confirm:focus {
+    box-shadow: 0 0 0 3px rgba(39, 122, 255, .5)!important;
+}
+.top-40 {
+    top: 40px!important;
+}
+/** END SweetAlert2 **/
+
+@media screen and (max-width: 767px) {
+    .formipay-screen-menu {
+        top: 0;
+        align-items: start;
+    }
+    .screen-title h1 {
+        flex: 0 0 100%;
+    }
+    .screen-title {
+        flex-wrap: wrap;
+    }
+    .filter-bar {
+        flex-direction: column;
+        align-items: start;
+    }
+    .filter-bar,
+    .filter-bar > *:not(:first-child), 
+    .filter-bar > *:not(:first-child) > * {
+        width: 100%;
+    }
+}

admin/assets/css/admin-product-editor.css

@@ -0,0 +1,140 @@
+#product-variables-table {
+    padding: 0;
+}
+#product-variables-table > .wpcfto-field-content {
+    width: 100%;
+}
+#product-variables-table > .wpcfto-field-content > table.wpcfto-table {
+    width:100%;
+    margin-bottom:1em;
+}
+#product-variables-table > .wpcfto-field-content > table.wpcfto-table th {
+    vertical-align: bottom;
+}
+th[data-cell="name"] {
+    text-align: left!important;
+}
+th[data-cell="price"], td[data-cell="price"],
+th[data-cell="sale"], td[data-cell="sale"] {
+    max-width: 150px;
+}
+th[data-cell="stock"], td[data-cell="stock"],
+th[data-cell="weight"], td[data-cell="weight"] {
+    max-width: 100px;
+}
+
+/* Toggle Switch Styles */
+.switch {
+    position: relative;
+    display: inline-block;
+    width: 36px;
+    height: 20px;
+    vertical-align: middle;
+}
+.switch input { display:none; }
+.slider {
+    position: absolute;
+    cursor: pointer;
+    background-color: #ccc;
+    border-radius: 20px;
+    top: 0; left: 0; right: 0; bottom: 0;
+    transition: .4s;
+}
+.slider:before {
+    position: absolute;
+    content: "";
+    height: 16px; width: 16px;
+    left: 2px; bottom: 2px;
+    background-color: white;
+    border-radius: 50%;
+    transition: .4s;
+}
+input:checked + .slider {
+    background-color: #2985f7;
+}
+input:checked + .slider:before {
+    transform: translateX(16px);
+}
+  
+  /* Gray out inactive rows */
+.variation-inactive {
+    background: #eee !important;
+    opacity: 0.7;
+}
+  
+.price-input-wrapper {
+    display: flex;
+    align-items: center;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    overflow: hidden;
+}
+  
+.price-input-wrapper span {
+    background: #eee;
+    padding: 0 8px;
+    border-right: 1px solid #ccc;
+    user-select: none;
+    white-space: nowrap;
+    height: 40px;
+    display: flex;
+    align-items: center;
+}
+  
+.price-input-wrapper input {
+    border: none!important;
+    outline: none;
+    padding: 6px 8px!important;
+    flex: 1;
+    text-align: right;
+}
+
+.button-link.child-row-toggle {
+    transition: all .5s ease-out;
+}
+.button-link.child-row-toggle:active,
+.button-link.child-row-toggle:focus {
+    box-shadow: unset!important;
+}
+.button-link.child-row-toggle.active {
+    transform: rotate(180deg);
+}
+
+td.manual-price-hint {
+    color: #8c99a5;
+    text-align: center;
+    cursor: pointer;
+}
+.variation-details-content {
+    padding: 1rem;
+    border: 1px dashed #bec5cb;
+    border-radius: 1rem;
+    margin-bottom: 1rem;
+}
+
+.price-input-wrapper > .price-currency {
+    min-width: 40px;
+    justify-content: center;
+}
+
+table.wpcfto-table.inner-table {
+    width: 100%;
+    border-collapse:collapse
+}
+
+table.wpcfto-table.inner-table tr > th {
+    text-transform: uppercase;
+    background-color: #bec5cb;
+    padding: 5px;
+    font-size: 12px;
+}
+table.wpcfto-table.inner-table tr td {
+    padding: 5px 0 5px 5px;
+}
+table.wpcfto-table.inner-table tbody tr:hover td {
+    background-color: #dfe7ee;
+}
+table.wpcfto-table.inner-table tr > *:is(th, td):first-child {
+    width: 50%;
+    text-align: left;
+}

admin/assets/css/admin-setting.css

@@ -0,0 +1,16 @@
+.nav-link.active:hover {
+    color: white;
+}
+.form-check.form-switch {
+    display: flex;
+    align-items: center;
+}
+.form-switch .form-check-input {
+    background-repeat: no-repeat;
+}
+.formipay-editor-tab-content .card {
+    max-width: unset;
+}
+.top-40 {
+    top: 40px!important;
+}

admin/assets/css/classic-editor.css

@@ -0,0 +1,155 @@
+.wp-header-end {
+    margin: 30px 0 0;
+}
+/* === Title Input Box === */
+#title {
+    font-size: 1.5rem!important;
+    padding: 16px!important;
+    border-radius: 8px;
+    border: unset;
+    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+    margin-bottom: 15px!important;
+    height: unset!important;
+}
+
+/* === Meta Boxes General Styling === */
+.postbox {
+    background-color: #fff;
+    border: none;
+    border-radius: 8px;
+    box-shadow: 0 1px 4px rgba(0,0,0,0.1);
+    padding: 15px;
+    margin-bottom: 20px;
+}
+
+.postbox h2.hndle {
+    font-size: 1.1rem!important;
+    padding: 10px 15px 10px 0!important;
+    border-radius: 6px 6px 0 0;
+    cursor: pointer!important;
+}
+
+/* === Publish Box (Right Side) === */
+#submitdiv {
+    border-radius: 8px;
+    box-shadow: 0 1px 4px rgba(0,0,0,0.1);
+    background-color: #f9f9f9;
+}
+
+#submitdiv h3 {
+    background-color: #f1f1f1;
+    padding: 10px 15px;
+    font-size: 1rem;
+}
+
+#submitdiv .inside {
+    padding: 15px;
+}
+
+#publishing-action {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+#publishing-action input[type="submit"] {
+    font-size: 1rem;
+    padding: 10px 25px;
+    border-radius: 6px;
+    border: none;
+    background-color: #0073aa;
+    color: #fff;
+    cursor: pointer;
+}
+#major-publishing-actions {
+    align-items: center;
+    display: flex;
+    justify-content: space-between;
+    padding: 10px 0;
+    flex-direction: column-reverse;
+    gap: 1rem;
+}
+#major-publishing-actions > *,
+#major-publishing-actions > * > * {
+    width: 100%;
+    position: relative;
+    text-align: center;
+}
+#major-publishing-actions .spinner {
+    position: absolute;
+    z-index: 9;
+    background: unset;
+    margin: unset;
+    display: unset;
+}
+a#post-preview {
+    width: 100%;
+    padding: 5px 15px;
+    border-radius: 6px;
+}
+
+#minor-publishing-actions {
+    margin-bottom: 10px;
+}
+
+/* === Categories / Tags Boxes === */
+#categorydiv,
+#tagsdiv-post_tag {
+    border-radius: 8px;
+    box-shadow: 0 1px 4px rgba(0,0,0,0.1);
+    background-color: #fff;
+}
+
+#categorydiv h3,
+#tagsdiv-post_tag h3 {
+    background-color: #f5f5f5;
+    padding: 10px 15px;
+    font-size: 1rem;
+}
+
+#categorychecklist li label,
+#tagchecklist span a {
+    font-size: 0.95rem;
+}
+
+#tag-input {
+    border-radius: 6px;
+    padding: 6px 10px;
+    font-size: 0.95rem;
+}
+.inside:has(.categorydiv) {
+    padding: 0;
+}
+
+ul.category-tabs li.tabs, input#formipay-product-category-add-submit {
+    border: 1px solid #0073aa;
+    background-color: white;
+    border-radius: 5px;
+    padding: 8px 15px;
+}
+ul.category-tabs li.tabs a{
+    color: #0073aa!important;
+    outline: unset;
+    border: unset;
+    box-shadow: unset;
+}
+ul.category-tabs li.tabs a:focus,
+ul.category-tabs li.tabs a:active {
+    outline: unset;
+    border: unset;
+    box-shadow: unset;
+}
+.categorydiv .tabs-panel {
+    border: unset!important;
+}
+
+/* === WYSIWYG Editor (TinyMCE) === */
+.mce-container {
+    border-radius: 8px !important;
+    overflow: hidden;
+}
+
+.mce-toolbar-grp {
+    background-color: #f5f5f5 !important;
+    border-bottom: 1px solid #ddd !important;
+}

admin/assets/css/form-field.css

@@ -0,0 +1,30 @@
+.formipay-label {
+    width: 100%;
+    font-weight: bold;
+    font-size: smaller;
+    margin-bottom: 3px
+}
+.formipay-input {
+    width: 100%;
+    padding-right: 1em!important;
+    padding-left: 1em!important;
+}
+.formipay-input:not([type=radio]):not([type=checkbox]){
+    min-height: 30px;
+}
+.formipay-select {
+    width: 100%;
+    height: 30px;
+    padding-right: 1em!important;
+    padding-left: 1em!important;
+}
+.formipay-inline-desc {
+    font-size: 12px;
+    color: #666666;
+}
+.repeater-child-input:first-child .delete-option {
+    display: none;
+}
+.top-40 {
+    top: 40px!important;
+}

admin/assets/css/global-setting.css

@@ -0,0 +1,31 @@
+.stm_metaboxes_grid__inner, .wpcfto_settings_head {
+    max-width: 100%!important;
+}
+.wpcfto-settings[data-vue=formipay_settings] .wpcfto-field-aside {
+    width: 25%;
+}
+.wpcfto-settings[data-vue=formipay_settings] .wpcfto-field-content {
+    width: 75%;
+}
+.wpcfto-repeater-single:not(:first-child) {
+    border-top: 1px solid #ccc!important;
+}
+.paypal-instruction-point {
+    list-style: auto;
+}
+.global-paypal-instruction ul:not(.paypal-instruction-point) {
+    list-style: disc;
+}
+.global-paypal-instruction > h5 {
+    font-size: 16px!important;
+    font-weight: bold;
+}
+.global-paypal-instruction b {
+    font-weight: bold;
+}
+.global-paypal-instruction ul {
+    padding-left: 2rem;
+}
+.top-40 {
+    top: 40px!important;
+}

admin/assets/css/page-access-items.css

@@ -0,0 +1,61 @@
+#formipay-access-items table td {
+    vertical-align: top;
+}
+a#add-new-item {
+    color: #277aff;
+    font-size: 16px;
+    padding: 5px 10px;
+    text-decoration: none;
+    border-radius: 5px;
+    border: 1px solid #277aff;
+}
+a#add-new-item:hover {
+    color: #ffffff;
+    background-color: #277aff;
+}
+th.gridjs-th[data-column-id=id],
+th.gridjs-th[data-column-id=type],
+th.gridjs-th[data-column-id=status] {
+    text-align: center;
+}
+td.gridjs-td[data-column-id=id],
+td.gridjs-td[data-column-id=type],
+td.gridjs-td[data-column-id=status] {
+    text-align: center;
+}
+td.gridjs-td[data-column-id=productRelation] > span {
+    display: flex;
+    gap: .5em;
+    flex-wrap: wrap;
+}
+div#formipay-access-items td svg {
+    margin-right: .25em;
+    margin-bottom: -4px;
+}
+.product_related {
+    background-color: #dedede;
+    padding: 5px 7px;
+    border-radius: 5px;
+}
+span:has(.status-label) {
+    width: 100%;
+    display: block;
+    text-align: center;
+    padding-top: 5px;
+}
+span.status-label {
+    padding: 5px 10px;
+    border-radius: 5px;
+    text-transform: capitalize;
+}
+span.status-label.publish {
+    background-color: #277aff;
+    color: white;
+}
+span.status-label.draft {
+    background-color: #999999;
+    color: white;
+}
+.top-40 {
+    top: 40px!important;
+}

admin/assets/css/page-coupons.css

@@ -0,0 +1,75 @@
+#formipay-coupons table td {
+    vertical-align: top;
+}
+a#add-new-coupon {
+    color: #277aff;
+    font-size: 16px;
+    padding: 5px 10px;
+    text-decoration: none;
+    border-radius: 5px;
+    border: 1px solid #277aff;
+}
+a#add-new-coupon:hover {
+    color: #ffffff;
+    background-color: #277aff;
+}
+.formipay-form-shortcode {
+    padding: .5em;
+    border-radius: .5em;
+    color: #666666!important;
+    border: 1px solid #b7b7b7!important;
+}
+
+td.gridjs-td[data-column-id=productRelation] > span {
+    display: flex;
+    gap: .5em;
+    flex-wrap: wrap;
+}
+.product_related {
+    background-color: #dedede;
+    padding: 5px 7px;
+    border-radius: 5px;
+}
+span.product_related img {
+    margin-bottom: -3px;
+}
+th.gridjs-th[data-column-id=id], 
+th.gridjs-th[data-column-id=usages], 
+th.gridjs-th[data-column-id=type],
+th.gridjs-th[data-column-id=dateLimit], 
+th.gridjs-th[data-column-id=status] {
+    text-align: center;
+}
+td.gridjs-td[data-column-id=id], 
+td.gridjs-td[data-column-id=usages], 
+td.gridjs-td[data-column-id=type],
+td.gridjs-td[data-column-id=dateLimit] {
+    text-align: center;
+}
+
+th.gridjs-th[data-column-id=amount],
+td.gridjs-td[data-column-id=amount] {
+    text-align: right;
+}
+
+span:has(.status-label) {
+    width: 100%;
+    display: block;
+    text-align: center;
+    padding-top: 5px;
+}
+span.status-label {
+    padding: 5px 10px;
+    border-radius: 5px;
+}
+span.status-label.active {
+    background-color: #277aff;
+    color: white;
+}
+span.status-label.inactive {
+    background-color: #999999;
+    color: white;
+}
+.top-40 {
+    top: 40px!important;
+}

admin/assets/css/page-forms.css

@@ -0,0 +1,77 @@
+#formipay-forms table td {
+    vertical-align: top;
+}
+.formipay-screen-menu a {
+    color: #277aff;
+    font-size: 16px;
+    padding: 5px 10px;
+    text-decoration: none;
+    border-radius: 5px;
+    border: 1px solid #277aff;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    gap: 5px;
+}
+.formipay-screen-menu a:hover {
+    color: #ffffff;
+    background-color: #277aff;
+}
+.formipay-form-shortcode {
+    padding: .5em;
+    border-radius: .5em;
+    color: #666666!important;
+    border: 1px solid #b7b7b7!important;
+}
+
+th.gridjs-th[data-column-id=id], th.gridjs-th[data-column-id=date], th.gridjs-th[data-column-id=status],
+td.gridjs-td[data-column-id=id], td.gridjs-td[data-column-id=date], td.gridjs-td[data-column-id=status] {
+    text-align: center;
+}
+.gridjs-pages > * {
+    padding: 1em 1.5em!important;
+}
+span:has(.formipay-form-shortcode){
+    display: flex;
+    gap: 5px;
+    max-width: 100%;
+    flex-wrap: nowrap
+}
+.formipay-form-shortcode {
+    flex: 0 1 200px;
+    width: unset!important;
+    max-width: unset!important;
+    min-width: unset!important;
+}
+button.copy-shortcode {
+    border: 1px solid #b7b7b7;
+    height: 32px;
+    padding: 5px;
+    border-radius: 5px;
+    cursor: pointer;
+}
+button.copy-shortcode svg {
+    margin-bottom: -4px;
+}
+span:has(.status-label) {
+    width: 100%;
+    display: block;
+    text-align: center;
+    padding-top: 5px;
+}
+span.status-label {
+    padding: 5px 10px;
+    border-radius: 5px;
+    text-transform: capitalize;
+}
+span.status-label.publish {
+    background-color: #277aff;
+    color: white;
+}
+span.status-label.draft {
+    background-color: #999999;
+    color: white;
+}
+.top-40 {
+    top: 40px!important;
+}

admin/assets/css/page-product-taxonomy.css

@@ -0,0 +1,91 @@
+.tablenav.top:has(.no-pages) {
+    display: none;
+}
+#col-container {
+    margin-top: 3em;
+}
+div#col-left {
+    background-color: white;
+    border-radius: 8px;
+}
+div#col-left .form-wrap {
+    padding: 1em
+}
+div#col-left input, div#col-left select, div#col-left textarea {
+    max-width: none;
+    width: 100%!important;
+}
+#col-right .col-wrap {
+    padding-left: 1em
+}
+input, textarea{
+    padding: .5em 1em!important;
+    border-radius: .5em!important;
+    color: #666666 !important;
+    border: 1px solid #b7b7b7 !important;
+}
+select {
+    padding: .5em 1.5em .5em 1em!important;
+    border-radius: .5em!important;
+    color: #666666 !important;
+    border: 1px solid #b7b7b7 !important;
+}
+thead > tr > * {
+    padding: 1em !important;
+    background: #277aff!important;
+    color: #ffffff;
+    border: 1px solid #e5e7eb;
+    box-sizing: content-box;
+}
+tfoot > tr > * {
+    padding: 1em!important;
+    border: 1px solid #e5e7eb;
+    box-sizing: content-box;
+}
+td, tbody > tr > *:first-child {
+    padding: .5em 1em!important;
+    border: 1px solid #e5e7eb;
+    box-sizing: content-box;
+}
+th a {
+    padding: 0!important;
+}
+thead a {
+    color: white!important;
+}
+td a{
+    padding: 0!important;
+}
+table {
+    margin-top: 1.25em!important;
+    border-radius: 8px!important;
+    border-collapse: collapse;
+}
+.tablenav.top {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+.tablenav.top > .tablenav-pages {
+    display: none;
+}
+table > thead {
+    border-radius: 8px 8px 0 0!important;
+}
+table > thead > tr > *:first-child {
+    border-top-left-radius: 8px!important;
+}
+table > thead > tr > *:last-child {
+    border-top-right-radius: 8px!important;
+}
+thead th.sorted span.sorting-indicator.asc::before {
+    color: white!important;
+}
+input#submit {
+    background: #277aff!important;
+    color: #ffffff!important;
+    border: unset!important;
+}
+.top-40 {
+    top: 40px!important;
+}

admin/assets/css/page-products.css

@@ -0,0 +1,96 @@
+#formipay-forms table td {
+    vertical-align: top;
+}
+.formipay-screen-menu a {
+    color: #277aff;
+    font-size: 16px;
+    padding: 5px 10px;
+    text-decoration: none;
+    border-radius: 5px;
+    border: 1px solid #277aff;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    gap: 5px;
+}
+.formipay-screen-menu a:hover {
+    color: #ffffff;
+    background-color: #277aff;
+}
+
+/** Table **/
+td.gridjs-td[data-column-id=price] .price {
+    text-wrap: nowrap;
+    display: flex;
+    align-items: center;
+    gap: .5em;
+    justify-content: space-between;
+}
+th.gridjs-th[data-column-id=id], 
+th.gridjs-th[data-column-id=type], 
+th.gridjs-th[data-column-id=price], 
+th.gridjs-th[data-column-id=stock], 
+th.gridjs-th[data-column-id=status] {
+    text-align: center;
+}
+td.gridjs-td[data-column-id=id], 
+td.gridjs-td[data-column-id=type], 
+td.gridjs-td[data-column-id=price], 
+td.gridjs-td[data-column-id=stock], 
+td.gridjs-td[data-column-id=status] {
+    text-align: center;
+}
+.gridjs-pages > * {
+    padding: 1em 1.5em!important;
+}
+span:has(.status-label) {
+    width: 100%;
+    display: block;
+    text-align: center;
+    padding-top: 5px;
+}
+span.status-label {
+    padding: 5px 10px;
+    border-radius: 5px;
+    text-transform: capitalize;
+}
+span.status-label.publish {
+    background-color: #277aff;
+    color: white;
+}
+span.status-label.draft {
+    background-color: #999999;
+    color: white;
+}
+.top-40 {
+    top: 40px!important;
+}
+
+/** SWAL new Product **/
+div#swal2-html-container table th {
+    width: 45%;
+}
+div#swal2-html-container table td {
+    width: 55%;
+}
+#swal2-html-container input {
+    border: 1px solid #b7b7b7 !important;
+    border-radius: .5em !important;
+}
+#swal2-html-container input:not(type="checkbox"):not(type="radio"){
+    height: 34px!important;
+    padding: 10px 14px!important;
+    width: 100%!important;
+    max-width: unset!important;
+    margin: unset!important;
+}
+#swal2-html-container *:is(th, td) > * {
+    margin: unset!important;
+    text-align: left;
+}
+#swal2-html-container *:is(th, td){
+    height: 40px;
+}
+#swal2-html-container tr:not(:last-child) *:is(th, td) {
+    border-bottom: 1px solid #b7b7b7;
+}

admin/assets/js/admin-all-post-type.js

@@ -0,0 +1,14 @@
+jQuery(function($){
+
+    $('#wpbody-content').prepend(`
+        <div class="formipay-screen-menu">
+            <img src="`+formipay_admin.site_url+`/wp-content/plugins/formipay/admin/assets/img/formipay-logo-circle-white_256.png" alt="Formipay">
+            <div class="screen-title">
+                <h1>`+formipay_admin.page_title+`</h1>
+            </div>
+        </div> 
+    `);
+    $('form.search-form.wp-clearfix').appendTo('.tablenav.top');
+    $('.wp-heading-inline, .page-title-action').hide();
+
+});

admin/assets/js/admin-customers.js

@@ -0,0 +1,78 @@
+jQuery(function($){
+
+    let formipay_table_grid = new gridjs.Grid({
+        server: {
+            url: formipay_customers_page.ajax_url+'?action=formipay-tabledata-customers&limit='+document.getElementById('limit').value+'&keyword='+document.getElementById('keyword').value,
+            then: data => {
+                
+                // if(data.posts_report){
+                //     processPostsReport(data.posts_report);
+                // }
+
+                return data.results.map(
+                    form => [form.ID, form.name, form.email, form.phone, form.total_order]
+                );
+            },
+            total: data => data.total
+        },
+        columns: [
+            {
+                name: formipay_customers_page.columns.id,
+                width: '75px'
+            },
+            {
+                name: formipay_customers_page.columns.name,
+                formatter: (_, row) => gridjs.html(`
+                    <b>${_}</b>
+                `)
+            },
+            {
+                name: formipay_customers_page.columns.email,
+            },
+            {
+                name: formipay_customers_page.columns.phone,
+            },
+            {
+                name: formipay_customers_page.columns.total_order,
+                formatter: (total_order, row) => gridjs.html(`<span class="status-label ${total_order}">${total_order}</span>`)
+            }
+        ],
+        pagination: {
+            limit: document.getElementById('limit').value,
+            server: {
+                url: (prev, page, limit) => `${prev}&limit=${limit}&offset=${page * limit}`
+            },
+            summary: false
+        },
+        className: {
+            table: 'formipay-grid-table'
+        }
+    }).render(document.getElementById('formipay-customers'));
+
+    $('#limit, #keyword').on('change', function(){
+        formipay_table_grid.updateConfig({
+            server: {
+                url: formipay_customers_page.ajax_url+'?action=formipay-tabledata-customers&limit='+document.getElementById('limit').value+'&keyword='+document.getElementById('keyword').value,
+                then: data => data.results.map(
+                    form => [form.ID, form.name, form.email, form.phone, form.total_order]
+                ),
+                total: data => data.total
+            },
+            pagination: {
+                limit: document.getElementById('limit').value,
+                server: {
+                    url: (prev, page, limit) => `${prev}&limit=${limit}&offset=${page * limit}`
+                },
+                summary: false
+            },
+        }).forceRender();
+    });
+
+    $(document).on('mouseover', 'td[data-column-id=form]', function(){
+        $(this).find('.post-action').css('visibility', 'visible');
+    });
+    $(document).on('mouseleave', 'td[data-column-id=form]', function(){
+        $(this).find('.post-action').css('visibility', 'hidden');
+    });
+
+});

admin/assets/js/admin-editor.js

@@ -0,0 +1,946 @@
+jQuery(function($){
+
+    let wpcftoLoaded = false;
+
+    var checkWpcftoLoaded = setInterval(() => {
+        const container = $('.wpcfto-tab');
+        if(container.length > 0){
+            wpcftoLoaded = true;
+            $(document).trigger('wpcftoLoaded');
+            clearInterval(checkWpcftoLoaded);
+        }
+    }, 250);
+
+    $(document).on('wpcftoLoaded', function(){
+        update_option_to_data_mapping('initial');
+    });
+
+    function all_active_payments() {
+
+        var items = $('.payment_gateways #active .list-group-item');
+        var active_payments = [];
+
+        if(items.length > 0){
+            $.each(items, function(i, item){
+                var gateway = $(item).attr('id');
+                if(gateway.indexOf(':::') !== -1){
+                    gateway = gateway.split(':::')[0];
+                    gateway = gateway.replace('_', '-');
+                }
+                // $('[data-submenu=payments_'+gateway+']').show();
+                active_payments.push(gateway);
+            });
+        }
+
+        return active_payments;
+
+    }
+
+    function hide_inactive_payment_submenu() {
+        
+        var div = $('[data-section=payments]').siblings('.wpcfto-submenus').find('[data-submenu]:not([data-submenu=payments_general])');
+        var active_payments = all_active_payments();
+
+        if(div.length > 0) {
+            $.each(div, function(x, y){
+                var gateway = $(y).attr('data-submenu').replace('payments_', '');
+                if(jQuery.inArray(gateway, active_payments) !== -1){
+                    $(y).slideDown();
+                }else{
+                    $(y).slideUp();
+                }
+            });
+        }
+    }
+
+    setTimeout(() => {
+        hide_inactive_payment_submenu();
+    }, 1000);
+    
+
+    $(document).on('mouseleave', '.payment_gateways .list-group', function(){
+
+        hide_inactive_payment_submenu();
+
+    });
+
+    $(document).on('click', '.formipay-editor-nav .nav-link', function(){
+        $('.formipay-editor-nav').find('.nav-link').removeClass('active');
+        $(this).addClass('active');
+        $('.formipay-editor-tab-content.nav-content-section').addClass('d-none');
+        var tab_content = $(this).data('tab-content');
+        $('.formipay-editor-tab-content'+tab_content).removeClass('d-none');
+    });
+
+    $('.formipay-editor-nav .nav-item:first-child > .nav-link').trigger('click');
+    
+    $(document).on('click', '#is_required', function(){
+        if($(this).is(':checked')) {
+            $(this).val('yes');
+        }else{
+            $(this).val('no');
+        }
+    });
+
+    $(document).on('blur change', '#add_field_form .field select.form-select', function(){
+        var array = ['divider', 'page_break'];
+        if( $.inArray( $(this).val(), array ) !== -1 ) {
+            $('#add_field_form .field:not(.main-field)').slideUp();
+        }else{
+            $('#add_field_form .field:not(.main-field):not(.has-conditional)').slideDown();
+        }
+    });
+
+    function formipay_sortable(){
+        $('#preview-wrapper').sortable({
+            opacity: 0.75,
+            items: '> .preview-field',
+            handle: 'span.grab',
+            change: function(event, ui) {
+                ui.placeholder.css({
+                    visibility: 'visible', 
+                    border : '2px dashed #8c8f94',
+                    borderRadius: '10px'
+                });
+            },
+            stop: function(event, ui){
+                update_option_to_data_mapping('update');
+            }
+        });
+        $('.repeater-child-wrapper').sortable({
+            opacity: 0.75,
+            items: '> .repeater-child-input',
+            handle: 'span.grab',
+            change: function(event, ui) {
+                ui.placeholder.css({
+                    visibility: 'visible', 
+                    border : '2px dashed #cccccc',
+                    borderRadius: '5px'
+                });
+            }
+        });
+    }
+
+    formipay_sortable();
+
+    $(document).on('change blur', '#add_field_form [name=label]', function(){
+        $('#add_field_form [name=field_id]').val($(this).val().toLowerCase().replace(' ', '_'));
+    });
+
+    $(document).on('click', '.add-option', function(e){
+        e.preventDefault();
+        var content = $(this).closest('.repeater-child-input').html();
+        $(this).closest('.repeater-child-wrapper').append(`
+            <div class="repeater-child-input d-flex justify-content-start align-items-start gap-2 my-2">`+content+`
+            </div>`);
+        $('.repeater-child-input:last-child').find('input').val('');
+        $('.repeater-child-input:last-child').find('.add-thumbnail').removeClass('text-info').addClass('text-white');
+    });
+
+    $(document).on('click', '.delete-option', function(e){
+        e.preventDefault();
+        $(this).closest('.repeater-child-input').remove();
+    });
+
+    $(document).on('click', 'input.option-field-toggle', function(){
+        var target = $(this).attr('data-child-field');
+        if($(this).is(':checked')){
+            $('.child-field-'+target).show();
+        }else{
+            $('.child-field-'+target).hide();
+        }
+    });
+
+    $(document).on('change', '#add_field_form .formipay-builder-field:not(.formipay-builder-option-field, [type=checkbox], [type=checkbox])', function(){
+        var value = $(this).val();
+        var name = $(this).attr('name');
+        var the_dependent = $('#add_field_form [data-if-'+name+']');
+        if('' !== value && the_dependent.length > 0){
+            // var all_dependents = $('.has-conditional');
+            $.each(the_dependent, function(x, y){
+                var decoded_value = JSON.parse($(y).attr('data-if-'+name));
+                if($.inArray(value, decoded_value) !== -1){
+                    $(y).slideDown();
+                }else{
+                    $(y).slideUp();
+                }
+            });
+        }
+    });
+
+    $(document).on('click', '.add-field', function(e){
+        e.preventDefault();
+
+        var option_image_toggle = 'no';
+        if($('#repeater-child-0_thumbnail').is(':checked')){
+            option_image_toggle = 'yes';
+        }
+        var option_value_toggle = 'no';
+        if($('#repeater-child-2_value').is(':checked')){
+            option_value_toggle = 'yes';
+        }
+        var option_amount_toggle = 'no';
+        if($('#repeater-child-3_amount').is(':checked')){
+            option_amount_toggle = 'yes';
+        }
+        
+        var setup = {
+            'label'         : $('#add_field_form [name=label]').val(),
+            'field_id'      : $('#add_field_form [name=field_id]').val(),
+            'field_type'    : $('#add_field_form [name=field_type]').val(),
+            'options_type'  : $('#add_field_form [name=options_type]').val(),
+            'placeholder'   : $('#add_field_form [name=placeholder]').val(),
+            'default_value' : $('#add_field_form [name=default_value]').val(),
+            'description'   : $('#add_field_form [name=description]').val(),
+            'is_required'   : $('#add_field_form [name=is_required]').val(),
+            'show_toggle'   : {
+                'image' : option_image_toggle,
+                'value' : option_value_toggle,
+                'amount': option_amount_toggle 
+            },
+            'layout'        : $('#option_grid_columns').val()
+        };
+
+        var options = [];
+        var calculable_field = ['select', 'radio', 'checkbox'];
+        if($.inArray(setup.field_type, calculable_field) !== -1){
+            var single_option = $('.repeater-child-input');
+            if(single_option.length > 0){
+                $.each(single_option, function(a, b){
+                    var check_qty;
+                    if($(b).find('.repeater-child-input-qty').is(':checked')){
+                        check_qty = 'yes';
+                    }else{
+                        check_qty = 'no';
+                    }
+                    var option = {
+                        'image_id': $(b).find('.field-image-id').val(),
+                        'image_url': $(b).find('.field-image-url').val(),
+                        'label': $(b).find('.repeater-child-input-label').find('input').val(),
+                        'value': $(b).find('.repeater-child-input-value').find('input').val(),
+                        'amount': $(b).find('.repeater-child-input-amount').find('input').val(),
+                        'weight': $(b).find('.repeater-child-input-weight').find('input').val(),
+                        'qty': check_qty
+                    }
+                    options.push(option);
+                });
+            }
+        }
+
+        setup.field_options = options;
+
+        // console.log(setup);
+
+        var setup_string = JSON.stringify(setup);
+        var not_input = ['select', 'checkbox', 'radio'];
+        var is_required = '';
+        var asterisk = '';
+        if(setup.is_required == 'yes'){
+            is_required = '';
+            asterisk = ' <span style="color:red;">(*)</span>';
+        }
+        var hidden = '';
+        if(setup.field_type == 'hidden'){
+            hidden = ' style="opacity: .75;"'
+        }
+        if(!setup.calc_value){
+            setup.calc_value = 0;
+        }
+
+        var preview_content = '';
+        if($.inArray(setup.field_type, not_input) == -1){
+            if($.inArray(setup.field_type, ['divider', 'page_break']) !== -1){
+                preview_content = `
+                <div class="formipay-field w-100"`+hidden+`>
+                    <div class="d-flex justify-content-between field-controls">
+                        <label for="`+setup.field_id+`" class="label-`+setup.field_type+`">`+setup.label+`</label>
+                        <div class="field-icons d-flex gap-2 align-items-center the_buttons">
+                            <button class="btn btn-sm edit-preview-field">
+                                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24">
+                                    <path fill="#000" d="M5 19h1.425L16.2 9.225L14.775 7.8L5 17.575zm-2 2v-4.25L16.2 3.575q.3-.275.663-.425t.762-.15t.775.15t.65.45L20.425 5q.3.275.438.65T21 6.4q0 .4-.137.763t-.438.662L7.25 21zM19 6.4L17.6 5zm-3.525 2.125l-.7-.725L16.2 9.225z" />
+                                </svg>
+                            </button>
+                            <button class="btn btn-sm delete-preview-field">
+                                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24">
+                                    <path fill="#000" d="M7 21q-.825 0-1.412-.587T5 19V6H4V4h5V3h6v1h5v2h-1v13q0 .825-.587 1.413T17 21zm2-4h2V8H9zm4 0h2V8h-2z" />
+                                </svg>
+                            </button>
+                        </div>
+                    </div>
+                    <input type="hidden" name="`+setup.field_id+`_config" class="formipay-field-setup" value='`+setup_string+`'>
+                    <span class="divider-line"></span>
+                    <p class="formipay-inline-desc">`+setup.description+`</p>
+                </div>`;
+            }else if(setup.field_type == 'country_list') {
+                var country_json = formipay_admin.preset.country_list;
+                // Check if country_json is a string (indicating it might need to be parsed)
+                if (typeof country_json === 'string') {
+                    try {
+                        country_json = JSON.parse(country_json); // Parse the JSON string into an object
+                    } catch (e) {
+                        console.error('Error parsing JSON:', e); // Log any parsing errors
+                        country_json = []; // Fallback to an empty array
+                    }
+                }
+
+                // Validate the data type
+                if (!Array.isArray(country_json)) {
+                    console.error('Expected an array but got:', country_json);
+                    country_json = []; // Fallback to an empty array if not an array
+                }
+
+                var options_html = `<option>-- ${setup.placeholder}</option>`;
+
+                // Loop through each country object
+                $.each(country_json, function(index, country) {
+                    // Assuming each country object has 'id' for the value and 'name' for the display text
+                    options_html += `<option value="${country.name}">${country.name}</option>`;
+                });
+
+                preview_content = `
+                <div class="formipay-field w-100"`+hidden+`>
+                    <div class="d-flex justify-content-between field-controls">
+                        <label for="`+setup.field_id+`">`+setup.label+asterisk+`</label>
+                        <div class="field-icons d-flex gap-2 align-items-center the_buttons">
+                            <button class="btn btn-sm edit-preview-field">
+                                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24">
+                                    <path fill="#000" d="M5 19h1.425L16.2 9.225L14.775 7.8L5 17.575zm-2 2v-4.25L16.2 3.575q.3-.275.663-.425t.762-.15t.775.15t.65.45L20.425 5q.3.275.438.65T21 6.4q0 .4-.137.763t-.438.662L7.25 21zM19 6.4L17.6 5zm-3.525 2.125l-.7-.725L16.2 9.225z" />
+                                </svg>
+                            </button>
+                            <button class="btn btn-sm delete-preview-field">
+                                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24">
+                                    <path fill="#000" d="M7 21q-.825 0-1.412-.587T5 19V6H4V4h5V3h6v1h5v2h-1v13q0 .825-.587 1.413T17 21zm2-4h2V8H9zm4 0h2V8h-2z" />
+                                </svg>
+                            </button>
+                        </div>
+                    </div>
+                    <input type="hidden" name="`+setup.field_id+`_config" class="formipay-field-setup" value='`+setup_string+`'>
+                    <select id="`+setup.field_id+`" class="formipay-input formipay-form-field" `+is_required+`>
+                        `+options_html+`
+                    </select>
+                    <p class="formipay-inline-desc">`+setup.description+`</p>
+                </div>`;
+            }else if(setup.field_type !== 'textarea'){
+                preview_content = `
+                <div class="formipay-field w-100"`+hidden+`>
+                    <div class="d-flex justify-content-between field-controls">
+                        <label for="`+setup.field_id+`">`+setup.label+asterisk+`</label>
+                        <div class="field-icons d-flex gap-2 align-items-center the_buttons">
+                            <button class="btn btn-sm edit-preview-field">
+                                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24">
+                                    <path fill="#000" d="M5 19h1.425L16.2 9.225L14.775 7.8L5 17.575zm-2 2v-4.25L16.2 3.575q.3-.275.663-.425t.762-.15t.775.15t.65.45L20.425 5q.3.275.438.65T21 6.4q0 .4-.137.763t-.438.662L7.25 21zM19 6.4L17.6 5zm-3.525 2.125l-.7-.725L16.2 9.225z" />
+                                </svg>
+                            </button>
+                            <button class="btn btn-sm delete-preview-field">
+                                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24">
+                                    <path fill="#000" d="M7 21q-.825 0-1.412-.587T5 19V6H4V4h5V3h6v1h5v2h-1v13q0 .825-.587 1.413T17 21zm2-4h2V8H9zm4 0h2V8h-2z" />
+                                </svg>
+                            </button>
+                        </div>
+                    </div>
+                    <input type="hidden" name="`+setup.field_id+`_config" class="formipay-field-setup" value='`+setup_string+`'>
+                    <input type="`+setup.field_type+`" id="`+setup.field_id+`" class="formipay-input formipay-form-field" placeholder="`+setup.placeholder+`" data-calc-value="`+setup.calc_value+`" `+is_required+` />
+                    <p class="formipay-inline-desc">`+setup.description+`</p>
+                </div>`;
+            }else{
+                preview_content = `
+                <div class="formipay-field w-100"`+hidden+`>
+                    <div class="d-flex justify-content-between field-controls">
+                        <label for="`+setup.field_id+`">`+setup.label+asterisk+`</label>
+                        <div class="field-icons d-flex gap-2 align-items-center the_buttons">
+                            <button class="btn btn-sm edit-preview-field">
+                                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24">
+                                    <path fill="#000" d="M5 19h1.425L16.2 9.225L14.775 7.8L5 17.575zm-2 2v-4.25L16.2 3.575q.3-.275.663-.425t.762-.15t.775.15t.65.45L20.425 5q.3.275.438.65T21 6.4q0 .4-.137.763t-.438.662L7.25 21zM19 6.4L17.6 5zm-3.525 2.125l-.7-.725L16.2 9.225z" />
+                                </svg>
+                            </button>
+                            <button class="btn btn-sm delete-preview-field">
+                                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24">
+                                    <path fill="#000" d="M7 21q-.825 0-1.412-.587T5 19V6H4V4h5V3h6v1h5v2h-1v13q0 .825-.587 1.413T17 21zm2-4h2V8H9zm4 0h2V8h-2z" />
+                                </svg>
+                            </button>
+                        </div>
+                    </div>
+                    <input type="hidden" name="`+setup.field_id+`_config" class="formipay-field-setup" value='`+setup_string+`'>
+                    <textarea rows="4" id="`+setup.field_id+`" class="formipay-input formipay-form-field" placeholder="`+setup.placeholder+`" data-calc-value="`+setup.calc_value+`" `+is_required+`></textarea>
+                    <p class="formipay-inline-desc">`+setup.description+`</p>
+                </div>`;
+            }
+        }else{
+            if(setup.field_type == 'select'){
+                var options = setup.field_options;
+                var options_html = '';
+                if(setup.placeholder !== ''){
+                    options_html = '<option>'+setup.placeholder+'</option>';
+                }
+                $.each(options, function(j, k){
+                    var label = k.label;
+                    var value = label;
+                    if('' !== k.value && setup.show_toggle.value == 'yes'){
+                        value = k.value;
+                    }
+                    var calc = 0;
+                    if('' !== k.amount && setup.show_toggle.amount == 'yes'){
+                        calc = k.amount;
+                    }
+                    options_html += '<option value="'+value+'" data-calc-value="'+calc+'">'+label+'</option>';
+                });                
+                preview_content = `
+                <div class="formipay-field w-100"`+hidden+`>
+                    <div class="d-flex justify-content-between field-controls">
+                        <label for="`+setup.field_id+`">`+setup.label+asterisk+`</label>
+                        <div class="field-icons d-flex gap-2 align-items-center the_buttons">
+                            <button class="btn btn-sm edit-preview-field">
+                                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24">
+                                    <path fill="#000" d="M5 19h1.425L16.2 9.225L14.775 7.8L5 17.575zm-2 2v-4.25L16.2 3.575q.3-.275.663-.425t.762-.15t.775.15t.65.45L20.425 5q.3.275.438.65T21 6.4q0 .4-.137.763t-.438.662L7.25 21zM19 6.4L17.6 5zm-3.525 2.125l-.7-.725L16.2 9.225z" />
+                                </svg>
+                            </button>
+                            <button class="btn btn-sm delete-preview-field">
+                                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24">
+                                    <path fill="#000" d="M7 21q-.825 0-1.412-.587T5 19V6H4V4h5V3h6v1h5v2h-1v13q0 .825-.587 1.413T17 21zm2-4h2V8H9zm4 0h2V8h-2z" />
+                                </svg>
+                            </button>
+                        </div>
+                    </div>
+                    <input type="hidden" name="`+setup.field_id+`_config" class="formipay-field-setup" value='`+setup_string+`'>
+                    <select id="`+setup.field_id+`" class="formipay-input formipay-form-field" `+is_required+`>
+                        `+options_html+`
+                    </select>
+                    <p class="formipay-inline-desc">`+setup.description+`</p>
+                </div>`;
+            }else{
+                var options = setup.field_options;
+                var options_html = '';
+                $.each(options, function(j, k){
+                    var name = setup.field_id+`-`+j;
+                    if(setup.field_type == 'radio'){
+                        name = setup.field_id;
+                    }
+                    var label = k.label;
+                    var value = label;
+                    if('' !== k.value && setup.show_toggle.value == 'yes'){
+                        value = k.value;
+                    }
+                    var calc = 0;
+                    if('' !== k.amount && setup.show_toggle.amount == 'yes'){
+                        calc = k.amount;
+                    }
+                    var image = '';
+                    if('' !== k.image_id && '' !== k.image_url){
+                        image = `<img src="`+k.image_url+`" style="width: 100%; height: 150px; object-fit: contain;">`;
+                    }
+                    options_html += 
+                    `<div class="formipay-checkbox-group">
+                        `+image+`
+                        <input type="`+setup.field_type+`" id="`+setup.field_id+`-`+j+`" name="`+name+`" class="formipay-input formipay-form-field" value="`+k.value+`" />
+                        <label for="`+setup.field_id+`-`+j+`">`+k.label+`</label>
+                    </div>`;
+                }); 
+                if(setup.layout == ''){
+                    setup.layout = 1;
+                }
+                preview_content = `
+                <div class="formipay-field w-100"`+hidden+`>
+                    <div class="d-flex justify-content-between field-controls">
+                        <label for="`+setup.field_id+`">`+setup.label+asterisk+`</label>
+                        <div class="field-icons d-flex gap-2 align-items-center the_buttons">
+                            <button class="btn btn-sm edit-preview-field">
+                                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24">
+                                    <path fill="#000" d="M5 19h1.425L16.2 9.225L14.775 7.8L5 17.575zm-2 2v-4.25L16.2 3.575q.3-.275.663-.425t.762-.15t.775.15t.65.45L20.425 5q.3.275.438.65T21 6.4q0 .4-.137.763t-.438.662L7.25 21zM19 6.4L17.6 5zm-3.525 2.125l-.7-.725L16.2 9.225z" />
+                                </svg>
+                            </button>
+                            <button class="btn btn-sm delete-preview-field">
+                                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24">
+                                    <path fill="#000" d="M7 21q-.825 0-1.412-.587T5 19V6H4V4h5V3h6v1h5v2h-1v13q0 .825-.587 1.413T17 21zm2-4h2V8H9zm4 0h2V8h-2z" />
+                                </svg>
+                            </button>
+                        </div>
+                    </div>
+                    <input type="hidden" name="`+setup.field_id+`_config" class="formipay-field-setup" value='`+setup_string+`'>
+                    <div class="formipay-checkbox-wrapper" style="display: grid; grid-template-columns: repeat(`+setup.layout+`, 1fr); gap: 10px;">
+                        `+options_html+`
+                    </div>
+                    <p class="formipay-inline-desc">`+setup.description+`</p>
+                </div>`;
+            }
+        }
+
+        var hidden = is_required = '';
+        if(setup.type == 'hidden'){
+            hidden = ' style="display: none;"';
+        }
+        if(setup.require == 'yes'){
+            is_required = ' required';
+        }
+
+        // Check if any
+
+        var edit_to = $('.add-field').attr('data-edit-to');
+        var the_existed_field = $('.preview-field[data-field="'+edit_to+'"]');
+
+        if(the_existed_field.length > 0){
+            $('.preview-field[data-field="'+edit_to+'"]').html(`
+                    <span class="grab pb-4">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24">
+                            <path fill="#000" d="M9 20q-.825 0-1.412-.587T7 18t.588-1.412T9 16t1.413.588T11 18t-.587 1.413T9 20m6 0q-.825 0-1.412-.587T13 18t.588-1.412T15 16t1.413.588T17 18t-.587 1.413T15 20m-6-6q-.825 0-1.412-.587T7 12t.588-1.412T9 10t1.413.588T11 12t-.587 1.413T9 14m6 0q-.825 0-1.412-.587T13 12t.588-1.412T15 10t1.413.588T17 12t-.587 1.413T15 14M9 8q-.825 0-1.412-.587T7 6t.588-1.412T9 4t1.413.588T11 6t-.587 1.413T9 8m6 0q-.825 0-1.412-.587T13 6t.588-1.412T15 4t1.413.588T17 6t-.587 1.413T15 8" />
+                        </svg>
+                    </span>
+                    `+preview_content+`
+            `);
+        }else{
+            $('#preview-wrapper').append(`
+                <div class="preview-field d-flex gap-2 align-items-center" data-field="`+setup.field_id+`" data-field-type="`+setup.field_type+`">
+                    <span class="grab pb-4">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24">
+                            <path fill="#000" d="M9 20q-.825 0-1.412-.587T7 18t.588-1.412T9 16t1.413.588T11 18t-.587 1.413T9 20m6 0q-.825 0-1.412-.587T13 18t.588-1.412T15 16t1.413.588T17 18t-.587 1.413T15 20m-6-6q-.825 0-1.412-.587T7 12t.588-1.412T9 10t1.413.588T11 12t-.587 1.413T9 14m6 0q-.825 0-1.412-.587T13 12t.588-1.412T15 10t1.413.588T17 12t-.587 1.413T15 14M9 8q-.825 0-1.412-.587T7 6t.588-1.412T9 4t1.413.588T11 6t-.587 1.413T9 8m6 0q-.825 0-1.412-.587T13 6t.588-1.412T15 4t1.413.588T17 6t-.587 1.413T15 8" />
+                        </svg>
+                    </span>
+                    `+preview_content+`
+                </div>
+            `);
+        }
+
+        $('.preview-field[data-field="'+setup.field_id+'"]').attr('data-field-type', setup.field_type);
+
+        // scissors icon
+        if(setup.field_type == 'page_break'){
+            $('.preview-field[data-field="'+setup.field_id+'"]').append(`
+                <span class="scissors">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24">
+                        <path fill="#000" d="m12 14l-2.35 2.35q.2.375.275.8T10 18q0 1.65-1.175 2.825T6 22t-2.825-1.175T2 18t1.175-2.825T6 14q.425 0 .85.075t.8.275L10 12L7.65 9.65q-.375.2-.8.275T6 10q-1.65 0-2.825-1.175T2 6t1.175-2.825T6 2t2.825 1.175T10 6q0 .425-.075.85t-.275.8L20.6 18.6q.675.675.3 1.538T19.575 21q-.275 0-.537-.112t-.463-.313zm3-3l-2-2l5.575-5.575q.2-.2.463-.312T19.574 3q.95 0 1.313.875t-.313 1.55zM6 8q.825 0 1.413-.587T8 6t-.587-1.412T6 4t-1.412.588T4 6t.588 1.413T6 8m6 4.5q.2 0 .35-.15t.15-.35t-.15-.35t-.35-.15t-.35.15t-.15.35t.15.35t.35.15M6 20q.825 0 1.413-.587T8 18t-.587-1.412T6 16t-1.412.588T4 18t.588 1.413T6 20" />
+                    </svg>
+                </span>
+            `)
+        }else{
+            $('.preview-field[data-field="'+setup.field_id+'"] > span.scissors').remove();
+        }
+
+        var builder_fields = $('#add_field_form').find('.formipay-builder-field');
+        if(builder_fields.length > 0){
+            $.each(builder_fields, function(a, b){
+                if($(b).attr('type') == 'checkbox'){
+                    $(b).val('no').prop('checked', false);
+                }else{
+                    $(b).val('');
+                }
+            });
+        }
+
+        $('.repeater-child-input:not(:first-child)').remove();
+        $('.repeater-child-input > input').val('');
+        $('.repeater-child-input > .add-thumbnail').removeClass('text-info').addClass('text-white');
+        $('.repeater-child-input .check-qty').prop('checked', false);
+        $('#add_field_form .field.has-conditional').slideUp();
+        
+        var all_option_toggle = $('.option-field-toggle');
+        $.each(all_option_toggle, function(p, q){
+            if($(q).is(':checked')){
+                $(q).trigger('click');
+            }
+        });
+        
+        $('.child-field-image-wrapper').find('img').attr('src', '').hide();
+        $('.child-field-image-wrapper').find('i').attr('src', '').show();
+        $('#add_field_form .field:not(.has-conditional)').show();
+        $('[name=field_type]').val('text').change();
+        $('.add-field').removeAttr('data-edit-to').text('Add Field');
+
+        formipay_sortable();
+        
+        setTimeout(() => {
+            update_option_to_data_mapping('update');
+        }, 1000);
+    });
+
+    $(document).on('change', '#customer_data-buyer_allow_choose_country_code', function() {
+        update_option_to_data_mapping('update');
+    });
+
+    function update_option_to_data_mapping(initiation) {
+        var fields = $('#preview-wrapper').find('input[type=hidden]');
+        var options = [];
+        $.each(fields, function(increment, field){
+            var value = $(field).val();
+            var config = JSON.parse(value);
+            options.push(config);
+        });
+        var target = $('#customer_data').find('select');
+        target.html('');
+        target.append(`<option value="">${formipay_admin.config.datamapping.placeholder}</option>`);
+        if(options.length > 0){
+            $.each(options, function(increment, option){
+                target.append(`<option value="${option.field_id}">${option.label}</option>`);
+            });
+        }
+        if(initiation == 'initial'){
+            $.ajax({
+                type: 'post',
+                url: formipay_admin.ajax_url,
+                data: {
+                    action: 'formipay_check_for_data_mapping_saved_value',
+                    post: $('#post_ID').val(),
+                    _wpnonce: formipay_admin.nonce
+                },
+                success: function(res) {
+                    $.each(res, function(name, value){
+                        if(value){
+                            $(`[name="${name}"]`).attr('data-current-value', value).val(value);
+                        }
+                    });
+                }
+            });
+        }else if(initiation == 'update'){
+            $.each(target, function(increment, select){
+                const current_value = $(select).attr('data-current-value');
+                $(select).attr('data-current-value', current_value).val(current_value);
+            })
+        }
+    }
+
+    $(document).on('change', '#customer_data select', function() {
+        var value = $(this).val();
+        $(this).attr('data-current-value', value);
+    });
+
+    $(document).on('click', '.delete-preview-field', function(e){
+        e.preventDefault();
+        $(this).parents('.preview-field').remove();
+        update_option_to_data_mapping('update');
+    });
+
+    $(document).on('click', '.edit-preview-field', function(e){
+        e.preventDefault();
+        
+        // recondition all fields
+        $('.option-field-toggle').prop('checked', false);
+        $('.repeater-child-input:not(:first-child)').remove();
+        $('.repeater-child-input:first-child').find('input').val('');
+        // $('.repeater-child-input:first-child').find('.add-thumbnail').removeClass('text-info').addClass('text-white');
+
+        var setup = $(this).closest('.preview-field').find('.formipay-field-setup').val();
+        setup = JSON.parse(setup);
+        console.log(setup);
+        $.each(setup, function(x, y){
+            if(x == 'field_options'){
+                if(y.length > 0){
+                    var first_repeater = $('.repeater-child-input:first-child')
+                    var repeater_template = first_repeater.html();
+                    var repeater_wrapper = $('.repeater-child-wrapper');
+                    $.each(y, function(p, q){
+                        repeater_wrapper.append(
+                            `<div class="repeater-child-input d-flex justify-content-start align-items-start gap-2 my-2">
+                            `+repeater_template+`
+                            </div>`);
+                        var repeater_target = $('.repeater-child-input:last-child');
+                        repeater_target.find('.the_title').text(q.label);
+                        repeater_target.find('.child-field-label').find('input').val(q.label);
+                        repeater_target.find('.child-field-value').find('input').val(q.value);
+                        repeater_target.find('.child-field-amount').find('input').val(q.amount);
+                        if(q.qty == 'yes'){
+                            repeater_target.find('.check-qty').val('yes').prop('checked', true);
+                        }else{
+                            repeater_target.find('.check-qty').val('no').prop('checked', false);
+                        }
+                        if('' !== q.image){
+                            repeater_target.find('.field-image-id').val(q.image_id);
+                            repeater_target.find('.field-image-url').val(q.image_url);
+                            repeater_target.find('img').attr('src', q.image_url).removeClass('d-none');
+                            repeater_target.find('.child-field-image').hide();
+                            // repeater_target.find('.add-thumbnail').removeClass('text-white').addClass('text-info');
+                        }
+                        repeater_target.show();
+                        first_repeater.hide();
+                        first_repeater.remove();
+                    });
+                    $('.repeater-child-input:first-child').find('.open-option');
+                }
+            }else if(x == 'layout'){
+                $('#add_field_form [name="option_grid_columns"]').val(y);
+            }else{
+                $('#add_field_form [name="' + x + '"]').val(y);
+            }
+        });
+
+        $('#add_field_form [name=is_required]').prop('checked', setup.is_required === 'yes');
+        // Handle show_toggle options
+        if ('show_toggle' in setup) {
+
+            if(setup.show_toggle.image === 'yes'){
+                $('#repeater-child-0_thumbnail').trigger('click');
+            }
+            if(setup.show_toggle.value === 'yes'){
+                $('#repeater-child-2_value').trigger('click');
+            }
+            if(setup.show_toggle.amount === 'yes'){
+                $('#repeater-child-3_amount').trigger('click');
+            }
+        }
+    
+        formipay_sortable();
+        // Trigger recondition and form change
+        $('.formipay-builder-field[name=field_type]').trigger('change');
+
+        $('.add-field').attr('data-edit-to', setup.field_id).text('Edit Field');
+    });
+
+    if( $('[name=daterange]').val() == '' ){
+        $('[name=daterange]').daterangepicker({
+            timePicker: true,
+            startDate: moment().startOf('hour'),
+            endDate: moment().startOf('hour').add(32, 'hour'),
+            showDropdowns: true,
+            timePicker24Hour: true, 
+            locale: {
+                format: 'D-M-Y HH:mm'
+            }
+        });
+    }else{
+        $('[name=daterange]').daterangepicker({
+            timePicker: true,
+            showDropdowns: true,
+            timePicker24Hour: true, 
+            locale: {
+                format: 'D-M-Y HH:mm'
+            }
+        });
+    }
+
+    $(document).on('click', '[role=switch]', function(){
+        var id = $(this).attr('id');
+        if($(this).is(':checked')){
+            $('#add_field_form [data-if-'+id+'=active]').show();
+            $(this).val('no');
+        }else{
+            $('#add_field_form [data-if-'+id+'=active]').hide();
+            $(this).val('yes');
+        }
+    });
+
+    $(document).on('click change', '#add_field_form [type=radio]', function(){
+        var id = $(this).attr('name');
+        var value = $(this).val();
+        $('#add_field_form [data-if-'+id+']').hide();
+        if($(this).is(':checked')){
+            $('#add_field_form [data-if-'+id+'='+value+']').show();
+        }
+    });
+
+    $('[type=radio]').trigger('change');
+    
+    $(document).on('change', '.config-dropdown', function(){
+        var id = $(this).attr('id');
+        var value = $(this).val();
+        var attr_value = $('#add_field_form [data-if-'+id+']');
+
+        $('#add_field_form [data-if-'+id+']').hide();
+
+        if(attr_value.length > 0){
+            $.each(attr_value, function(x,y){
+                var this_attr_value = $(y).attr('data-if-'+id);
+                if(this_attr_value.indexOf('::') !== -1){
+                    var split = this_attr_value.split('::');
+                    if($.inArray(value, split) !== -1){
+                        $(y).show();
+                    }
+                }else{
+                    if(this_attr_value == value){
+                        $(y).show();
+                    }
+                }
+            });
+        }
+        
+    });
+
+    $('.config-dropdown').trigger('change');
+
+    $(document).on('click', '.open-option', function(e){
+        e.preventDefault();
+        $(this).find('.bi').toggleClass('bi-arrow-up').toggleClass('bi-arrow-down');
+        $(this).closest('.child-fields-wrapper').find('.child-field-wrapper').slideToggle();
+        $(this).closest('.child-field-title').toggleClass('option-detail-opened');
+    });
+
+    var all_checkbox = $('[type="checkbox"]');
+    if(all_checkbox.length > 0){
+        $.each(all_checkbox, function(a,b){
+            if($(b).val() == 'yes'){
+                $(b).val('no').trigger('click');
+            }
+        });
+    }
+
+    function modify_payment_box_behavior() {
+
+        var allbox = $('#payments multi_checkbox');
+        var checkbox_input = $('.payments-payment input[type=checkbox]');
+        var checked_value = [];
+        if(checkbox_input.length > 0){
+            $.each(checkbox_input, function(x, y){
+                if($(y).is(':checked')){
+                    checked_value.push($(y).val());
+                    $('[data-field=wpcfto_addon_option_payment_'+$(y).val()+']').show();
+                }else{
+                    $('[data-field=wpcfto_addon_option_payment_'+$(y).val()+']').hide();
+                }
+            });
+        }
+
+    }
+
+    setTimeout(() => {
+        modify_payment_box_behavior();
+    }, 500);
+
+    $(document).on('click', '.payments-payment input[type=checkbox]', function(){
+        modify_payment_box_behavior();
+    });
+
+    $(document).on('mouseover', 'span.grab', function(){
+        $(this).css('pointer', 'grab');
+    });
+
+    $(document).on('click', 'span.grab', function(){
+        $(this).css('pointer', 'grabbing');
+    });
+
+    $(document).on('change blur', '.child-field-label input.formipay-builder-field', function(){
+        $(this).closest('.child-fields-wrapper').find('.the_title').text($(this).val());
+    });
+
+});
+
+jQuery(function($){
+
+    // setTimeout(() => {
+    //     var autocomplete_fields = $('.wpcfto-box .autocomplete');
+    //     if(autocomplete_fields.length > 0){
+    //         $.each(autocomplete_fields, function(increment, field){
+    //             var label = $(field).find('.wpcfto-field-aside__label').text();
+    //             var placeholder = formipay_admin.config.autocomplete.placeholder.replace('{field_label}', label);
+    //             var search_input = $(field).find('input');
+    //             search_input.attr('placeholder', placeholder);
+    //             search_input.parent().attr('data-input-placeholder', placeholder);
+    //         });
+    //     }
+    // }, 1000);
+
+    // $(document).on('mouseleave blur focusout', '.wpcfto-autocomplete-search input', function(){
+    //     var placeholder = $(this).parent().attr('data-input-placeholder');
+    //     setTimeout(() => {
+    //         $(this).attr('placeholder', placeholder);
+    //     }, 500);
+    // });
+
+    $( document ).on( 'click', '.add-thumbnail', function( event ) {
+        
+        var gallery_items_frame;
+        const $el = $( this );
+        var target_field = $el.attr('data-field');
+        var target_id = $el.siblings('.'+target_field+'-id');
+        var target_url = $el.siblings('.'+target_field+'-url');
+        var selected = target_id.val();
+        var able_multiple = $el.attr('data-able-multiple');
+
+        event.preventDefault();
+
+        if ( gallery_items_frame ) {
+
+            // Select the attachment when the frame opens
+            gallery_items_frame.on( 'open', function() {
+                var selection = gallery_items_frame.state().get( 'selection' );
+                selection.reset( selected ? [ wp.media.attachment( selected ) ] : [] );
+            });
+
+            // Open the modal.
+            gallery_items_frame.open();
+
+            return;
+        }
+
+        // Create the media frame.
+        gallery_items_frame = wp.media.frames.gallery_items = wp.media({
+            // Set the title of the modal.
+            title: 'Choose or upload media',
+            button: {
+                text: 'Select'
+            },
+            states: [
+                new wp.media.controller.Library({
+                    title: 'Choose or upload media',
+                    filterable: 'all',
+                    multiple: able_multiple
+                })
+            ]
+        });
+
+        // Select the attachment when the frame opens
+        gallery_items_frame.on( 'open', function() {
+            var selection = gallery_items_frame.state().get( 'selection' );
+            selection.reset( selected ? [ wp.media.attachment( selected ) ] : [] );
+        });
+
+        gallery_items_frame.on( 'select', function() {
+			attachment = gallery_items_frame.state().get('selection').first().toJSON();
+			target_id.val( attachment.id );
+            target_url.val( attachment.url );
+            if(target_id.val() !== ''){
+                // $el.removeClass('text-white').addClass('text-info d-none');
+                if($el.hasClass('btn')){
+                    $el.siblings('i').hide();
+                }else{
+                    $el.hide();
+                }
+                $el.siblings('img').removeClass('d-none').attr('src', attachment.url).show();
+            }else{
+                // $el.removeClass('text-info d-none').addClass('text-white');
+                if($el.hasClass('btn')){
+                    $el.siblings('i').show();
+                }else{
+                    $el.show();
+                }
+                $el.siblings('img').addClass('d-none').hide();
+            }
+		});
+
+        // Open the modal.
+        gallery_items_frame.open();
+
+    });
+
+    $( document ).on( 'click', '.trumbowyg-button-group:has(.trumbowyg-insertImage-button)', function( event ) {
+        
+        var gallery_items_frame;
+
+        event.preventDefault();
+
+        // Create the media frame.
+        gallery_items_frame = wp.media.frames.gallery_items = wp.media({
+            // Set the title of the modal.
+            title: 'Choose or upload media',
+            button: {
+                text: 'Select'
+            },
+            states: [
+                new wp.media.controller.Library({
+                    title: 'Choose or upload media',
+                    filterable: 'all',
+                    multiple: false
+                })
+            ]
+        });
+
+        gallery_items_frame.on( 'select', function() {
+			attachment = gallery_items_frame.state().get('selection').first().toJSON();
+            var target_input_url = $('.trumbowyg-modal.trumbowyg-fixed-top .trumbowyg-input-html input');
+            var target_confirm = $('.trumbowyg-modal.trumbowyg-fixed-top .trumbowyg-modal-submit');
+            target_input_url.val( attachment.url );
+            target_confirm.trigger('click');
+            
+		});
+
+        // Open the modal.
+        gallery_items_frame.open();
+
+    });
+
+});

admin/assets/js/admin-handlebars.js

@@ -0,0 +1,174 @@
+jQuery(document).ready(function($) {
+
+    function getParam(key) {
+        var paramsStr = window.location.search.substr(1, window.location.search.length),
+            paramsArr = paramsStr.split("&"),
+            items     = [];
+
+        for (var i = 0; i < paramsArr.length; i++) {
+            items[paramsArr[i].split("=")[0]] = paramsArr[i].split("=")[1];
+        }
+
+        if (key != "" && key != undefined) {
+            // return single
+            if (items[key] != undefined) {
+                return items[key];
+            } else {
+                return null;
+            }
+        } else {
+            // return all (array)
+            return items;
+        }
+    };
+
+    if (getParam('post')){
+        // Fetch data via AJAX
+        $.ajax({
+            url: formipay_admin.ajax_url, // WordPress AJAX URL
+            method: 'GET',
+            data: {
+                action: 'fetch_formipay_settings',
+                post_id: formipay_admin.form_id, // Assuming you have post ID available globally,
+                _wpnonce: formipay_admin.nonce
+            },
+            success: function(response) {
+                var source = $("#preview-template").html();
+                var template = Handlebars.compile(source);
+                var context = {
+                    fields: response.data.fields
+                };
+                var html = template(context);
+                $("#preview-wrapper").html(html);
+            }
+        });
+    }
+
+    // Fetch data via AJAX
+    $.ajax({
+        url: formipay_admin.ajax_url, // WordPress AJAX URL
+        method: 'GET',
+        data: {
+            action: 'fetch_formipay_fields',
+        },
+        success: function(response) {
+            var source = $("#add-field-form-template").html();
+            var template = Handlebars.compile(source);
+            var context = {
+                fields: response.data.fields
+            };
+            var html = template(context);
+            $("#add_field_form").html(html);
+            $('#add_field_form .field select.form-select').trigger('change');
+        }
+    });
+
+    // Handlebars helper for comparing equality
+    Handlebars.registerHelper('ifEquals', function(arg1, arg2, options) {
+        return (arg1 == arg2) ? options.fn(this) : options.inverse(this);
+    });
+
+    // Handlebars helper for checking inequality
+    Handlebars.registerHelper('ifNotEquals', function(arg1, arg2, options) {
+        return (arg1 != arg2) ? options.fn(this) : options.inverse(this);
+    });
+
+    // Handlebars helper for checking if a value is in a list
+    Handlebars.registerHelper('ifIn', function(value, list, options) {
+        return (list.split(' ').indexOf(value) > -1) ? options.fn(this) : options.inverse(this);
+    });
+
+    // Handlebars helper for checking if a value is in a list
+    Handlebars.registerHelper('ifNotIn', function(value, list, options) {
+        return (list.split(' ').indexOf(value) > -1) ? options.inverse(this) : options.fn(this);
+    });
+
+    // Handlebars helper for JSON stringify
+    Handlebars.registerHelper('json', function(context) {
+        return JSON.stringify(context);
+    });
+
+    // Handlebars helper to concatenate custom classes
+    Handlebars.registerHelper('custom_class', function(custom_class) {
+        return (custom_class && Array.isArray(custom_class)) ? ' '+custom_class.join(' ') : '';
+    });
+
+     // Handlebars helper to handle conditional classes and display properties
+     Handlebars.registerHelper('conditional_class', function(conditional) {
+        return (conditional && conditional.length > 0) ? ' has-conditional' : '';
+    });
+
+    // Handlebars helper to return label class
+    Handlebars.registerHelper('labelClass', function(fieldType) {
+        return 'label-' + fieldType;
+    });
+
+    // Handlebars helper to return name attribute for checkbox and radio inputs
+    Handlebars.registerHelper('name', function(fieldType, fieldId, index) {
+        return (fieldType == 'radio') ? fieldId : fieldId + '-' + index;
+    });
+
+    Handlebars.registerHelper('display', function(conditional) {
+        var display = '';
+        if (conditional) {
+            display = ' style="display:none"';
+            if (Array.isArray(conditional)) {
+                conditional.forEach(function(cond) {
+                    display += ' data-if-' + cond.key + "='" + JSON.stringify(cond.value) + "'";
+                });
+            }
+        }
+        return display;
+    });
+
+    // Handlebars helper to format option text
+    Handlebars.registerHelper('formatOption', function(option) {
+        return option.charAt(0).toUpperCase() + option.slice(1).replace('_', ' ');
+    });
+
+    // Handlebars helper for toggle display property
+    Handlebars.registerHelper('toggleDisplay', function(toggle) {
+        return (toggle == 'yes') ? ' style="display:none;"' : '';
+    });
+
+    // Handlebars helper for set grid column for checkbox and radio
+    Handlebars.registerHelper('layoutColumn', function(layout) {
+        return (layout !== '') ? layout : 1;
+    });
+
+    // Handlebars helper for set the first option as selected
+    Handlebars.registerHelper('selectedTheFirstOption', function(index) {
+        return (index == 0) ? ' selected' : '';
+    });
+
+    // Handlebars helper for set the first option as selected
+    Handlebars.registerHelper('countryListOptions', function() {
+        var country_json = formipay_admin.preset.country_list;
+        // Check if country_json is a string (indicating it might need to be parsed)
+        if (typeof country_json === 'string') {
+            try {
+                country_json = JSON.parse(country_json); // Parse the JSON string into an object
+            } catch (e) {
+                console.error('Error parsing JSON:', e); // Log any parsing errors
+                country_json = []; // Fallback to an empty array
+            }
+        }
+
+        // Validate the data type
+        if (!Array.isArray(country_json)) {
+            console.error('Expected an array but got:', country_json);
+            country_json = []; // Fallback to an empty array if not an array
+        }
+
+        var options_html = ``; // Initialize options_html variable
+
+        // Loop through each country object
+        $.each(country_json, function(index, country) {
+            // Assuming each country object has 'id' for the value and 'name' for the display text
+            options_html += `<option value="${country.name}">${country.name}</option>`;
+        });
+
+        return options_html;
+    });
+
+});

admin/assets/js/admin-order-details.js

@@ -0,0 +1,430 @@
+jQuery(function($){
+
+    Handlebars.registerHelper('ifEquals', function(arg1, arg2, options) {
+        return (arg1 == arg2) ? options.fn(this) : options.inverse(this);
+    });
+    Handlebars.registerHelper('nameToTitle', function(arg) {
+        var parse = arg.split('_');
+        var output = [];
+        $.each(parse, function( a, b ){
+            if(b.length <= 3){
+                output.push(b.toUpperCase());
+            }else{
+                output.push(b);
+            }
+        });
+        return output.join(' ');
+    });
+    Handlebars.registerHelper('parsePaymentInfo', function(arg) {
+        var explode = arg.split('-');
+        var explode2 = explode[0].split(':::');
+        var gateway = explode2[0].split('_').join(' ');
+        var channel = explode2[1];
+        return gateway + ' - ' + channel;
+    });
+    Handlebars.registerHelper('ifKeyExists', function(key, obj, options) {
+        // Check if the key exists in the object
+        if (obj && obj.hasOwnProperty(key)) {
+            // If it exists, execute the block
+            return options.fn(this);
+        }
+        // If it does not exist, execute the inverse block (if provided)
+        return options.inverse(this);
+    });
+
+    function ucWords(input) {
+        return input
+            .replace(/_/g, ' ') // Replace underscores with spaces
+            .toLowerCase() // Convert entire string to lowercase first
+            .replace(/^(.)/, function(char) { return char.toUpperCase(); }) // Capitalize the first letter of the first word
+            .replace(/ (.)/g, function(char) { return char.toUpperCase(); }); // Capitalize the first letter after each space
+    }
+
+    let order_id = $('#order_id').val();
+
+    function load_order_data() {
+
+        $.ajax({
+            type: 'post',
+            url: formipay_order_details_page.ajax_url,
+            data: {
+                action: 'formipay_load_order_data',
+                order: order_id,
+                _wpnonce: formipay_order_details_page.nonce
+            },
+            success: function (res) {
+                console.log(res);
+                var source = $("#order-item-row-template").html();
+                var template = Handlebars.compile(source);
+                var context = {
+                    items: res.items
+                };
+                var html = template(context);
+                $("#order-items-table tbody").html(html);
+                $('#order-total').html(res.total_formatted);
+                $('#order_status').val(res.status);
+
+                var source = $("#form-data-item-template").html();
+                var template = Handlebars.compile(source);
+                var context = {
+                    datas: res.form_data
+                };
+                var html = template(context);
+                $("#form-data-list").html(html);
+                var editFormDataButton = $('.edit-transaction-data').attr('data-loaded-button-text');
+                $('.edit-transaction-data').text(editFormDataButton).prop('disabled', false);
+
+                var source = $("#form-data-item-template").html();
+                var template = Handlebars.compile(source);
+                var meta_data = [];
+                $.each(res.meta_data, function(index, meta){
+                    if(meta.name !== 'access_method' && meta.name !== 'access_password'){
+                        meta_data.push(meta);
+                    }
+                });
+                var context = {
+                    datas: meta_data
+                };
+                var html = template(context);
+                $("#submission-detail-list").html(html);
+
+                var source = $("#notification-data-template").html();
+                var template = Handlebars.compile(source);
+                var context = {
+                    datas: res.notification.sort().reverse()
+                };
+                var html = template(context);
+                $("#notification-list").html(html);
+
+                var source = $("#transaction-timeline-item").html();
+                var template = Handlebars.compile(source);
+                var context = {
+                    datas: res.transaction_timeline.sort().reverse()
+                };
+                var html = template(context);
+                $("#transaction-list").html(html);
+
+                var passMethod = {
+                    'magic_link': 'Magic Link',
+                    'static_password': 'Static Password'
+                }
+                var source = $('#thankyou-access-template').html();
+                var template  = Handlebars.compile(source);
+                var context = {
+                    data: {
+                        link: res.thankyou.link,
+                        pass_method: res.thankyou.pass_method,
+                        pass_method_label: passMethod[res.thankyou.pass_method],
+                        pass_word: res.thankyou.pass_word
+                    }
+                };
+                var html = template(context);
+                $('#access-detail-list').html(html);
+                $('#access_method').val(res.thankyou.pass_method).trigger('change');
+                var editFormDataButton = $('.edit-access-data').attr('data-loaded-button-text');
+                $('.edit-access-data').text(editFormDataButton).prop('disabled', false);
+                if(res.thankyou.pass_method == 'static_password'){
+                    $('li.access-password p').text(res.thankyou.pass_word);
+                    $('li.access-password').removeClass('d-none');
+                }
+                
+            }
+        });
+
+    }
+
+    function set_loading_button(selector, loadingText = '') {
+        var buttonText = selector.text();
+        selector.attr('data-button-text', buttonText);
+        selector.prop('disabled', true);
+        if(loadingText !== '') {
+            selector.html(`
+                <span class="spinner-border spinner-border-sm" aria-hidden="true"></span>
+                <span role="status">${loadingText}</span>
+            `);
+        }else{
+            selector.html(`
+                <span class="spinner-border spinner-border-sm" aria-hidden="true"></span>
+                <span class="visually-hidden" role="status">${loadingText}</span>
+            `);
+        }
+    }
+
+    function remove_loading_button(selector) {
+        var buttonText = selector.attr('data-button-text');
+        selector.prop('disabled', false);
+        selector.html(buttonText);
+    }
+
+    load_order_data();
+
+    $(document).on('click', '.timeline-item-image', function(){
+        var imageSrc = $(this).attr('src');
+        $('#image-ligthbox img').attr('src', imageSrc);
+        $('#image-ligthbox').modal('show');
+    });
+
+    $('#order_status').on('change', function() {
+        var status = $(this).val();
+        var order_id = $(this).data('order-id');
+        Swal.fire({
+            html: formipay_order_details_page.order_detail.change_order_status_confirmation,
+            icon: 'question',
+            confirmButtonText: formipay_order_details_page.order_detail.change_order_status_button_confirm,
+            cancelButtonText: formipay_order_details_page.order_detail.change_order_status_button_cancel,
+            showCancelButton: true,
+            reverseButtons: true
+        }).then((result) => {
+            if (result.isConfirmed) {
+                $.ajax({
+                    type: 'post',
+                    url: formipay_order_details_page.ajax_url,
+                    data: {
+                        action: 'formipay_change_order_status',
+                        id: order_id,
+                        status: status,
+                        _wpnonce: formipay_order_details_page.nonce
+                    },
+                    success: function (res) {
+                        if(res.success){
+                            Swal.fire({
+                                html: res.data.message,
+                                icon: 'success'
+                            });
+                        }else{
+                            Swal.fire({
+                                html: res.data.message,
+                                icon: 'error'
+                            });
+                        }
+                    }
+                });
+            }
+        });
+    });
+
+    $('.edit-transaction-data').on('click', function(e) {
+        e.preventDefault();
+        var $this_button = $(this);
+        $.ajax({
+            type: 'post',
+            url: formipay_order_details_page.ajax_url,
+            data: {
+                action: 'formipay_check_editable_field',
+                order_id: formipay_order_details_page.order_id,
+                _wpnonce: formipay_order_details_page.nonce
+            },
+            beforeSend: function() {
+                set_loading_button($this_button, formipay_order_details_page.order_detail.edit_button_loading_text);
+            },
+            success: function(res) {
+                remove_loading_button($this_button);
+                $('.edit-transaction-data').addClass('d-none');
+                $('.update-transaction-buttons').removeClass('d-none');
+                $.each(res, function(config, field_data){
+                    var field_id = field_data.field_id;
+                    var field_current_value = $(`[data-field-name=${field_id}]`).text();
+                    $(`[data-field-name=${field_id}]`).attr('data-current-value', field_current_value);
+
+                    $(`[data-field-name=${field_id}]`).html(`
+                        <input type="${field_data.field_type}" name="${field_id}" value="${$.trim(field_current_value)}" class="form-control rounded border border-secondary-subtle">
+                    `);
+                });
+            }
+        })
+        
+    });
+
+    $('.update-transaction-data').on('click', function(e){
+        e.preventDefault();
+
+        var $this_button = $(this);
+        var editable_inputs = $('#form-data-list').find('input');
+        var editable_field_values = [];
+        $.each(editable_inputs, function(i, input){
+            var this_input = {
+                name: $(input).attr('name'),
+                value: $(input).val()
+            }
+            editable_field_values.push(this_input);
+        });
+
+        $.ajax({
+            type: 'post',
+            url: formipay_order_details_page.ajax_url,
+            data: {
+                action: 'formipay_update_editable_field_data',
+                order_id: formipay_order_details_page.order_id,
+                new_values: editable_field_values,
+                _wpnonce: formipay_order_details_page.nonce
+            },
+            beforeSend: function() {
+                set_loading_button($this_button, formipay_order_details_page.order_detail.update_button_loading_text);
+            },
+            success: function(res){
+                remove_loading_button($this_button);
+                if(res.success){
+                    $('.edit-transaction-data').removeClass('d-none');
+                    $('.update-transaction-buttons').addClass('d-none');
+                    $.each(editable_inputs, function(i, input){
+                        var new_value = $(input).val();
+                        $(input).parent().removeAttr('data-current-value');
+                        $(input).parent().text(new_value);
+                    });
+                    Swal.fire({
+                        html: res.data.message,
+                        icon: 'success'
+                    });
+                }else{
+                    $.each(editable_inputs, function(i, input){
+                        var current_value = $(input).parent().attr('data-current-value');
+                        $(input).val(current_value);
+                    });
+                    Swal.fire({
+                        html: res.data.message,
+                        icon: 'error'
+                    });
+                }
+            }
+        });
+
+    });
+
+    $('.cancel-transaction-data').on('click', function(e){
+        e.preventDefault();
+
+        var editable_inputs = $('#form-data-list').find('input');
+        $.each(editable_inputs, function(i, input){
+            var current_value = $(input).parent().attr('data-current-value');
+            $(input).parent().text(current_value);
+        });
+        $('.edit-transaction-data').removeClass('d-none');
+        $('.update-transaction-buttons').addClass('d-none');
+
+    });
+
+    $('.edit-access-data').on('click', function(e){
+        e.preventDefault();
+        var $this_button = $(this);
+        set_loading_button($this_button, formipay_order_details_page.order_detail.edit_button_loading_text);
+
+        var current_method = $('li.access-method').attr('data-access-method');
+        $('li.access-method').find('p').after(`
+            <select name="access_method" id="access_method" class="form-select w-100 rounded border border-secondary-subtle" data-order-id="${$('#order_id').val()}" style="max-width: unset;">
+                <option value="magic_link" ${(current_method == 'magic_link') ? 'selected' : ''}>${formipay_order_details_page.order_detail.pass_method.magic_link}</option>
+                <option value="static_password" ${(current_method == 'static_password') ? 'selected' : ''}>${formipay_order_details_page.order_detail.pass_method.static_password}</option>
+            </select>    
+        `);
+        $('#access_method').trigger('change');
+        $('li.access-method').find('p').addClass('d-none');
+        remove_loading_button($this_button);
+        $('.edit-access-data').addClass('d-none');
+        $('.update-access-buttons').removeClass('d-none');
+    });
+
+    $(document).on('change', '#access_method', function(){
+        var access_password_li = $(this).closest('li').siblings('.access-password');
+        if($(this).val() == 'static_password'){
+            var password = access_password_li.attr('data-access-password');
+            access_password_li.removeClass('d-none');
+            access_password_li.find('p').after(`
+                <input type="text" id="access_password" class="form-control w-100 rounded border border-secondary-subtle" value="${ password}">
+            `);
+            access_password_li.find('p').addClass('d-none');
+        }else{
+            access_password_li.addClass('d-none');
+            access_password_li.find('input').remove();
+        }
+    });
+
+    function normalize_access_data_card() {
+        var accessMethod = $('li.access-method').attr('data-access-method');
+        var accessPassword = $('li.access-password').attr('data-access-password');
+        $('li.access-method select').remove();
+        $('li.access-method p').removeClass('d-none');
+        $('.edit-access-data').removeClass('d-none');
+        $('.update-access-buttons').addClass('d-none');
+        if( accessMethod == 'magic_link'){
+            $('li.access-password').addClass('d-none');
+        }
+        $('li.access-method p').text(ucWords(accessMethod)).removeClass('d-none');
+        $('li.access-password p').text(ucWords(accessPassword)).removeClass('d-none');
+        $('li.access-password input').remove();
+    }
+
+    $('.cancel-access-data').on('click', function(e){
+        e.preventDefault();
+        normalize_access_data_card();
+    });
+
+    $('.update-access-data').on('click', function(e){
+        e.preventDefault();
+
+        var $this_button = $(this);
+        var this_method = $('#access_method').val();
+        var this_password = $('#access_password').val()
+
+        $.ajax({
+            type: 'post',
+            url: formipay_order_details_page.ajax_url,
+            data: {
+                action: 'formipay_update_digital_access',
+                order_id: formipay_order_details_page.order_id,
+                method: this_method,
+                password: this_password,
+                _wpnonce: formipay_order_details_page.nonce
+            },
+            beforeSend: function() {
+                set_loading_button($this_button, formipay_order_details_page.order_detail.update_button_loading_text);
+            },
+            success: function(res){
+                remove_loading_button($this_button);
+                if(res.success){
+                    $('li.access-method').attr('data-access-method', this_method)
+                    if(this_method == 'static_password'){
+                        $('li.access-password').attr('data-access-password', this_password)
+                    }
+                    Swal.fire({
+                        html: res.data.message,
+                        icon: 'success'
+                    });
+                }else{
+                    Swal.fire({
+                        html: res.data.message,
+                        icon: 'error'
+                    });
+                }
+                normalize_access_data_card();
+            }
+        });
+
+    });
+
+    $(document).on('click', '.formipay-copy-button', function(e) {
+        e.preventDefault();
+        var $this = $(this);
+        var copiedtext = $(this).attr("data-copy-value");
+        if (navigator.clipboard) {
+            navigator.clipboard.writeText(copiedtext)
+                .then(() => {
+                    $this.html('<i class="bi bi-check-circle-fill"></i> '+$this.attr('data-copied-text'));
+                    setTimeout(() => {
+                        $this.html('<i class="bi bi-copy"></i> '+$this.attr('data-copy-text'));
+                    }, 1200);
+                })
+                .catch((error) => {
+                    $this.html('<i class="bi bi-exclamation-circle-fill"></i> '+$this.attr('data-not-copied-text'));
+                    setTimeout(() => {
+                        $this.html('<i class="bi bi-copy"></i> '+$this.attr('data-copy-text'));
+                    }, 1200);
+                });
+        } else {
+            $this.html('<i class="bi bi-check-circle-fill"></i> '+$this.attr('data-not-copied-text'));
+            setTimeout(() => {
+                $this.html('<i class="bi bi-copy"></i> '+$this.attr('data-copy-text'));
+            }, 1200);
+        }
+
+    });
+
+});

admin/assets/js/admin-orders.js

@@ -0,0 +1,256 @@
+document.addEventListener('DOMContentLoaded', function () {
+    const formChoices = new Choices('#products', {
+        searchEnabled: true,
+        searchChoices: false, // Prevent Choices.js from filtering the local list
+        searchResultLimit: 10, // Optional: Limit visible results
+        placeholder: true,
+        placeholderValue: formipay_orders_page.filter_form.products.placeholder,
+        noResultsText: formipay_orders_page.filter_form.products.noresult_text,
+        itemSelectText: '',
+    });
+
+    const currencyChoices = new Choices('#currencies', {
+        searchEnabled: true,
+        searchChoices: false, // Prevent Choices.js from filtering the local list
+        searchResultLimit: 10, // Optional: Limit visible results
+        placeholder: true,
+        placeholderValue: formipay_orders_page.filter_form.currencies.placeholder,
+        noResultsText: formipay_orders_page.filter_form.currencies.noresult_text,
+        itemSelectText: '',
+        allowHTML: true
+    });
+
+    const searchInputs = document.querySelectorAll('.choices__input--cloned');
+    let typingTimer;
+
+    searchInputs.forEach((searchInput) => {
+        searchInput.addEventListener('input', function () {
+            const query = searchInput.value;
+    
+            if (query.length >= 3) {
+                clearTimeout(typingTimer);
+                typingTimer = setTimeout(() => {
+                    // Find the wrapper (e.g., .product or .currency)
+                    const parentWrapper = searchInput.closest('.product, .currency');
+                    let searchType = ''; // Initialize search type
+    
+                    // Determine the type based on the parent wrapper's class
+                    if (parentWrapper) {
+                        if (parentWrapper.classList.contains('product')) {
+                            searchType = 'form';
+                        } else if (parentWrapper.classList.contains('currency')) {
+                            searchType = 'currency';
+                        }
+                    }
+    
+                    // Fetch choices with the determined type
+                    fetchChoices(query, searchType);
+                }, 300); // Add a debounce delay
+            }
+        });
+    });    
+
+    function fetchChoices(query, type) {
+        fetch(formipay_orders_page.ajax_url, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
+            },
+            body: new URLSearchParams({
+                action: 'formipay_orders_get_choices',
+                search: query,
+                type: type, // Pass the type to the server,
+                _wpnonce: formipay_orders_page.nonce
+            }),
+        })
+        .then((response) => response.json())
+        .then((data) => {
+            const currentChoices = type === 'form' ? formChoices : currencyChoices;
+
+            currentChoices.clearChoices();
+            currentChoices.setChoices(data, 'value', 'label', true);
+        })
+        .catch((error) => console.error('Error:', error));
+    }
+
+    document.getElementById('reset-filter').addEventListener('click', function(){
+        formChoices.removeActiveItems();
+        currencyChoices.removeActiveItems();
+        
+        const input = document.getElementById('order_id');
+        const event = new Event('change', { bubbles: true });
+
+        input.value = '';
+        input.dispatchEvent(event);
+    });
+});
+
+
+jQuery(function($){
+
+    let formipay_table_grid = new gridjs.Grid({
+        server: {
+            url: formipay_orders_page.ajax_url+'?action=formipay-tabledata-orders&order_status='+document.getElementById('post_status').value+'&product='+document.getElementById('products').value+'&currency='+document.getElementById('currencies').value+'&order_id='+document.getElementById('order_id').value+'&_wpnonce='+formipay_orders_page.nonce,
+            then: data => {
+                
+                if(data.posts_report){
+                    processPostsReport(data.posts_report);
+                }
+
+                return data.results.map(
+                    order => [order.ID, order.ID, order.date, order.form, order.total, order.payment_gateway, order.status]
+                );
+            },
+            total: data => data.total
+        },
+        columns: [
+            {
+                id: 'checkbox',
+                name: gridjs.html(`<input type="checkbox" id="select-all-rows">`),
+                width: '50px',
+                formatter: (_, row) => gridjs.html(
+                    `<input type="checkbox" class="formipay-row-checkbox" data-id="${row.cells[0].data}">`
+                )
+            },
+            {
+                name: formipay_orders_page.columns.id,
+                width: '75px'
+            },
+            {
+                name: formipay_orders_page.columns.date,
+                formatter: (_, row) => gridjs.html('<span>' + _.split(' ').join('</span><br><span style="font-size: smaller;">') + '</span>')
+            },
+            {
+                name: formipay_orders_page.columns.form,
+                formatter: (_, row) => gridjs.html(`
+                    <b>${_}</b><br>
+                    <span class="post-action" style="visibility: hidden;">
+                    <a href="${formipay_orders_page.site_url}/wp-admin/admin.php?page=formipay-orders&order_id=${row.cells[0].data}">details</a> | <a href="#" class="delete-order" data-id="${row.cells[0].data}">delete</a>
+                    </span>
+                `)
+            },
+            {
+                name: formipay_orders_page.columns.total,
+                formatter: (_, row) => gridjs.html(`
+                    <span class="grand_total">
+                        <span class="currency">
+                            <img src="${_.flag}" height="18">
+                            ${_.name}
+                        </span>
+                        <span class="the-total">${_.value}</span>
+                    </span>
+                `)
+            },
+            formipay_orders_page.columns.payment_gateway,
+            {
+                name: formipay_orders_page.columns.status,
+                formatter: (status, row) => gridjs.html(`<span class="status-label ${status}">${status}</span>`)
+            }
+        ],
+        pagination: {
+            limit: document.getElementById('limit').value,
+            server: {
+                url: (prev, page, limit) => `${prev}&limit=${limit}&offset=${page * limit}`
+            },
+            summary: false
+        },
+        className: {
+            table: 'formipay-grid-table'
+        }
+    }).render(document.getElementById('formipay-orders'));
+
+    var $tableContainer = $('.formipay-grid-table');
+    var $deleteBtn = $('#formipay-delete-selected');
+
+    function updateDeleteButtonVisibility() {
+        if ($tableContainer.find('.formipay-row-checkbox:checked').length > 0) {
+            $deleteBtn.show();
+        } else {
+            $deleteBtn.hide();
+        }
+    }
+
+    // Handle row and "select all" checkbox changes
+    $tableContainer.on('change', '.formipay-row-checkbox', function() {
+        updateDeleteButtonVisibility();
+    });
+
+    // Handle row and "select all" checkbox changes
+    $tableContainer.on('change', '#select-all-rows', function() {
+        const is_checked = $(this).is(':checked');
+        $tableContainer.find('.formipay-row-checkbox').prop('checked', is_checked);
+        updateDeleteButtonVisibility();
+    });
+
+    // Handle delete button click
+    $deleteBtn.on('click', function() {
+        var selectedIds = $tableContainer.find('.formipay-row-checkbox:checked').map(function() {
+            return $(this).data('id');
+        }).get();
+
+        if (selectedIds.length > 0) {
+            Swal.fire({
+                icon: 'info',
+                html: formipay_orders_page.modal.bulk_delete.question,
+                showCancelButton: true,
+                confirmButtonText: formipay_orders_page.modal.bulk_delete.confirmButton,
+                cancelButtonText: formipay_orders_page.modal.bulk_delete.cancelButton
+            }).then((result) => {
+                /* Read more about isConfirmed, isDenied below */
+                if (result.isConfirmed) {
+                    $.ajax({
+                        type: 'post',
+                        url: formipay_orders_page.ajax_url,
+                        data: {
+                            action: 'formipay-bulk-delete-access-item',
+                            ids: selectedIds,
+                            _wpnonce: formipay_orders_page.nonce
+                        },
+                        success: function (res) {
+                            Swal.fire({
+                                title: res.data.title,
+                                html: res.data.message,
+                                icon: res.data.icon
+                            });
+                            formipay_table_grid.forceRender();
+                            $tableContainer.find('.formipay-row-checkbox').prop('checked', false);
+                            updateDeleteButtonVisibility();
+                            refresh_table_with_filter();
+                        }
+                    });
+                }
+            });
+        }
+    });
+
+    function refresh_table_with_filter() {
+        formipay_table_grid.updateConfig({
+            server: {
+                url: formipay_orders_page.ajax_url+'?action=formipay-tabledata-orders&order_status='+document.getElementById('post_status').value+'&product='+document.getElementById('products').value+'&currency='+document.getElementById('currencies').value+'&order_id='+document.getElementById('order_id').value+'&_wpnonce='+formipay_orders_page.nonce,
+                then: data => data.results.map(
+                    order => [order.ID, order.ID, order.date, order.form, order.total, order.payment_gateway, order.status]
+                ),
+                total: data => data.total
+            },
+            pagination: {
+                limit: document.getElementById('limit').value,
+                server: {
+                    url: (prev, page, limit) => `${prev}&limit=${limit}&offset=${page * limit}`
+                },
+                summary: false
+            },
+        }).forceRender();
+    }
+
+    $('.form-tool, #post_status, #products, #currencies, #order_id').on('change', function(){
+        refresh_table_with_filter();
+    });
+
+    $(document).on('mouseover', 'td[data-column-id=form]', function(){
+        $(this).find('.post-action').css('visibility', 'visible');
+    });
+    $(document).on('mouseleave', 'td[data-column-id=form]', function(){
+        $(this).find('.post-action').css('visibility', 'hidden');
+    });
+
+});

admin/assets/js/admin-pages.js

@@ -0,0 +1,69 @@
+function numberFormat(nStr) {
+    nStr = parseFloat(nStr).toFixed(2);
+    var x = nStr.split('.');
+    var x1 = x[0];
+    var x2 = x.length > 1 ? '.' + x[1] : '';
+    var rgx = /(\d+)(\d{3})/;
+    while (rgx.test(x1)) {
+        x1 = x1.replace(rgx, '$1' + ',' + '$2');
+    }
+    return x1 + x2;
+}
+
+function processPostsReport(data) {
+    Object.keys(data).forEach(function(status) {
+        // Update the text of elements matching the class
+        var elements = document.querySelectorAll('.' + status + '-post-count');
+        elements.forEach(function(element) {
+            element.textContent = ' (' + data[status] + ')';
+        });
+
+        // Handle the 'trash' status specifically
+        if (status === 'trash' && data[status] > 0) {
+            var wrapper = document.querySelector('.post-status-wrapper');
+            if (wrapper) {
+                wrapper.innerHTML += ' | <a data-value="trash">Trash</a><span class="draft-post-count"> (' + data[status] + ')</span>';
+            }
+        }
+    });
+}
+
+jQuery(function($){
+    $('.post-status-wrapper a').on('click', function(e){
+        e.preventDefault();
+        $('.post-status-wrapper a').removeAttr('data-active');
+        $(this).attr('data-active', 'true');
+        $('#post_status').val($(this).data('value')).trigger('change');
+    });
+});
+
+(function() {
+    var supportsPassive = false;
+    try {
+      var opts = Object.defineProperty({}, 'passive', {
+        get: function() {
+          supportsPassive = true;
+        }
+      });
+      window.addEventListener("testPassive", null, opts);
+      window.removeEventListener("testPassive", null, opts);
+    } catch (e) {}
+  
+    if (!supportsPassive) return;
+  
+    var origAddEventListener = EventTarget.prototype.addEventListener;
+    EventTarget.prototype.addEventListener = function(type, listener, options) {
+      // Only patch touchstart and touchmove if options is not explicitly passive
+      if (
+        (type === 'touchstart' || type === 'touchmove') &&
+        (options === undefined || options === false || (typeof options === 'object' && !options.passive))
+      ) {
+        options = options || {};
+        if (typeof options === 'object') {
+          options.passive = true;
+        }
+      }
+      return origAddEventListener.call(this, type, listener, options);
+    };
+  })();
+  

admin/assets/js/admin-product-editor.js

@@ -0,0 +1,359 @@
+jQuery(function ($) {
+
+    $('a[href="admin.php?page=formipay-products"]').addClass('current').closest('li').addClass('current');
+
+    function autoset_variation_name() {
+        var repeater_single = $('.product_variation_attributes.repeater [parent_repeater="parent"] > .wpcfto-field-content > .wpcfto-repeater-single');
+        $.each(repeater_single, function (key, parent) {
+            var repeater_child = $(parent).find('[field_native_name="product_variation_attributes"]');
+            var attribute_name = repeater_child.find(`[name="product_variation_attributes_${key}_attribute_name"]`).val();
+            var attribute_type = repeater_child.find(`[name="product_variation_attributes_${key}_attribute_type"]`).val();
+            var repeater_child_single = repeater_child.find('.wpcfto-repeater-single');
+            $.each(repeater_child_single, function (index, child) {
+                var label_field = $(`input[name="product_variation_attributes_${key}_attribute_variations_${index}_variation_label"]`);
+                var name_field = $(`input[name="product_variation_attributes_${key}_attribute_variations_${index}_variation_name"]`);
+                var color_field = $(`input[name="product_variation_attributes_${key}_attribute_variations_${index}_variation_color"]`);
+                var color_field_row = color_field.closest('.wpcfto-repeater-field');
+                if (attribute_type == 'color') {
+                    color_field_row.show();
+                } else {
+                    color_field_row.hide();
+                }
+            });
+        });
+    }
+
+    $(document).on('change blur', '[field_native_name_inner="variation_label"] input', function () {
+        autoset_variation_name();
+    });
+
+    $(document).on('click', '.stm_metaboxes_grid .stm_metaboxes_grid__inner .wpcfto-repeater .addArea', function () {
+        autoset_variation_name();
+    });
+
+    var onMetaboxLoaded = setInterval(() => {
+        var repeater_single = $('.product_variation_attributes.repeater [parent_repeater="parent"] > .wpcfto-field-content > .wpcfto-repeater-single');
+        if (repeater_single.length > 0) {
+            autoset_variation_name();
+            clearInterval(onMetaboxLoaded);
+        }
+    }, 250);
+
+    var waitForTable = setInterval(() => {
+        if ($('#product-variables-table').length > 0) {
+            clearInterval(waitForTable);
+
+            // --- PERBAIKAN UTAMA DI SINI ---
+            Vue.component('price-input', {
+                // Gunakan 'value' sebagai prop, sesuai konvensi v-model Vue 2
+                props: {
+                    value: [Number, String], // Diubah dari modelValue
+                    currencySymbol: String,
+                    currencyDecimalDigits: {
+                        type: Number,
+                        default: 2
+                    },
+                    disabled: {
+                        type: Boolean,
+                        default: false
+                    }
+                },
+                data() {
+                    return {
+                        inputValue: this.value // Diubah dari modelValue
+                    };
+                },
+                watch: {
+                    // Amati perubahan pada prop 'value'
+                    value(newValue) { // Diubah dari modelValue
+                        this.inputValue = newValue;
+                    }
+                },
+                methods: {
+                    onInput(e) {
+                        const value = e.target.value;
+                        this.inputValue = value;
+                        // Pancarkan event 'input', sesuai konvensi v-model Vue 2
+                        this.$emit('input', value); // Diubah dari 'update:modelValue'
+                    }
+                },
+                computed: {
+                    stepValue() {
+                        return Math.pow(10, -this.currencyDecimalDigits);
+                    }
+                },
+                template: `
+                  <div class="price-input-wrapper">
+                    <span class="price-currency">{{ currencySymbol }}</span>
+                    <input type="number" :value="inputValue" @input="onInput" :step="stepValue" placeholder="0" :disabled="disabled" />
+                  </div>
+                `
+            });
+            // --- AKHIR DARI PERBAIKAN ---
+
+            new Vue({
+                el: '#product-variables-table',
+                data() {
+                    return {
+                        tableRows: [],
+                        deletedKeys: [],
+                        isPhysical: window.product_details?.product_is_physical || false,
+                        pricingMethod: window.product_details?.product_pricing_method || 'auto',
+                        manualPrices: [],
+                        productHasVariation: window.product_details?.product_has_variation || false,
+                        jsonValue: '[]',
+                        attributeRepeaterWatcher: null,
+                        manualPricesWatcher: null,
+                        _debounceTimer: null,
+                        productType: window.product_details?.product_type || 'digital',
+                        currencyDecimalDigits: parseInt(window.product_details?.default_currency_decimal_digits) || 2,
+                        currencySymbol: window.product_details?.default_currency_symbol || '$'
+                    };
+                },
+                async mounted() {
+                    await this.initializeOrClearTable();
+                    this.setupAttributeRepeaterSync();
+                    this.setupManualPricesSync();
+                    const typeRadios = document.querySelectorAll('input[name="product_type"]');
+                    typeRadios.forEach(radio => {
+                        radio.addEventListener('change', e => {
+                            this.productType = e.target.value;
+                            this.isPhysical = e.target.value === 'physical';
+                        });
+                    });
+                    const pricingRadios = document.querySelectorAll('input[name="product_pricing_method"]');
+                    pricingRadios.forEach(radio => {
+                        radio.addEventListener('change', async e => {
+                            this.pricingMethod = e.target.value;
+                            await this.rebuildTable();
+                        });
+                    });
+                    const hasVariationToggle = document.querySelector('input[name="product_has_variation"]');
+                    if (hasVariationToggle) {
+                        hasVariationToggle.addEventListener('change', async (e) => {
+                            this.productHasVariation = e.target.checked;
+                            await this.initializeOrClearTable();
+                        });
+                    }
+                },
+                beforeDestroy() {
+                    if (this.attributeRepeaterWatcher) {
+                        this.attributeRepeaterWatcher.disconnect();
+                    }
+                    if (this.manualPricesWatcher) {
+                        this.manualPricesWatcher.disconnect();
+                    }
+                },
+                methods: {
+                    async initializeOrClearTable() {
+                        if (!this.productHasVariation) {
+                            this.tableRows = [];
+                            this.updateJson();
+                            return;
+                        }
+                        await this.syncManualPrices();
+                        await this.loadProductVariables();
+                    },
+                    _ensureRowDataStructure(row) {
+                        if (this.pricingMethod === 'manual') {
+                            if (typeof row.prices === 'undefined') {
+                                row.prices = JSON.parse(JSON.stringify(this.manualPrices));
+                                delete row.price;
+                                delete row.sale;
+                            }
+                        } else {
+                            if (typeof row.price === 'undefined') {
+                                row.price = 0;
+                                row.sale = 0;
+                                delete row.prices;
+                            }
+                        }
+                        if (typeof row.expanded === 'undefined') {
+                            row.expanded = false;
+                        }
+                        return row;
+                    },
+                    async loadProductVariables() {
+                        if (!this.productHasVariation) {
+                            this.tableRows = [];
+                            this.updateJson();
+                            return;
+                        }
+                        const postId = window.formipayProductId || $('input[name="post_ID"]').val();
+                        if (!postId) {
+                            await this.buildFromAttributes();
+                            return;
+                        }
+                        try {
+                            const res = await $.ajax({
+                                url: ajaxurl,
+                                method: 'POST',
+                                data: {
+                                    action: 'get_product_variables',
+                                    post_id: postId
+                                }
+                            });
+                            if (res.success && Array.isArray(res.data) && res.data.length) {
+                                this.tableRows = res.data.map(row => this._ensureRowDataStructure(row));
+                                this.deletedKeys = [];
+                                this.updateJson();
+                            } else {
+                                await this.buildFromAttributes();
+                            }
+                        } catch {
+                            await this.buildFromAttributes();
+                        }
+                    },
+                    async buildFromAttributes() {
+                        if (!this.productHasVariation) {
+                            this.tableRows = [];
+                            this.updateJson();
+                            return;
+                        }
+                        try {
+                            const attributes = await this.getAttributeRepeaterData();
+                            if (!attributes.length) {
+                                this.tableRows = [];
+                                this.updateJson();
+                                return;
+                            }
+                            const combinations = this.getAllCombinations(attributes);
+                            const filtered = combinations.filter(c => !this.deletedKeys.includes(c.key));
+                            const newRows = filtered.map(c => {
+                                const existing = this.tableRows.find(r => r.key === c.key);
+                                if (existing) {
+                                    this._ensureRowDataStructure(existing);
+                                    return Object.assign(existing, {
+                                        name: c.label
+                                    });
+                                }
+                                let newRowData = {
+                                    key: c.key,
+                                    name: c.label,
+                                    stock: '',
+                                    weight: 0,
+                                    active: true,
+                                };
+                                return this._ensureRowDataStructure(newRowData);
+                            });
+                            this.tableRows = newRows;
+                            this.updateJson();
+                        } catch (e) {
+                            console.error("Error building from attributes:", e);
+                            this.tableRows = [];
+                            this.updateJson();
+                        }
+                    },
+                    getAttributeRepeaterData() {
+                        return new Promise((resolve, reject) => {
+                            let attempts = 0;
+                            const maxAttempts = 100;
+                            const interval = setInterval(() => {
+                                const el = $('#variation-product_variation_attributes');
+                                if (el.length && el.val()) {
+                                    try {
+                                        const data = JSON.parse(el.val());
+                                        clearInterval(interval);
+                                        resolve(Array.isArray(data) ? data : []);
+                                    } catch {
+                                        clearInterval(interval);
+                                        reject(new Error('Invalid JSON in attribute repeater'));
+                                    }
+                                } else if (++attempts >= maxAttempts) {
+                                    clearInterval(interval);
+                                    reject(new Error('Attribute repeater data not found'));
+                                }
+                            }, 50);
+                        });
+                    },
+                    getAllCombinations(attributes) {
+                        const attrVars = attributes
+                            .map(attr => (attr.attribute_variations || []).map(v => ({
+                                label: v.variation_label
+                            })))
+                            .filter(arr => arr.length > 0);
+                        if (!attrVars.length) return [];
+                        const combine = (arrs) => arrs.reduce((a, b) => a.flatMap(d => b.map(e => [].concat(d, e))));
+                        const combos = combine(attrVars);
+                        return combos.map(combo => {
+                            const labels = Array.isArray(combo) ? combo.map(c => c.label) : [combo.label];
+                            return {
+                                key: labels.join('||'),
+                                label: labels.join(' - ')
+                            };
+                        });
+                    },
+                    setupAttributeRepeaterSync() {
+                        const target = document.getElementById('variation-product_variation_attributes');
+                        if (!target) return;
+                        const observer = new MutationObserver(() => {
+                            clearTimeout(this._debounceTimer);
+                            this._debounceTimer = setTimeout(() => this.buildFromAttributes(), 300);
+                        });
+                        observer.observe(target, {
+                            attributes: true,
+                            attributeFilter: ['value']
+                        });
+                        this.attributeRepeaterWatcher = observer;
+                    },
+                    async syncManualPrices() {
+                        const el = document.getElementById('general-product_prices');
+                        if (el && el.value) {
+                            try {
+                                const pricesData = JSON.parse(el.value);
+                                this.manualPrices = Array.isArray(pricesData) ? pricesData : [];
+                            } catch (e) {
+                                this.manualPrices = [];
+                            }
+                        } else {
+                            this.manualPrices = [];
+                        }
+                    },
+                    setupManualPricesSync() {
+                        const target = document.getElementById('general-product_prices');
+                        if (!target) return;
+                        const observer = new MutationObserver(async () => {
+                            await this.syncManualPrices();
+                            if (this.pricingMethod === 'manual') {
+                                this.tableRows.forEach(row => {
+                                    const newPricesFromRepeater = this.manualPrices;
+                                    let reconciledPrices = row.prices.filter(existingPrice =>
+                                        newPricesFromRepeater.some(newPrice => newPrice.currency === existingPrice.currency)
+                                    );
+                                    newPricesFromRepeater.forEach(newPrice => {
+                                        const isAlreadyThere = reconciledPrices.some(p => p.currency === newPrice.currency);
+                                        if (!isAlreadyThere) {
+                                            reconciledPrices.push(JSON.parse(JSON.stringify(newPrice)));
+                                        }
+                                    });
+                                    row.prices = reconciledPrices;
+                                });
+                            }
+                            this.updateJson();
+                        });
+                        observer.observe(target, {
+                            attributes: true,
+                            attributeFilter: ['value']
+                        });
+                        this.manualPricesWatcher = observer;
+                    },
+                    updateJson() {
+                        this.jsonValue = JSON.stringify(this.tableRows);
+                    },
+                    async rebuildTable() {
+                        await this.initializeOrClearTable();
+                    }
+                },
+                watch: {
+                    tableRows: {
+                        handler() {
+                            this.updateJson();
+                        },
+                        deep: true
+                    }
+                }
+            });
+        }
+    }, 250);
+
+});

admin/assets/js/admin-product-editor.jsbak

@@ -0,0 +1,217 @@
+jQuery(function($){
+
+    $('a[href="admin.php?page=formipay-products"]').addClass('current').closest('li').addClass('current');
+    
+    function autoset_variation_name() {
+        
+        var repeater_single = $('.product_variation_attributes.repeater [parent_repeater="parent"] > .wpcfto-field-content > .wpcfto-repeater-single');
+        $.each(repeater_single, function(key, parent){
+            var repeater_child = $(parent).find('[field_native_name="product_variation_attributes"]');
+            var attribute_name = repeater_child.find(`[name="product_variation_attributes_${key}_attribute_name"]`).val();
+            var attribute_type = repeater_child.find(`[name="product_variation_attributes_${key}_attribute_type"]`).val();
+            var repeater_child_single = repeater_child.find('.wpcfto-repeater-single');
+            $.each(repeater_child_single, function(index, child){
+                var label_field = $(`input[name="product_variation_attributes_${key}_attribute_variations_${index}_variation_label"]`);
+                var name_field = $(`input[name="product_variation_attributes_${key}_attribute_variations_${index}_variation_name"]`);
+                var color_field = $(`input[name="product_variation_attributes_${key}_attribute_variations_${index}_variation_color"]`);
+                var color_field_row = color_field.closest('.wpcfto-repeater-field');
+
+                if(attribute_type == 'color'){
+                    color_field_row.show();
+                }else{
+                    color_field_row.hide();
+                }
+
+            });
+        });
+    
+    }
+
+    $(document).on('change blur', '[field_native_name_inner="variation_label"] input', function(){
+        autoset_variation_name();
+    });
+
+    $(document).on('click', '.stm_metaboxes_grid .stm_metaboxes_grid__inner .wpcfto-repeater .addArea', function() {
+        autoset_variation_name();
+    });
+    
+    var onMetaboxLoaded = setInterval(() => {
+        var repeater_single = $('.product_variation_attributes.repeater [parent_repeater="parent"] > .wpcfto-field-content > .wpcfto-repeater-single');
+        if(repeater_single.length > 0){
+            autoset_variation_name();
+            clearInterval(onMetaboxLoaded);
+        }
+    }, 250);
+
+    var waitForTable = setInterval(() => {
+      if ($('#product-variables-table').length > 0) {
+          clearInterval(waitForTable);
+  
+          new Vue({
+              el: '#product-variables-table',
+              data() {
+                  return {
+                      tableRows: [],
+                      deletedKeys: [],
+                      isPhysical: window.product_details?.product_is_physical || false,
+                      jsonValue: '[]',
+                      attributeRepeaterWatcher: null,
+                      _debounceTimer: null,
+                      productType: window.product_details?.product_type || 'digital', // default, will update on mount
+                      productCurrencyRaw: window.product_details?.product_currency || 'USD:::United States dollar:::$',
+                      currencyDecimalDigits: parseInt(window.product_details?.product_currency_decimal_digits) || 2,
+                      currencyDecimalSymbol: window.product_details?.product_currency_decimal_symbol || '.',
+                      currencyThousandSeparator: window.product_details?.product_currency_thousand_separator || ',',
+                  };
+              },
+              async mounted() {
+
+                  await this.loadProductVariables();
+                  this.setupAttributeRepeaterSync();
+  
+                  // Listen for changes on product_type radios to update reactive data
+                  const radios = document.querySelectorAll('input[name="product_type"]');
+                  radios.forEach(radio => {
+                      radio.addEventListener('change', e => {
+                          this.productType = e.target.value;
+                          this.isPhysical = e.target.value == 'physical';
+                          this.rebuildTable(); // Rebuild the table on type change
+                      });
+                  });
+  
+                  // Listen for changes on product_currency select
+                  const currencySelect = document.querySelector('select[name="product_currency"]');
+                  if (currencySelect) {
+                      currencySelect.addEventListener('change', (e) => {
+                          this.productCurrencyRaw = e.target.value;
+                      });
+                  }
+  
+                  // Initialize currency values
+                  this.productCurrencyRaw = window.product_details?.product_currency || 'USD:::United States dollar:::$';
+              },
+              beforeDestroy() {
+                  if (this.attributeRepeaterWatcher) {
+                      this.attributeRepeaterWatcher.disconnect();
+                  }
+              },
+              methods: {
+                  async loadProductVariables() {
+                      const postId = window.formipayProductId || $('input[name="post_ID"]').val();
+                      if (!postId) {
+                          await this.buildFromAttributes();
+                          return;
+                      }
+                      try {
+                          const res = await $.ajax({
+                              url: ajaxurl,
+                              method: 'POST',
+                              data: { action: 'get_product_variables', post_id: postId }
+                          });
+                          if (res.success && Array.isArray(res.data) && res.data.length) {
+                              this.tableRows = res.data;
+                              this.deletedKeys = [];
+                              this.updateJson();
+                          } else {
+                              await this.buildFromAttributes();
+                          }
+                      } catch {
+                          await this.buildFromAttributes();
+                      }
+                  },
+                  async buildFromAttributes() {
+                      try {
+                          const attributes = await this.getAttributeRepeaterData();
+                          if (!attributes.length) {
+                              this.tableRows = [];
+                              this.updateJson();
+                              return;
+                          }
+                          const combinations = this.getAllCombinations(attributes);
+                          const filtered = combinations.filter(c => !this.deletedKeys.includes(c.key));
+                          const newRows = filtered.map(c => {
+                              const existing = this.tableRows.find(r => r.key === c.key);
+                              return existing ? Object.assign(existing, { name: c.label }) : {
+                                  key: c.key,
+                                  name: c.label,
+                                  stock: '',
+                                  price: 0,
+                                  sale: 0,
+                                  weight: 0,
+                                  active: true,
+                              };
+                          });
+                          this.tableRows = newRows;
+                          this.updateJson();
+                      } catch (e) {
+                          this.tableRows = [];
+                          this.updateJson();
+                      }
+                  },
+                  getAttributeRepeaterData() {
+                      return new Promise((resolve, reject) => {
+                          let attempts = 0;
+                          const maxAttempts = 100;
+                          const interval = setInterval(() => {
+                              const el = $('#variation-product_variation_attributes');
+                              if (el.length && el.val()) {
+                                  try {
+                                      const data = JSON.parse(el.val());
+                                      clearInterval(interval);
+                                      resolve(data);
+                                  } catch {
+                                      clearInterval(interval);
+                                      reject(new Error('Invalid JSON in attribute repeater'));
+                                  }
+                              } else if (++attempts >= maxAttempts) {
+                                  clearInterval(interval);
+                                  reject(new Error('Attribute repeater data not found'));
+                              }
+                          }, 50);
+                      });
+                  },
+                  getAllCombinations(attributes) {
+                      if (!attributes.length) return [];
+                      const attrVars = attributes.map(attr =>
+                          (attr.attribute_variations || []).map(v => ({ label: v.variation_label }))
+                      ).filter(arr => arr.length > 0);
+                      if (!attrVars.length) return [];
+                      const combine = (arrs) => arrs.reduce((a, b) => a.flatMap(d => b.map(e => [].concat(d, e))));
+                      const combos = combine(attrVars);
+                      return combos.map(combo => {
+                          const labels = Array.isArray(combo) ? combo.map(c => c.label) : [combo.label];
+                          return { key: labels.join('||'), label: labels.join(' - ') };
+                      });
+                  },
+                  setupAttributeRepeaterSync() {
+                      const target = document.getElementById('variation-product_variation_attributes');
+                      if (!target) return;
+                      const observer = new MutationObserver(mutations => {
+                          for (const m of mutations) {
+                              if (m.type === 'attributes' && m.attributeName === 'value') {
+                                  clearTimeout(this._debounceTimer);
+                                  this._debounceTimer = setTimeout(() => this.buildFromAttributes(), 200);
+                              }
+                          }
+                      });
+                      observer.observe(target, { attributes: true, attributeFilter: ['value'] });
+                      this.attributeRepeaterWatcher = observer;
+                  },
+                  updateJson() {
+                      this.jsonValue = JSON.stringify(this.tableRows);
+                  },
+                  rebuildTable() {
+                      this.loadProductVariables();
+                  }
+              },
+              watch: {
+                  tableRows: {
+                      handler() { this.updateJson(); },
+                      deep: true
+                  }
+              }
+          });
+      }
+    }, 250);
+      
+});

admin/assets/js/admin-setting.js

@@ -0,0 +1,68 @@
+jQuery(function($){
+    $(document).on('click', '.show-instruction', function(){
+        $('.global-paypal-instruction').slideToggle();
+        $(this).text(function(i, text){
+            return text === 'Show Instruction' ? 'Hide Instruction' : 'Show Instruction';
+        });
+    });
+
+    $(document).on('click', '.formipay-connect-paypal', function(e) {
+        e.preventDefault();
+        
+        $.ajax({
+            url: formipay_admin_setting.ajax_url,
+            type: 'POST',
+            data: {
+                action: 'formipay_oneclick_connect',
+                nonce: formipay_admin_setting.nonce
+            },
+            beforeSend: function() {
+                $('#connect-status').html('<div class="notice notice-info"><p>Initiating PayPal connection...</p></div>');
+            },
+            success: function(response) {
+                if (response.success) {
+                    // Open PayPal auth in popup
+                    const popup = window.open(
+                        response.data.auth_url, 
+                        'paypal_oauth',
+                        'width=600,height=700,scrollbars=yes'
+                    );
+                    
+                    // Listen for message from popup
+                    window.addEventListener('message', function(event) {
+                        if (event.data.type === 'formipay-paypal-connect') {
+                            if (event.data.success) {
+                                $('#connect-status').html(`
+                                    <div class="notice notice-success">
+                                        <p>${event.data.message}</p>
+                                        <p>Webhook ID: ${event.data.webhook_id}</p>
+                                    </div>
+                                `);
+                            } else {
+                                $('#connect-status').html(`
+                                    <div class="notice notice-error">
+                                        <p>${event.data.message}</p>
+                                    </div>
+                                `);
+                            }
+                        }
+                    });
+                } else {
+                    $('#connect-status').html(`
+                        <div class="notice notice-error">
+                            <p>Connection failed: ${response.data}</p>
+                        </div>
+                    `);
+                }
+            },
+            error: function() {
+                $('#connect-status').html(`
+                    <div class="notice notice-error">
+                        <p>Connection failed: Server error</p>
+                    </div>
+                `);
+            }
+        });
+    });    
+    
+});

admin/assets/js/classic-editor.js

@@ -0,0 +1,30 @@
+jQuery(document).ready(function($) {
+    // Smooth toggle for postboxes
+    $('.postbox').each(function() {
+        $(this).on('click', '.hndle', function() {
+            $(this).next('.inside').slideToggle();
+        });
+    });
+
+    // Add class for better styling
+    $('#title').attr('placeholder', 'Enter title here...');
+    $('#publishing-action .spinner').html(`
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+            <rect width="6" height="14" x="1" y="4" fill="#0073aa">
+                <animate id="svgSpinnersBarsScaleFade0" fill="freeze" attributeName="y" begin="0;svgSpinnersBarsScaleFade1.end-0.25s" dur="0.75s" values="1;5" />
+                <animate fill="freeze" attributeName="height" begin="0;svgSpinnersBarsScaleFade1.end-0.25s" dur="0.75s" values="22;14" />
+                <animate fill="freeze" attributeName="opacity" begin="0;svgSpinnersBarsScaleFade1.end-0.25s" dur="0.75s" values="1;0.2" />
+            </rect>
+            <rect width="6" height="14" x="9" y="4" fill="#0073aa" opacity="0.4">
+                <animate fill="freeze" attributeName="y" begin="svgSpinnersBarsScaleFade0.begin+0.15s" dur="0.75s" values="1;5" />
+                <animate fill="freeze" attributeName="height" begin="svgSpinnersBarsScaleFade0.begin+0.15s" dur="0.75s" values="22;14" />
+                <animate fill="freeze" attributeName="opacity" begin="svgSpinnersBarsScaleFade0.begin+0.15s" dur="0.75s" values="1;0.2" />
+            </rect>
+            <rect width="6" height="14" x="17" y="4" fill="#0073aa" opacity="0.3">
+                <animate id="svgSpinnersBarsScaleFade1" fill="freeze" attributeName="y" begin="svgSpinnersBarsScaleFade0.begin+0.3s" dur="0.75s" values="1;5" />
+                <animate fill="freeze" attributeName="height" begin="svgSpinnersBarsScaleFade0.begin+0.3s" dur="0.75s" values="22;14" />
+                <animate fill="freeze" attributeName="opacity" begin="svgSpinnersBarsScaleFade0.begin+0.3s" dur="0.75s" values="1;0.2" />
+            </rect>
+        </svg>
+    `);
+});

admin/assets/js/formipay-wpmedia-modal.js

@@ -0,0 +1,69 @@
+jQuery(function($){
+
+    $( document ).on( 'click', '.open-media-modal', function( event ) {
+        
+        var gallery_items_frame;
+        const $el = $( this );
+
+        var target_field = $el.attr('data-target-field');
+        var target_id = $el.siblings('.'+target_field+'-id');
+        var target_url = $el.siblings('.'+target_field+'-url');
+        var image_preview = $el.siblings('.image-preview');
+        var selected = target_id.val();
+        var able_multiple = $el.attr('data-able-multiple');
+
+        event.preventDefault();
+
+        if ( gallery_items_frame ) {
+
+            // Select the attachment when the frame opens
+            gallery_items_frame.on( 'open', function() {
+                var selection = gallery_items_frame.state().get( 'selection' );
+                selection.reset( selected ? [ wp.media.attachment( selected ) ] : [] );
+            });
+
+            // Open the modal.
+            gallery_items_frame.open();
+
+            return;
+        }
+
+        // Create the media frame.
+        gallery_items_frame = wp.media.frames.gallery_items = wp.media({
+            // Set the title of the modal.
+            title: 'Choose or upload media',
+            button: {
+                text: 'Select'
+            },
+            states: [
+                new wp.media.controller.Library({
+                    title: 'Choose or upload media',
+                    filterable: 'all',
+                    multiple: able_multiple
+                })
+            ]
+        });
+
+        // Select the attachment when the frame opens
+        gallery_items_frame.on( 'open', function() {
+            var selection = gallery_items_frame.state().get( 'selection' );
+            selection.reset( selected ? [ wp.media.attachment( selected ) ] : [] );
+        });
+
+        gallery_items_frame.on( 'select', function() {
+			// We set multiple to false so only get one image from the uploader
+			attachment = gallery_items_frame.state().get('selection').first().toJSON();
+			// Do something with attachment.id and/or attachment.url here
+			target_url.val( attachment.url );
+			target_id.val( attachment.id );
+            // $el.find('.bi-image-alt').hide();
+            image_preview.html('<img src="'+attachment.url+'" width="150px">');
+            // $el.attr('data-id', attachment.id);
+		});
+
+        // Open the modal.
+        gallery_items_frame.open();
+
+    });
+
+});

admin/assets/js/page-access-items.js

@@ -0,0 +1,354 @@
+document.addEventListener('DOMContentLoaded', function () {
+    const formChoices = new Choices('#products', {
+        searchEnabled: true,
+        searchChoices: false, // Prevent Choices.js from filtering the local list
+        searchResultLimit: 10, // Optional: Limit visible results
+        placeholder: true,
+        placeholderValue: formipay_access_page.filter_form.products.placeholder,
+        noResultsText: formipay_access_page.filter_form.products.noresult_text,
+        itemSelectText: '',
+    });
+
+    const searchInput = document.querySelector('.choices__input--cloned');
+    let typingTimer;
+
+    searchInput.addEventListener('input', function () {
+        const query = searchInput.value;
+
+        if (query.length >= 3) {
+            clearTimeout(typingTimer);
+            typingTimer = setTimeout(() => {
+                fetchChoices(query);
+            }, 300); // Add a debounce delay
+        }
+    });
+
+    function fetchChoices(query) {
+        fetch(formipay_access_page.ajax_url, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
+            },
+            body: new URLSearchParams({
+                action: 'formipay_access_items_get_products',
+                search: query,
+                nonce: formipay_access_page.nonce
+            }),
+        })
+            .then((response) => response.json())
+            .then((data) => {
+                formChoices.clearChoices();
+                formChoices.setChoices( data, 'value', 'label', true);
+            })
+            .catch((error) => console.error('Error:', error));
+    }
+
+    document.getElementById('reset-filter').addEventListener('click', function(){
+        formChoices.removeActiveItems();
+        const event = new Event('change', { bubbles: true });
+
+        document.getElementById('orderby').value = 'ID';
+        document.getElementById('sort_by').value = 'desc';
+        document.getElementById('keyword').value = '';
+        document.getElementById('keyword').dispatchEvent(event);
+    });
+});
+
+jQuery(function($){
+
+    let formipay_table_grid = new gridjs.Grid({
+        server: {
+            url: formipay_access_page.ajax_url+'?action=formipay-tabledata-access-items&post_status='+document.getElementById('post_status').value+'&product='+document.getElementById('products').value+'&orderby='+document.getElementById('orderby').value+'&sort='+document.getElementById('sort_by').value+'&search='+document.getElementById('keyword').value+'&_wpnonce='+formipay_access_page.nonce,
+            then: data => {
+                
+                if(data.posts_report){
+                    processPostsReport(data.posts_report);
+                }
+
+                return data.results.map(
+                    access => [access.ID, access.ID, access.title, access.type, access.products, access.status]
+                );
+            },
+            total: data => data.total
+        },
+        columns: [
+            {
+                id: 'checkbox',
+                name: gridjs.html(`<input type="checkbox" id="select-all-rows">`),
+                width: '50px',
+                formatter: (_, row) => gridjs.html(
+                    `<input type="checkbox" class="formipay-row-checkbox" data-id="${row.cells[0].data}">`
+                )
+            },
+            {
+                name: formipay_access_page.columns.id,
+                width: '75px'
+            },
+            {
+                name: formipay_access_page.columns.title,
+                formatter: (_, row) => {
+                    var html = `
+                        <b>${_}</b><br>
+                        <span class="post-action" style="visibility: hidden;">
+                        <a href="${formipay_access_page.site_url}/wp-admin/post.php?post=${row.cells[0].data}&action=edit">edit</a> | <a href="#" class="delete-access" data-id="${row.cells[0].data}">delete</a> | <a href="#" class="duplicate-access" data-id="${row.cells[0].data}">duplicate</a>
+                        </span>
+                    `;
+                    return gridjs.html(html)
+                }
+            },
+            {
+                name: formipay_access_page.columns.type, 
+                formatter: (type, row) => {
+                    var html;
+                    if(type == 'Redirect'){
+                        html = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24">
+                                    <path fill="#277aff" d="M11 17H7q-2.075 0-3.537-1.463T2 12t1.463-3.537T7 7h4v2H7q-1.25 0-2.125.875T4 12t.875 2.125T7 15h4zm-3-4v-2h8v2zm5 4v-2h4q1.25 0 2.125-.875T20 12t-.875-2.125T17 9h-4V7h4q2.075 0 3.538 1.463T22 12t-1.463 3.538T17 17z" />
+                                </svg>${type}`;
+                    }else if(type == 'Download') {
+                        html = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24">
+                                    <path fill="#277aff" d="M11 12.15V6.1q-1.9.35-2.95 1.838T7 11h-.5q-1.45 0-2.475 1.025T3 14.5t1.025 2.475T6.5 18h12q1.05 0 1.775-.725T21 15.5t-.725-1.775T18.5 13H17v-2q0-1.2-.55-2.238T15 7V4.675q1.85.875 2.925 2.588T19 11q1.725.2 2.863 1.488T23 15.5q0 1.875-1.312 3.188T18.5 20h-12q-2.275 0-3.887-1.575T1 14.575q0-1.95 1.175-3.475T5.25 9.15q.425-1.8 2.125-3.425T11 4.1q.825 0 1.413.588T13 6.1v6.05l.9-.875q.275-.275.688-.275t.712.3q.275.275.275.7t-.275.7l-2.6 2.6q-.3.3-.7.3t-.7-.3l-2.6-2.6q-.275-.275-.287-.687T8.7 11.3q.275-.275.688-.288t.712.263zm1-1.1" />
+                                </svg>${type}`;
+                    }else if(type == 'Document') {
+                        html = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24">
+                                    <path fill="#277aff" d="M8 13h8v-2H8zm0 3h8v-2H8zm0 3h5v-2H8zm-2 3q-.825 0-1.412-.587T4 20V4q0-.825.588-1.412T6 2h8l6 6v12q0 .825-.587 1.413T18 22zm7-13V4H6v16h12V9zM6 4v5zv16z" />
+                                </svg>${type}`;
+                    }
+                    return gridjs.html(html)
+                }
+            },
+            {
+                name: formipay_access_page.columns.products,
+                formatter: (products, row) => {
+
+                    let html = '';
+
+                    // Loop through each product in the products array
+                    if(products.length > 0){
+                        products.forEach(product => {
+                            if (product) {
+                                html += `
+                                    <span class="product_related">
+                                        ${product}
+                                        </span>
+                                    </span>
+                                `;
+                            }
+                        });
+                    }
+
+                    return gridjs.html(html);
+
+                }
+            },
+            {
+                name: formipay_access_page.columns.status,
+                formatter: (_, row) => gridjs.html(`
+                    <span class="status-label ${_}">${_}</span>
+                `)
+            }  
+        ],
+        pagination: {
+            limit: 10,
+            server: {
+                url: (prev, page, limit) => `${prev}&limit=${limit}&offset=${page * limit}`
+            },
+            summary: false
+        },
+        className: {
+            table: 'formipay-grid-table'
+        }
+    }).render(document.getElementById('formipay-access-items'));
+
+    var $tableContainer = $('.formipay-grid-table');
+    var $deleteBtn = $('#formipay-delete-selected');
+
+    function updateDeleteButtonVisibility() {
+        if ($tableContainer.find('.formipay-row-checkbox:checked').length > 0) {
+            $deleteBtn.show();
+        } else {
+            $deleteBtn.hide();
+        }
+    }
+
+    // Handle row and "select all" checkbox changes
+    $tableContainer.on('change', '.formipay-row-checkbox', function() {
+        updateDeleteButtonVisibility();
+    });
+
+    // Handle row and "select all" checkbox changes
+    $tableContainer.on('change', '#select-all-rows', function() {
+        const is_checked = $(this).is(':checked');
+        $tableContainer.find('.formipay-row-checkbox').prop('checked', is_checked);
+        updateDeleteButtonVisibility();
+    });
+
+    // Handle delete button click
+    $deleteBtn.on('click', function() {
+        var selectedIds = $tableContainer.find('.formipay-row-checkbox:checked').map(function() {
+            return $(this).data('id');
+        }).get();
+
+        if (selectedIds.length > 0) {
+            Swal.fire({
+                icon: 'info',
+                html: formipay_access_page.modal.bulk_delete.question,
+                showCancelButton: true,
+                confirmButtonText: formipay_access_page.modal.bulk_delete.confirmButton,
+                cancelButtonText: formipay_access_page.modal.bulk_delete.cancelButton
+            }).then((result) => {
+                /* Read more about isConfirmed, isDenied below */
+                if (result.isConfirmed) {
+                    $.ajax({
+                        type: 'post',
+                        url: formipay_access_page.ajax_url,
+                        data: {
+                            action: 'formipay-bulk-delete-access-item',
+                            ids: selectedIds,
+                            _wpnonce: formipay_access_page.nonce
+                        },
+                        success: function (res) {
+                            Swal.fire({
+                                title: res.data.title,
+                                html: res.data.message,
+                                icon: res.data.icon
+                            });
+                            formipay_table_grid.forceRender();
+                            $tableContainer.find('.formipay-row-checkbox').prop('checked', false);
+                            updateDeleteButtonVisibility();
+                            refresh_table_with_filter();
+                        }
+                    });
+                }
+            });
+        }
+    });
+
+    function refresh_table_with_filter() {
+        formipay_table_grid.updateConfig({
+            server: {
+                url: formipay_access_page.ajax_url+'?action=formipay-tabledata-access-items&post_status='+document.getElementById('post_status').value+'&product='+document.getElementById('products').value+'&orderby='+document.getElementById('orderby').value+'&sort='+document.getElementById('sort_by').value+'&search='+document.getElementById('keyword').value,
+                then: data => data.results.map(
+                    access => [access.ID, access.ID, access.title, access.type, access.products, access.status]
+                ),
+                total: data => data.total
+            }
+        }).forceRender();
+    }
+
+    $('.form-tool, #post_status').on('change', function(){
+        refresh_table_with_filter();
+    });
+
+    $(document).on('mouseover', 'td[data-column-id=title]', function(){
+        $(this).find('.post-action').css('visibility', 'visible');
+    });
+    $(document).on('mouseleave', 'td[data-column-id=title]', function(){
+        $(this).find('.post-action').css('visibility', 'hidden');
+    });
+
+    $(document).on('click', '#add-new-item', async function(e){
+        e.preventDefault();
+        const { value: coupon_code } = await Swal.fire({
+            input: "text",
+            inputLabel: formipay_access_page.modal.add.title,
+            showCancelButton: true,
+            confirmButtonText: formipay_access_page.modal.add.confirmButton,
+            cancelButtonText: formipay_access_page.modal.add.cancelButton,
+            reverseButtons: true,
+            inputValidator: (value) => {
+                if (!value) {
+                    return formipay_access_page.modal.add.validation;
+                }
+            }
+        }).then((result) => {
+            /* Read more about isConfirmed, isDenied below, input value is ${coupon_code} */ 
+            if (result.isConfirmed && result.value) {
+                $.ajax({
+                    type: 'post',
+                    url: formipay_access_page.ajax_url,
+                    data: {
+                        action: 'formipay-create-access-item-post',
+                        title: result.value,
+                        nonce: formipay_access_page.nonce
+                    },
+                    success: function (res) {
+                        if(res.success){
+                            window.location.href = res.data.edit_post_url;
+                        }else{
+                            Swal.fire({
+                                html: res.data.message,
+                                icon: 'error'
+                            });
+                        }
+                    }
+                });
+            }
+        });
+    });
+
+    $(document).on('click', '.delete-access', function(e){
+        e.preventDefault();
+        var data_id = $(this).attr('data-id');
+        Swal.fire({
+            icon: 'info',
+            html: formipay_access_page.modal.delete.question,
+            showCancelButton: true,
+            confirmButtonText: formipay_access_page.modal.delete.confirmButton,
+            cancelButtonText: formipay_access_page.modal.delete.cancelButton,
+        }).then((result) => {
+            /* Read more about isConfirmed, isDenied below */
+            if (result.isConfirmed) {
+                $.ajax({
+                    type: 'post',
+                    url: formipay_access_page.ajax_url,
+                    data: {
+                        action: 'formipay-delete-access-item',
+                        id: data_id,
+                        nonce: formipay_access_page.nonce
+                    },
+                    success: function (res) {
+                        Swal.fire({
+                            title: res.data.title,
+                            html: res.data.message,
+                            icon: res.data.icon
+                        });
+                        formipay_table_grid.forceRender();
+                    }
+                });
+            }
+        });
+    });
+
+    $(document).on('click', '.duplicate-access', function(e){
+        e.preventDefault();
+        var data_id = $(this).attr('data-id');
+        Swal.fire({
+            icon: 'info',
+            html: formipay_access_page.modal.duplicate.question,
+            showCancelButton: true,
+            confirmButtonText: formipay_access_page.modal.duplicate.confirmButton,
+            cancelButtonText: formipay_access_page.modal.duplicate.cancelButton,
+        }).then((result) => {
+            /* Read more about isConfirmed, isDenied below */
+            if (result.isConfirmed) {
+                $.ajax({
+                    type: 'post',
+                    url: formipay_access_page.ajax_url,
+                    data: {
+                        action: 'formipay-duplicate-access-item',
+                        id: data_id,
+                        nonce: formipay_access_page.nonce
+                    },
+                    success: function (res) {
+                        Swal.fire({
+                            title: res.data.title,
+                            html: res.data.message,
+                            icon: res.data.icon
+                        });
+                        formipay_table_grid.forceRender();
+                    }
+                });
+            }
+        });
+    });
+});

admin/assets/js/page-coupons.js

@@ -0,0 +1,346 @@
+document.addEventListener('DOMContentLoaded', function () {
+    const choices = new Choices('#products', {
+        searchEnabled: true,
+        searchChoices: false, // Prevent Choices.js from filtering the local list
+        searchResultLimit: 10, // Optional: Limit visible results
+        placeholder: true,
+        placeholderValue: formipay_coupons_page.filter_form.products.placeholder,
+        noResultsText: formipay_coupons_page.filter_form.products.noresult_text,
+        itemSelectText: '',
+    });
+
+    const searchInput = document.querySelector('.choices__input--cloned');
+    let typingTimer;
+
+    searchInput.addEventListener('input', function () {
+        const query = searchInput.value;
+
+        if (query.length >= 3) {
+            clearTimeout(typingTimer);
+            typingTimer = setTimeout(() => {
+                fetchChoices(query);
+            }, 300); // Add a debounce delay
+        }
+    });
+
+    function fetchChoices(query) {
+        fetch(formipay_coupons_page.ajax_url, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
+            },
+            body: new URLSearchParams({
+                action: 'formipay_coupon_get_products',
+                search: query,
+                _wpnonce: formipay_coupons_page.nonce
+            }),
+        })
+            .then((response) => response.json())
+            .then((data) => {
+                choices.clearChoices();
+                choices.setChoices(data, 'value', 'label', false);
+            })
+            .catch((error) => console.error('Error:', error));
+    }
+});
+
+jQuery(function($){
+
+    let formipay_coupon_table_grid = new gridjs.Grid({
+        server: {
+            url: formipay_coupons_page.ajax_url+'?action=formipay-tabledata-coupons&search='+document.getElementById('keyword').value+'&_wpnonce='+formipay_coupons_page.nonce,
+            then: data => {
+
+                if(data.posts_report){
+                    processPostsReport(data.posts_report);
+                }
+                
+                return data.results.map(
+                    coupon => [coupon.ID, coupon.ID, coupon.code, coupon.products, coupon.value, coupon.type, coupon.usages, coupon.date_limit, coupon.status, coupon.case_sensitive]
+                );
+            },
+            total: data => data.total
+        },
+        columns: [
+            {
+                id: 'checkbox',
+                name: gridjs.html(`<input type="checkbox" id="select-all-rows">`),
+                width: '50px',
+                formatter: (_, row) => gridjs.html(
+                    `<input type="checkbox" class="formipay-row-checkbox" data-id="${row.cells[0].data}">`
+                )
+            },
+            {
+                name: formipay_coupons_page.columns.id,
+                width: '75px'
+            },
+            {
+                name: formipay_coupons_page.columns.code,
+                formatter: (_, row) => gridjs.html(`
+                    <b>${_}</b><br>
+                    <span class="post-action" style="visibility: hidden;">
+                    <a href="${formipay_coupons_page.site_url}/wp-admin/post.php?post=${row.cells[0].data}&action=edit">edit</a> | <a href="#" class="delete-coupon" data-id="${row.cells[0].data}">delete</a> | <a href="#" class="duplicate-coupon" data-id="${row.cells[0].data}">duplicate</a>
+                    </span>
+                `)
+            },
+            {
+                name: formipay_coupons_page.columns.products,
+                formatter: (products, row) => {
+
+                    let html = '';
+
+                    // Loop through each product in the products array
+                    if(products.length > 0){
+                        products.forEach(product => {
+                            if (product) {
+                                const currencyDetails = product.currency.split(':::');
+                                const currencyCode = currencyDetails[0];
+                                const currencySymbol = currencyDetails[2];
+    
+                                html += `
+                                    <span class="product_related">
+                                        ${product.title}<hr>
+                                        <span class="country-currency">
+                                        ${product.flag ? `<img src="${product.flag}" height="18">` : ''}
+                                        <span class="currency-in-use">${currencyCode} (${currencySymbol})</span>
+                                        </span>
+                                    </span>
+                                `;
+                            }
+                        });
+                    }
+
+                    return gridjs.html(html);
+
+                }
+            },
+            {
+                name: formipay_coupons_page.columns.amount,
+                formatter: (_, row) => numberFormat(_)
+            },
+            {
+                name: formipay_coupons_page.columns.type,
+                formatter: (_, row) => gridjs.html(`
+                    <span class="type-capsule the-type">${_}</span>
+                `)
+            },
+            {
+                name: formipay_coupons_page.columns.usages, // { used: 1, limit: 5 }
+                formatter: (_, row) => gridjs.html(`<span class="coupon-used">${_.used}</span>/<span class="coupon-limit">${_.limit}</span>`) // 1/∞
+            },
+            formipay_coupons_page.columns.date_limit,
+            {
+                name: formipay_coupons_page.columns.status,
+                formatter: (_, row) => gridjs.html(`
+                    <span class="status-label ${_.toLowerCase()}">${_}</span>
+                `)
+            },
+        ],
+        pagination: {
+            limit: 10,
+            server: {
+                url: (prev, page, limit) => `${prev}&limit=${limit}&offset=${page * limit}`
+            },
+            summary: false
+        },
+        className: {
+            table: 'formipay-grid-table'
+        }
+    }).render(document.getElementById('formipay-coupons'));
+
+    var $tableContainer = $('.formipay-grid-table');
+    var $deleteBtn = $('#formipay-delete-selected');
+
+    function updateDeleteButtonVisibility() {
+        if ($tableContainer.find('.formipay-row-checkbox:checked').length > 0) {
+            $deleteBtn.show();
+        } else {
+            $deleteBtn.hide();
+        }
+    }
+
+    // Handle row and "select all" checkbox changes
+    $tableContainer.on('change', '.formipay-row-checkbox', function() {
+        updateDeleteButtonVisibility();
+    });
+
+    // Handle row and "select all" checkbox changes
+    $tableContainer.on('change', '#select-all-rows', function() {
+        const is_checked = $(this).is(':checked');
+        $tableContainer.find('.formipay-row-checkbox').prop('checked', is_checked);
+        updateDeleteButtonVisibility();
+    });
+
+    // Handle delete button click
+    $deleteBtn.on('click', function() {
+        var selectedIds = $tableContainer.find('.formipay-row-checkbox:checked').map(function() {
+            return $(this).data('id');
+        }).get();
+
+        if (selectedIds.length > 0) {
+            Swal.fire({
+                icon: 'info',
+                html: formipay_coupons_page.modal.bulk_delete.question,
+                showCancelButton: true,
+                confirmButtonText: formipay_coupons_page.modal.bulk_delete.confirmButton,
+                cancelButtonText: formipay_coupons_page.modal.bulk_delete.cancelButton
+            }).then((result) => {
+                /* Read more about isConfirmed, isDenied below */
+                if (result.isConfirmed) {
+                    $.ajax({
+                        type: 'post',
+                        url: formipay_coupons_page.ajax_url,
+                        data: {
+                            action: 'formipay-bulk-delete-coupon',
+                            ids: selectedIds,
+                            _wpnonce: formipay_coupons_page.nonce
+                        },
+                        success: function (res) {
+                            Swal.fire({
+                                title: res.data.title,
+                                html: res.data.message,
+                                icon: res.data.icon
+                            });
+                            formipay_table_grid.forceRender();
+                            $tableContainer.find('.formipay-row-checkbox').prop('checked', false);
+                            updateDeleteButtonVisibility();
+                            refresh_table_with_filter();
+                        }
+                    });
+                }
+            });
+        }
+    });
+
+    function refresh_table_with_filter() {
+        formipay_coupon_table_grid.updateConfig({
+            server: {
+                url: formipay_coupons_page.ajax_url+'?action=formipay-tabledata-coupons&product='+document.getElementById('products').value+'&search='+document.getElementById('keyword').value+'&_wpnonce='+formipay_coupons_page.nonce,
+                then: data => data.results.map(
+                    coupon => [coupon.ID, coupon.ID, coupon.code, coupon.products, coupon.value, coupon.type, coupon.usages, coupon.date_limit, coupon.status, coupon.case_sensitive]
+                ),
+                total: data => data.total
+            }
+        }).forceRender();
+    }
+
+    $('.form-tool, #products, #post_status').on('change', function(){
+        refresh_table_with_filter();
+    });
+
+    $(document).on('mouseover', 'td[data-column-id=couponCode]', function(){
+        $(this).find('.post-action').css('visibility', 'visible');
+    });
+    $(document).on('mouseleave', 'td[data-column-id=couponCode]', function(){
+        $(this).find('.post-action').css('visibility', 'hidden');
+    });
+
+    $(document).on('input', 'input#swal2-input', function(){
+        const value = $(this).val();
+        $(this).val(value.replace(' ', ''));
+    });
+
+    $(document).on('click', '#add-new-coupon', async function(e){
+        e.preventDefault();
+        const { value: coupon_code } = await Swal.fire({
+            input: "text",
+            inputLabel: formipay_coupons_page.modal.add.title,
+            showCancelButton: true,
+            confirmButtonText: formipay_coupons_page.modal.add.confirmButton,
+            cancelButtonText: formipay_coupons_page.modal.add.cancelButton,
+            reverseButtons: true,
+            inputValidator: (value) => {
+                if (!value) {
+                    return formipay_coupons_page.modal.add.validation;
+                }
+            }
+        }).then((result) => {
+            /* Read more about isConfirmed, isDenied below, input value is ${coupon_code} */ 
+            if (result.isConfirmed && result.value) {
+                $.ajax({
+                    type: 'post',
+                    url: formipay_coupons_page.ajax_url,
+                    data: {
+                        action: 'formipay-create-coupon-post',
+                        title: result.value,
+                        _wpnonce: formipay_coupons_page.nonce
+                    },
+                    success: function (res) {
+                        if(res.success){
+                            window.location.href = res.data.edit_post_url;
+                        }else{
+                            Swal.fire({
+                                html: res.data.message,
+                                icon: 'error'
+                            });
+                        }
+                    }
+                });
+            }
+        });
+    });
+
+    $(document).on('click', '.delete-coupon', function(e){
+        e.preventDefault();
+        var data_id = $(this).attr('data-id');
+        Swal.fire({
+            icon: 'info',
+            html: "Do you want to delete the coupon?",
+            showCancelButton: true,
+            confirmButtonText: "Delete Permanently",
+        }).then((result) => {
+            /* Read more about isConfirmed, isDenied below */
+            if (result.isConfirmed) {
+                $.ajax({
+                    type: 'post',
+                    url: formipay_coupons_page.ajax_url,
+                    data: {
+                        action: 'formipay-delete-coupon',
+                        id: data_id,
+                        _wpnonce: formipay_coupons_page.nonce
+                    },
+                    success: function (res) {
+                        Swal.fire({
+                            title: res.data.title,
+                            html: res.data.message,
+                            icon: res.data.icon
+                        });
+                        formipay_coupon_table_grid.forceRender();
+                    }
+                });
+            }
+        });
+    });
+
+    $(document).on('click', '.duplicate-coupon', function(e){
+        e.preventDefault();
+        var data_id = $(this).attr('data-id');
+        Swal.fire({
+            icon: 'info',
+            html: "Do you want to duplicate the coupon?",
+            showCancelButton: true,
+            confirmButtonText: "Confirm",
+        }).then((result) => {
+            /* Read more about isConfirmed, isDenied below */
+            if (result.isConfirmed) {
+                $.ajax({
+                    type: 'post',
+                    url: formipay_coupons_page.ajax_url,
+                    data: {
+                        action: 'formipay-duplicate-coupon',
+                        id: data_id,
+                        _wpnonce: formipay_coupons_page.nonce
+                    },
+                    success: function (res) {
+                        Swal.fire({
+                            title: res.data.title,
+                            html: res.data.message,
+                            icon: res.data.icon
+                        });
+                        formipay_coupon_table_grid.forceRender();
+                    }
+                });
+            }
+        });
+    })
+});

admin/assets/js/page-forms.js

@@ -0,0 +1,320 @@
+document.getElementById('reset-filter').addEventListener('click', function(){
+    categoryChoices.removeActiveItems();
+    currencyChoices.removeActiveItems();
+    
+    const event = new Event('change', { bubbles: true });
+
+    document.getElementById('orderby').value = 'ID';
+    document.getElementById('sort_by').value = 'desc';
+    document.getElementById('keyword').value = '';
+    document.getElementById('keyword').dispatchEvent(event);
+});
+
+let formipay_table_grid = new gridjs.Grid({
+    server: {
+        url: formipay_forms_page.ajax_url+'?action=formipay-tabledata-forms&post_status='+document.getElementById('post_status').value+'&orderby='+document.getElementById('orderby').value+'&sort='+document.getElementById('sort_by').value+'&search='+document.getElementById('keyword').value+'&_wpnonce='+formipay_forms_page.nonce,
+        then: data => {
+            
+            if(data.posts_report){
+                processPostsReport(data.posts_report);
+            }
+
+            return data.results.map(
+                form => [form.ID, form.ID, form.title, form.date, form.status]
+            );
+        },
+        total: data => data.total
+    },
+    columns: [
+        {
+            id: 'checkbox',
+            name: gridjs.html(`<input type="checkbox" id="select-all-rows">`),
+            width: '50px',
+            formatter: (_, row) => gridjs.html(
+                `<input type="checkbox" class="formipay-row-checkbox" data-id="${row.cells[0].data}">`
+            )
+        },
+        {
+            name: formipay_forms_page.columns.id,
+            width: '75px'
+        },
+        {
+            name: formipay_forms_page.columns.title,
+            formatter: (_, row) => gridjs.html(`
+                <b>${_}</b><br>
+                <span class="post-action" style="visibility: hidden;">
+                <a href="${formipay_forms_page.site_url}/wp-admin/post.php?post=${row.cells[0].data}&action=edit&_wpnonce=${formipay_forms_page.nonce}">edit</a> | <a href="#" class="delete-form" data-id="${row.cells[0].data}">delete</a> | <a href="#" class="duplicate-form" data-id="${row.cells[0].data}">duplicate</a>
+                </span>
+            `)
+        },
+        {
+            name: formipay_forms_page.columns.date,
+            formatter: (_, row) => gridjs.html('<span style="text-wrap: nowrap;">' + _.split(' ').join('</span><br><span style="font-size: smaller;">') + '</span>')
+        },
+        {
+            name: formipay_forms_page.columns.status,
+            formatter: (_, row) => gridjs.html(`
+                <span class="status-label ${_}">${_}</span>
+            `)
+        },
+        {
+            name: formipay_forms_page.columns.shortcode,
+            formatter: (_, row) => gridjs.html(`
+                <input class="formipay-form-shortcode" value="[formipay form=${row.cells[0].data}]" disabled>
+                <button class="copy-shortcode" data-copy="[formipay form=${row.cells[0].data}]">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24">
+                        <path fill="#b7b7b7" d="M9 18q-.825 0-1.412-.587T7 16V4q0-.825.588-1.412T9 2h9q.825 0 1.413.588T20 4v12q0 .825-.587 1.413T18 18zm0-2h9V4H9zm-4 6q-.825 0-1.412-.587T3 20V6h2v14h11v2zm4-6V4z" />
+                    </svg> ${formipay_forms_page.toast.copy_button.copy}
+                </button>
+            `)
+        },
+    ],
+    pagination: {
+        limit: 10,
+        server: {
+            url: (prev, page, limit) => `${prev}&limit=${limit}&offset=${page * limit}`
+        },
+        summary: false
+    },
+    className: {
+        table: 'formipay-grid-table'
+    }
+}).render(document.getElementById('formipay-forms'));
+
+document.addEventListener('click', function (e) {
+    const copyButton = e.target.closest('[data-copy]'); // Check if the clicked element or its parent has the data-copy attribute
+    if (copyButton) {
+        const textToCopy = copyButton.getAttribute('data-copy');
+        
+        // Use the Clipboard API to copy text
+        navigator.clipboard.writeText(textToCopy)
+            .then(() => {
+                // Optionally, display a success message
+                copyButton.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24">
+                                            <path fill="#000" d="m9.55 18l-5.7-5.7l1.425-1.425L9.55 15.15l9.175-9.175L20.15 7.4z" />
+                                        </svg> ${formipay_forms_page.toast.copy_button.copied}`;
+                setTimeout(() => {
+                    copyButton.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24">
+                                                <path fill="#b7b7b7" d="M9 18q-.825 0-1.412-.587T7 16V4q0-.825.588-1.412T9 2h9q.825 0 1.413.588T20 4v12q0 .825-.587 1.413T18 18zm0-2h9V4H9zm-4 6q-.825 0-1.412-.587T3 20V6h2v14h11v2zm4-6V4z" />
+                                            </svg> ${formipay_forms_page.toast.copy_button.copy}`; // Reset button text
+                }, 2000);
+
+                Swal.fire({
+                    icon: 'success',
+                    title: formipay_forms_page.toast.copy_button.title,
+                    toast: true,
+                    position: "top-end",
+                    showConfirmButton: false,
+                    timer: 3000,
+                    timerProgressBar: true,
+                    customClass: {
+                        container: 'top-40'
+                    },
+                    didOpen: (toast) => {
+                        toast.onmouseenter = Swal.stopTimer;
+                        toast.onmouseleave = Swal.resumeTimer;
+                    }
+                })
+            })
+            .catch((err) => {
+                console.error('Failed to copy text: ', err);
+            });
+    }
+});
+
+jQuery(function($){
+
+    var $deleteBtn = $('#formipay-delete-selected');
+
+    function updateDeleteButtonVisibility() {
+        if ($(document).find('.formipay-row-checkbox:checked').length > 0) {
+            $deleteBtn.show();
+        } else {
+            $deleteBtn.hide();
+        }
+    }
+
+    // Handle row and "select all" checkbox changes
+    $(document).on('change', '.formipay-row-checkbox', function() {
+        updateDeleteButtonVisibility();
+    });
+
+    // Handle row and "select all" checkbox changes
+    $(document).on('change', '#select-all-rows', function() {
+        const is_checked = $(this).is(':checked');
+        $(document).find('.formipay-row-checkbox').prop('checked', is_checked);
+        updateDeleteButtonVisibility();
+    });
+
+    // Handle delete button click
+    $deleteBtn.on('click', function() {
+        var selectedIds = $(document).find('.formipay-row-checkbox:checked').map(function() {
+            return $(this).data('id');
+        }).get();
+
+        console.log(selectedIds);
+
+        if (selectedIds.length > 0) {
+            Swal.fire({
+                icon: 'info',
+                html: formipay_forms_page.modal.bulk_delete.question,
+                showCancelButton: true,
+                confirmButtonText: formipay_forms_page.modal.bulk_delete.confirmButton,
+                cancelButtonText: formipay_forms_page.modal.bulk_delete.cancelButton
+            }).then((result) => {
+                /* Read more about isConfirmed, isDenied below */
+                if (result.isConfirmed) {
+                    $.ajax({
+                        type: 'post',
+                        url: formipay_forms_page.ajax_url,
+                        data: {
+                            action: 'formipay-bulk-delete-form',
+                            ids: selectedIds,
+                            _wpnonce: formipay_forms_page.nonce
+                        },
+                        success: function (res) {
+                            Swal.fire({
+                                title: res.data.title,
+                                html: res.data.message,
+                                icon: res.data.icon
+                            });
+                            formipay_table_grid.forceRender();
+                            $(document).find('.formipay-row-checkbox').prop('checked', false);
+                            updateDeleteButtonVisibility();
+                            refresh_table_with_filter();
+                        }
+                    });
+                }
+            });
+        }
+    });
+
+    function refresh_table_with_filter() {
+        formipay_table_grid.updateConfig({
+            server: {
+                url: formipay_forms_page.ajax_url+'?action=formipay-tabledata-forms&post_status='+document.getElementById('post_status').value+'&orderby='+document.getElementById('orderby').value+'&sort='+document.getElementById('sort_by').value+'&search='+document.getElementById('keyword').value+'&_wpnonce='+formipay_forms_page.nonce,
+                then: data => data.results.map(
+                    form => [form.ID, form.ID, form.title, form.date, form.status]
+                ),
+                total: data => data.total
+            }
+        }).forceRender();
+    }
+
+    $('.form-tool, #post_status').on('change', function(){
+        refresh_table_with_filter();
+    });
+
+    $(document).on('mouseover', 'td[data-column-id=title]', function(){
+        $(this).find('.post-action').css('visibility', 'visible');
+    });
+    $(document).on('mouseleave', 'td[data-column-id=title]', function(){
+        $(this).find('.post-action').css('visibility', 'hidden');
+    });
+
+    $(document).on('click', '#add-new-form', async function(e){
+        e.preventDefault();
+        const { value: title } = await Swal.fire({
+            input: "text",
+            inputLabel: formipay_forms_page.modal.add.title,
+            showCancelButton: true,
+            confirmButtonText: formipay_forms_page.modal.add.confirmButton,
+            cancelButtonText: formipay_forms_page.modal.add.cancelButton,
+            reverseButtons: true,
+            inputValidator: (value) => {
+                if (!value) {
+                    return formipay_forms_page.modal.add.validation;
+                }
+            }
+        }).then((result) => {
+            /* Read more about isConfirmed, isDenied below, input value is ${coupon_code} */ 
+            if (result.isConfirmed && result.value) {
+                $.ajax({
+                    type: 'post',
+                    url: formipay_forms_page.ajax_url,
+                    data: {
+                        action: 'formipay-create-form-post',
+                        title: result.value,
+                        _wpnonce: formipay_forms_page.nonce
+                    },
+                    success: function (res) {
+                        if(res.success){
+                            window.location.href = res.data.edit_post_url;
+                        }else{
+                            Swal.fire({
+                                html: res.data.message,
+                                icon: 'error'
+                            });
+                        }
+                    }
+                });
+            }
+        });
+    });
+
+    $(document).on('click', '.delete-form', function(e){
+        e.preventDefault();
+        var data_id = $(this).attr('data-id');
+        Swal.fire({
+            icon: 'info',
+            html: formipay_forms_page.bulk_delete.question,
+            showCancelButton: true,
+            confirmButtonText: formipay_forms_page.delete.confirmButton,
+            cancelButtonText: formipay_forms_page.delete.cancelButton,
+        }).then((result) => {
+            /* Read more about isConfirmed, isDenied below */
+            if (result.isConfirmed) {
+                $.ajax({
+                    type: 'post',
+                    url: formipay_forms_page.ajax_url,
+                    data: {
+                        action: 'formipay-delete-form',
+                        id: data_id,
+                        _wpnonce: formipay_forms_page.nonce
+                    },
+                    success: function (res) {
+                        Swal.fire({
+                            title: res.data.title,
+                            html: res.data.message,
+                            icon: res.data.icon
+                        });
+                        formipay_table_grid.forceRender();
+                    }
+                });
+            }
+        });
+    });
+
+    $(document).on('click', '.duplicate-form', function(e){
+        e.preventDefault();
+        var data_id = $(this).attr('data-id');
+        Swal.fire({
+            icon: 'info',
+            html: "Do you want to duplicate the form?",
+            showCancelButton: true,
+            confirmButtonText: "Confirm",
+        }).then((result) => {
+            /* Read more about isConfirmed, isDenied below */
+            if (result.isConfirmed) {
+                $.ajax({
+                    type: 'post',
+                    url: formipay_forms_page.ajax_url,
+                    data: {
+                        action: 'formipay-duplicate-form',
+                        id: data_id,
+                        _wpnonce: formipay_forms_page.nonce
+                    },
+                    success: function (res) {
+                        Swal.fire({
+                            title: res.data.title,
+                            html: res.data.message,
+                            icon: res.data.icon
+                        });
+                        formipay_table_grid.forceRender();
+                    }
+                });
+            }
+        });
+    });
+
+});

admin/assets/js/page-product-taxonomy.js

@@ -0,0 +1,13 @@
+jQuery(function($){
+    $('#wpbody-content').prepend(`
+       <div class="formipay-screen-menu">
+            <img src="`+formipay_product_taxonomy_page.site_url+`/wp-content/plugins/formipay/admin/assets/img/formipay-logo-circle-white_256.png" alt="Formipay">
+            <div class="screen-title">
+                <h1>`+formipay_product_taxonomy_page.page_title+`</h1>
+            </div>
+        </div> 
+    `);
+    $('form.search-form.wp-clearfix').appendTo('.tablenav.top');
+    $('.wp-heading-inline').hide();
+    $(`a[href="edit-tags.php?taxonomy=formipay-product-category&post_type=formipay-product"]`).addClass('current').closest('li').addClass('current');
+});

admin/assets/js/page-products.js

@@ -0,0 +1,371 @@
+const categoryChoices = new Choices('#categories', {
+    searchEnabled: true,
+    searchChoices: false, // Prevent Choices.js from filtering the local list
+    searchResultLimit: 10, // Optional: Limit visible results
+    placeholder: true,
+    placeholderValue: formipay_products_page.filter_form.categories.placeholder,
+    noResultsText: formipay_products_page.filter_form.categories.noresult_text,
+    itemSelectText: '',
+    allowHTML: true
+});
+
+const currencyChoices = new Choices('#currencies', {
+    searchEnabled: true,
+    searchChoices: false, // Prevent Choices.js from filtering the local list
+    searchResultLimit: 10, // Optional: Limit visible results
+    placeholder: true,
+    placeholderValue: formipay_products_page.filter_form.currencies.placeholder,
+    noResultsText: formipay_products_page.filter_form.currencies.noresult_text,
+    itemSelectText: '',
+    allowHTML: true
+});
+
+const searchInput = document.querySelectorAll('.currency .choices__input--cloned');
+let typingTimer;
+
+searchInput[0].addEventListener('input', function () {
+    const query = this.value;
+
+    if (query.length >= 3) {
+        clearTimeout(typingTimer);
+        typingTimer = setTimeout(() => {
+            fetchChoices(query);
+        }, 300); // Add a debounce delay
+    }
+});
+
+function fetchChoices(query) {
+    fetch(formipay_products_page.ajax_url, {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
+        },
+        body: new URLSearchParams({
+            action: 'formipay_product_get_currencies',
+            search: query,
+            _wpnonce: formipay_products_page.nonce
+        }),
+    })
+    .then((response) => response.json())
+    .then((data) => {
+        currencyChoices.clearChoices();
+        currencyChoices.setChoices( data, 'value', 'label', true);
+    })
+    .catch((error) => console.error('Error:', error));
+}
+
+document.getElementById('reset-filter').addEventListener('click', function(){
+    categoryChoices.removeActiveItems();
+    currencyChoices.removeActiveItems();
+    
+    const event = new Event('change', { bubbles: true });
+
+    document.getElementById('orderby').value = 'ID';
+    document.getElementById('sort_by').value = 'desc';
+    document.getElementById('keyword').value = '';
+    document.getElementById('keyword').dispatchEvent(event);
+});
+
+jQuery(function($){
+
+    let formipay_product_table_grid = new gridjs.Grid({
+        server: {
+            url: formipay_products_page.ajax_url+'?action=formipay-tabledata-products&post_status='+document.getElementById('post_status').value+'&currency='+document.getElementById('currencies').value+'&category='+document.getElementById('categories').value+'&orderby='+document.getElementById('orderby').value+'&sort='+document.getElementById('sort_by').value+'&search='+document.getElementById('keyword').value+'&_wpnonce='+formipay_products_page.nonce,
+            then: data => {
+            
+                if(data.posts_report){
+                    processPostsReport(data.posts_report);
+                }
+    
+                return data.results.map(
+                    product => [product.ID, product.ID, product.title, product.price, product.type, product.stock, product.status]
+                );
+            },
+            total: data => data.total
+        },
+        columns: [
+            {
+                id: 'checkbox',
+                name: gridjs.html(`<input type="checkbox" id="select-all-rows">`),
+                width: '50px',
+                formatter: (_, row) => gridjs.html(
+                    `<input type="checkbox" class="formipay-row-checkbox" data-id="${row.cells[0].data}">`
+                )
+            },
+            {
+                name: formipay_products_page.columns.id,
+                width: '75px'
+            },
+            {
+                name: formipay_products_page.columns.title,
+                formatter: (_, row) => gridjs.html(`
+                    <b>${_}</b><br>
+                    <span class="post-action" style="visibility: hidden;">
+                    <a href="${formipay_products_page.site_url}/wp-admin/post.php?post=${row.cells[0].data}&action=edit">edit</a> | <a href="#" class="delete-product" data-id="${row.cells[0].data}">delete</a> | <a href="#" class="duplicate-product" data-id="${row.cells[0].data}">duplicate</a>
+                    </span>
+                `)
+            },
+            {
+                name: formipay_products_page.columns.price,
+                formatter: (_, row) => gridjs.html(`
+                    <span class="price">
+                    <img src="${_.flag}" width="20"> ${_.name}
+                    </span>
+                `)
+            },
+            {
+                name: formipay_products_page.columns.type
+            },
+            {
+                name: formipay_products_page.columns.stock,
+                formatter: (_, row) => gridjs.html(`
+                    <span class="type-capsule the-type">${_}</span>
+                `)
+            },
+            {
+                name: formipay_products_page.columns.status, // { used: 1, limit: 5 }
+                formatter: (_, row) => gridjs.html(`
+                    <span class="status-label ${_}">${_}</span>
+                `)
+            },
+        ],
+        pagination: {
+            limit: 10,
+            server: {
+                url: (prev, page, limit) => `${prev}&limit=${limit}&offset=${page * limit}`
+            },
+            summary: false
+        },
+        className: {
+            table: 'formipay-grid-table'
+        }
+    }).render(document.getElementById('formipay-products'));
+
+    var $deleteBtn = $('#formipay-delete-selected');
+
+    function updateDeleteButtonVisibility() {
+        if ($(document).find('.formipay-row-checkbox:checked').length > 0) {
+            $deleteBtn.show();
+        } else {
+            $deleteBtn.hide();
+        }
+    }
+
+    // Handle row and "select all" checkbox changes
+    $(document).on('change', '.formipay-row-checkbox', function() {
+        updateDeleteButtonVisibility();
+    });
+
+    // Handle row and "select all" checkbox changes
+    $(document).on('change', '#select-all-rows', function() {
+        const is_checked = $(this).is(':checked');
+        $(document).find('.formipay-row-checkbox').prop('checked', is_checked);
+        updateDeleteButtonVisibility();
+    });
+
+    // Handle delete button click
+    $deleteBtn.on('click', function() {
+        var selectedIds = $(document).find('.formipay-row-checkbox:checked').map(function() {
+            return $(this).data('id');
+        }).get();
+
+        console.log(selectedIds);
+
+        if (selectedIds.length > 0) {
+            Swal.fire({
+                icon: 'info',
+                html: formipay_products_page.modal.bulk_delete.question,
+                showCancelButton: true,
+                confirmButtonText: formipay_products_page.modal.bulk_delete.confirmButton,
+                cancelButtonText: formipay_products_page.modal.bulk_delete.cancelButton
+            }).then((result) => {
+                /* Read more about isConfirmed, isDenied below */
+                if (result.isConfirmed) {
+                    $.ajax({
+                        type: 'post',
+                        url: formipay_products_page.ajax_url,
+                        data: {
+                            action: 'formipay-bulk-delete-product',
+                            ids: selectedIds,
+                            _wpnonce: formipay_products_page.nonce
+                        },
+                        success: function (res) {
+                            Swal.fire({
+                                title: res.data.title,
+                                html: res.data.message,
+                                icon: res.data.icon
+                            });
+                            formipay_product_table_grid.forceRender();
+                            $(document).find('.formipay-row-checkbox').prop('checked', false);
+                            updateDeleteButtonVisibility();
+                            refresh_table_with_filter();
+                        }
+                    });
+                }
+            });
+        }
+    });
+
+    function refresh_table_with_filter() {
+        formipay_product_table_grid.updateConfig({
+            server: {
+                url: formipay_products_page.ajax_url+'?action=formipay-tabledata-products&post_status='+document.getElementById('post_status').value+'&currency='+document.getElementById('currencies').value+'&category='+document.getElementById('categories').value+'&orderby='+document.getElementById('orderby').value+'&sort='+document.getElementById('sort_by').value+'&search='+document.getElementById('keyword').value+'&_wpnonce='+formipay_products_page.nonce,
+                then: data => data.results.map(
+                    product => [product.ID, product.ID, product.title, product.price, product.type, product.stock, product.status]
+                ),
+                total: data => data.total
+            }
+        }).forceRender();
+        $(document) = $('.formipay-grid-table');
+    }
+
+    $('.form-tool, #post_status').on('change', function(){
+        refresh_table_with_filter();
+    });
+
+    $(document).on('mouseover', 'td[data-column-id=title]', function(){
+        $(this).find('.post-action').css('visibility', 'visible');
+    });
+    $(document).on('mouseleave', 'td[data-column-id=title]', function(){
+        $(this).find('.post-action').css('visibility', 'hidden');
+    });
+
+    $(document).on('click', '#add-new-product', async function(e){
+        e.preventDefault();
+
+        var options = [];
+        $.each(formipay_products_page.modal.form.currency_options, function(value, label){
+            options.push(`<option value="${value}">${label}</option>`);
+        });
+    
+        // Table-based form HTML
+        const formHtml = `
+            <input id="swal-input-title" class="swal2-input" placeholder="Product Title">
+            <input id="swal-input-price" type="number" min="0" class="swal2-input" placeholder="Price">
+        `;
+    
+        // Show the SweetAlert2 modal
+        const { value: title } = await Swal.fire({
+            input: "text",
+            inputLabel: formipay_products_page.modal.add.title,
+            showCancelButton: true,
+            confirmButtonText: formipay_products_page.modal.add.confirmButton,
+            cancelButtonText: formipay_products_page.modal.add.cancelButton,
+            reverseButtons: true,
+            inputValidator: (value) => {
+                if (!value) {
+                    return formipay_products_page.modal.add.validation;
+                }
+            }
+        }).then((result) => {
+            /* Read more about isConfirmed, isDenied below, input value is ${coupon_code} */ 
+            if (result.isConfirmed && result.value) {
+                $.ajax({
+                    type: 'post',
+                    url: formipay_products_page.ajax_url,
+                    data: {
+                        action: 'formipay-create-product-post',
+                        title: result.value,
+                        _wpnonce: formipay_products_page.nonce
+                    },
+                    success: function (res) {
+                        if(res.success){
+                            window.location.href = res.data.edit_post_url;
+                        }else{
+                            Swal.fire({
+                                html: res.data.message,
+                                icon: 'error'
+                            });
+                        }
+                    }
+                });
+            }
+        });
+    });
+    
+    $(document).on('click', '.delete-product', function(e){
+        e.preventDefault();
+        var data_id = $(this).attr('data-id');
+        Swal.fire({
+            icon: 'info',
+            html: formipay_products_page.modal.delete.question,
+            showCancelButton: true,
+            confirmButtonText: formipay_products_page.modal.delete.confirmButton,
+            cancelButtonText: formipay_products_page.modal.delete.cancelButton,
+        }).then((result) => {
+            /* Read more about isConfirmed, isDenied below */
+            if (result.isConfirmed) {
+                $.ajax({
+                    type: 'post',
+                    url: formipay_products_page.ajax_url,
+                    data: {
+                        action: 'formipay-delete-product',
+                        id: data_id,
+                        _wpnonce: formipay_products_page.nonce
+                    },
+                    success: function (res) {
+                        Swal.fire({
+                            title: res.data.title,
+                            html: res.data.message,
+                            icon: res.data.icon
+                        });
+                        updateDeleteButtonVisibility();
+                        refresh_table_with_filter();
+                    }
+                });
+            }
+        });
+    });
+
+    $(document).on('click', '.duplicate-product', function(e){
+        e.preventDefault();
+        var data_id = $(this).attr('data-id');
+        Swal.fire({
+            icon: 'info',
+            html: formipay_products_page.modal.duplicate.question,
+            showCancelButton: true,
+            confirmButtonText: formipay_products_page.modal.duplicate.confirmButton,
+            cancelButtonText: formipay_products_page.modal.duplicate.cancelButton,
+        }).then((result) => {
+            /* Read more about isConfirmed, isDenied below */
+            if (result.isConfirmed) {
+                $.ajax({
+                    type: 'post',
+                    url: formipay_products_page.ajax_url,
+                    data: {
+                        action: 'formipay-duplicate-product',
+                        id: data_id,
+                        _wpnonce: formipay_products_page.nonce
+                    },
+                    success: function (res) {
+                        Swal.fire({
+                            title: res.data.title,
+                            html: res.data.message,
+                            icon: res.data.icon
+                        });
+                        updateDeleteButtonVisibility();
+                        refresh_table_with_filter();
+                    },
+                    error: function(xhr, status, error) {
+                        Swal.fire({
+                            title: 'Error!',
+                            html: xhr.responseText,
+                            icon: 'error',
+                            customClass: {
+                                confirmButton: 'formipay-button-error'
+                            },
+                            allowOutsideClick: false,
+                            allowEscapeKey: false,
+                            showCloseButton: false,
+                        }).then((result) => {
+                            if (result.isConfirmed) {
+                                window.location.reload();
+                            }
+                        });
+                    }
+                });
+            }
+        });
+    });
+
+});

admin/assets/json/country.json

@@ -0,0 +1,254 @@
+[
+    {"name": "Afghanistan", "code": "AF", "phone": "93"},
+    {"name": "Albania", "code": "AL", "phone": "355"},
+    {"name": "Algeria", "code": "DZ", "phone": "213"},
+    {"name": "American Samoa", "code": "AS", "phone": "1684"},
+    {"name": "Andorra", "code": "AD", "phone": "376"},
+    {"name": "Angola", "code": "AO", "phone": "244"},
+    {"name": "Anguilla", "code": "AI", "phone": "1264"},
+    {"name": "Antarctica", "code": "AQ", "phone": "672"},
+    {"name": "Antigua and Barbuda", "code": "AG", "phone": "1268"},
+    {"name": "Argentina", "code": "AR", "phone": "54"},
+    {"name": "Armenia", "code": "AM", "phone": "374"},
+    {"name": "Aruba", "code": "AW", "phone": "297"},
+    {"name": "Asia/Pacific Region", "code": "AP", "phone": ""},
+    {"name": "Australia", "code": "AU", "phone": "61"},
+    {"name": "Austria", "code": "AT", "phone": "43"},
+    {"name": "Azerbaijan", "code": "AZ", "phone": "994"},
+    {"name": "Bahamas", "code": "BS", "phone": "1242"},
+    {"name": "Bahrain", "code": "BH", "phone": "973"},
+    {"name": "Bangladesh", "code": "BD", "phone": "880"},
+    {"name": "Barbados", "code": "BB", "phone": "1246"},
+    {"name": "Belarus", "code": "BY", "phone": "375"},
+    {"name": "Belgium", "code": "BE", "phone": "32"},
+    {"name": "Belize", "code": "BZ", "phone": "501"},
+    {"name": "Benin", "code": "BJ", "phone": "229"},
+    {"name": "Bermuda", "code": "BM", "phone": "1441"},
+    {"name": "Bhutan", "code": "BT", "phone": "975"},
+    {"name": "Bolivia", "code": "BO", "phone": "591"},
+    {"name": "Bonaire, Sint Eustatius and Saba", "code": "BQ", "phone": "599"},
+    {"name": "Bosnia and Herzegovina", "code": "BA", "phone": "387"},
+    {"name": "Botswana", "code": "BW", "phone": "267"},
+    {"name": "Bouvet Island", "code": "BV", "phone": "55"},
+    {"name": "Brazil", "code": "BR", "phone": "55"},
+    {"name": "British Indian Ocean Territory", "code": "IO", "phone": "246"},
+    {"name": "Brunei Darussalam", "code": "BN", "phone": "673"},
+    {"name": "Bulgaria", "code": "BG", "phone": "359"},
+    {"name": "Burkina Faso", "code": "BF", "phone": "226"},
+    {"name": "Burundi", "code": "BI", "phone": "257"},
+    {"name": "Cambodia", "code": "KH", "phone": "855"},
+    {"name": "Cameroon", "code": "CM", "phone": "237"},
+    {"name": "Canada", "code": "CA", "phone": "1"},
+    {"name": "Cape Verde", "code": "CV", "phone": "238"},
+    {"name": "Cayman Islands", "code": "KY", "phone": "1345"},
+    {"name": "Central African Republic", "code": "CF", "phone": "236"},
+    {"name": "Chad", "code": "TD", "phone": "235"},
+    {"name": "Chile", "code": "CL", "phone": "56"},
+    {"name": "China", "code": "CN", "phone": "86"},
+    {"name": "Christmas Island", "code": "CX", "phone": "61"},
+    {"name": "Cocos (Keeling) Islands", "code": "CC", "phone": "672"},
+    {"name": "Colombia", "code": "CO", "phone": "57"},
+    {"name": "Comoros", "code": "KM", "phone": "269"},
+    {"name": "Congo", "code": "CG", "phone": "242"},
+    {"name": "Congo, The Democratic Republic of the", "code": "CD", "phone": "242"},
+    {"name": "Cook Islands", "code": "CK", "phone": "682"},
+    {"name": "Costa Rica", "code": "CR", "phone": "506"},
+    {"name": "Croatia", "code": "HR", "phone": "385"},
+    {"name": "Cuba", "code": "CU", "phone": "53"},
+    {"name": "Curaçao", "code": "CW", "phone": "599"},
+    {"name": "Cyprus", "code": "CY", "phone": "357"},
+    {"name": "Czech Republic", "code": "CZ", "phone": "420"},
+    {"name": "Côte d'Ivoire", "code": "CI", "phone": "225"},
+    {"name": "Denmark", "code": "DK", "phone": "45"},
+    {"name": "Djibouti", "code": "DJ", "phone": "253"},
+    {"name": "Dominica", "code": "DM", "phone": "1767"},
+    {"name": "Dominican Republic", "code": "DO", "phone": "1809"},
+    {"name": "Ecuador", "code": "EC", "phone": "593"},
+    {"name": "Egypt", "code": "EG", "phone": "20"},
+    {"name": "El Salvador", "code": "SV", "phone": "503"},
+    {"name": "Equatorial Guinea", "code": "GQ", "phone": "240"},
+    {"name": "Eritrea", "code": "ER", "phone": "291"},
+    {"name": "Estonia", "code": "EE", "phone": "372"},
+    {"name": "Ethiopia", "code": "ET", "phone": "251"},
+    {"name": "Falkland Islands (Malvinas)", "code": "FK", "phone": "500"},
+    {"name": "Faroe Islands", "code": "FO", "phone": "298"},
+    {"name": "Fiji", "code": "FJ", "phone": "679"},
+    {"name": "Finland", "code": "FI", "phone": "358"},
+    {"name": "France", "code": "FR", "phone": "33"},
+    {"name": "French Guiana", "code": "GF", "phone": "594"},
+    {"name": "French Polynesia", "code": "PF", "phone": "689"},
+    {"name": "French Southern Territories", "code": "TF", "phone": "262"},
+    {"name": "Gabon", "code": "GA", "phone": "241"},
+    {"name": "Gambia", "code": "GM", "phone": "220"},
+    {"name": "Georgia", "code": "GE", "phone": "995"},
+    {"name": "Germany", "code": "DE", "phone": "49"},
+    {"name": "Ghana", "code": "GH", "phone": "233"},
+    {"name": "Gibraltar", "code": "GI", "phone": "350"},
+    {"name": "Greece", "code": "GR", "phone": "30"},
+    {"name": "Greenland", "code": "GL", "phone": "299"},
+    {"name": "Grenada", "code": "GD", "phone": "1473"},
+    {"name": "Guadeloupe", "code": "GP", "phone": "590"},
+    {"name": "Guam", "code": "GU", "phone": "1671"},
+    {"name": "Guatemala", "code": "GT", "phone": "502"},
+    {"name": "Guernsey", "code": "GG", "phone": "44"},
+    {"name": "Guinea", "code": "GN", "phone": "224"},
+    {"name": "Guinea-Bissau", "code": "GW", "phone": "245"},
+    {"name": "Guyana", "code": "GY", "phone": "592"},
+    {"name": "Haiti", "code": "HT", "phone": "509"},
+    {"name": "Heard Island and Mcdonald Islands", "code": "HM", "phone": "0"},
+    {"name": "Holy See (Vatican City State)", "code": "VA", "phone": "39"},
+    {"name": "Honduras", "code": "HN", "phone": "504"},
+    {"name": "Hong Kong", "code": "HK", "phone": "852"},
+    {"name": "Hungary", "code": "HU", "phone": "36"},
+    {"name": "Iceland", "code": "IS", "phone": "354"},
+    {"name": "India", "code": "IN", "phone": "91"},
+    {"name": "Indonesia", "code": "ID", "phone": "62"},
+    {"name": "Iran, Islamic Republic Of", "code": "IR", "phone": "98"},
+    {"name": "Iraq", "code": "IQ", "phone": "964"},
+    {"name": "Ireland", "code": "IE", "phone": "353"},
+    {"name": "Isle of Man", "code": "IM", "phone": "44"},
+    {"name": "Israel", "code": "IL", "phone": "972"},
+    {"name": "Italy", "code": "IT", "phone": "39"},
+    {"name": "Jamaica", "code": "JM", "phone": "1876"},
+    {"name": "Japan", "code": "JP", "phone": "81"},
+    {"name": "Jersey", "code": "JE", "phone": "44"},
+    {"name": "Jordan", "code": "JO", "phone": "962"},
+    {"name": "Kazakhstan", "code": "KZ", "phone": "7"},
+    {"name": "Kenya", "code": "KE", "phone": "254"},
+    {"name": "Kiribati", "code": "KI", "phone": "686"},
+    {"name": "Korea, Republic of", "code": "KR", "phone": "82"},
+    {"name": "Kuwait", "code": "KW", "phone": "965"},
+    {"name": "Kyrgyzstan", "code": "KG", "phone": "996"},
+    {"name": "Laos", "code": "LA", "phone": "856"},
+    {"name": "Latvia", "code": "LV", "phone": "371"},
+    {"name": "Lebanon", "code": "LB", "phone": "961"},
+    {"name": "Lesotho", "code": "LS", "phone": "266"},
+    {"name": "Liberia", "code": "LR", "phone": "231"},
+    {"name": "Libyan Arab Jamahiriya", "code": "LY", "phone": "218"},
+    {"name": "Liechtenstein", "code": "LI", "phone": "423"},
+    {"name": "Lithuania", "code": "LT", "phone": "370"},
+    {"name": "Luxembourg", "code": "LU", "phone": "352"},
+    {"name": "Macao", "code": "MO", "phone": "853"},
+    {"name": "Madagascar", "code": "MG", "phone": "261"},
+    {"name": "Malawi", "code": "MW", "phone": "265"},
+    {"name": "Malaysia", "code": "MY", "phone": "60"},
+    {"name": "Maldives", "code": "MV", "phone": "960"},
+    {"name": "Mali", "code": "ML", "phone": "223"},
+    {"name": "Malta", "code": "MT", "phone": "356"},
+    {"name": "Marshall Islands", "code": "MH", "phone": "692"},
+    {"name": "Martinique", "code": "MQ", "phone": "596"},
+    {"name": "Mauritania", "code": "MR", "phone": "222"},
+    {"name": "Mauritius", "code": "MU", "phone": "230"},
+    {"name": "Mayotte", "code": "YT", "phone": "269"},
+    {"name": "Mexico", "code": "MX", "phone": "52"},
+    {"name": "Micronesia, Federated States of", "code": "FM", "phone": "691"},
+    {"name": "Moldova, Republic of", "code": "MD", "phone": "373"},
+    {"name": "Monaco", "code": "MC", "phone": "377"},
+    {"name": "Mongolia", "code": "MN", "phone": "976"},
+    {"name": "Montenegro", "code": "ME", "phone": "382"},
+    {"name": "Montserrat", "code": "MS", "phone": "1664"},
+    {"name": "Morocco", "code": "MA", "phone": "212"},
+    {"name": "Mozambique", "code": "MZ", "phone": "258"},
+    {"name": "Myanmar", "code": "MM", "phone": "95"},
+    {"name": "Namibia", "code": "NA", "phone": "264"},
+    {"name": "Nauru", "code": "NR", "phone": "674"},
+    {"name": "Nepal", "code": "NP", "phone": "977"},
+    {"name": "Netherlands", "code": "NL", "phone": "31"},
+    {"name": "Netherlands Antilles", "code": "AN", "phone": "599"},
+    {"name": "New Caledonia", "code": "NC", "phone": "687"},
+    {"name": "New Zealand", "code": "NZ", "phone": "64"},
+    {"name": "Nicaragua", "code": "NI", "phone": "505"},
+    {"name": "Niger", "code": "NE", "phone": "227"},
+    {"name": "Nigeria", "code": "NG", "phone": "234"},
+    {"name": "Niue", "code": "NU", "phone": "683"},
+    {"name": "Norfolk Island", "code": "NF", "phone": "672"},
+    {"name": "North Korea", "code": "KP", "phone": "850"},
+    {"name": "North Macedonia", "code": "MK", "phone": "389"},
+    {"name": "Northern Mariana Islands", "code": "MP", "phone": "1670"},
+    {"name": "Norway", "code": "NO", "phone": "47"},
+    {"name": "Oman", "code": "OM", "phone": "968"},
+    {"name": "Pakistan", "code": "PK", "phone": "92"},
+    {"name": "Palau", "code": "PW", "phone": "680"},
+    {"name": "Palestinian Territory, Occupied", "code": "PS", "phone": "970"},
+    {"name": "Panama", "code": "PA", "phone": "507"},
+    {"name": "Papua New Guinea", "code": "PG", "phone": "675"},
+    {"name": "Paraguay", "code": "PY", "phone": "595"},
+    {"name": "Peru", "code": "PE", "phone": "51"},
+    {"name": "Philippines", "code": "PH", "phone": "63"},
+    {"name": "Pitcairn Islands", "code": "PN", "phone": "64"},
+    {"name": "Poland", "code": "PL", "phone": "48"},
+    {"name": "Portugal", "code": "PT", "phone": "351"},
+    {"name": "Puerto Rico", "code": "PR", "phone": "1787"},
+    {"name": "Qatar", "code": "QA", "phone": "974"},
+    {"name": "Reunion", "code": "RE", "phone": "262"},
+    {"name": "Romania", "code": "RO", "phone": "40"},
+    {"name": "Russian Federation", "code": "RU", "phone": "7"},
+    {"name": "Rwanda", "code": "RW", "phone": "250"},
+    {"name": "Saint Barthélemy", "code": "BL", "phone": "590"},
+    {"name": "Saint Helena", "code": "SH", "phone": "290"},
+    {"name": "Saint Kitts and Nevis", "code": "KN", "phone": "1869"},
+    {"name": "Saint Lucia", "code": "LC", "phone": "1758"},
+    {"name": "Saint Martin", "code": "MF", "phone": "590"},
+    {"name": "Saint Pierre and Miquelon", "code": "PM", "phone": "508"},
+    {"name": "Saint Vincent and the Grenadines", "code": "VC", "phone": "1784"},
+    {"name": "Samoa", "code": "WS", "phone": "684"},
+    {"name": "San Marino", "code": "SM", "phone": "378"},
+    {"name": "Sao Tome and Principe", "code": "ST", "phone": "239"},
+    {"name": "Saudi Arabia", "code": "SA", "phone": "966"},
+    {"name": "Senegal", "code": "SN", "phone": "221"},
+    {"name": "Serbia", "code": "RS", "phone": "381"},
+    {"name": "Serbia and Montenegro", "code": "CS", "phone": "381"},
+    {"name": "Seychelles", "code": "SC", "phone": "248"},
+    {"name": "Sierra Leone", "code": "SL", "phone": "232"},
+    {"name": "Singapore", "code": "SG", "phone": "65"},
+    {"name": "Sint Maarten", "code": "SX", "phone": "1"},
+    {"name": "Slovakia", "code": "SK", "phone": "421"},
+    {"name": "Slovenia", "code": "SI", "phone": "386"},
+    {"name": "Solomon Islands", "code": "SB", "phone": "677"},
+    {"name": "Somalia", "code": "SO", "phone": "252"},
+    {"name": "South Africa", "code": "ZA", "phone": "27"},
+    {"name": "South Georgia and the South Sandwich Islands", "code": "GS", "phone": "500"},
+    {"name": "South Sudan", "code": "SS", "phone": "211"},
+    {"name": "Spain", "code": "ES", "phone": "34"},
+    {"name": "Sri Lanka", "code": "LK", "phone": "94"},
+    {"name": "Sudan", "code": "SD", "phone": "249"},
+    {"name": "Suriname", "code": "SR", "phone": "597"},
+    {"name": "Svalbard and Jan Mayen", "code": "SJ", "phone": "47"},
+    {"name": "Swaziland", "code": "SZ", "phone": "268"},
+    {"name": "Sweden", "code": "SE", "phone": "46"},
+    {"name": "Switzerland", "code": "CH", "phone": "41"},
+    {"name": "Syrian Arab Republic", "code": "SY", "phone": "963"},
+    {"name": "Taiwan", "code": "TW", "phone": "886"},
+    {"name": "Tajikistan", "code": "TJ", "phone": "992"},
+    {"name": "Tanzania, United Republic of", "code": "TZ", "phone": "255"},
+    {"name": "Thailand", "code": "TH", "phone": "66"},
+    {"name": "Timor-Leste", "code": "TL", "phone": "670"},
+    {"name": "Togo", "code": "TG", "phone": "228"},
+    {"name": "Tokelau", "code": "TK", "phone": "690"},
+    {"name": "Tonga", "code": "TO", "phone": "676"},
+    {"name": "Trinidad and Tobago", "code": "TT", "phone": "1868"},
+    {"name": "Tunisia", "code": "TN", "phone": "216"},
+    {"name": "Turkey", "code": "TR", "phone": "90"},
+    {"name": "Turkmenistan", "code": "TM", "phone": "7370"},
+    {"name": "Turks and Caicos Islands", "code": "TC", "phone": "1649"},
+    {"name": "Tuvalu", "code": "TV", "phone": "688"},
+    {"name": "Uganda", "code": "UG", "phone": "256"},
+    {"name": "Ukraine", "code": "UA", "phone": "380"},
+    {"name": "United Arab Emirates", "code": "AE", "phone": "971"},
+    {"name": "United Kingdom", "code": "GB", "phone": "44"},
+    {"name": "United States", "code": "US", "phone": "1"},
+    {"name": "United States Minor Outlying Islands", "code": "UM", "phone": "1"},
+    {"name": "Uruguay", "code": "UY", "phone": "598"},
+    {"name": "Uzbekistan", "code": "UZ", "phone": "998"},
+    {"name": "Vanuatu", "code": "VU", "phone": "678"},
+    {"name": "Venezuela", "code": "VE", "phone": "58"},
+    {"name": "Vietnam", "code": "VN", "phone": "84"},
+    {"name": "Virgin Islands, British", "code": "VG", "phone": "1284"},
+    {"name": "Virgin Islands, U.S.", "code": "VI", "phone": "1340"},
+    {"name": "Wallis and Futuna", "code": "WF", "phone": "681"},
+    {"name": "Western Sahara", "code": "EH", "phone": "212"},
+    {"name": "Yemen", "code": "YE", "phone": "967"},
+    {"name": "Zambia", "code": "ZM", "phone": "260"},
+    {"name": "Zimbabwe", "code": "ZW", "phone": "263"},
+    {"name": "Åland Islands", "code": "AX", "phone": "358"}
+  ]