cosmopet-architecture/wp-content/themes/cosmopet/templates/profile/profile.twig

<main class="wrapper">
    <div class="cabinet-card cabinet-card--green-white cabinet__subscription-mobile">
        <div class="cabinet-card__content">
            <p class="cabinet-card__title">
                {{ function('pll_e', 'Feed subscription') }}
            </p>
            <div class="cabinet-card__element">
                <p class="cabinet-card__text">{{ function('pll_e', 'Weekly food delivery for your pet') }}</p>
            </div>
            <div class="cabinet-card__element">
                <button class="button button--gradient button--high-46 form-sub__btn">
                    {{ function('pll_e', 'Get details') }}
                </button>
            </div>
        </div>
    </div>

    <div class="cabinet__control">
        <button class="cabinet-control__button active start" data-cabinet="orders">{{ function('pll_e', 'Orders') }}</button>
        <button class="cabinet-control__button" data-cabinet="profile">{{ function('pll_e', 'Profile') }}</button>
    </div>

    <div class="cabinet">
    <div class="cabinet__profile cabinet-content">
        <div class="cabinet-card cabinet-card--green">
            <div class="cabinet-card__content">
                <div class="cabinet-card__element">
                    <p class="cabinet-card__text {% if not first_name and not last_name %}cabinet-card__text--grey{% endif %}">
                        {% if first_name or last_name %}
                            {{ first_name }} {{ last_name }}
                        {% else %}
                            {{ function('pll_e', 'Name is not set') }}
                        {% endif %}
                    </p>
                </div>

                <div class="cabinet-card__element">
                    <p class="cabinet-card__label">{{ function('pll_e', 'Phone') }}:</p>
                    <p class="cabinet-card__text {% if not phone %}cabinet-card__text--grey{% endif %}">
                        {% if phone %}
                            {{ phone }}
                        {% else %}
                            {{ function('pll_e', 'Not filled') }}
                        {% endif %}
                    </p>
                </div>

                <div class="cabinet-card__element">
                    <p class="cabinet-card__label">{{ function('pll_e', 'Email') }}:</p>
                    {% if email %}
                        <p class="cabinet-card__text">{{ email }}</p>
                        {% if activated %}
                            <p class="cabinet-card__status cabinet-card__status--chek">{{ function('pll_e', 'Email is verified') }}</p>
                        {% else %}
                            <p class="cabinet-card__status cabinet-card__status--cancelled">{{ function('pll_e', 'Email is not verified') }}</p>
                            <form class="email_approve_form">
                                <input type="hidden" name="action" value="email_activate">
                                <button type="submit" class="cabinet-card__confirm">{{ function('pll_e', 'Verify') }}</button>
                            </form>
                            {% if uuid %}
                                <p class="cabinet-card__status">{{ function('pll_e', 'Email with verification link is sent to your email.') }}</p>
                            {% endif %}
                        {% endif %}
                    {% else %}
                        <div class="cabinet-card__label">
                            <form class="email_link_form">
                                <input type="hidden" name="action" value="email_link">
                                <div class="cabinet-card_linked-email">
                                    <input class="form__input" type="text" name="email" placeholder="example@example.com" required>
                                </div>
                                <button class="cabinet-card__confirm" type="submit">{{ function('pll_e', 'Link email') }}</button>
                            </form>
                        </div>
                    {% endif %}
                </div>

                <div class="cabinet-card__element">
                    <p class="cabinet-card__label">{{ function('pll_e', 'Linked accounts') }}:</p>
                    <p class="cabinet-card__text cabinet-accounts">
                        {% if tg_account %}
                            <svg width="40px" height="40px" viewBox="0 0 256 256" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid">
                                <g>
                                    <path d="M128,0 C57.307,0 0,57.307 0,128 L0,128 C0,198.693 57.307,256 128,256 L128,256 C198.693,256 256,198.693 256,128 L256,128 C256,57.307 198.693,0 128,0 L128,0 Z" fill="#40B3E0"></path>
                                    <path d="M190.2826,73.6308 L167.4206,188.8978 C167.4206,188.8978 164.2236,196.8918 155.4306,193.0548 L102.6726,152.6068 L83.4886,143.3348 L51.1946,132.4628 C51.1946,132.4628 46.2386,130.7048 45.7586,126.8678 C45.2796,123.0308 51.3546,120.9528 51.3546,120.9528 L179.7306,70.5928 C179.7306,70.5928 190.2826,65.9568 190.2826,73.6308" fill="#FFFFFF"></path>
                                    <path d="M98.6178,187.6035 C98.6178,187.6035 97.0778,187.4595 95.1588,181.3835 C93.2408,175.3085 83.4888,143.3345 83.4888,143.3345 L161.0258,94.0945 C161.0258,94.0945 165.5028,91.3765 165.3428,94.0945 C165.3428,94.0945 166.1418,94.5735 163.7438,96.8115 C161.3458,99.0505 102.8328,151.6475 102.8328,151.6475" fill="#D2E5F1"></path>
                                    <path d="M122.9015,168.1154 L102.0335,187.1414 C102.0335,187.1414 100.4025,188.3794 98.6175,187.6034 L102.6135,152.2624" fill="#B5CFE4"></path>
                                </g>
                            </svg>
                        {% else %}
                            <script async src="https://telegram.org/js/telegram-widget.js?2" data-telegram-login="{{ bot_username }}" data-size="large" data-onauth="linkTelegram(user)"></script>
                        {% endif %}
                    </p>
                </div>

                <div class="cabinet-card__element">
                    <div class="cabinet-card__block-buttons">
                        <button class="cabinet-card__button user-edit-open">{{ function('pll_e', 'Edit') }}</button>
                        <a href="{{ fn('wp_logout_url', fn('home_url')) }}" class="cabinet-card__button">{{ function('pll_e', 'Logout') }}</a>
                    </div>
                </div>
            </div>
        </div>

        {% if pets %}
            {% for pet in pets %}
                {% include 'pet-card.twig' with { 'item': pet } %}
            {% endfor %}
        {% endif %}

        <div class="cabinet-card cabinet-card--green">
            <div class="cabinet-card__content">
                <button class="cabinet-card__block-add-pets form-open" data-form="form-pet">
                    <div class="cabinet-card-add-pets__circle">
                        <img src="{{ theme.link }}/gp-include/assets/lk/img/svg/main/plus-grey.svg" alt="">
                    </div>
                    <p class="cabinet-card-add-pets__text">{{ function('pll_e', 'Add a pet') }}</p>
                </button>
            </div>
        </div>
    </div>

    <div class="cabinet__orders cabinet-content active hide">
        <div class="cabinet-card cabinet-card--green-white cabinet__subscription-pc">
            <div class="cabinet-card__content">
                <p class="cabinet-card__title">{{ function('pll_e', 'Feed subscription') }}</p>
                <div class="cabinet-card__element">
                    <p class="cabinet-card__text">{{ function('pll_e', 'Weekly food delivery for your pet') }}</p>
                </div>
                <div class="cabinet-card__element">
                    <button class="button button--gradient button--high-46 form-sub__btn">{{ function('pll_e', 'Get details') }}</button>
                </div>
            </div>
        </div>

        {% if customer_orders %}
            {% for order in customer_orders %}
                {% set meta_data = order.meta_data.order_data %}
                {% set shipping_address = order.get_address('shipping') %}
                <div class="cabinet-card cabinet-card--grey">
                    <div class="cabinet-card__content">
                        <div class="cabinet-card__order">
                            <div class="cabinet-card-order__header">
                                <div class="cabinet-card-order__main">
                                    <p class="cabinet-card-order-main__date">{{ function('pll_e', 'Order from') }} {{ order.date_created|date('Y.m.d') }}</p>
                                    <p class="cabinet-card-order-main__number">{{ order.id }}</p>
                                </div>
                                <div class="cabinet-card-order__payment">
                                    <p class="cabinet-card-order-payment__title">{{ function('pll_e', 'Summary') }}:</p>
                                    <p class="cabinet-card-order-payment__price">{{ order.get_total() }}</p>
                                </div>
                            </div>
                            <div class="cabinet-card-order__bottom">
                                <div class="cabinet-card-order__content">
                                    {% set order_track = meta_data.order_number|default('') %}
                                    <div class="cabinet-card-order__block-detail">
                                        <div class="cabinet-card-order__detail">
                                            <div class="cabinet-card-order-detail__address">
                                                <p class="cabinet-card-order-detail-address__title">{{ function('pll_e', 'Delivery address') }}</p>
                                                <p class="cabinet-card-order-detail-address__text">
                                                    {% if meta_data.office_code %}
                                                        {{ function('pll_e', 'CDEK shipping point') }}<br>
                                                        {{ office_name }}
                                                    {% else %}
                                                        {{ shipping_address.city }} {{ shipping_address.address_1 }}
                                                    {% endif %}
                                                </p>
                                            </div>
                                            <div class="cabinet-card-order-detail__main">
                                                <div class="cabinet-card-order-detail-main__products">
                                                    {% for item in order.get_items %}
                                                        {% set product = item.get_product %}
                                                       {% set thumbnail = product ? function('wp_get_attachment_image_url', product.get_image_id(), 'woocommerce_thumbnail') : function('wc_placeholder_img_src', 'woocommerce_thumbnail') %}
                                                        <div class="cabinet-card-order-detail-main__product">
                                                            <img src="{{ thumbnail }}" alt="" class="cabinet-card-order-detail-main-product__img">
                                                            <div class="cabinet-card-order-detail-main-product__content">
                                                                <div class="cabinet-card-order-detail-main-product__description">
                                                                    <p class="cabinet-card-order-detail-main-product-description__what">{{ item.name }}</p>
                                                                </div>
                                                                <p class="cabinet-card-order-detail-main-product__count">{{ item.quantity }}</p>
                                                                <p class="cabinet-card-order-detail-main-product__price">{{ item.total }}&nbsp;{{ function('get_woocommerce_currency_symbol', code) }}</p>
                                                            </div>
                                                        </div>
                                                    {% endfor %}
                                                </div>
                                                <div class="cabinet-card-order-detail-main__links">
                                                    {% if order_track %}
                                                        <a href="https://www.cdek.ru/ru/tracking/?order_id={{ order_track }}" target="_blank" class="cabinet-card__button cabinet-card-order-detail-main__link">
                                                            {{ function('pll_e', 'Track order') }}
                                                        </a>
                                                    {% endif %}
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <button class="cabinet-card-order__open-detail">{{ function('pll_e', 'Order details') }}</button>
                                </div>
                                <div class="cabinet-card-order__detail-short">
                                    {% for item in order.get_items %}
                                        {% set product = item.get_product %}
                                       {% set thumbnail = product ? function('wp_get_attachment_image_url', product.get_image_id(), 'woocommerce_thumbnail') : function('wc_placeholder_img_src', 'woocommerce_thumbnail') %}
                                        {% if thumbnail %}
                                            <a href="{{ product.permalink }}"><img src="{{ thumbnail }}" alt="" class="cabinet-card-order-detail-short__item"></a>
                                        {% endif %}
                                    {% endfor %}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            {% endfor %}
            {% else %}
                <div class="cabinet-card__no-orders">
                    <div class="cabinet-card-no-orders__element">
                        <p class="cabinet-card-no-orders__title">{{ function('pll_e', 'No orders yet') }}</p>
                    </div>
                    <div class="cabinet-card-no-orders__element">
                        <a href="/shop/" class="to-know button--100-perc to-know--background-none">
                            <p>{{ function('pll_e', 'Catalog') }}</p>
                        </a>
                    </div>
                </div>
            {% endif %}
        </div>
    </div>
