From 3df2d307c4f1c0d9c8b0fc7554d1ac04e95bb989 Mon Sep 17 00:00:00 2001
From: edmondlang <edmond_wuiming@hotmail.com>
Date: Wed, 16 Aug 2023 01:46:59 +0800
Subject: [PATCH] c2c onboarding

---
 .../NewServiceAnnouncementComponent.vue       | 78 ++++++++++++++++++-
 .../forms/C2cConfirmationFormComponent.vue    | 56 +++++++++++++
 2 files changed, 133 insertions(+), 1 deletion(-)
 create mode 100644 resources/assets/vue/components/general/forms/C2cConfirmationFormComponent.vue

diff --git a/resources/assets/vue/components/companies/elements/NewServiceAnnouncementComponent.vue b/resources/assets/vue/components/companies/elements/NewServiceAnnouncementComponent.vue
index ebcf3851..0b59c459 100644
--- a/resources/assets/vue/components/companies/elements/NewServiceAnnouncementComponent.vue
+++ b/resources/assets/vue/components/companies/elements/NewServiceAnnouncementComponent.vue
@@ -1,6 +1,7 @@
 <template>
     <div class="row m-b-15 align-items-end parentContainer">
         <div class="col">
+            <!-- 1688 consent -->
             <div class="row m-l-0 m-r-0 m-b-15 animate__animated animate__tada animate__repeat-2 animate__delay-3s" v-if="!data.segments.some(item => item.id === 13 || item.id === 16)">
                 <div class="col bg-white padding-15">
                     <div class="row">
@@ -37,7 +38,7 @@
                             </div>
                             <div class="row">
                                 <div class="col text-center">
-                                    <div class="btn btn-lg block btn m-b-5 no-border text-white" :class="[{'bg-primary': acknowledge}, {'bg-primary-lighter': !acknowledge}]" :style="{ cursor: acknowledge ? 'pointer' : 'no-drop' }" @click="activateService">Activate Service</div>
+                                    <div class="btn btn-lg block btn m-b-5 no-border text-white" :class="[{'bg-primary': acknowledge}, {'bg-primary-lighter': !acknowledge}]" :style="{ cursor: acknowledge ? 'pointer' : 'no-drop' }" @click="activateServiceC2C">Activate Service</div>
                                     <!--<p class="text-danger fs-12 bold pointer">Didn't meet the requirements?</p>-->
                                 </div>
                             </div>
@@ -68,6 +69,69 @@
                     </div>
                 </div>
             </div>
+            <!-- C2C consent -->
+            <div class="row m-l-0 m-r-0 m-b-15 animate__animated animate__tada animate__repeat-2 animate__delay-3s" v-if="!data.segments.some(item => item.id === 13 || item.id === 16)">
+                <div class="col bg-white padding-15">
+                    <!-- <div class="row">
+                        <div class="col-4">
+                            <img class="m-b-10 w-100" src="/images/1688_approved.png" />
+                        </div>
+                        <div class="col"></div>
+                        <div class="col-4">
+                            <img class="m-b-10 w-100" src="/images/best-rate-300x127.png" />
+                        </div>
+                    </div> -->
+                    <div class="row">
+                        <div class="col">
+                            <div class="row ">
+                                <div class="col">
+                                    <h4 class="m-t-0">Bank Transfer Security: Safeguard Your Transactions with <span class="bold">Corporate Account Payment (公对公转账)</span></h4>
+                                    <p>This payment is designed to facilitate CNY payments from <span class="bold text-primary">a corporate bank account to your suppliers' corporate bank accounts.</span></p>
+                                    <p class="m-t-15">With this method, you can:</p>
+                                    <ul>
+                                        <li>Enjoy a worry-free transaction experience</li>
+                                        <li>Obtain detailed and transparent invoices</li>
+                                    </ul>
+                                </div>
+                            </div>
+                            <div class="row">
+                                <div class="col">
+                                    <div class="row">
+                                        <div class="col">
+                                            <div class="checkbox check-primary m-t-0">
+                                                <input type="checkbox" v-model="acknowledge_c2c" id="acknowledge_c2c">
+                                                <label for="acknowledge_c2c" style="white-space: pre-wrap;">I hereby acknowledge that I have read the requirements and my 1688 account is eligible for this service.</label>
+                                            </div>
+                                        </div>
+                                    </div>
+
+                                </div>
+                            </div>
+                            <div class="row">
+                                <div class="col text-center">
+                                    <!-- <div class="btn btn-lg block btn m-b-5 no-border text-white" :class="[{'bg-primary': acknowledge_c2c}, {'bg-primary-lighter': !acknowledge_c2c}]" :style="{ cursor: acknowledge_c2c ? 'pointer' : 'no-drop' }" @click="activateServiceC2C">Activate Service</div> -->
+                                    <div class="btn btn-lg block btn m-b-5 no-border text-white requestModal" :class="[{'bg-primary': acknowledge_c2c}, {'bg-primary-lighter': !acknowledge_c2c}]" :style="{ cursor: acknowledge_c2c ? 'pointer' : 'no-drop' }" data-type="deleteMappingTransaction">Activate Service</div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <modal-component class="animate__animated animate__fast animate__fadeIn" type="deleteMappingTransaction">
+                <c2c-confirmation-form-component
+                    contentText="To activate the service, please take note of the following important details:
+                    <ol>
+                        <li class='text-left'>The minimum transfer amount for each transaction is <strong>CNY 10,000</strong>.</li>
+                        <li class='text-left'>The purchase order must be filled in before making payments.</li>
+                        <li class='text-left'>The processing time for each transaction is <strong>3-7 working days</strong>.</li>
+                    </ol>"
+                    modalType="confirm"
+                    class="text-center"
+                    apiMethod="post"
+                    :section="section"
+                >
+                </c2c-confirmation-form-component>
+            </modal-component>
             <modal-component small type="requirements">
                 <div class="row" v-if="!failed">
                     <div class="col text-center">