</main>





<div class="modalProfile" id="pet_add_form">
    <div class="popup-wrap">
        <div class="modal-form form__full-mobile modal-form--white modal-form--height-100-phone form-pet active">
            <button class="modal-form__close"></button>
            <p class="modal-form__title">Добавить питомца</p>

            <form class="modal-form__content" id="add-pet-form" method="post" action="">
                <input type="hidden" name="nonce" value="{{ fn('wp_create_nonce', 'add_pet_nonce') }}">
                <input type="hidden" name="action" value="add_pet">
                <div class="modal-form-content__line">
                    <label for="" class="label-name">Вид животного</label>
                    <div class="form-input__tabs">
                        <label for="cat" class="form-input-tabs__button active">
                            Кошка
                            <input type="radio" value="cat" checked name="pet" id="cat" class="form-input-tabs__input">
                        </label>

                        <label for="dog" class="form-input-tabs__button">
                            Собака
                            <input type="radio" value="dog" name="pet" id="dog" class="form-input-tabs__input">
                        </label>
                    </div>
                </div>

                <div class="modal-form-content__line sterilized">
                    <label for="" class="label-name">Стерелизован</label>

                    <div class="form-input__tabs">
                        <label class="form-input-tabs__button active">
                            Да 
                            <input type="radio" value="1" checked name="sterilized" class="form-input-tabs__input">
                        </label>

                        <label class="form-input-tabs__button">
                            Нет
                            <input type="radio" value="0" name="sterilized" class="form-input-tabs__input">
                        </label>
                    </div>
                </div>

                <div class="modal-form-content__line">
                    <div class="modal-form-content-line__element">
                        <label for="firstname" class="label-name">Имя</label>
                        <input id="firstname" class="form__input" type="text" name="name" placeholder="Имя питомца" required>
                    </div>
                </div>

                <div class="modal-form-content__line">
                    <div class="modal-form-content-line__element">
                        <label for="firstname" class="label-name">Порода</label>
                        <input id="firstname" class="form__input" type="text" name="breed" placeholder="Порода вашего питомца" required>
                    </div>
                </div>

                <div class="modal-form-content__line">
                    <label for="" class="label-name">Пол вашего питомца</label>

                    <div class="form-input__tabs">
                        <label for="boy" class="form-input-tabs__button active">
                            Мальчик
                            <input type="radio" value="male" checked name="sex" id="boy" class="form-input-tabs__input">
                        </label>

                        <label for="girl" class="form-input-tabs__button">
                            Девочка
                            <input type="radio" value="female" name="sex" id="girl" class="form-input-tabs__input">
                        </label>
                    </div>
                </div>

                <div class="modal-form-content__line modal-form-content__line--two">
                    <div class="modal-form-content-line__element">
                        <label class="label-name">Вид активности</label>
                        <div class="form-input__list">
                            <div class="form-input-list__input">Выберите из списка</div>
                            <div class="form-input-list__block-content" style="height: 0px;">
                                <div class="form-input-list__content">
                                    <label class="form-input-list__item">
                                        <p class="form-input-list-item__text">Низкая</p>
                                        <input type="radio" required name="activity" value="low" class="v-hidden">
                                        <div class="form-input-list-item__box">
                                            <div class="form-input-list-item-box__content">
                                                <img src="{{ theme.link }}/gp-include/assets/lk/img/svg/main/arrow-selected-white.svg" alt="">
                                            </div>
                                        </div>
                                    </label>
                                    <label class="form-input-list__item">
                                        <p class="form-input-list-item__text">Средняя</p>
                                        <input type="radio" required name="activity" value="moderate" class="v-hidden">
                                        <div class="form-input-list-item__box">
                                            <div class="form-input-list-item-box__content">
                                                <img src="{{ theme.link }}/gp-include/assets/lk/img/svg/main/arrow-selected-white.svg" alt="">
                                            </div>
                                        </div>
                                    </label>
                                    <label class="form-input-list__item">
                                        <p class="form-input-list-item__text">Высокая</p>
                                        <input type="radio" required name="activity" value="high" class="v-hidden">
                                        <div class="form-input-list-item__box">
                                            <div class="form-input-list-item-box__content">
                                                <img src="{{ theme.link }}/gp-include/assets/lk/img/svg/main/arrow-selected-white.svg" alt="">
                                            </div>
                                        </div>
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="modal-form-content-line__element">
                        <label for="firstname" class="label-name">Вес</label>
                        <div class="form-input__list">
                            <div class="form-input-list__input">Выберите из списка</div>
                            <div class="form-input-list__block-content" style="height: 0px;">
                                <div class="form-input-list__content">
                                    {% for weight in [
                                        {value: 'below_1_5', text: '1-1.5 кг'},
                                        {value: '1_5-3', text: '1.5-3 кг'},
                                        {value: '3-5', text: '3-5 кг'},
                                        {value: '5-8', text: '5-8 кг'},
                                        {value: '8-11', text: '8-11 кг'},
                                        {value: '11-15', text: '11-15 кг'},
                                        {value: '15-20', text: '10-20кг'},
                                        {value: '20-25', text: '20-25кг'},
                                        {value: '25-35', text: '25-35 кг'},
                                        {value: 'more_35', text: 'Более 35 кг'}
                                    ] %}
                                        <label class="form-input-list__item">
                                            <p class="form-input-list-item__text">{{ weight.text }}</p>
                                            <input type="radio" required name="weight" value="{{ weight.value }}" class="v-hidden">
                                            <div class="form-input-list-item__box">
                                                <div class="form-input-list-item-box__content">
                                                    <img src="{{ theme.link }}/gp-include/assets/lk/img/svg/main/arrow-selected-white.svg" alt="">
                                                </div>
                                            </div>
                                        </label>
                                    {% endfor %}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="rm">
                    <div class="modal-form-content__line">
                        <label class="label-name">Возраст питомца</label>
                        <div class="form-input__tabs form-input__remote-control" data-content="modal__age">
                            <label for="exemplary" class="form-input-tabs__button active" data-rm="0">
                                Примерный
                                <input type="radio" checked value="ex" name="old_type" required id="exemplary" class="form-input-tabs__input">
                            </label>

                            <label class="form-input-tabs__button" data-rm="1">
                                Точный
                                <input type="radio" value="acc" name="old_type" required id="accurate" class="form-input-tabs__input">
                            </label>
                        </div>
                    </div>

                    <div class="modal__age">
                        <div class="form-input__radio remote-control__item active" data-rmcont="0">
                            {% for age in [
                                {value: 'baby', title: 'Малыш', desc: '(от 0 до 1 года)'},
                                {value: 'normal', title: 'Взрослый', desc: '(от 1 года до 7 лет)'},
                                {value: 'old', title: 'Пожилой', desc: '(от 7 до 12 лет)'},
                                {value: 'very_old', title: 'Стареющий', desc: '(от 12 лет и старше)'}
                            ] %}
                                <label class="form-input-radio__item {{ loop.first ? 'active' }}">
                                    <input type="radio" name="old" value="{{ age.value }}" {{ loop.first ? 'checked' }} class="v-hidden">
                                    <div class="form-input-radio__circle">
                                        <div class="form-input-radio-circle__content"></div>
                                    </div>
                                    <p class="form-input-radio__title">{{ age.title }} <span>{{ age.desc }}</span></p>
                                </label>
                            {% endfor %}
                        </div>

                        <div data-rmcont="1" class="modal-form-content__line remote-control__item modal-form-content__line--three modal-form-content__line--margin-top-16">
                            <div class="modal-form-content-line__element">
                                <label for="firstname" class="label-name">День</label>
                                <input id="firstname" class="form__input form__input--center" maxlength="2" type="text" name="day" placeholder="ДД">
                            </div>

                            <div class="modal-form-content-line__element">
                                <label for="firstname" class="label-name">Месяц</label>
                                <div class="form-input__list">
                                    <div class="form-input-list__input">Месяц</div>
                                    <div class="form-input-list__block-content">
                                        <div class="form-input-list__content">
                                            {% for month in [
                                                {value: 1, text: 'Январь'},
                                                {value: 2, text: 'Февраль'},
                                                {value: 3, text: 'Март'},
                                                {value: 4, text: 'Апрель'},
                                                {value: 5, text: 'Май'},
                                                {value: 6, text: 'Июнь'},
                                                {value: 7, text: 'Июль'},
                                                {value: 8, text: 'Август'},
                                                {value: 9, text: 'Сентябрь'},
                                                {value: 10, text: 'Октябрь'},
                                                {value: 11, text: 'Ноябрь'},
                                                {value: 12, text: 'Декабрь'}
                                            ] %}
                                                <label class="form-input-list__item">
                                                    <p class="form-input-list-item__text">{{ month.text }}</p>
                                                    <input type="radio" name="month" value="{{ month.value }}" class="v-hidden">
                                                    <div class="form-input-list-item__box">
                                                        <div class="form-input-list-item-box__content">
                                                            <img src="{{ theme.link }}/gp-include/assets/lk/img/svg/main/arrow-selected-white.svg" alt="">
                                                        </div>
                                                    </div>
                                                </label>
                                            {% endfor %}
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="modal-form-content-line__element">
                                <label for="firstname" class="label-name">Год</label>
                                <input id="firstname" class="form__input form__input--center" maxlength="4" type="text" name="year" placeholder="ГГГГ">
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="modal-form__buttons">
                    <button class="button button--gradient button--high button--100-perc" type="submit">Добавить</button>
                </div>
            </form>
        </div>
    </div>