@@ -144,6 +208,7 @@
         data(){
             return {
                 acknowledge: false,
+                acknowledge_c2c: false,
                 parameters: {
                     segment_id: ''
                 },
@@ -164,6 +229,17 @@
 
                 // location.reload();
             },
+            activateServiceC2C(){
+                this.parameters = {
+                    segment_id: 13
+                };
+                this.part = 1;
+                if(this.acknowledge_c2c){
+                    this.submit(this.route('api.company.segment.assign', this.data.id), 'post', 'activateService', true, false);
+                }
+
+                // location.reload();
+            },
             ServiceWaitingList(){
                 this.acknowledge = true;
                 this.parameters = {
diff --git a/resources/assets/vue/components/general/forms/C2cConfirmationFormComponent.vue b/resources/assets/vue/components/general/forms/C2cConfirmationFormComponent.vue
new file mode 100644
index 00000000..2d093413
--- /dev/null
+++ b/resources/assets/vue/components/general/forms/C2cConfirmationFormComponent.vue
@@ -0,0 +1,56 @@
+<template>
+    <div class="row">
+        <div class="col">
+            <loading-component style="height: 300px; top: 0;" key="1" color="success" v-show="isLoading" ></loading-component>
+            <div class="row justify-content-center" v-show="!isLoading">
+                <div class="col">
+                    <div class="row m-b-20">
+                        <div class="col">
+                            <div class="fs-11" v-html="contentText"></div>
+                        </div>
+                    </div>
+                    <div class="row">
+                        <div class="col p-r-5">
+                            <div class="btn btn-sm btn-default btn-block bg-master-lighter" data-dismiss="modal">Cancel</div>
+                        </div>
+                        <div class="col p-l-5">
+                            <!-- <div class="btn btn-sm btn-block b-rad-none" :class="[{'btn-danger': modalType !== 'confirm'}, {'btn-success': modalType === 'confirm'}]" @click="submit(apiRoute, apiMethod, section, true, true)">{{ buttonText }}</div> -->
+                            <div class="btn btn-sm btn-block b-rad-none" :class="[{'btn-danger': modalType !== 'confirm'}, {'btn-success': modalType === 'confirm'}]">{{ buttonText }}</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+    import componentHandler from '../../../general/mixins/componentHandler';
+    import ModalFormHandler from '../../../general/mixins/modalFormHandler';
+    export default {
+        props: {
+            contentText: {
+                type: String,
+                required: true
+            },
+            modalType: {
+                type: String,
+                default: 'confirm'
+            },
+            buttonText: {
+                type: String,
+                default: 'Confirm'
+            },
+            apiMethod: {
+                type: String,
+                required: true
+            },
+        },
+        methods: {
+            test() {
+                console.log('sjhb');
+            },
+        },
+        mixins: [componentHandler, ModalFormHandler]
+
+    }
+</script>