</div>

<div class="modalProfile" id="subForm">
    <div class="popup-wrap">
        <div class="modal-form modal__notification modal-form--green-gradient modal-form--width-584 form-sub active">
            <button class="modal-form__close modal-form__close--white"></button>
            <p class="modal-form__title modal-form__title--white">Подписка на корм</p>

            <div class="modal-form__element modal-form__element--top-40">
                <p class="modal-form__text modal-form__text--white">
                    Спасибо за интерес к нашему новому виду услуг, данная функция находится в разработке, если вы хотите узнать первыми о запуске подпишитесь на рассылку. 
                </p>
            </div>

            <form class="modal-form__element modal-form__element--top-40 foodSub">
                <input type="hidden" name="email" value="{{ user.user_email }}">
                <input type="hidden" name="action" value="subscription_sub__profile">
                <button class="button form__button-pc button--white button--100-perc open-overlay button--high">
                    Хочу попробовать первым!
                </button>
                <button class="button form__button-mobile button--white button--100-perc open-overlay button--high">
                    Хочу быть первым!
                </button>
            </form>
        </div>
    </div>
</div>

<div class="modalProfile" id="user_edit">
    <div class="popup-wrap">
        <div class="modal-form form__full-mobile modal-form--white modal-form--height-100-phone form-data active">
            <button class="modal-form__close"></button>
            <p class="modal-form__title">Изменить мои данные</p>

            <form class="modal-form__content user-edit-form" method="post">
                <input type="hidden" name="action" value="edit_user">
                <div class="modal-form-content__line modal-form-content__line--two">
                    <div class="modal-form-content-line__element">
                        <label for="firstname" class="label-name">Имя</label>
                        <input id="firstname" class="form__input" type="text" value="{{ user.user_firstname }}" name="name" placeholder="Ваше имя" required>
                        <span class="form-input__error form-input__error--absolute">Имя введено неверно</span>
                    </div>

                    <div class="modal-form-content-line__element">
                        <label for="lastname" class="label-name">Фамилия</label>
                        <input id="lastname" class="form__input" type="text" value="{{ user.user_lastname }}" name="l_name" placeholder="Ваша фамилия" required>
                        <span class="form-input__error form-input__error--absolute">Фамилия введена неверно</span>
                    </div>                        
                </div>

                <div class="modal-form-content__line">
                    <label class="label-name">Телефон</label>
                    <div class="form-input__phone">
                        <input type="text" placeholder="___ ___ ____" id="tel-phone" value="{{ fn('get_user_meta', user.ID, 'billing_phone', true) }}" name="phone" class="form-input-phone__input" required>
                        <div class="form-input__error form-input__error--absolute">Номер введён неверно</div>
                    </div>
                </div>

                <div class="modal-form__buttons modal-form__buttons--two">
                    <button class="button button--gradient button--high" type="submit">Сохранить</button>
                    <input type="reset" class="button button--white open-overlay button--high modal-form__button-close" value="Отмена">
                </div>
            </form>
        </div>
    </div>
</div>